solanapolis 1.0.0

package/src/components/CitySlotsBadge.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { SlotCounts } from "@/lib/city-slots";
+
+interface CitySlotsBadgeProps {
+  counts: SlotCounts;
+  loading?: boolean;
+}
+
+export default function CitySlotsBadge({ counts, loading }: CitySlotsBadgeProps) {
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 mt-1">
+        <span className="text-sm text-white/40">Loading...</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5 mt-1.5">
+      {/* Total wallets */}
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1.5">
+          <div className="w-2 h-2 rounded-full bg-[#E35930]" />
+          <span className="text-[11px] text-white/50 font-medium">
+            {counts.totalWallets.toLocaleString()} / 1,000
+          </span>
+          <span className="text-[9px] text-white/25">wallets</span>
+        </div>
+      </div>
+
+      {/* Slots bar */}
+      <div className="flex gap-1 items-center">
+        {/* Planes */}
+        <div className="flex items-center gap-1" title={`${counts.planesUsed} / 100 planes claimed`}>
+          <span className="text-[10px]">✈</span>
+          <div className="w-12 h-1.5 bg-white/[0.06] rounded-full overflow-hidden">
+            <div
+              className="h-full rounded-full transition-all duration-700"
+              style={{
+                width: `${Math.min(counts.planesUsed / 100 * 100, 100)}%`,
+                background: "linear-gradient(90deg, #E35930, #f59e0b)",
+              }}
+            />
+          </div>
+          <span className="text-[9px] text-white/30 tabular-nums">{counts.planesUsed}</span>
+        </div>
+
+        <div className="w-px h-3 bg-white/[0.08]" />
+
+        {/* Cars */}
+        <div className="flex items-center gap-1" title={`${counts.carsUsed} / 250 cars claimed`}>
+          <span className="text-[10px]">🚗</span>
+          <div className="w-12 h-1.5 bg-white/[0.06] rounded-full overflow-hidden">
+            <div
+              className="h-full rounded-full transition-all duration-700"
+              style={{
+                width: `${Math.min(counts.carsUsed / 250 * 100, 100)}%`,
+                background: "linear-gradient(90deg, #6366f1, #8b5cf6)",
+              }}
+            />
+          </div>
+          <span className="text-[9px] text-white/30 tabular-nums">{counts.carsUsed}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/CockpitHUD.tsx

@@ -0,0 +1,460 @@
+"use client";
+
+import { useState, useEffect, useRef, MutableRefObject } from "react";
+
+interface CockpitHUDProps {
+  active: boolean;
+  mode?: "car" | "plane";
+  positionRef: MutableRefObject<[number, number, number] | null>;
+  headingRef: MutableRefObject<number>;
+  pitchRef?: MutableRefObject<number>;
+  speedRef?: MutableRefObject<number>;
+  walletAddress: string | null;
+  hp?: number;
+  maxHP?: number;
+  destroyed?: boolean;
+  respawnRemaining?: number;
+}
+
+interface SolanaData {
+  solPrice: number | null;
+  tps: number | null;
+  blockHeight: number | null;
+  epoch: number | null;
+  walletBalance: number | null;
+}
+
+/** Convert radians to degrees, 0-360 range */
+function toDeg(rad: number): number {
+  return ((rad * 180) / Math.PI + 360) % 360;
+}
+
+export default function CockpitHUD({
+  active,
+  mode = "plane",
+  positionRef,
+  headingRef,
+  pitchRef,
+  speedRef,
+  walletAddress,
+  hp = 100,
+  maxHP = 100,
+  destroyed = false,
+  respawnRemaining = 0,
+}: CockpitHUDProps) {
+  const [flightData, setFlightData] = useState({
+    speed: 0,
+    altitude: 0,
+    heading: 0,
+    pitch: 0,
+    x: 0,
+    z: 0,
+  });
+  const [solana, setSolana] = useState<SolanaData>({
+    solPrice: null,
+    tps: null,
+    blockHeight: null,
+    epoch: null,
+    walletBalance: null,
+  });
+  const animRef = useRef<number>(0);
+  const tickRef = useRef(0);
+
+  // Fetch Solana network data
+  useEffect(() => {
+    if (!active) return;
+
+    async function fetchSolanaData() {
+      try {
+        // Fetch treasury for SOL price
+        const [treasuryRes, networkRes] = await Promise.allSettled([
+          fetch("/api/treasury"),
+          fetch("/api/network-stats"),
+        ]);
+
+        const updates: Partial<SolanaData> = {};
+
+        if (treasuryRes.status === "fulfilled" && treasuryRes.value.ok) {
+          const data = await treasuryRes.value.json();
+          updates.solPrice = data.solPrice ?? null;
+        }
+
+        if (networkRes.status === "fulfilled" && networkRes.value.ok) {
+          const data = await networkRes.value.json();
+          updates.tps = data.tps ?? null;
+          updates.blockHeight = data.blockHeight ?? null;
+          updates.epoch = data.epoch ?? null;
+        }
+
+        // Get wallet balance if connected
+        if (walletAddress) {
+          try {
+            const balRes = await fetch(`/api/wallet/${walletAddress}/balances`);
+            if (balRes.ok) {
+              const balData = await balRes.json();
+              updates.walletBalance = balData.nativeBalance ?? balData.sol ?? null;
+            }
+          } catch { /* ignore */ }
+        }
+
+        setSolana(prev => ({ ...prev, ...updates }));
+      } catch { /* silent */ }
+    }
+
+    fetchSolanaData();
+    const interval = setInterval(fetchSolanaData, 15000);
+    return () => clearInterval(interval);
+  }, [active, walletAddress]);
+
+  // Update flight data at 30fps
+  useEffect(() => {
+    if (!active) return;
+
+    function update() {
+      tickRef.current++;
+      const pos = positionRef.current;
+      if (pos) {
+        setFlightData({
+          speed: speedRef ? Math.round(speedRef.current) : Math.round(pos[1] > 0 ? 30 : 0),
+          altitude: Math.round(pos[1]),
+          heading: Math.round(toDeg(headingRef.current)),
+          pitch: pitchRef ? Math.round(toDeg(pitchRef.current)) : 0,
+          x: Math.round(pos[0]),
+          z: Math.round(pos[2]),
+        });
+      }
+      animRef.current = requestAnimationFrame(update);
+    }
+    animRef.current = requestAnimationFrame(update);
+    return () => cancelAnimationFrame(animRef.current);
+  }, [active, positionRef, headingRef, pitchRef]);
+
+  if (!active) return null;
+
+  const { heading, altitude, pitch } = flightData;
+  const speed = Math.abs(flightData.speed);
+  const hpPercent = maxHP > 0 ? (hp / maxHP) * 100 : 0;
+  const hpColor = hpPercent > 60 ? "#22c55e" : hpPercent > 30 ? "#f59e0b" : "#ef4444";
+  const respawnMins = Math.ceil(respawnRemaining / 60000);
+  const respawnSecs = Math.ceil((respawnRemaining % 60000) / 1000);
+  const isCar = mode === "car";
+
+  // Destroyed overlay
+  if (destroyed) {
+    return (
+      <div className="fixed inset-0 z-[60] flex items-center justify-center pointer-events-none">
+        <div className="absolute inset-0 bg-red-950/40" />
+        <div className="absolute inset-0" style={{
+          backgroundImage: "radial-gradient(ellipse at center, transparent 40%, rgba(200,0,0,0.15) 100%)",
+        }} />
+        <div className="relative text-center">
+          <div className="text-6xl mb-4 animate-pulse">💥</div>
+          <h2 className="text-3xl font-black text-red-400 mb-2 tracking-wider uppercase">
+            {isCar ? "Car Destroyed" : "Plane Down"}
+          </h2>
+          <p className="text-sm text-white/40 mb-6">You were taken out in combat</p>
+          {respawnRemaining > 0 ? (
+            <div className="bg-black/70 backdrop-blur-md border border-red-500/20 rounded-2xl px-8 py-4 inline-block">
+              <p className="text-[9px] uppercase tracking-[0.2em] text-red-400/50 mb-1">Respawn In</p>
+              <p className="text-4xl font-mono font-black text-red-400 tabular-nums">
+                {respawnMins}:{String(respawnSecs % 60).padStart(2, "0")}
+              </p>
+              <p className="text-[10px] text-white/20 mt-1">Press ESC to exit</p>
+            </div>
+          ) : (
+            <div className="bg-emerald-500/10 border border-emerald-500/20 rounded-2xl px-8 py-4 inline-block pointer-events-auto">
+              <p className="text-lg font-bold text-emerald-400">Ready to Respawn!</p>
+              <p className="text-[10px] text-emerald-400/40 mt-0.5">Re-enter {isCar ? "Drive" : "Flight"} mode</p>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* ─── Cockpit Frame ─── */}
+      <div className="fixed inset-0 z-[45] pointer-events-none">
+        {/* Top cockpit bar — mimics windshield frame */}
+        <div
+          className="absolute top-0 left-0 right-0 h-8"
+          style={{
+            background: "linear-gradient(180deg, rgba(20,20,25,0.95) 0%, rgba(20,20,25,0.6) 60%, transparent 100%)",
+          }}
+        />
+        {/* Bottom cockpit dashboard */}
+        <div
+          className="absolute bottom-0 left-0 right-0 h-40 sm:h-48"
+          style={{
+            background: "linear-gradient(0deg, rgba(15,15,20,0.98) 0%, rgba(15,15,20,0.85) 40%, rgba(15,15,20,0.4) 70%, transparent 100%)",
+          }}
+        />
+        {/* Left pillar */}
+        <div
+          className="absolute top-0 bottom-0 left-0 w-12 sm:w-20"
+          style={{
+            background: "linear-gradient(90deg, rgba(15,15,20,0.9) 0%, rgba(15,15,20,0.3) 70%, transparent 100%)",
+          }}
+        />
+        {/* Right pillar */}
+        <div
+          className="absolute top-0 bottom-0 right-0 w-12 sm:w-20"
+          style={{
+            background: "linear-gradient(-90deg, rgba(15,15,20,0.9) 0%, rgba(15,15,20,0.3) 70%, transparent 100%)",
+          }}
+        />
+
+        {/* Subtle HUD scan lines */}
+        <div
+          className="absolute inset-0 opacity-[0.03]"
+          style={{
+            backgroundImage: "repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.1) 2px, rgba(255,255,255,0.1) 4px)",
+          }}
+        />
+      </div>
+
+      {/* ─── HP Bar (top left) ─── */}
+      <div className="fixed top-14 left-4 sm:left-6 z-[46] pointer-events-none">
+        <div className="bg-black/60 backdrop-blur-md border border-white/[0.06] rounded-xl px-3 py-2 min-w-[120px]">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-[8px] uppercase tracking-[0.15em] text-white/30 font-bold">{isCar ? "🚗 HULL" : "✈ HULL"}</span>
+            <span className="text-[10px] font-mono font-bold tabular-nums" style={{ color: hpColor }}>
+              {hp}/{maxHP}
+            </span>
+          </div>
+          <div className="h-2 rounded-full bg-white/[0.06] overflow-hidden">
+            <div
+              className="h-full rounded-full transition-all duration-300 ease-out"
+              style={{
+                width: `${hpPercent}%`,
+                backgroundColor: hpColor,
+                boxShadow: `0 0 8px ${hpColor}40`,
+              }}
+            />
+          </div>
+          {hpPercent <= 30 && (
+            <p className="text-[8px] text-red-400/60 mt-1 animate-pulse font-bold uppercase text-center">! Critical Damage !</p>
+          )}
+        </div>
+      </div>
+
+      {/* ─── Primary Flight Display (Center Bottom) ─── */}
+      <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[46] pointer-events-none">
+        <div className="flex items-end gap-4 sm:gap-6">
+          {/* Speed tape */}
+          <div className="flex flex-col items-center">
+            <div className="bg-black/70 backdrop-blur-md border border-[#E35930]/20 rounded-xl px-3 py-2 min-w-[70px]">
+              <p className="text-[7px] uppercase tracking-[0.2em] text-[#E35930]/50 text-center mb-0.5">SPD</p>
+              <p className="text-xl font-mono font-bold text-[#E35930] text-center tabular-nums">{speed}</p>
+              <p className="text-[8px] text-white/20 text-center">km/h</p>
+            </div>
+          </div>
+
+          {/* Artificial horizon / Attitude indicator */}
+          <div className="relative">
+            <div className="bg-black/70 backdrop-blur-md border border-white/10 rounded-2xl overflow-hidden" style={{ width: 160, height: 100 }}>
+              {/* Sky/ground split based on pitch */}
+              <div
+                className="absolute inset-0 transition-transform duration-200"
+                style={{
+                  transform: `translateY(${Math.min(30, Math.max(-30, pitch * 0.8))}px)`,
+                }}
+              >
+                <div className="absolute top-0 left-0 right-0 h-1/2" style={{ background: "linear-gradient(180deg, #1a3a5c, #2d5a87)" }} />
+                <div className="absolute bottom-0 left-0 right-0 h-1/2" style={{ background: "linear-gradient(0deg, #3d2a1a, #5c4a2a)" }} />
+                {/* Horizon line */}
+                <div className="absolute left-0 right-0 top-1/2 -translate-y-px h-px bg-white/60" />
+                {/* Pitch ladder marks */}
+                {[-20, -10, 10, 20].map(deg => (
+                  <div
+                    key={deg}
+                    className="absolute left-1/4 right-1/4 h-px bg-white/20"
+                    style={{ top: `${50 - deg * 1.5}%` }}
+                  >
+                    <span className="absolute -top-2 -left-4 text-[7px] text-white/30 font-mono">{Math.abs(deg)}</span>
+                  </div>
+                ))}
+              </div>
+              {/* Fixed aircraft symbol */}
+              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
+                <div className="w-8 h-px bg-[#E35930]" />
+                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-px h-2 bg-[#E35930]" />
+                <div className="absolute top-0 -left-4 w-3 h-px bg-[#E35930]" />
+                <div className="absolute top-0 right-[-12px] w-3 h-px bg-[#E35930]" />
+              </div>
+              {/* Heading */}
+              <div className="absolute bottom-1 left-1/2 -translate-x-1/2 bg-black/60 rounded px-2 py-0.5">
+                <span className="text-[10px] font-mono font-bold text-emerald-400 tabular-nums">{heading}°</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Altitude tape */}
+          <div className="flex flex-col items-center">
+            <div className="bg-black/70 backdrop-blur-md border border-emerald-500/20 rounded-xl px-3 py-2 min-w-[70px]">
+              <p className="text-[7px] uppercase tracking-[0.2em] text-emerald-400/50 text-center mb-0.5">ALT</p>
+              <p className="text-xl font-mono font-bold text-emerald-400 text-center tabular-nums">{altitude}</p>
+              <p className="text-[8px] text-white/20 text-center">m</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ─── Solana Data Panel (Left side) ─── */}
+      <div className="fixed bottom-28 left-4 sm:left-6 z-[46] pointer-events-none">
+        <div className="bg-black/60 backdrop-blur-md border border-purple-500/15 rounded-2xl px-3.5 py-3 min-w-[140px]">
+          <div className="flex items-center gap-2 mb-2.5">
+            <div className="w-1.5 h-1.5 rounded-full bg-purple-400 animate-pulse" />
+            <span className="text-[8px] uppercase tracking-[0.2em] text-purple-300/60 font-bold">Solana Network</span>
+          </div>
+
+          <div className="space-y-2">
+            {/* SOL Price */}
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[9px] text-white/30">SOL/USD</span>
+              <span className="text-xs font-mono font-bold text-white/80 tabular-nums">
+                {solana.solPrice !== null ? `$${solana.solPrice.toFixed(2)}` : "—"}
+              </span>
+            </div>
+
+            {/* TPS */}
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[9px] text-white/30">TPS</span>
+              <span className="text-xs font-mono font-bold text-emerald-400/80 tabular-nums">
+                {solana.tps !== null ? solana.tps.toLocaleString() : "—"}
+              </span>
+            </div>
+
+            {/* Block Height */}
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[9px] text-white/30">Block</span>
+              <span className="text-[10px] font-mono text-white/50 tabular-nums">
+                {solana.blockHeight !== null ? `#${solana.blockHeight.toLocaleString()}` : "—"}
+              </span>
+            </div>
+
+            {/* Epoch */}
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[9px] text-white/30">Epoch</span>
+              <span className="text-[10px] font-mono text-white/50 tabular-nums">
+                {solana.epoch !== null ? solana.epoch : "—"}
+              </span>
+            </div>
+
+            {/* Wallet balance */}
+            {walletAddress && (
+              <>
+                <div className="h-px bg-white/[0.06] my-1" />
+                <div className="flex items-center justify-between gap-4">
+                  <span className="text-[9px] text-white/30">Wallet</span>
+                  <span className="text-xs font-mono font-bold text-amber-300/80 tabular-nums">
+                    {solana.walletBalance !== null
+                      ? `${solana.walletBalance.toFixed(4)} SOL`
+                      : "—"}
+                  </span>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── Compass Rose (Top center) ─── */}
+      <div className="fixed top-12 left-1/2 -translate-x-1/2 z-[46] pointer-events-none">
+        <div className="bg-black/50 backdrop-blur-md border border-white/[0.08] rounded-xl px-4 py-1.5 flex items-center gap-1">
+          {/* Compass tape */}
+          {(() => {
+            const marks = [];
+            const dirs: Record<number, string> = { 0: "N", 45: "NE", 90: "E", 135: "SE", 180: "S", 225: "SW", 270: "W", 315: "NW" };
+            for (let offset = -40; offset <= 40; offset += 10) {
+              const deg = ((heading + offset) % 360 + 360) % 360;
+              const roundDeg = Math.round(deg / 10) * 10;
+              const label = dirs[roundDeg];
+              const isCenter = offset === 0;
+              marks.push(
+                <div
+                  key={offset}
+                  className="flex flex-col items-center"
+                  style={{ minWidth: 20, opacity: isCenter ? 1 : 0.3 + (1 - Math.abs(offset) / 40) * 0.3 }}
+                >
+                  {label ? (
+                    <span className={`text-[9px] font-bold ${isCenter ? "text-[#E35930]" : "text-white/40"}`}>
+                      {label}
+                    </span>
+                  ) : (
+                    <span className="text-[8px] font-mono text-white/20">{roundDeg}</span>
+                  )}
+                  <div className={`w-px h-1.5 mt-0.5 ${isCenter ? "bg-[#E35930]" : "bg-white/15"}`} />
+                </div>
+              );
+            }
+            return marks;
+          })()}
+        </div>
+        {/* Center marker triangle */}
+        <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-0 h-0 border-l-[4px] border-r-[4px] border-t-[4px] border-l-transparent border-r-transparent border-t-[#E35930]" />
+      </div>
+
+      {/* ─── Position info (Right side) ─── */}
+      <div className="fixed bottom-28 right-4 sm:right-6 z-[46] pointer-events-none">
+        <div className="bg-black/60 backdrop-blur-md border border-white/[0.06] rounded-2xl px-3.5 py-3 min-w-[120px]">
+          <div className="flex items-center gap-2 mb-2.5">
+            <div className="w-1.5 h-1.5 rounded-full bg-[#E35930]" />
+            <span className="text-[8px] uppercase tracking-[0.2em] text-[#E35930]/60 font-bold">Position</span>
+          </div>
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[9px] text-white/30">X</span>
+              <span className="text-[10px] font-mono text-white/50 tabular-nums">{flightData.x}</span>
+            </div>
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[9px] text-white/30">Z</span>
+              <span className="text-[10px] font-mono text-white/50 tabular-nums">{flightData.z}</span>
+            </div>
+            <div className="flex items-center justify-between gap-4">
+              <span className="text-[9px] text-white/30">HDG</span>
+              <span className="text-[10px] font-mono text-emerald-400/60 tabular-nums">{heading}°</span>
+            </div>
+            {walletAddress && (
+              <>
+                <div className="h-px bg-white/[0.06] my-1" />
+                <div className="text-[8px] text-white/20 font-mono truncate max-w-[110px]">
+                  {walletAddress.slice(0, 6)}...{walletAddress.slice(-4)}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* ─── Center crosshair ─── */}
+      <div className="fixed inset-0 z-[45] pointer-events-none flex items-center justify-center">
+        <div className="relative" style={{ width: 60, height: 60 }}>
+          {/* Outer ring */}
+          <div className="absolute inset-0 border border-white/10 rounded-full" />
+          {/* Cross lines */}
+          <div className="absolute top-1/2 left-0 w-[18px] h-px bg-[#E35930]/50" />
+          <div className="absolute top-1/2 right-0 w-[18px] h-px bg-[#E35930]/50" />
+          <div className="absolute left-1/2 top-0 w-px h-[18px] bg-[#E35930]/50" />
+          <div className="absolute left-1/2 bottom-0 w-px h-[18px] bg-[#E35930]/50" />
+          {/* Center dot */}
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full bg-[#E35930]" />
+          {/* Corner brackets */}
+          <div className="absolute top-2 left-2 w-3 h-3 border-t border-l border-[#E35930]/30 rounded-tl" />
+          <div className="absolute top-2 right-2 w-3 h-3 border-t border-r border-[#E35930]/30 rounded-tr" />
+          <div className="absolute bottom-2 left-2 w-3 h-3 border-b border-l border-[#E35930]/30 rounded-bl" />
+          <div className="absolute bottom-2 right-2 w-3 h-3 border-b border-r border-[#E35930]/30 rounded-br" />
+        </div>
+      </div>
+
+      {/* ─── Cockpit HUD style overlays ─── */}
+      <style jsx>{`
+        @keyframes hudGlow {
+          0%, 100% { opacity: 0.6; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </>
+  );
+}

package/src/components/ConvexWrapper.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { ConvexProvider, ConvexReactClient } from "convex/react";
+import { ReactNode, useMemo } from "react";
+
+export default function ConvexWrapper({ children }: { children: ReactNode }) {
+  const client = useMemo(() => {
+    const url = process.env.NEXT_PUBLIC_CONVEX_URL;
+    if (!url) {
+      console.warn("[Convex] NEXT_PUBLIC_CONVEX_URL not set");
+      return null;
+    }
+    return new ConvexReactClient(url);
+  }, []);
+
+  if (!client) return <>{children}</>;
+
+  return <ConvexProvider client={client}>{children}</ConvexProvider>;
+}