math-pixel
398 lines
12 KiB
TypeScript
398 lines
12 KiB
TypeScript
import React, { useRef, useEffect, useState, useMemo } from 'react';
|
|
import * as THREE from 'three';
|
|
import { findClosestWaypoint, findWaypointPath } from '@/pathfinding/WaypointAStar';
|
|
import type { Waypoint } from '@/pathfinding/types';
|
|
|
|
export interface EbikeGPSMapProps {
|
|
/**
|
|
* 3D world position of the player/bike (GPS start point)
|
|
* If omitted, snaps to [0,0,0]
|
|
*/
|
|
startPos?: { x: number; y: number; z: number } | undefined;
|
|
destPos?: { x: number; y: number; z: number } | undefined;
|
|
|
|
/**
|
|
* Optional custom URL to the map background texture.
|
|
* If not provided, renders a high-tech minimalist neon blueprint map dynamically.
|
|
*/
|
|
mapImageUrl?: string;
|
|
|
|
/**
|
|
* Optional explicit bounds for mapping coordinates.
|
|
* If omitted, bounds are calculated automatically to perfectly fit the road network!
|
|
*/
|
|
worldBounds?: {
|
|
minX: number;
|
|
maxX: number;
|
|
minZ: number;
|
|
maxZ: number;
|
|
};
|
|
|
|
/**
|
|
* Width of the 3D plane mesh (default: 1)
|
|
*/
|
|
width?: number;
|
|
|
|
/**
|
|
* Height of the 3D plane mesh (default: 1)
|
|
*/
|
|
height?: number;
|
|
|
|
/**
|
|
* Optional world position for the GPS screen (defaults to origin)
|
|
*/
|
|
position?: [number, number, number];
|
|
}
|
|
|
|
/**
|
|
* EbikeGPSMap
|
|
* A premium, state-of-the-art 3D GPS navigation screen for the Ebike.
|
|
* Loads the road network, runs A* pathfinding, and renders a glowing, animated
|
|
* orange path over a sleek high-tech map background.
|
|
*/
|
|
export const EbikeGPSMap: React.FC<EbikeGPSMapProps> = ({
|
|
startPos = { x: 0, y: 0, z: 0 },
|
|
destPos,
|
|
mapImageUrl,
|
|
worldBounds,
|
|
width = 1,
|
|
height = 1,
|
|
position = [0, 0, 0],
|
|
}) => {
|
|
const [waypoints, setWaypoints] = useState<Waypoint[]>([]);
|
|
const [mapImage, setMapImage] = useState<HTMLImageElement | HTMLCanvasElement | null>(null);
|
|
|
|
// Offscreen high-res canvas for crystal clear rendering
|
|
const [offscreenCanvas] = useState(() => {
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 1024;
|
|
canvas.height = 1024;
|
|
return canvas;
|
|
});
|
|
|
|
const textureRef = useRef<THREE.CanvasTexture | null>(null);
|
|
const animTimeRef = useRef<number>(0);
|
|
|
|
// Load waypoints (localStorage with /roadNetwork.json fallback)
|
|
useEffect(() => {
|
|
const saved = localStorage.getItem('la-fabrik-waypoints');
|
|
if (saved) {
|
|
try {
|
|
const parsed = JSON.parse(saved);
|
|
if (Array.isArray(parsed) && parsed.length > 0) {
|
|
setWaypoints(parsed);
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
console.error('[GPS Component] Error loading local storage waypoints', e);
|
|
}
|
|
}
|
|
|
|
// Fallback to static roadNetwork.json
|
|
fetch('/roadNetwork.json')
|
|
.then((res) => {
|
|
if (res.ok) return res.json();
|
|
throw new Error('Not found');
|
|
})
|
|
.then((data) => {
|
|
if (Array.isArray(data)) {
|
|
setWaypoints(data);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
console.log('[GPS Component] No default road network found.', err);
|
|
});
|
|
}, []);
|
|
|
|
// Pre-load background map image (standard HTML5 Image loader)
|
|
// Since the user's PNG is already transparent, we don't need fetch or pixel manipulation!
|
|
useEffect(() => {
|
|
if (!mapImageUrl) {
|
|
setMapImage(null);
|
|
return;
|
|
}
|
|
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
setMapImage(img);
|
|
};
|
|
img.onerror = () => {
|
|
console.warn(`[GPS Component] Failed to load map background image from ${mapImageUrl}. Falling back to dynamic vector map.`);
|
|
setMapImage(null);
|
|
};
|
|
img.src = mapImageUrl;
|
|
}, [mapImageUrl]);
|
|
|
|
// Determine grid boundaries
|
|
const bounds = useMemo(() => {
|
|
if (worldBounds) return worldBounds;
|
|
|
|
if (waypoints.length === 0) {
|
|
return { minX: -200, maxX: 200, minZ: -200, maxZ: 200 };
|
|
}
|
|
|
|
const xs = waypoints.map((w) => w.x);
|
|
const zs = waypoints.map((w) => w.z);
|
|
const minX = Math.min(...xs);
|
|
const maxX = Math.max(...xs);
|
|
const minZ = Math.min(...zs);
|
|
const maxZ = Math.max(...zs);
|
|
|
|
// Padding (15% to ensure full view breathing room)
|
|
const padX = (maxX - minX) * 0.15 || 40;
|
|
const padZ = (maxZ - minZ) * 0.15 || 40;
|
|
|
|
return {
|
|
minX: minX - padX,
|
|
maxX: maxX + padX,
|
|
minZ: minZ - padZ,
|
|
maxZ: maxZ + padZ,
|
|
};
|
|
}, [waypoints, worldBounds]);
|
|
|
|
// Snapped positions
|
|
const startPosSnapped = useMemo(() => {
|
|
if (waypoints.length === 0) return null;
|
|
return findClosestWaypoint(waypoints, startPos);
|
|
}, [waypoints, startPos]);
|
|
|
|
const destPosSnapped = useMemo(() => {
|
|
if (!destPos || waypoints.length === 0) return null;
|
|
return findClosestWaypoint(waypoints, destPos);
|
|
}, [waypoints, destPos]);
|
|
|
|
// Calculated active A* route
|
|
const activePath = useMemo(() => {
|
|
if (!startPosSnapped || !destPosSnapped || waypoints.length === 0) return [];
|
|
return findWaypointPath(waypoints, startPosSnapped, destPosSnapped);
|
|
}, [waypoints, startPosSnapped, destPosSnapped]);
|
|
|
|
// Translation helper: 3D world to Canvas pixels
|
|
const worldToCanvas = (wx: number, wz: number, canvasSize: number) => {
|
|
const { minX, maxX, minZ, maxZ } = bounds;
|
|
const px = ((wx - minX) / (maxX - minX)) * canvasSize;
|
|
const py = ((wz - minZ) / (maxZ - minZ)) * canvasSize;
|
|
return { x: px, y: py };
|
|
};
|
|
|
|
|
|
|
|
// Draw loop
|
|
const draw = () => {
|
|
const canvas = offscreenCanvas;
|
|
const ctx = canvas.getContext('2d', { willReadFrequently: true, alpha: true });
|
|
if (!ctx) return;
|
|
|
|
const size = canvas.width;
|
|
|
|
ctx.clearRect(0, 0, size, size);
|
|
|
|
// 1. Draw Map Background (Image or premium blueprint vectors)
|
|
if (mapImage) {
|
|
ctx.drawImage(mapImage, 0, 0, size, size);
|
|
ctx.globalAlpha = 1.0;
|
|
} else {
|
|
// Dynamic Sci-fi background grid (Background is transparent!)
|
|
|
|
// Sci-fi subgrid
|
|
ctx.strokeStyle = 'rgba(30, 41, 59, 0.4)';
|
|
ctx.lineWidth = 1;
|
|
const step = size / 32;
|
|
for (let x = 0; x < size; x += step) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
ctx.lineTo(x, size);
|
|
ctx.stroke();
|
|
}
|
|
for (let y = 0; y < size; y += step) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, y);
|
|
ctx.lineTo(size, y);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Aesthetic concentric radar topo-rings
|
|
ctx.strokeStyle = 'rgba(71, 85, 105, 0.06)';
|
|
ctx.lineWidth = 2;
|
|
for (let r = size / 6; r < size; r += size / 6) {
|
|
ctx.beginPath();
|
|
ctx.arc(size / 2, size / 2, r, 0, 2 * Math.PI);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Faint diagonal technical accents
|
|
ctx.strokeStyle = 'rgba(56, 189, 248, 0.03)';
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, 0);
|
|
ctx.lineTo(size, size);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(size, 0);
|
|
ctx.lineTo(0, size);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// 2. Draw Active Orange Glowing Path (Neon Highway effect)
|
|
if (activePath.length > 1) {
|
|
// Pass 1: Wide transparent orange bloom
|
|
ctx.beginPath();
|
|
let pt = worldToCanvas(activePath[0]!.x, activePath[0]!.z, size);
|
|
ctx.moveTo(pt.x, pt.y);
|
|
for (let i = 1; i < activePath.length; i++) {
|
|
pt = worldToCanvas(activePath[i]!.x, activePath[i]!.z, size);
|
|
ctx.lineTo(pt.x, pt.y);
|
|
}
|
|
ctx.strokeStyle = 'rgba(249, 115, 22, 0.2)'; // Faint bright orange
|
|
ctx.lineWidth = 20;
|
|
ctx.lineCap = 'round';
|
|
ctx.lineJoin = 'round';
|
|
ctx.shadowBlur = 30;
|
|
ctx.shadowColor = '#f97316'; // Neon Orange
|
|
ctx.stroke();
|
|
|
|
// Pass 2: Saturated glow core
|
|
ctx.beginPath();
|
|
pt = worldToCanvas(activePath[0]!.x, activePath[0]!.z, size);
|
|
ctx.moveTo(pt.x, pt.y);
|
|
for (let i = 1; i < activePath.length; i++) {
|
|
pt = worldToCanvas(activePath[i]!.x, activePath[i]!.z, size);
|
|
ctx.lineTo(pt.x, pt.y);
|
|
}
|
|
ctx.strokeStyle = '#f97316'; // Vibrant orange
|
|
ctx.lineWidth = 8;
|
|
ctx.shadowBlur = 12;
|
|
ctx.shadowColor = '#ea580c';
|
|
ctx.stroke();
|
|
|
|
// Pass 3: High-intensity white core
|
|
ctx.beginPath();
|
|
pt = worldToCanvas(activePath[0]!.x, activePath[0]!.z, size);
|
|
ctx.moveTo(pt.x, pt.y);
|
|
for (let i = 1; i < activePath.length; i++) {
|
|
pt = worldToCanvas(activePath[i]!.x, activePath[i]!.z, size);
|
|
ctx.lineTo(pt.x, pt.y);
|
|
}
|
|
ctx.strokeStyle = '#fff7ed'; // Cream white
|
|
ctx.lineWidth = 3;
|
|
ctx.shadowBlur = 0; // Turn off shadows for the core
|
|
ctx.stroke();
|
|
|
|
// 3. Energy Particle Pulse animation tracing the road
|
|
const segments: { start: { x: number; y: number }; end: { x: number; y: number }; len: number }[] = [];
|
|
let totalLen = 0;
|
|
for (let i = 0; i < activePath.length - 1; i++) {
|
|
const p1 = worldToCanvas(activePath[i]!.x, activePath[i]!.z, size);
|
|
const p2 = worldToCanvas(activePath[i + 1]!.x, activePath[i + 1]!.z, size);
|
|
const len = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
|
|
segments.push({ start: p1, end: p2, len });
|
|
totalLen += len;
|
|
}
|
|
|
|
if (totalLen > 0) {
|
|
const targetLen = totalLen * animTimeRef.current;
|
|
let currentLen = 0;
|
|
let dotPt = segments[0]!.start;
|
|
|
|
for (const seg of segments) {
|
|
if (currentLen + seg.len >= targetLen) {
|
|
const ratio = (targetLen - currentLen) / seg.len;
|
|
dotPt = {
|
|
x: seg.start.x + (seg.end.x - seg.start.x) * ratio,
|
|
y: seg.start.y + (seg.end.y - seg.start.y) * ratio,
|
|
};
|
|
break;
|
|
}
|
|
currentLen += seg.len;
|
|
}
|
|
|
|
// Draw multiple glowing pulses along the path
|
|
ctx.beginPath();
|
|
ctx.arc(dotPt.x, dotPt.y, 8, 0, 2 * Math.PI);
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.shadowBlur = 15;
|
|
ctx.shadowColor = '#f97316';
|
|
ctx.fill();
|
|
ctx.shadowBlur = 0;
|
|
}
|
|
}
|
|
|
|
// 4. Draw Snap Markers (Start and End)
|
|
if (destPosSnapped) {
|
|
const pt = worldToCanvas(destPosSnapped.x, destPosSnapped.z, size);
|
|
const pulseSize = 12 + Math.sin(Date.now() * 0.007) * 4;
|
|
|
|
// Pulse ring
|
|
ctx.beginPath();
|
|
ctx.arc(pt.x, pt.y, pulseSize, 0, 2 * Math.PI);
|
|
ctx.strokeStyle = 'rgba(249, 115, 22, 0.4)';
|
|
ctx.lineWidth = 3;
|
|
ctx.stroke();
|
|
|
|
// Solid target core
|
|
ctx.beginPath();
|
|
ctx.arc(pt.x, pt.y, 6, 0, 2 * Math.PI);
|
|
ctx.fillStyle = '#ea580c'; // Deep target orange
|
|
ctx.strokeStyle = '#ffffff';
|
|
ctx.lineWidth = 2;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
}
|
|
|
|
if (startPosSnapped) {
|
|
const pt = worldToCanvas(startPosSnapped.x, startPosSnapped.z, size);
|
|
|
|
// Start Marker (Player Arrow/Dot)
|
|
ctx.beginPath();
|
|
ctx.arc(pt.x, pt.y, 8, 0, 2 * Math.PI);
|
|
ctx.fillStyle = '#0ea5e9'; // Cool cyberpunk sky blue
|
|
ctx.strokeStyle = '#ffffff';
|
|
ctx.lineWidth = 2.5;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
// Tech details
|
|
ctx.beginPath();
|
|
ctx.arc(pt.x, pt.y, 3, 0, 2 * Math.PI);
|
|
ctx.fillStyle = '#ffffff';
|
|
ctx.fill();
|
|
}
|
|
|
|
// 5. Update WebGL Texture
|
|
if (textureRef.current) {
|
|
textureRef.current.needsUpdate = true;
|
|
}
|
|
};
|
|
|
|
// 60 FPS animation ticker
|
|
useEffect(() => {
|
|
let animId: number;
|
|
const tick = () => {
|
|
animTimeRef.current += 0.004; // Slow, premium sweep speed
|
|
if (animTimeRef.current > 1) animTimeRef.current = 0;
|
|
|
|
draw();
|
|
|
|
animId = requestAnimationFrame(tick);
|
|
};
|
|
animId = requestAnimationFrame(tick);
|
|
return () => cancelAnimationFrame(animId);
|
|
}, [waypoints, startPos, destPos, bounds, mapImage]);
|
|
|
|
return (
|
|
<mesh castShadow receiveShadow position={position as any}>
|
|
<planeGeometry args={[width, height]} />
|
|
<meshBasicMaterial toneMapped={false} transparent={true} opacity={1} depthWrite={false} side={THREE.DoubleSide}>
|
|
<canvasTexture
|
|
ref={textureRef}
|
|
attach="map"
|
|
image={offscreenCanvas}
|
|
format={THREE.RGBAFormat}
|
|
minFilter={THREE.LinearFilter}
|
|
magFilter={THREE.LinearFilter}
|
|
/>
|
|
</meshBasicMaterial>
|
|
</mesh>
|
|
);
|
|
};
|