solanapolis 1.0.0

package/src/components/ProjectileRenderer.tsx

@@ -0,0 +1,249 @@
+"use client";
+
+import { useRef, useMemo, useEffect, MutableRefObject } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { ProjectileManager, HitEvent } from "@/lib/projectile-system";
+import { playGunshot, playExplosion, playScoreChime, initAudio } from "@/lib/sound-engine";
+
+interface ProjectileRendererProps {
+  manager: ProjectileManager;
+  /** Positions of all resident planes (for hit detection) */
+  planePositionsRef: MutableRefObject<Array<{ x: number; y: number; z: number }>>;
+  /** Positions of all resident cars (for hit detection) */
+  carPositionsRef: MutableRefObject<Array<{ x: number; y: number; z: number }>>;
+  /** Is the player actively in car or plane mode? */
+  active: boolean;
+  /** Player position ref (car or plane) */
+  playerPosRef: MutableRefObject<[number, number, number] | null>;
+  /** Player heading ref */
+  playerHeadingRef: MutableRefObject<number>;
+  /** Player pitch (planes only, 0 for cars) */
+  playerPitchRef?: MutableRefObject<number>;
+  /** "car" | "plane" */
+  mode: "car" | "plane";
+}
+
+const MAX_VISIBLE = 50;
+const MAX_EXPLOSIONS = 20;
+const _dummy = new THREE.Object3D();
+
+export default function ProjectileRenderer({
+  manager,
+  planePositionsRef,
+  carPositionsRef,
+  active,
+  playerPosRef,
+  playerHeadingRef,
+  playerPitchRef,
+  mode,
+}: ProjectileRendererProps) {
+  const bulletRef = useRef<THREE.InstancedMesh>(null);
+  const trailRef = useRef<THREE.InstancedMesh>(null);
+  const explosionRef = useRef<THREE.InstancedMesh>(null);
+  const fireKeyRef = useRef(false);
+  const prevHitCountRef = useRef(0);
+  const lastFireSoundRef = useRef(0);
+
+  // Materials
+  const bulletMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#ff4400",
+    emissive: "#ff6600",
+    emissiveIntensity: 3.0,
+  }), []);
+
+  const trailMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#ff8800",
+    emissive: "#ff6600",
+    emissiveIntensity: 2.0,
+    transparent: true,
+    opacity: 0.5,
+  }), []);
+
+  const explosionMat = useMemo(() => new THREE.MeshStandardMaterial({
+    color: "#ffaa00",
+    emissive: "#ff4400",
+    emissiveIntensity: 4.0,
+    transparent: true,
+    opacity: 0.8,
+  }), []);
+
+  // Keyboard: fire on F or left-click
+  useEffect(() => {
+    if (!active) return;
+
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "f" || e.key === "F") fireKeyRef.current = true;
+    }
+    function onKeyUp(e: KeyboardEvent) {
+      if (e.key === "f" || e.key === "F") fireKeyRef.current = false;
+    }
+    function onMouseDown(e: MouseEvent) {
+      if (e.button === 0) fireKeyRef.current = true;
+    }
+    function onMouseUp(e: MouseEvent) {
+      if (e.button === 0) fireKeyRef.current = false;
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mouseup", onMouseUp);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mouseup", onMouseUp);
+      fireKeyRef.current = false;
+    };
+  }, [active]);
+
+  useFrame((_, delta) => {
+    if (!active) return;
+    const pos = playerPosRef.current;
+    if (!pos) return;
+
+    // Fire projectiles
+    if (fireKeyRef.current) {
+      const pitch = playerPitchRef?.current ?? 0;
+      manager.fire(pos[0], pos[1], pos[2], playerHeadingRef.current, pitch, mode);
+      // Gunshot sound (throttled to ~5/sec max)
+      const now = performance.now();
+      if (now - lastFireSoundRef.current > 200) {
+        initAudio();
+        playGunshot();
+        lastFireSoundRef.current = now;
+      }
+    }
+
+    manager.update(
+      delta,
+      planePositionsRef.current,
+      carPositionsRef.current,
+    );
+
+    // Play explosion + score chime on new hits
+    if (manager.hits.length > prevHitCountRef.current) {
+      playExplosion();
+      playScoreChime();
+    }
+    prevHitCountRef.current = manager.hits.length;
+
+    // Render bullets
+    const bullets = bulletRef.current;
+    const trails = trailRef.current;
+    const alive = manager.getAlive();
+
+    if (bullets && trails) {
+      for (let i = 0; i < MAX_VISIBLE; i++) {
+        if (i < alive.length) {
+          const p = alive[i];
+          // Bullet head
+          _dummy.position.set(p.x, p.y, p.z);
+          _dummy.scale.set(0.25, 0.25, 0.25);
+          _dummy.rotation.set(0, 0, 0);
+          _dummy.updateMatrix();
+          bullets.setMatrixAt(i, _dummy.matrix);
+
+          // Trail (stretched behind)
+          const speed = Math.sqrt(p.vx * p.vx + p.vy * p.vy + p.vz * p.vz);
+          const trailLen = Math.min(speed * 0.02, 4.0);
+          const headingAngle = Math.atan2(p.vx, p.vz);
+          const pitchAngle = Math.atan2(-p.vy, Math.sqrt(p.vx * p.vx + p.vz * p.vz));
+          _dummy.position.set(
+            p.x - p.vx * 0.008,
+            p.y - p.vy * 0.008,
+            p.z - p.vz * 0.008,
+          );
+          _dummy.scale.set(0.08, 0.08, trailLen);
+          _dummy.rotation.set(pitchAngle, headingAngle, 0, "YXZ");
+          _dummy.updateMatrix();
+          trails.setMatrixAt(i, _dummy.matrix);
+        } else {
+          // Hide unused instances
+          _dummy.position.set(0, -1000, 0);
+          _dummy.scale.set(0, 0, 0);
+          _dummy.updateMatrix();
+          bullets.setMatrixAt(i, _dummy.matrix);
+          trails.setMatrixAt(i, _dummy.matrix);
+        }
+      }
+      bullets.instanceMatrix.needsUpdate = true;
+      trails.instanceMatrix.needsUpdate = true;
+    }
+
+    // Render explosions at hit locations
+    const explosions = explosionRef.current;
+    if (explosions) {
+      const hits = manager.hits;
+      const now = performance.now();
+      for (let i = 0; i < MAX_EXPLOSIONS; i++) {
+        if (i < hits.length) {
+          const h = hits[i];
+          const age = (now - h.timestamp) / 1000; // seconds
+          const life = 1 - Math.min(age / 1.0, 1);
+          const scale = 0.5 + age * 4; // expand quickly
+          _dummy.position.set(h.x, h.y, h.z);
+          _dummy.scale.set(scale * life, scale * life, scale * life);
+          _dummy.rotation.set(age * 3, age * 5, 0);
+          _dummy.updateMatrix();
+          explosions.setMatrixAt(i, _dummy.matrix);
+        } else {
+          _dummy.position.set(0, -1000, 0);
+          _dummy.scale.set(0, 0, 0);
+          _dummy.updateMatrix();
+          explosions.setMatrixAt(i, _dummy.matrix);
+        }
+      }
+      explosions.instanceMatrix.needsUpdate = true;
+    }
+  });
+
+  if (!active) return null;
+
+  return (
+    <group>
+      {/* Bullet heads */}
+      <instancedMesh
+        ref={bulletRef}
+        args={[undefined!, undefined!, MAX_VISIBLE]}
+        frustumCulled={false}
+      >
+        <sphereGeometry args={[1, 6, 6]} />
+        <primitive object={bulletMat} attach="material" />
+      </instancedMesh>
+
+      {/* Bullet trails */}
+      <instancedMesh
+        ref={trailRef}
+        args={[undefined!, undefined!, MAX_VISIBLE]}
+        frustumCulled={false}
+      >
+        <boxGeometry args={[1, 1, 1]} />
+        <primitive object={trailMat} attach="material" />
+      </instancedMesh>
+
+      {/* Explosion flashes */}
+      <instancedMesh
+        ref={explosionRef}
+        args={[undefined!, undefined!, MAX_EXPLOSIONS]}
+        frustumCulled={false}
+      >
+        <icosahedronGeometry args={[1, 1]} />
+        <primitive object={explosionMat} attach="material" />
+      </instancedMesh>
+
+      {/* Muzzle flash light */}
+      {playerPosRef.current && (
+        <pointLight
+          position={playerPosRef.current}
+          color="#ff6600"
+          intensity={fireKeyRef.current ? 8 : 0}
+          distance={15}
+          decay={2}
+        />
+      )}
+    </group>
+  );
+}

