solanapolis 1.0.0

package/src/components/PlaneMode.tsx

@@ -0,0 +1,190 @@
+"use client";
+import { useRef, useEffect, useMemo, MutableRefObject } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import {
+  PlaneInput,
+  PlaneState,
+  createPlaneState,
+  updatePlane,
+  applyMouseDelta,
+} from "@/lib/plane-physics";
+
+export interface PlaneTransform {
+  x: number; y: number; z: number;
+  yaw: number; pitch: number;
+}
+
+interface PlaneModeProps {
+  active: boolean;
+  positionRef: MutableRefObject<PlaneTransform | null>;
+  playerColor?: string;
+}
+
+function PlaneMesh({ color }: { color: string }) {
+  const mat = useMemo(() => new THREE.MeshStandardMaterial({ color, metalness: 0.5, roughness: 0.4 }), [color]);
+  const darkMat = useMemo(() => new THREE.MeshStandardMaterial({ color: "#333", metalness: 0.3, roughness: 0.7 }), []);
+  const glassMat = useMemo(() => new THREE.MeshStandardMaterial({ color: "#88ccff", transparent: true, opacity: 0.6, metalness: 0.2, roughness: 0.1 }), []);
+
+  return (
+    <group>
+      {/* Fuselage */}
+      <mesh material={mat}>
+        <boxGeometry args={[0.7, 0.7, 4.5]} />
+      </mesh>
+      {/* Nose cone */}
+      <mesh position={[0, 0, 2.5]} rotation={[Math.PI / 2, 0, 0]} material={mat}>
+        <coneGeometry args={[0.35, 1.0, 8]} />
+      </mesh>
+      {/* Cockpit glass */}
+      <mesh position={[0, 0.45, 0.8]} material={glassMat}>
+        <boxGeometry args={[0.55, 0.35, 1.0]} />
+      </mesh>
+      {/* Main wings */}
+      <mesh position={[0, -0.1, 0]} material={mat}>
+        <boxGeometry args={[9, 0.15, 2.0]} />
+      </mesh>
+      {/* Wing tips */}
+      <mesh position={[4.8, -0.1, -0.1]} rotation={[0, 0.15, 0.2]} material={mat}>
+        <boxGeometry args={[0.8, 0.12, 1.0]} />
+      </mesh>
+      <mesh position={[-4.8, -0.1, -0.1]} rotation={[0, -0.15, -0.2]} material={mat}>
+        <boxGeometry args={[0.8, 0.12, 1.0]} />
+      </mesh>
+      {/* Horizontal tail */}
+      <mesh position={[0, 0, -2.1]} material={mat}>
+        <boxGeometry args={[3.5, 0.12, 0.9]} />
+      </mesh>
+      {/* Vertical tail */}
+      <mesh position={[0, 0.6, -2.0]} material={mat}>
+        <boxGeometry args={[0.12, 1.1, 0.7]} />
+      </mesh>
+      {/* Engines */}
+      <mesh position={[2.2, -0.3, 0.3]} rotation={[Math.PI / 2, 0, 0]} material={darkMat}>
+        <cylinderGeometry args={[0.22, 0.25, 1.2, 10]} />
+      </mesh>
+      <mesh position={[-2.2, -0.3, 0.3]} rotation={[Math.PI / 2, 0, 0]} material={darkMat}>
+        <cylinderGeometry args={[0.22, 0.25, 1.2, 10]} />
+      </mesh>
+    </group>
+  );
+}
+
+export default function PlaneMode({ active, positionRef, playerColor = "#E35930" }: PlaneModeProps) {
+  const { camera } = useThree();
+  const groupRef = useRef<THREE.Group>(null);
+  const inputRef = useRef<PlaneInput>({ forward: false, backward: false, left: false, right: false, up: false, down: false, boost: false });
+  const stateRef = useRef<PlaneState>(createPlaneState(0, 0));
+  const pointerLockedRef = useRef(false);
+
+  // Reset plane state when entering plane mode
+  useEffect(() => {
+    if (active) {
+      stateRef.current = createPlaneState(
+        camera.position.x,
+        camera.position.z,
+      );
+      stateRef.current.y = Math.max(camera.position.y, 50);
+    } else {
+      positionRef.current = null;
+      pointerLockedRef.current = false;
+    }
+  }, [active, camera, positionRef]);
+
+  // Pointer lock
+  useEffect(() => {
+    if (!active) return;
+
+    function onClick() {
+      if (!pointerLockedRef.current) {
+        document.body.requestPointerLock();
+      }
+    }
+    function onLockChange() {
+      pointerLockedRef.current = !!document.pointerLockElement;
+    }
+    function onMouseMove(e: MouseEvent) {
+      if (!pointerLockedRef.current) return;
+      applyMouseDelta(stateRef.current, e.movementX, e.movementY);
+    }
+
+    document.addEventListener("click", onClick);
+    document.addEventListener("pointerlockchange", onLockChange);
+    document.addEventListener("mousemove", onMouseMove);
+    return () => {
+      document.removeEventListener("click", onClick);
+      document.removeEventListener("pointerlockchange", onLockChange);
+      document.removeEventListener("mousemove", onMouseMove);
+      if (document.pointerLockElement) document.exitPointerLock();
+    };
+  }, [active]);
+
+  // Keyboard controls
+  useEffect(() => {
+    if (!active) return;
+    function handleKey(e: KeyboardEvent, down: boolean) {
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+      const input = inputRef.current;
+      switch (e.key.toLowerCase()) {
+        case "w": case "arrowup": input.forward = down; break;
+        case "s": case "arrowdown": input.backward = down; break;
+        case "a": case "arrowleft": input.left = down; break;
+        case "d": case "arrowright": input.right = down; break;
+        case "q": input.up = down; break;
+        case "e": input.down = down; break;
+        case "shift": input.boost = down; break;
+      }
+      if (e.key.startsWith("Arrow")) e.preventDefault();
+      if (e.key === " ") e.preventDefault();
+    }
+    const onDown = (e: KeyboardEvent) => handleKey(e, true);
+    const onUp = (e: KeyboardEvent) => handleKey(e, false);
+    window.addEventListener("keydown", onDown);
+    window.addEventListener("keyup", onUp);
+    return () => {
+      window.removeEventListener("keydown", onDown);
+      window.removeEventListener("keyup", onUp);
+    };
+  }, [active]);
+
+  useFrame((_, delta) => {
+    if (!active || !groupRef.current) return;
+
+    updatePlane(stateRef.current, inputRef.current, Math.min(delta, 0.1));
+    const state = stateRef.current;
+
+    // Update plane mesh
+    groupRef.current.position.set(state.x, state.y, state.z);
+    groupRef.current.rotation.set(state.pitch, state.yaw, 0, "YXZ");
+    groupRef.current.visible = true;
+
+    // Write position for multiplayer
+    positionRef.current = { x: state.x, y: state.y, z: state.z, yaw: state.yaw, pitch: state.pitch };
+
+    // Chase camera — behind and slightly above
+    const behindDist = 14;
+    const aboveOffset = 4;
+    const cosP = Math.cos(state.pitch);
+    const camX = state.x - Math.sin(state.yaw) * cosP * behindDist;
+    const camY = state.y + aboveOffset + Math.sin(state.pitch) * behindDist * 0.4;
+    const camZ = state.z - Math.cos(state.yaw) * cosP * behindDist;
+    camera.position.lerp(new THREE.Vector3(camX, camY, camZ), 0.1);
+
+    // Look ahead of plane
+    const lookX = state.x + Math.sin(state.yaw) * cosP * 8;
+    const lookY = state.y - Math.sin(state.pitch) * 8;
+    const lookZ = state.z + Math.cos(state.yaw) * cosP * 8;
+    camera.lookAt(lookX, lookY, lookZ);
+  });
+
+  useFrame(() => {
+    if (!active && groupRef.current) groupRef.current.visible = false;
+  });
+
+  return (
+    <group ref={groupRef} visible={false}>
+      <PlaneMesh color={playerColor} />
+    </group>
+  );
+}

