first implementation of pathfinding

src/pathfinding/GPSMinimap.tsx

@@ -0,0 +1,207 @@
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import * as THREE from 'three';
+import { useGPS } from './useGPS';
+import type { WorldBounds } from './useGPS';
+
+// ==========================================
+// 1. Premium 2D HUD GPS Overlay Component
+// ==========================================
+
+export interface GPSMinimapHUDProps {
+  bwMaskUrl: string;
+  colorMapUrl: string;
+  gridWidth: number;
+  gridHeight: number;
+  worldBounds: WorldBounds;
+  playerPos: { x: number; z: number };
+  destPos?: { x: number; z: number };
+  size?: number; // Size of HUD in pixels
+}
+
+/**
+ * A beautiful, glassmorphic 2D HUD overlay that renders the GPS Minimap
+ * in the corner of the screen.
+ */
+export const GPSMinimapHUD: React.FC<GPSMinimapHUDProps> = ({
+  bwMaskUrl,
+  colorMapUrl,
+  gridWidth,
+  gridHeight,
+  worldBounds,
+  playerPos,
+  destPos,
+  size = 200,
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  
+  const gpsOptions = useMemo(() => ({
+    bwMaskUrl,
+    colorMapUrl,
+    gridWidth,
+    gridHeight,
+    worldBounds,
+  }), [bwMaskUrl, colorMapUrl, gridWidth, gridHeight, worldBounds]);
+
+  const { calculateWorldPath, renderGPSToCanvas, loading, error } = useGPS(gpsOptions);
+
+  useEffect(() => {
+    if (loading || error || !canvasRef.current) return;
+
+    // Calculate A* path in world coordinates
+    const path = destPos ? calculateWorldPath(playerPos, destPos) : [];
+
+    // Render path onto HUD canvas
+    renderGPSToCanvas(canvasRef.current, path, playerPos, destPos, {
+      pathColor: '#3b82f6', // Premium vibrant blue
+      pathWidth: 5,
+      playerColor: '#ef4444', // Hot red for player
+      playerSize: 6,
+      destColor: '#10b981', // Emerald green for destination
+      destSize: 6,
+    });
+  }, [playerPos, destPos, loading, error, calculateWorldPath, renderGPSToCanvas]);
+
+  return (
+    <div style={hudStyles.container(size)}>
+      {loading && <div style={hudStyles.statusText}>Initializing GPS...</div>}
+      {error && <div style={{ ...hudStyles.statusText, color: '#ef4444' }}>GPS Error: {error}</div>}
+      
+      {!loading && !error && (
+        <canvas
+          ref={canvasRef}
+          width={size * 2} // Double size for retina/high-DPI screens
+          height={size * 2}
+          style={hudStyles.canvas(size)}
+        />
+      )}
+    </div>
+  );
+};
+
+// ==========================================
+// 2. 3D Handlebar Screen Mesh Component (R3F)
+// ==========================================
+
+export interface GPSBikeScreenProps {
+  bwMaskUrl: string;
+  colorMapUrl: string;
+  gridWidth: number;
+  gridHeight: number;
+  worldBounds: WorldBounds;
+  playerPos: { x: number; z: number };
+  destPos?: { x: number; z: number };
+  width?: number; // 3D Plane Width
+  height?: number; // 3D Plane Height
+}
+
+/**
+ * A Three.js 3D plane mesh that renders the GPS dynamically as a CanvasTexture.
+ * This can be directly attached to the bike's handlebars in your 3D world.
+ */
+export const GPSBikeScreen: React.FC<GPSBikeScreenProps> = ({
+  bwMaskUrl,
+  colorMapUrl,
+  gridWidth,
+  gridHeight,
+  worldBounds,
+  playerPos,
+  destPos,
+  width = 0.4,
+  height = 0.4,
+}) => {
+  // Offscreen canvas to render the GPS texture onto
+  const [offscreenCanvas] = useState(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 512;
+    canvas.height = 512;
+    return canvas;
+  });
+
+  const textureRef = useRef<THREE.CanvasTexture | null>(null);
+
+  const gpsOptions = useMemo(() => ({
+    bwMaskUrl,
+    colorMapUrl,
+    gridWidth,
+    gridHeight,
+    worldBounds,
+  }), [bwMaskUrl, colorMapUrl, gridWidth, gridHeight, worldBounds]);
+
+  const { calculateWorldPath, renderGPSToCanvas, loading } = useGPS(gpsOptions);
+
+  useEffect(() => {
+    if (loading) return;
+
+    // Calculate A* path
+    const path = destPos ? calculateWorldPath(playerPos, destPos) : [];
+
+    // Render path onto our offscreen canvas
+    renderGPSToCanvas(offscreenCanvas, path, playerPos, destPos, {
+      pathColor: '#60a5fa', // Bright neon blue
+      pathWidth: 8,
+      playerColor: '#ff0055', // Neon pink-red for bike
+      playerSize: 10,
+      destColor: '#00ffcc', // Vibrant cyan for target
+      destSize: 10,
+    });
+
+    // Notify Three.js that the texture needs an update
+    if (textureRef.current) {
+      textureRef.current.needsUpdate = true;
+    }
+  }, [playerPos, destPos, loading, calculateWorldPath, renderGPSToCanvas, offscreenCanvas]);
+
+  return (
+    <mesh castShadow receiveShadow>
+      <planeGeometry args={[width, height]} />
+      <meshBasicMaterial toneMapped={false}>
+        <canvasTexture
+          ref={textureRef}
+          attach="map"
+          image={offscreenCanvas}
+          minFilter={THREE.LinearFilter}
+          magFilter={THREE.LinearFilter}
+        />
+      </meshBasicMaterial>
+    </mesh>
+  );
+};
+
+// ==========================================
+// Styles for HUD (Premium Glassmorphism)
+// ==========================================
+
+const hudStyles = {
+  container: (size: number): React.CSSProperties => ({
+    position: 'absolute',
+    bottom: '24px',
+    right: '24px',
+    width: `${size}px`,
+    height: `${size}px`,
+    borderRadius: '24px',
+    overflow: 'hidden',
+    border: '1px solid rgba(255, 255, 255, 0.15)',
+    boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.37), 0 0 15px rgba(59, 130, 246, 0.2)',
+    backdropFilter: 'blur(8px)',
+    WebkitBackdropFilter: 'blur(8px)',
+    background: 'rgba(15, 23, 42, 0.6)', // Sleek dark slate
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1000,
+    pointerEvents: 'none',
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  }),
+  canvas: (size: number): React.CSSProperties => ({
+    width: `${size}px`,
+    height: `${size}px`,
+    display: 'block',
+  }),
+  statusText: {
+    color: '#94a3b8',
+    fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    fontSize: '12px',
+    fontWeight: 500,
+    letterSpacing: '0.05em',
+  } as React.CSSProperties,
+};