package/src/components/QueueStatusBanner.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface QueueCounts {
+  queued: number;
+  processing: number;
+  complete: number;
+  failed: number;
+}
+
+export default function QueueStatusBanner() {
+  const [counts, setCounts] = useState<QueueCounts | null>(null);
+
+  useEffect(() => {
+    let active = true;
+
+    async function poll() {
+      try {
+        const res = await fetch("/api/queue-status");
+        if (res.ok && active) setCounts(await res.json());
+      } catch { /* ignore */ }
+    }
+
+    poll();
+    const id = setInterval(poll, 10_000);
+    return () => { active = false; clearInterval(id); };
+  }, []);
+
+  if (!counts) return null;
+
+  const total = counts.queued + counts.processing + counts.complete + counts.failed;
+  const pending = counts.queued + counts.processing;
+
+  // Hide when everything is done
+  if (pending === 0) return null;
+
+  const pct = total > 0 ? Math.round((counts.complete / total) * 100) : 0;
+
+  return (
+    <div className="absolute top-[5.5rem] left-3 sm:top-[7.5rem] sm:left-5 z-10 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-2xl px-4 py-3 w-[220px]">
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-2.5">
+        <span className="relative flex h-2 w-2">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#E35930] opacity-75" />
+          <span className="relative inline-flex rounded-full h-2 w-2 bg-[#E35930]" />
+        </span>
+        <span className="text-xs font-medium text-white/70">Indexing Pipeline</span>
+      </div>
+
+      {/* Progress bar */}
+      <div className="w-full h-1.5 bg-white/[0.06] rounded-full overflow-hidden mb-2.5">
+        <div
+          className="h-full bg-[#E35930] rounded-full transition-all duration-700"
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+
+      {/* Stats */}
+      <div className="space-y-1.5 text-[11px]">
+        <div className="flex justify-between">
+          <span className="text-white/40">Complete</span>
+          <span className="text-white/70 font-mono">{counts.complete}/{total}</span>
+        </div>
+        {counts.processing > 0 && (
+          <div className="flex justify-between">
+            <span className="text-white/40">Processing</span>
+            <span className="text-[#E35930] font-mono">{counts.processing}</span>
+          </div>
+        )}
+        {counts.queued > 0 && (
+          <div className="flex justify-between">
+            <span className="text-white/40">Queued</span>
+            <span className="text-yellow-400/80 font-mono">{counts.queued}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Throughput info */}
+      <div className="mt-2.5 pt-2.5 border-t border-white/[0.06] space-y-1 text-[10px] text-white/30">
+        <p>Dynamic parallel slicing</p>
+        <p>Rate-limited at 90 req/s</p>
+      </div>
+    </div>
+  );
+}

package/src/components/RealPlayerTags.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Html } from "@react-three/drei";
+import * as THREE from "three";
+import type { RemotePlayer } from "@/lib/multiplayer-manager";
+
+interface RealPlayerTagsProps {
+    active: boolean;
+    remotePlayers: Map<string, RemotePlayer>;
+}
+
+function shortWallet(wallet: string): string {
+    return wallet.length <= 10 ? wallet : `${wallet.slice(0, 4)}…${wallet.slice(-4)}`;
+}
+
+export default function RealPlayerTags({ active, remotePlayers }: RealPlayerTagsProps) {
+    const [players, setPlayers] = useState<RemotePlayer[]>([]);
+
+    useEffect(() => {
+        if (!active) {
+            setPlayers([]);
+            return;
+        }
+
+        const sync = () => {
+            setPlayers(
+                Array.from(remotePlayers.values()).filter((p) => p.mode !== "spectating"),
+            );
+        };
+
+        sync();
+        const interval = window.setInterval(sync, 120);
+        return () => window.clearInterval(interval);
+    }, [active, remotePlayers]);
+
+    if (!active || players.length === 0) return null;
+
+    const now = Date.now();
+
+    return (
+        <>
+            {players.map((p) => {
+                const isCar = p.mode === "car";
+                const color = isCar ? "#38bdf8" : "#ec4899";
+                const yOffset = isCar ? 2.3 : 4.0;
+                const stale = now - p.lastSeen > 3000;
+
+                return (
+                    <group key={p.wallet} position={[p.x, p.y + yOffset, p.z]}>
+                        {/* Floating marker core */}
+                        <mesh>
+                            <sphereGeometry args={[0.18, 12, 12]} />
+                            <meshBasicMaterial color={color} transparent opacity={stale ? 0.35 : 0.95} />
+                        </mesh>
+
+                        {/* Ring helps visibility from distance */}
+                        <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.3, 0]}>
+                            <ringGeometry args={[0.3, 0.42, 20]} />
+                            <meshBasicMaterial
+                                color={color}
+                                side={THREE.DoubleSide}
+                                transparent
+                                opacity={stale ? 0.2 : 0.6}
+                            />
+                        </mesh>
+
+                        {/* Floating billboard label */}
+                        <Html center position={[0, 0.55, 0]} distanceFactor={14} style={{ pointerEvents: "none" }}>
+                            <div className="px-2 py-1 rounded-md border border-white/20 bg-black/75 backdrop-blur-sm text-center leading-tight shadow-lg">
+                                <div className="text-[9px] font-bold tracking-wide text-white">REAL PLAYER</div>
+                                <div className={`text-[9px] font-mono ${isCar ? "text-sky-300" : "text-pink-300"}`}>
+                                    {isCar ? "🚗 DRIVER" : "✈ PILOT"} · {shortWallet(p.wallet)}
+                                </div>
+                            </div>
+                        </Html>
+                    </group>
+                );
+            })}
+        </>
+    );
+}