package/src/components/PlayerCar.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useRef, useEffect, useMemo, MutableRefObject } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { CollisionMap } from "@/lib/collision-map";
+import { CarEngine, initAudio } from "@/lib/sound-engine";
+import {
+  CarInput,
+  CarState,
+  createCarState,
+  updateCar,
+  CAR_Y,
+} from "@/lib/player-car";
+
+interface PlayerCarProps {
+  active: boolean;
+  collisionMap: CollisionMap | null;
+  positionRef: MutableRefObject<[number, number, number] | null>;
+  headingRef: MutableRefObject<number>;
+  speedRef?: MutableRefObject<number>;
+}
+
+export default function PlayerCar({ active, collisionMap, positionRef, headingRef, speedRef }: PlayerCarProps) {
+  const groupRef = useRef<THREE.Group>(null);
+  const arrowRef = useRef<THREE.Mesh>(null);
+  const inputRef = useRef<CarInput>({
+    forward: false,
+    backward: false,
+    left: false,
+    right: false,
+    brake: false,
+  });
+  const stateRef = useRef<CarState>(createCarState());
+  const engineRef = useRef<CarEngine | null>(null);
+
+  // Reset car state when entering car mode
+  useEffect(() => {
+    if (active) {
+      stateRef.current = createCarState();
+      inputRef.current = {
+        forward: false,
+        backward: false,
+        left: false,
+        right: false,
+        brake: false,
+      };
+    } else {
+      positionRef.current = null;
+      // Stop engine sound
+      engineRef.current?.stop();
+      engineRef.current = null;
+    }
+    return () => {
+      engineRef.current?.stop();
+      engineRef.current = null;
+    };
+  }, [active, positionRef]);
+
+  // Keyboard listeners
+  useEffect(() => {
+    if (!active) return;
+
+    function handleKey(e: KeyboardEvent, down: boolean) {
+      // Skip if typing in an input field
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA") return;
+
+      const input = inputRef.current;
+      switch (e.key) {
+        case "w":
+        case "W":
+        case "ArrowUp":
+          input.forward = down;
+          if (e.key.startsWith("Arrow")) e.preventDefault();
+          break;
+        case "s":
+        case "S":
+        case "ArrowDown":
+          input.backward = down;
+          if (e.key.startsWith("Arrow")) e.preventDefault();
+          break;
+        case "a":
+        case "A":
+        case "ArrowLeft":
+          input.left = down;
+          if (e.key.startsWith("Arrow")) e.preventDefault();
+          break;
+        case "d":
+        case "D":
+        case "ArrowRight":
+          input.right = down;
+          if (e.key.startsWith("Arrow")) e.preventDefault();
+          break;
+        case " ":
+          input.brake = down;
+          e.preventDefault();
+          break;
+      }
+    }
+
+    const onDown = (e: KeyboardEvent) => handleKey(e, true);
+    const onUp = (e: KeyboardEvent) => handleKey(e, false);
+
+    window.addEventListener("keydown", onDown);
+    window.addEventListener("keyup", onUp);
+    return () => {
+      window.removeEventListener("keydown", onDown);
+      window.removeEventListener("keyup", onUp);
+    };
+  }, [active]);
+
+  // Physics + rendering each frame
+  useFrame((_, delta) => {
+    if (!active || !groupRef.current) return;
+
+    const state = stateRef.current;
+    updateCar(state, inputRef.current, delta, collisionMap);
+
+    // Start engine on first frame if needed
+    if (!engineRef.current) {
+      initAudio();
+      const eng = new CarEngine();
+      eng.start();
+      engineRef.current = eng;
+    }
+    // Update engine throttle based on speed
+    const maxSpeed = 25;
+    engineRef.current.setThrottle(Math.abs(state.speed) / maxSpeed);
+
+    // Update mesh transforms
+    groupRef.current.position.set(state.x, CAR_Y, state.z);
+    groupRef.current.rotation.y = state.heading;
+    groupRef.current.visible = true;
+
+    // Write position + heading for camera tracking
+    positionRef.current = [state.x, CAR_Y, state.z];
+    headingRef.current = state.heading;
+    if (speedRef) speedRef.current = Math.abs(state.speed);
+
+    // Bobbing arrow
+    if (arrowRef.current) {
+      arrowRef.current.position.y = 2.0 + Math.sin(Date.now() * 0.003) * 0.2;
+    }
+  });
+
+  // Hide when inactive
+  useFrame(() => {
+    if (!active && groupRef.current) {
+      groupRef.current.visible = false;
+    }
+  });
+
+  // Materials
+  const bodyMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#E35930",
+    metalness: 0.4,
+    roughness: 0.5,
+  }), []);
+
+  const cabinMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#b8421f",
+    metalness: 0.3,
+    roughness: 0.6,
+  }), []);
+
+  const wheelMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#333333",
+    metalness: 0.2,
+    roughness: 0.8,
+  }), []);
+
+  const arrowMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#8b5cf6",
+    emissive: "#8b5cf6",
+    emissiveIntensity: 0.6,
+    transparent: true,
+    opacity: 0.85,
+  }), []);
+
+  return (
+    <group ref={groupRef} visible={false}>
+      {/* Body */}
+      <mesh material={bodyMat}>
+        <boxGeometry args={[0.7, 0.35, 1.5]} />
+      </mesh>
+
+      {/* Cabin */}
+      <mesh position={[0, 0.25, -0.1]} material={cabinMat}>
+        <boxGeometry args={[0.6, 0.25, 0.65]} />
+      </mesh>
+
+      {/* Wheels */}
+      {[
+        [-0.35, -0.12, 0.45],
+        [0.35, -0.12, 0.45],
+        [-0.35, -0.12, -0.45],
+        [0.35, -0.12, -0.45],
+      ].map((pos, i) => (
+        <mesh key={i} position={pos as [number, number, number]} rotation={[0, 0, Math.PI / 2]} material={wheelMat}>
+          <cylinderGeometry args={[0.12, 0.12, 0.1, 8]} />
+        </mesh>
+      ))}
+
+      {/* Floating arrow marker */}
+      <mesh ref={arrowRef} position={[0, 2.0, 0]} rotation={[Math.PI, 0, 0]} material={arrowMat}>
+        <coneGeometry args={[0.25, 0.5, 4]} />
+      </mesh>
+    </group>
+  );
+}

