solanapolis 1.0.0

package/src/components/InstancedResidentCars.tsx

@@ -0,0 +1,357 @@
+"use client";
+
+import { useRef, useEffect, useMemo, useCallback } from "react";
+import { useFrame, ThreeEvent } from "@react-three/fiber";
+import * as THREE from "three";
+import { PlacedWallet } from "@/types/wallet";
+import {
+  getBuildingDimensions,
+  getInstanceSeed,
+  getWalletWorldPosition,
+} from "@/lib/building-math";
+import { generatePathFromBuilding, CarPath } from "@/lib/car-paths";
+import { MAX_CARS } from "@/lib/city-slots";
+import { WindowHoverInfo } from "./WindowTooltip";
+
+interface InstancedResidentCarsProps {
+  wallets: PlacedWallet[];
+  timeRef: React.MutableRefObject<number>;
+  onHoverCar?: (info: WindowHoverInfo | null) => void;
+  onClickCar?: (wallet: PlacedWallet, position: [number, number, number]) => void;
+  positionsRef?: React.MutableRefObject<Array<{ x: number; y: number; z: number }>>;
+}
+
+/** Per-resident car runtime state */
+interface ResidentCar {
+  wallet: PlacedWallet;
+  path: CarPath;
+  pathIdx: number;       // current segment index
+  segmentT: number;      // progress along current segment [0,1]
+  speed: number;         // world units per second
+  x: number;
+  z: number;
+  heading: number;
+  color: THREE.Color;
+}
+
+const _dummy = new THREE.Object3D();
+
+// Car body dimensions (slightly smaller than swap cars to visually distinguish)
+const CAR_W = 1.0;
+const CAR_H = 0.45;
+const CAR_L = 1.9;
+const CABIN_H = 0.35;
+const WHEEL_R = 0.15;
+const WHEEL_W = 0.08;
+
+// Warm resident-car color palette
+const RESIDENT_COLORS = [
+  "#3b82f6", "#8b5cf6", "#06b6d4", "#10b981", "#f59e0b",
+  "#ef4444", "#ec4899", "#6366f1", "#14b8a6", "#f97316",
+  "#84cc16", "#a855f7", "#0ea5e9", "#e11d48", "#d946ef",
+  "#22c55e", "#f43f5e", "#7c3aed", "#0891b2", "#ca8a04",
+];
+
+function getCarColor(seed: number): THREE.Color {
+  const idx = Math.floor(seed * RESIDENT_COLORS.length) % RESIDENT_COLORS.length;
+  return new THREE.Color(RESIDENT_COLORS[idx]);
+}
+
+export default function InstancedResidentCars({
+  wallets,
+  timeRef,
+  onHoverCar,
+  onClickCar,
+  positionsRef,
+}: InstancedResidentCarsProps) {
+  const count = Math.min(wallets.length, MAX_CARS);
+  const bodyRef = useRef<THREE.InstancedMesh>(null);
+  const cabinRef = useRef<THREE.InstancedMesh>(null);
+  const wheelRef = useRef<THREE.InstancedMesh>(null);
+  const markerRef = useRef<THREE.InstancedMesh>(null);
+  const hoveredIdx = useRef<number | null>(null);
+  const elapsedRef = useRef(0);
+
+  // Initialize resident car states
+  const carsRef = useRef<ResidentCar[]>([]);
+
+  useEffect(() => {
+    const cars: ResidentCar[] = [];
+    for (let i = 0; i < count; i++) {
+      const w = wallets[i];
+      const seed = getInstanceSeed(w.address);
+      const path = generatePathFromBuilding(w.blockRow, w.blockCol);
+
+      const wps = path.waypoints;
+
+      cars.push({
+        wallet: w,
+        path,
+        pathIdx: 0,
+        segmentT: 0,
+        speed: 3 + seed * 5,  // 3–8 units/sec
+        x: wps[0].x,
+        z: wps[0].z,
+        heading: 0,
+        color: getCarColor(seed),
+      });
+    }
+    carsRef.current = cars;
+  }, [wallets, count]);
+
+  // Materials
+  const bodyMat = useMemo(() => new THREE.MeshStandardMaterial({
+    metalness: 0.5,
+    roughness: 0.4,
+  }), []);
+
+  const cabinMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#aaddff",
+    metalness: 0.8,
+    roughness: 0.1,
+    transparent: true,
+    opacity: 0.5,
+  }), []);
+
+  const wheelMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#222",
+    metalness: 0.3,
+    roughness: 0.8,
+  }), []);
+
+  const markerMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#6366f1",
+    emissive: "#6366f1",
+    emissiveIntensity: 0.5,
+    transparent: true,
+    opacity: 0.6,
+  }), []);
+
+  // Animate cars
+  useFrame((_, delta) => {
+    const cars = carsRef.current;
+    if (cars.length === 0) return;
+    const body = bodyRef.current;
+    const cabin = cabinRef.current;
+    const wheel = wheelRef.current;
+    const marker = markerRef.current;
+    if (!body || !cabin || !wheel || !marker) return;
+
+    const dt = Math.min(delta, 0.05);
+    elapsedRef.current += dt;
+    const dayScale = 0.95 + 0.05 * Math.sin(timeRef.current * Math.PI * 2);
+
+    for (let i = 0; i < cars.length; i++) {
+      const car = cars[i];
+      const wps = car.path.waypoints;
+      const numPts = wps.length;
+
+      // Advance along path
+      const segLen = segmentLengthWp(wps, car.pathIdx);
+      const segSpeed = segLen > 0 ? (car.speed * dayScale) / segLen : 1;
+      car.segmentT += segSpeed * dt;
+
+      while (car.segmentT >= 1 && car.pathIdx < numPts - 2) {
+        car.segmentT -= 1;
+        car.pathIdx++;
+      }
+
+      // Loop back to start
+      if (car.pathIdx >= numPts - 2 && car.segmentT >= 1) {
+        // Generate a new path from same building
+        const newPath = generatePathFromBuilding(car.wallet.blockRow, car.wallet.blockCol);
+        car.path = newPath;
+        car.pathIdx = 0;
+        car.segmentT = 0;
+      }
+
+      // Interpolate position
+      const pIdx = Math.min(car.pathIdx, numPts - 2);
+      const a = wps[pIdx];
+      const b = wps[pIdx + 1];
+      const t = Math.min(car.segmentT, 1);
+      car.x = a.x + (b.x - a.x) * t;
+      car.z = a.z + (b.z - a.z) * t;
+
+      // Heading
+      const dx = b.x - a.x;
+      const dz = b.z - a.z;
+      if (Math.abs(dx) > 0.001 || Math.abs(dz) > 0.001) {
+        car.heading = Math.atan2(dx, dz);
+      }
+
+      const y = 0.25; // ground level
+
+      // Body
+      _dummy.position.set(car.x, y, car.z);
+      _dummy.rotation.set(0, car.heading, 0);
+      _dummy.scale.set(CAR_W, CAR_H, CAR_L);
+      _dummy.updateMatrix();
+      body.setMatrixAt(i, _dummy.matrix);
+
+      // Cabin
+      _dummy.position.set(car.x, y + CAR_H * 0.5 + CABIN_H * 0.5, car.z);
+      _dummy.scale.set(CAR_W * 0.75, CABIN_H, CAR_L * 0.5);
+      _dummy.updateMatrix();
+      cabin.setMatrixAt(i, _dummy.matrix);
+
+      // Marker (floating diamond above car)
+      const bobY = 2.0 + Math.sin(elapsedRef.current * 2 + i * 1.3) * 0.3;
+      _dummy.position.set(car.x, y + bobY, car.z);
+      _dummy.rotation.set(0, elapsedRef.current * 1.5, Math.PI / 4);
+      _dummy.scale.set(0.2, 0.2, 0.2);
+      _dummy.updateMatrix();
+      marker.setMatrixAt(i, _dummy.matrix);
+
+      // Color
+      body.setColorAt(i, car.color);
+    }
+
+    body.instanceMatrix.needsUpdate = true;
+    cabin.instanceMatrix.needsUpdate = true;
+    marker.instanceMatrix.needsUpdate = true;
+    if (body.instanceColor) body.instanceColor.needsUpdate = true;
+
+    // Write positions for HUD/projectiles
+    if (positionsRef) {
+      const posOut: Array<{ x: number; y: number; z: number }> = [];
+      for (let i = 0; i < cars.length; i++) {
+        posOut.push({ x: cars[i].x, y: 0.25, z: cars[i].z });
+      }
+      positionsRef.current = posOut;
+    }
+
+    // Wheels (4 per car)
+    for (let i = 0; i < cars.length; i++) {
+      const car = cars[i];
+      const cos = Math.cos(car.heading);
+      const sin = Math.sin(car.heading);
+      const offsets = [
+        [-CAR_W * 0.4, CAR_L * 0.3],
+        [CAR_W * 0.4, CAR_L * 0.3],
+        [-CAR_W * 0.4, -CAR_L * 0.3],
+        [CAR_W * 0.4, -CAR_L * 0.3],
+      ];
+
+      for (let w = 0; w < 4; w++) {
+        const idx = i * 4 + w;
+        if (idx >= count * 4) break;
+        const [lx, lz] = offsets[w];
+        const wx = car.x + lx * cos - lz * sin;
+        const wz = car.z + lx * sin + lz * cos;
+        _dummy.position.set(wx, WHEEL_R, wz);
+        _dummy.rotation.set(0, car.heading, Math.PI / 2);
+        _dummy.scale.set(WHEEL_R * 2, WHEEL_W, WHEEL_R * 2);
+        _dummy.updateMatrix();
+        wheel.setMatrixAt(idx, _dummy.matrix);
+      }
+    }
+    wheel.instanceMatrix.needsUpdate = true;
+  });
+
+  // Pointer handlers
+  const handlePointerMove = useCallback((e: ThreeEvent<PointerEvent>) => {
+    e.stopPropagation();
+    const id = e.instanceId;
+    if (id === undefined || id >= count) { onHoverCar?.(null); return; }
+
+    if (hoveredIdx.current !== id) {
+      hoveredIdx.current = id;
+      document.body.style.cursor = "pointer";
+    }
+
+    const car = carsRef.current[id];
+    if (!car) return;
+    const w = car.wallet;
+    onHoverCar?.({
+      address: w.address,
+      tokenIndex: 0,
+      screenX: e.nativeEvent.clientX,
+      screenY: e.nativeEvent.clientY,
+      mode: "building",
+      identityName: w.identityName,
+      identityType: w.identityType,
+      identityCategory: w.identityCategory,
+    });
+  }, [count, onHoverCar]);
+
+  const handlePointerOut = useCallback(() => {
+    hoveredIdx.current = null;
+    document.body.style.cursor = "default";
+    onHoverCar?.(null);
+  }, [onHoverCar]);
+
+  const handleClick = useCallback((e: ThreeEvent<MouseEvent>) => {
+    e.stopPropagation();
+    const id = e.instanceId;
+    if (id === undefined || id >= count) return;
+    const car = carsRef.current[id];
+    if (!car) return;
+    const w = car.wallet;
+    const dims = getBuildingDimensions(w);
+    const pos = getWalletWorldPosition(w, dims);
+    onClickCar?.(w, pos);
+  }, [count, onClickCar]);
+
+  if (count === 0) return null;
+
+  return (
+    <group>
+      {/* Car bodies */}
+      <instancedMesh
+        ref={bodyRef}
+        args={[undefined!, undefined!, count]}
+        frustumCulled={false}
+        onPointerMove={handlePointerMove}
+        onPointerOut={handlePointerOut}
+        onClick={handleClick}
+      >
+        <boxGeometry args={[1, 1, 1]} />
+        <primitive object={bodyMat} attach="material" />
+      </instancedMesh>
+
+      {/* Cabins */}
+      <instancedMesh
+        ref={cabinRef}
+        args={[undefined!, undefined!, count]}
+        frustumCulled={false}
+        raycast={() => { }}
+      >
+        <boxGeometry args={[1, 1, 1]} />
+        <primitive object={cabinMat} attach="material" />
+      </instancedMesh>
+
+      {/* Wheels (4 per car) */}
+      <instancedMesh
+        ref={wheelRef}
+        args={[undefined!, undefined!, count * 4]}
+        frustumCulled={false}
+        raycast={() => { }}
+      >
+        <cylinderGeometry args={[1, 1, 1, 8]} />
+        <primitive object={wheelMat} attach="material" />
+      </instancedMesh>
+
+      {/* Floating markers above each car */}
+      <instancedMesh
+        ref={markerRef}
+        args={[undefined!, undefined!, count]}
+        frustumCulled={false}
+        raycast={() => { }}
+      >
+        <octahedronGeometry args={[1, 0]} />
+        <primitive object={markerMat} attach="material" />
+      </instancedMesh>
+    </group>
+  );
+}
+
+/** Distance between two waypoints */
+function segmentLengthWp(wps: { x: number; z: number }[], idx: number): number {
+  if (idx >= wps.length - 1) return 0;
+  const a = wps[idx];
+  const b = wps[idx + 1];
+  const dx = b.x - a.x;
+  const dz = b.z - a.z;
+  return Math.sqrt(dx * dx + dz * dz);
+}

