merge develop into feat/map-environment

src/pathfinding/useWaypointGPS.ts

@@ -0,0 +1,215 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { findWaypointPath } from "./WaypointAStar";
+import type { Waypoint } from "./types";
+import type { WorldBounds } from "./useGPS";
+
+export interface UseWaypointGPSOptions {
+  roadNetworkUrl: string; // URL/Path to roadNetwork.json
+  colorMapUrl: string; // URL/Path to color_map.png
+  worldBounds: WorldBounds;
+}
+
+export function useWaypointGPS({
+  roadNetworkUrl,
+  colorMapUrl,
+  worldBounds,
+}: UseWaypointGPSOptions) {
+  const [waypoints, setWaypoints] = useState<Waypoint[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const colorMapImgRef = useRef<HTMLImageElement | null>(null);
+
+  // Load waypoint list and background color map image
+  useEffect(() => {
+    let active = true;
+    setLoading(true);
+    setError(null);
+
+    async function initGPS() {
+      try {
+        // 1. Fetch the road network JSON
+        const response = await fetch(roadNetworkUrl);
+        if (!response.ok) {
+          throw new Error(`Failed to load road network from ${roadNetworkUrl}`);
+        }
+        const data: Waypoint[] = await response.json();
+
+        // 2. Pre-load the color map image
+        const colorMapImg = new Image();
+        colorMapImg.crossOrigin = "anonymous";
+        await new Promise((resolve, reject) => {
+          colorMapImg.onload = resolve;
+          colorMapImg.onerror = reject;
+          colorMapImg.src = colorMapUrl;
+        });
+
+        if (active) {
+          setWaypoints(data);
+          colorMapImgRef.current = colorMapImg;
+          setLoading(false);
+        }
+      } catch (err: any) {
+        if (active) {
+          setError(err.message || "Failed to initialize Waypoint GPS");
+          setLoading(false);
+        }
+      }
+    }
+
+    initGPS();
+
+    return () => {
+      active = false;
+    };
+  }, [roadNetworkUrl, colorMapUrl]);
+
+  /**
+   * Calculates the shortest path between start and end world points.
+   */
+  const calculateRoute = useCallback(
+    (
+      startWorld: { x: number; y: number; z: number },
+      endWorld: { x: number; y: number; z: number },
+    ): Waypoint[] => {
+      if (waypoints.length === 0) return [];
+      return findWaypointPath(waypoints, startWorld, endWorld);
+    },
+    [waypoints],
+  );
+
+  /**
+   * Renders the road network path, player position, and waypoint target onto a canvas.
+   */
+  const renderGPSToCanvas = useCallback(
+    (
+      canvas: HTMLCanvasElement,
+      path: Waypoint[],
+      playerWorldPos?: { x: number; y: number; z: number },
+      destWorldPos?: { x: number; y: number; z: number },
+      options: {
+        pathColor?: string;
+        pathWidth?: number;
+        playerColor?: string;
+        playerSize?: number;
+        destColor?: string;
+        destSize?: number;
+        showAllWaypoints?: boolean; // Debug mode
+      } = {},
+    ) => {
+      const ctx = canvas.getContext("2d");
+      if (!ctx || !colorMapImgRef.current) return;
+
+      const {
+        pathColor = "#10b981", // Premium emerald green
+        pathWidth = 6,
+        playerColor = "#ff0055", // Neon pink-red for bike
+        playerSize = 8,
+        destColor = "#00ffcc", // Neon cyan for target
+        destSize = 8,
+        showAllWaypoints = false,
+      } = options;
+
+      const canvasWidth = canvas.width;
+      const canvasHeight = canvas.height;
+
+      // 1. Draw color map background
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+      ctx.drawImage(colorMapImgRef.current, 0, 0, canvasWidth, canvasHeight);
+
+      // Helper: translate world coordinates (X, Z) to Canvas pixels (x, y)
+      const worldToCanvas = (wx: number, wz: number) => {
+        const { minX, maxX, minZ, maxZ } = worldBounds;
+        const px = ((wx - minX) / (maxX - minX)) * canvasWidth;
+        const py = ((wz - minZ) / (maxZ - minZ)) * canvasHeight;
+        return { x: px, y: py };
+      };
+
+      // 2. [Debug] Draw all network connections
+      if (showAllWaypoints && waypoints.length > 0) {
+        ctx.strokeStyle = "rgba(255, 255, 255, 0.15)";
+        ctx.lineWidth = 1.5;
+        const drawn = new Set<string>();
+
+        waypoints.forEach((wp) => {
+          const startPt = worldToCanvas(wp.x, wp.z);
+          wp.connections.forEach((connId) => {
+            const other = waypoints.find((w) => w.id === connId);
+            if (other) {
+              const key =
+                wp.id < other.id
+                  ? `${wp.id}-${other.id}`
+                  : `${other.id}-${wp.id}`;
+              if (!drawn.has(key)) {
+                drawn.add(key);
+                const endPt = worldToCanvas(other.x, other.z);
+                ctx.beginPath();
+                ctx.moveTo(startPt.x, startPt.y);
+                ctx.lineTo(endPt.x, endPt.y);
+                ctx.stroke();
+              }
+            }
+          });
+        });
+      }
+
+      // 3. Draw calculated A* path line
+      if (path.length > 1) {
+        ctx.beginPath();
+        const startNode = path[0]!;
+        const startPt = worldToCanvas(startNode.x, startNode.z);
+        ctx.moveTo(startPt.x, startPt.y);
+
+        for (let i = 1; i < path.length; i++) {
+          const node = path[i]!;
+          const pt = worldToCanvas(node.x, node.z);
+          ctx.lineTo(pt.x, pt.y);
+        }
+
+        ctx.strokeStyle = pathColor;
+        ctx.lineWidth = pathWidth;
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
+
+        // Add soft premium path glow
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = pathColor;
+        ctx.stroke();
+        ctx.shadowBlur = 0; // Reset
+      }
+
+      // 4. Draw Destination target
+      if (destWorldPos) {
+        const destPt = worldToCanvas(destWorldPos.x, destWorldPos.z);
+        ctx.beginPath();
+        ctx.arc(destPt.x, destPt.y, destSize, 0, 2 * Math.PI);
+        ctx.fillStyle = destColor;
+        ctx.strokeStyle = "#ffffff";
+        ctx.lineWidth = 2;
+        ctx.fill();
+        ctx.stroke();
+      }
+
+      // 5. Draw Player / Bike
+      if (playerWorldPos) {
+        const playerPt = worldToCanvas(playerWorldPos.x, playerWorldPos.z);
+        ctx.beginPath();
+        ctx.arc(playerPt.x, playerPt.y, playerSize, 0, 2 * Math.PI);
+        ctx.fillStyle = playerColor;
+        ctx.strokeStyle = "#ffffff";
+        ctx.lineWidth = 2;
+        ctx.fill();
+        ctx.stroke();
+      }
+    },
+    [worldBounds, waypoints],
+  );
+
+  return {
+    waypoints,
+    loading,
+    error,
+    calculateRoute,
+    renderGPSToCanvas,
+  };
+}