package/src/components/PlayerPlane.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { MutableRefObject, useEffect, useMemo, useRef } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import {
+    PlaneInput,
+    PlaneState,
+    createPlaneState,
+    updatePlane,
+} from "@/lib/player-plane";
+
+interface PlayerPlaneProps {
+    active: boolean;
+    positionRef: MutableRefObject<[number, number, number] | null>;
+    headingRef: MutableRefObject<number>;
+    pitchRef?: MutableRefObject<number>;
+    speedRef?: MutableRefObject<number>;
+    walletAddress?: string | null;
+}
+
+export default function PlayerPlane({
+    active,
+    positionRef,
+    headingRef,
+    pitchRef,
+    speedRef,
+    walletAddress,
+}: PlayerPlaneProps) {
+    const { camera } = useThree();
+    const groupRef = useRef<THREE.Group>(null);
+    const labelRef = useRef<THREE.Mesh>(null);
+    const spotlightTargetRef = useRef<THREE.Object3D>(new THREE.Object3D());
+
+    const inputRef = useRef<PlaneInput>({
+        forward: false,
+        backward: false,
+        left: false,
+        right: false,
+        up: false,
+        down: false,
+    });
+    const stateRef = useRef<PlaneState>(createPlaneState());
+
+    useEffect(() => {
+        if (active) {
+            stateRef.current = createPlaneState();
+            inputRef.current = {
+                forward: false,
+                backward: false,
+                left: false,
+                right: false,
+                up: false,
+                down: false,
+            };
+        } else {
+            positionRef.current = null;
+            if (pitchRef) pitchRef.current = 0;
+        }
+    }, [active, positionRef, pitchRef]);
+
+    useEffect(() => {
+        if (!active) return;
+
+        function handleKey(e: KeyboardEvent, down: boolean) {
+            const tag = (e.target as HTMLElement)?.tagName;
+            if (tag === "INPUT" || tag === "TEXTAREA") return;
+
+            const input = inputRef.current;
+            switch (e.key) {
+                case "w":
+                case "W":
+                case "ArrowUp":
+                    input.forward = down;
+                    if (e.key.startsWith("Arrow")) e.preventDefault();
+                    break;
+                case "s":
+                case "S":
+                case "ArrowDown":
+                    input.backward = down;
+                    if (e.key.startsWith("Arrow")) e.preventDefault();
+                    break;
+                case "a":
+                case "A":
+                case "ArrowLeft":
+                    input.left = down;
+                    if (e.key.startsWith("Arrow")) e.preventDefault();
+                    break;
+                case "d":
+                case "D":
+                case "ArrowRight":
+                    input.right = down;
+                    if (e.key.startsWith("Arrow")) e.preventDefault();
+                    break;
+                case "q":
+                case "Q":
+                case " ":
+                    input.up = down;
+                    e.preventDefault();
+                    break;
+                case "e":
+                case "E":
+                    input.down = down;
+                    break;
+            }
+        }
+
+        const onDown = (e: KeyboardEvent) => handleKey(e, true);
+        const onUp = (e: KeyboardEvent) => handleKey(e, false);
+        window.addEventListener("keydown", onDown);
+        window.addEventListener("keyup", onUp);
+        return () => {
+            window.removeEventListener("keydown", onDown);
+            window.removeEventListener("keyup", onUp);
+        };
+    }, [active]);
+
+    useFrame((_, delta) => {
+        if (!groupRef.current) return;
+
+        if (!active) {
+            groupRef.current.visible = false;
+            return;
+        }
+
+        const state = stateRef.current;
+        updatePlane(state, inputRef.current, delta);
+
+        groupRef.current.position.set(state.x, state.y, state.z);
+        // YXZ order feels better for aircraft (yaw -> pitch -> roll)
+        groupRef.current.rotation.set(state.pitch, state.heading, state.roll, "YXZ");
+        groupRef.current.visible = true;
+
+        positionRef.current = [state.x, state.y, state.z];
+        headingRef.current = state.heading;
+        if (pitchRef) pitchRef.current = state.pitch;
+        if (speedRef) speedRef.current = state.speed;
+
+        // Keep label readable from any camera angle
+        if (labelRef.current) {
+            labelRef.current.lookAt(camera.position);
+        }
+    });
+
+    const bodyMat = useMemo(
+        () =>
+            new THREE.MeshStandardMaterial({
+                color: "#E35930",
+                metalness: 0.6,
+                roughness: 0.3,
+            }),
+        [],
+    );
+
+    const wingMat = useMemo(
+        () =>
+            new THREE.MeshStandardMaterial({
+                color: "#c0c0c0",
+                metalness: 0.7,
+                roughness: 0.2,
+            }),
+        [],
+    );
+
+    const glassMat = useMemo(
+        () =>
+            new THREE.MeshStandardMaterial({
+                color: "#88ccff",
+                metalness: 0.9,
+                roughness: 0.1,
+                transparent: true,
+                opacity: 0.6,
+            }),
+        [],
+    );
+
+    const engineMat = useMemo(
+        () =>
+            new THREE.MeshStandardMaterial({
+                color: "#E35930",
+                emissive: "#E35930",
+                emissiveIntensity: 0.8,
+            }),
+        [],
+    );
+
+    const trailMat = useMemo(
+        () =>
+            new THREE.MeshStandardMaterial({
+                color: "#ff6600",
+                emissive: "#ff4400",
+                emissiveIntensity: 2,
+                transparent: true,
+                opacity: 0.6,
+            }),
+        [],
+    );
+
+    return (
+        <group ref={groupRef} visible={false}>
+            <mesh material={bodyMat} rotation={[Math.PI / 2, 0, 0]}>
+                <capsuleGeometry args={[0.35, 2.5, 4, 8]} />
+            </mesh>
+
+            <mesh material={glassMat} position={[0, 0.2, 1]}>
+                <sphereGeometry args={[0.3, 8, 6, 0, Math.PI * 2, 0, Math.PI / 2]} />
+            </mesh>
+
+            <mesh material={wingMat} position={[0, -0.05, 0]}>
+                <boxGeometry args={[5, 0.08, 1]} />
+            </mesh>
+
+            <mesh material={bodyMat} position={[2.5, 0.15, 0]} rotation={[0, 0, 0.3]}>
+                <boxGeometry args={[0.3, 0.06, 0.7]} />
+            </mesh>
+            <mesh material={bodyMat} position={[-2.5, 0.15, 0]} rotation={[0, 0, -0.3]}>
+                <boxGeometry args={[0.3, 0.06, 0.7]} />
+            </mesh>
+
+            <mesh material={bodyMat} position={[0, 0.5, -1.6]}>
+                <boxGeometry args={[0.06, 0.8, 0.6]} />
+            </mesh>
+
+            <mesh material={wingMat} position={[0, 0.05, -1.5]}>
+                <boxGeometry args={[1.8, 0.06, 0.5]} />
+            </mesh>
+
+            <mesh material={engineMat} position={[0, 0, -1.8]}>
+                <sphereGeometry args={[0.2, 8, 8]} />
+            </mesh>
+
+            <mesh material={trailMat} position={[0, 0, -2.5]} scale={[0.15, 0.15, 1.5]}>
+                <coneGeometry args={[1, 2, 6]} />
+            </mesh>
+
+            <primitive object={spotlightTargetRef.current} position={[0, -50, 4]} />
+            <spotLight
+                position={[0, -1, 2]}
+                angle={0.4}
+                penumbra={0.5}
+                intensity={3}
+                distance={80}
+                color="#E35930"
+                target={spotlightTargetRef.current}
+            />
+
+            {walletAddress && (
+                <mesh ref={labelRef} position={[0, 1.5, 0]}>
+                    <planeGeometry args={[2, 0.3]} />
+                    <meshBasicMaterial color="#E35930" transparent opacity={0.5} />
+                </mesh>
+            )}
+        </group>
+    );
+}