package/src/components/InstancedRoadDashes.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useRef, useEffect, useMemo } from "react";
+import * as THREE from "three";
+
+interface DashData {
+  x: number;
+  z: number;
+  rotY: number; // 0 for vertical roads, PI/2 for horizontal
+}
+
+/**
+ * Renders all road center-line dashes as a single InstancedMesh.
+ */
+export default function InstancedRoadDashes({ dashes }: { dashes: DashData[] }) {
+  const meshRef = useRef<THREE.InstancedMesh>(null);
+  const dummy = useMemo(() => new THREE.Object3D(), []);
+
+  useEffect(() => {
+    const mesh = meshRef.current;
+    if (!mesh) return;
+
+    for (let i = 0; i < dashes.length; i++) {
+      dummy.position.set(dashes[i].x, 0.04, dashes[i].z);
+      dummy.rotation.set(-Math.PI / 2, 0, dashes[i].rotY);
+      dummy.scale.set(1, 1, 1);
+      dummy.updateMatrix();
+      mesh.setMatrixAt(i, dummy.matrix);
+    }
+
+    mesh.instanceMatrix.needsUpdate = true;
+  }, [dashes, dummy]);
+
+  if (dashes.length === 0) return null;
+
+  return (
+    <instancedMesh ref={meshRef} args={[undefined!, undefined!, dashes.length]} frustumCulled={false}>
+      <planeGeometry args={[0.15, 1.2]} />
+      <meshStandardMaterial color="#6a6a80" />
+    </instancedMesh>
+  );
+}