solanapolis 1.0.0

package/src/components/MultiplayerPlanes.tsx

@@ -0,0 +1,128 @@
+"use client";
+import { useEffect, useRef, useState, MutableRefObject, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { createClient } from "@/lib/supabase";
+import { PlaneTransform } from "./PlaneMode";
+
+// Reusable objects to avoid per-frame GC pressure
+const _targetPos  = new THREE.Vector3();
+const _targetQuat = new THREE.Quaternion();
+const _euler      = new THREE.Euler();
+
+interface RemotePlane {
+  wallet: string;
+  x: number; y: number; z: number;
+  yaw: number; pitch: number;
+  lastSeen: number;
+}
+
+function walletColor(address: string): string {
+  let hash = 0;
+  for (let i = 0; i < address.length; i++) hash = ((hash << 5) - hash + address.charCodeAt(i)) | 0;
+  const hue = Math.abs(hash) % 360;
+  return `hsl(${hue},70%,60%)`;
+}
+
+function RemotePlaneMesh({ plane }: { plane: RemotePlane }) {
+  const groupRef = useRef<THREE.Group>(null);
+  const color = walletColor(plane.wallet);
+  const mat = useMemo(() => new THREE.MeshStandardMaterial({ color, metalness: 0.4, roughness: 0.5 }), [color]);
+
+  useFrame(() => {
+    if (!groupRef.current) return;
+    _targetPos.set(plane.x, plane.y, plane.z);
+    groupRef.current.position.lerp(_targetPos, 0.15);
+    _euler.set(plane.pitch, plane.yaw, 0, "YXZ");
+    _targetQuat.setFromEuler(_euler);
+    groupRef.current.quaternion.slerp(_targetQuat, 0.15);
+  });
+
+  return (
+    <group ref={groupRef} position={[plane.x, plane.y, plane.z]}>
+      {/* Simplified plane mesh */}
+      <mesh material={mat}>
+        <boxGeometry args={[0.7, 0.7, 4.5]} />
+      </mesh>
+      <mesh material={mat}>
+        <boxGeometry args={[9, 0.15, 2.0]} />
+      </mesh>
+      <mesh position={[0, 0, -2.1]} material={mat}>
+        <boxGeometry args={[3.5, 0.12, 0.9]} />
+      </mesh>
+      <mesh position={[0, 0.6, -2.0]} material={mat}>
+        <boxGeometry args={[0.12, 1.1, 0.7]} />
+      </mesh>
+      {/* Colored point light to identify the plane */}
+      <pointLight color={color} intensity={3} distance={15} decay={2} position={[0, 2, 0]} />
+    </group>
+  );
+}
+
+interface MultiplayerPlanesProps {
+  active: boolean;
+  myWallet: string | null;
+  positionRef: MutableRefObject<PlaneTransform | null>;
+}
+
+export default function MultiplayerPlanes({ active, myWallet, positionRef }: MultiplayerPlanesProps) {
+  const [remotePlanes, setRemotePlanes] = useState<RemotePlane[]>([]);
+  const channelRef = useRef<ReturnType<ReturnType<typeof createClient>["channel"]> | null>(null);
+  const supabaseRef = useRef(createClient());
+
+  useEffect(() => {
+    const supabase = supabaseRef.current;
+    const channel = supabase.channel("heliopolis-planes");
+    channelRef.current = channel;
+
+    channel.on("broadcast", { event: "plane-position" }, ({ payload }: { payload: RemotePlane & { wallet: string } }) => {
+      if (payload.wallet === myWallet) return;
+      setRemotePlanes(prev => {
+        const existing = prev.findIndex(p => p.wallet === payload.wallet);
+        const updated = { ...payload, lastSeen: Date.now() };
+        if (existing >= 0) {
+          const next = [...prev];
+          next[existing] = updated;
+          return next;
+        }
+        return [...prev, updated];
+      });
+    });
+
+    channel.subscribe();
+
+    const cleanupInterval = setInterval(() => {
+      setRemotePlanes(prev => prev.filter(p => Date.now() - p.lastSeen < 5000));
+    }, 3000);
+
+    return () => {
+      clearInterval(cleanupInterval);
+      channel.unsubscribe();
+    };
+  }, [myWallet]);
+
+  // Broadcast own position every 100ms when active
+  useEffect(() => {
+    if (!active || !myWallet) return;
+
+    const interval = setInterval(() => {
+      const pos = positionRef.current;
+      if (!pos || !channelRef.current) return;
+      channelRef.current.send({
+        type: "broadcast",
+        event: "plane-position",
+        payload: { wallet: myWallet, ...pos, lastSeen: Date.now() },
+      });
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, [active, myWallet, positionRef]);
+
+  return (
+    <>
+      {remotePlanes.map(plane => (
+        <RemotePlaneMesh key={plane.wallet} plane={plane} />
+      ))}
+    </>
+  );
+}

package/src/components/NetworkStats.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface Stats {
+  slot: number;
+  epoch: number;
+  epochProgress: string;
+  tps: number;
+}
+
+export default function NetworkStats() {
+  const [stats, setStats] = useState<Stats | null>(null);
+  const [prevTps, setPrevTps] = useState(0);
+
+  useEffect(() => {
+    async function fetchStats() {
+      try {
+        const res = await fetch("/api/network-stats");
+        if (!res.ok) return;
+        const data = await res.json();
+        setStats((prev) => {
+          if (prev) setPrevTps(prev.tps);
+          return data;
+        });
+      } catch {
+        // silently fail
+      }
+    }
+
+    fetchStats();
+    const interval = setInterval(fetchStats, 10000); // every 10s
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!stats) return null;
+
+  const tpsDelta = stats.tps - prevTps;
+  const tpsColor =
+    tpsDelta > 0 ? "text-green-300/70" : tpsDelta < 0 ? "text-red-300/70" : "text-white/50";
+
+  return (
+    <div className="absolute bottom-20 sm:bottom-16 right-3 sm:right-40 z-10 bg-black/50 backdrop-blur-xl border border-white/[0.08] rounded-2xl px-3.5 py-2.5 text-xs flex gap-4 items-center">
+      {/* TPS */}
+      <div className="flex flex-col items-center">
+        <span className="text-white/25 text-[9px] uppercase tracking-wider">TPS</span>
+        <span className={`font-mono font-semibold text-sm tabular-nums ${tpsColor}`}>
+          {stats.tps.toLocaleString()}
+        </span>
+      </div>
+
+      {/* Divider */}
+      <div className="w-px h-6 bg-white/[0.08]" />
+
+      {/* Slot */}
+      <div className="flex flex-col items-center">
+        <span className="text-white/25 text-[9px] uppercase tracking-wider">Slot</span>
+        <span className="font-mono text-white/50 text-[11px] tabular-nums">
+          {stats.slot.toLocaleString()}
+        </span>
+      </div>
+
+      {/* Divider */}
+      <div className="w-px h-6 bg-white/[0.08]" />
+
+      {/* Epoch */}
+      <div className="flex flex-col items-center">
+        <span className="text-white/25 text-[9px] uppercase tracking-wider">
+          Epoch {stats.epoch}
+        </span>
+        <div className="w-14 h-1.5 bg-white/[0.06] rounded-full overflow-hidden mt-1">
+          <div
+            className="h-full rounded-full transition-all duration-1000"
+            style={{
+              width: `${stats.epochProgress}%`,
+              background: "linear-gradient(90deg, #6366f1, #E35930)",
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/NewBuildingSpotlight.tsx

@@ -0,0 +1,93 @@
+"use client";
+import { useRef, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+
+interface NewBuildingSpotlightProps {
+  position: [number, number, number];
+  buildingHeight: number;
+}
+
+/**
+ * Dramatic spotlight + ring for newly placed buildings.
+ * Pulses brightly then fades over ~6 seconds.
+ */
+export default function NewBuildingSpotlight({ position, buildingHeight }: NewBuildingSpotlightProps) {
+  const groupRef = useRef<THREE.Group>(null);
+  const beamRef = useRef<THREE.Mesh>(null);
+  const glowRef = useRef<THREE.PointLight>(null);
+  const ringRef = useRef<THREE.Mesh>(null);
+  const startTime = useRef(Date.now());
+
+  const beamMat = useMemo(() => new THREE.MeshBasicMaterial({
+    color: "#E35930",
+    transparent: true,
+    opacity: 0.25,
+    side: THREE.DoubleSide,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+  }), []);
+
+  const ringMat = useMemo(() => new THREE.MeshBasicMaterial({
+    color: "#E35930",
+    transparent: true,
+    opacity: 0.4,
+    side: THREE.DoubleSide,
+    depthWrite: false,
+    blending: THREE.AdditiveBlending,
+  }), []);
+
+  useFrame(() => {
+    if (!groupRef.current) return;
+    const elapsed = (Date.now() - startTime.current) / 1000;
+
+    // Fade out after 4 seconds
+    const fade = elapsed < 4 ? 1 : Math.max(0, 1 - (elapsed - 4) / 2);
+
+    if (fade <= 0) {
+      groupRef.current.visible = false;
+      return;
+    }
+
+    groupRef.current.visible = true;
+
+    if (beamRef.current) {
+      beamMat.opacity = 0.2 * fade * (0.7 + 0.3 * Math.sin(elapsed * 4));
+    }
+    if (glowRef.current) {
+      glowRef.current.intensity = 15 * fade * (0.7 + 0.3 * Math.sin(elapsed * 4));
+    }
+    if (ringRef.current) {
+      const scale = 1 + elapsed * 1.5;
+      ringRef.current.scale.setScalar(Math.min(scale, 4));
+      ringMat.opacity = 0.5 * fade * Math.max(0, 1 - elapsed * 0.12);
+    }
+  });
+
+  const beamHeight = Math.max(100, buildingHeight + 80);
+  const beamY = buildingHeight + beamHeight / 2;
+
+  return (
+    <group ref={groupRef} position={position}>
+      {/* Vertical beam */}
+      <mesh ref={beamRef} material={beamMat} position={[0, beamY - position[1], 0]}>
+        <cylinderGeometry args={[0.15, 2.0, beamHeight, 8, 1, true]} />
+      </mesh>
+
+      {/* Pulsing ring at building top */}
+      <mesh ref={ringRef} material={ringMat} position={[0, buildingHeight - position[1] + 1, 0]} rotation={[Math.PI / 2, 0, 0]}>
+        <ringGeometry args={[1.5, 2.5, 24]} />
+      </mesh>
+
+      {/* Point light glow */}
+      <pointLight
+        ref={glowRef}
+        position={[0, buildingHeight - position[1] + 2, 0]}
+        color="#E35930"
+        intensity={15}
+        distance={50}
+        decay={2}
+      />
+    </group>
+  );
+}

package/src/components/ParcelChallengeBanner.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+interface ParcelChallengeBannerProps {
+  walletConnected: boolean;
+  walletCount: number;
+}
+
+const TOTAL_REWARD_PARCELS = 16;
+const REWARD_PER_PARCEL = 0.069420;
+const TREASURY_ADDRESS = "76QQqndM87DBQAeAnRnjdMSiVBgBNrm55HMa88MRVc7p";
+
+interface TreasuryInfo {
+  balanceSOL: number;
+  parcelsRemaining: number;
+  solUsdValue: number | null;
+  solPrice: number | null;
+  totalUsdValue: number | null;
+}
+
+export default function ParcelChallengeBanner({ walletConnected, walletCount }: ParcelChallengeBannerProps) {
+  const [visible, setVisible] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+  const [treasury, setTreasury] = useState<TreasuryInfo | null>(null);
+
+  const slotsRemaining = Math.max(0, TOTAL_REWARD_PARCELS - walletCount);
+  const allClaimed = slotsRemaining === 0;
+
+  // Fetch live treasury balance
+  useEffect(() => {
+    async function fetchTreasury() {
+      try {
+        const res = await fetch("/api/treasury");
+        if (res.ok) {
+          const data = await res.json();
+          setTreasury({
+            balanceSOL: data.balanceSOL,
+            parcelsRemaining: data.parcelsRemaining,
+            solUsdValue: data.solUsdValue ?? null,
+            solPrice: data.solPrice ?? null,
+            totalUsdValue: data.totalUsdValue ?? null,
+          });
+        }
+      } catch { /* silent */ }
+    }
+    fetchTreasury();
+    const interval = setInterval(fetchTreasury, 30000); // refresh every 30s
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (sessionStorage.getItem("parcel-banner-dismissed")) return;
+      setVisible(true);
+    }, walletConnected ? 1000 : 3000);
+    return () => clearTimeout(timer);
+  }, [walletConnected]);
+
+  if (!visible || dismissed) return null;
+
+  function handleDismiss() {
+    setDismissed(true);
+    sessionStorage.setItem("parcel-banner-dismissed", "1");
+  }
+
+  const treasuryBalance = treasury?.balanceSOL ?? null;
+  const fundedParcels = treasury?.parcelsRemaining ?? slotsRemaining;
+  const depleted = treasuryBalance !== null && treasuryBalance < REWARD_PER_PARCEL;
+  const solPrice = treasury?.solPrice ?? null;
+  const treasuryUsd = treasury?.solUsdValue ?? null;
+  const parcelUsd = solPrice !== null ? (REWARD_PER_PARCEL * solPrice) : null;
+
+  return (
+    <div className="fixed top-20 left-1/2 -translate-x-1/2 z-30 animate-[fadeSlideDown_0.5s_ease-out] w-[95vw] max-w-lg">
+      <div className="relative overflow-hidden bg-gradient-to-r from-amber-900/95 via-yellow-900/90 to-orange-900/95 backdrop-blur-2xl border border-amber-500/30 rounded-2xl shadow-2xl shadow-amber-900/40">
+        {/* Animated shine */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute -top-1/2 -left-1/2 w-full h-full bg-gradient-to-br from-white/5 to-transparent rotate-12 animate-[shimmer_3s_ease-in-out_infinite]" />
+        </div>
+
+        {/* Close */}
+        <button
+          onClick={handleDismiss}
+          className="absolute top-3 right-3 w-7 h-7 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white/40 hover:text-white/70 text-sm transition-all cursor-pointer z-10"
+        >
+          ✕
+        </button>
+
+        <div className="px-5 py-4">
+          {/* Header */}
+          <div className="flex items-start gap-3 mb-3">
+            <div className="text-3xl mt-0.5 flex-shrink-0 animate-bounce" style={{ animationDuration: "2s" }}>
+              💎
+            </div>
+            <div>
+              <h2 className="text-base font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-amber-200 via-yellow-300 to-amber-200 tracking-tight leading-tight">
+                0.069420 SOL TREASURE HUNT
+              </h2>
+              <p className="text-[11px] text-amber-300/60 mt-0.5">
+                Hidden rewards in city parcels — claim yours first!
+              </p>
+            </div>
+          </div>
+
+          {/* Stats grid */}
+          <div className="grid grid-cols-4 gap-1.5 mb-3">
+            <div className="bg-black/30 rounded-xl px-2 py-2 text-center border border-amber-500/10">
+              <p className="text-[7px] uppercase tracking-wider text-amber-400/40 mb-0.5">Per Parcel</p>
+              <p className="text-xs font-bold text-amber-200 tabular-nums">0.069420</p>
+              <p className="text-[7px] text-amber-400/30">
+                {parcelUsd !== null ? `≈ $${parcelUsd.toFixed(2)}` : 'SOL'}
+              </p>
+            </div>
+            <div className="bg-black/30 rounded-xl px-2 py-2 text-center border border-amber-500/10">
+              <p className="text-[7px] uppercase tracking-wider text-amber-400/40 mb-0.5">Total</p>
+              <p className="text-xs font-bold text-amber-200 tabular-nums">{TOTAL_REWARD_PARCELS}</p>
+              <p className="text-[7px] text-amber-400/30">parcels</p>
+            </div>
+            <div className="bg-black/30 rounded-xl px-2 py-2 text-center border border-amber-500/10">
+              <p className="text-[7px] uppercase tracking-wider text-amber-400/40 mb-0.5">Can Fund</p>
+              <p className={`text-xs font-bold tabular-nums ${depleted ? 'text-red-400' : 'text-emerald-400'}`}>
+                {fundedParcels}
+              </p>
+              <p className="text-[7px] text-amber-400/30">{depleted ? 'empty' : 'left'}</p>
+            </div>
+            <div className="bg-black/30 rounded-xl px-2 py-2 text-center border border-amber-500/10">
+              <p className="text-[7px] uppercase tracking-wider text-amber-400/40 mb-0.5">Treasury</p>
+              <p className="text-xs font-bold text-amber-200 tabular-nums">
+                {treasuryBalance !== null ? treasuryBalance.toFixed(4) : '...'}
+              </p>
+              <p className="text-[7px] text-amber-400/30">
+                {treasuryUsd !== null ? `≈ $${treasuryUsd.toFixed(2)}` : 'SOL'}
+              </p>
+            </div>
+          </div>
+
+          {/* SOL price ticker */}
+          {solPrice !== null && (
+            <div className="flex items-center justify-center gap-2 mb-2">
+              <span className="text-[8px] text-amber-400/30">SOL/USD</span>
+              <span className="text-[10px] font-bold text-amber-200/70 tabular-nums">
+                ${solPrice.toFixed(2)}
+              </span>
+              <span className="text-[8px] text-amber-400/20">via Helius</span>
+            </div>
+          )}
+
+          {/* Treasury wallet address */}
+          <div className="bg-black/20 rounded-lg px-3 py-1.5 mb-3 border border-amber-500/8 flex items-center gap-2">
+            <span className="text-[9px] text-amber-400/40 whitespace-nowrap">Treasury:</span>
+            <a
+              href={`https://solscan.io/account/${TREASURY_ADDRESS}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-[9px] text-amber-300/50 hover:text-amber-200/80 font-mono truncate transition-colors"
+            >
+              {TREASURY_ADDRESS}
+            </a>
+            <span className="text-[9px]">🔗</span>
+          </div>
+
+          {/* How it works */}
+          <div className="bg-black/20 rounded-xl px-3 py-2.5 border border-amber-500/8 mb-3">
+            <p className="text-[9px] uppercase tracking-wider text-amber-400/40 mb-1.5 font-medium">How It Works</p>
+            <div className="space-y-1 text-[11px] text-amber-200/70">
+              <p className="flex items-center gap-2">
+                <span className="text-sm">1️⃣</span>
+                <span>Connect your Solana wallet</span>
+              </p>
+              <p className="flex items-center gap-2">
+                <span className="text-sm">2️⃣</span>
+                <span>Your building is generated in the city</span>
+              </p>
+              <p className="flex items-center gap-2">
+                <span className="text-sm">3️⃣</span>
+                <span>If you&apos;re in the <strong className="text-amber-200">first {TOTAL_REWARD_PARCELS}</strong>, your parcel has hidden SOL!</span>
+              </p>
+              <p className="flex items-center gap-2">
+                <span className="text-sm">4️⃣</span>
+                <span>Click <strong className="text-amber-200">&quot;Claim Reward&quot;</strong> to receive 0.069420 SOL</span>
+              </p>
+            </div>
+          </div>
+
+          {/* CTA */}
+          {!walletConnected ? (
+            <div className="text-center">
+              <p className="text-xs text-amber-300/80 font-medium animate-pulse">
+                ⚡ Connect your wallet to check if you qualify! ⚡
+              </p>
+            </div>
+          ) : depleted ? (
+            <div className="text-center py-1 bg-red-500/10 rounded-xl border border-red-500/10">
+              <p className="text-xs text-red-300/70 font-medium">
+                🚫 Treasury depleted — all rewards have been claimed!
+              </p>
+            </div>
+          ) : allClaimed ? (
+            <div className="text-center py-1 bg-red-500/10 rounded-xl border border-red-500/10">
+              <p className="text-xs text-red-300/70 font-medium">
+                🚫 All {TOTAL_REWARD_PARCELS} parcel slots filled!
+              </p>
+            </div>
+          ) : (
+            <div className="text-center">
+              <p className="text-xs text-emerald-300/80 font-medium">
+                ✅ {fundedParcels} reward{fundedParcels !== 1 ? 's' : ''} still available — claim your parcel!
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Progress bar */}
+        <div className="h-1 bg-black/30">
+          <div
+            className="h-full transition-all duration-1000"
+            style={{
+              width: `${treasuryBalance !== null
+                ? Math.max(0, 100 - (treasuryBalance / (TOTAL_REWARD_PARCELS * REWARD_PER_PARCEL)) * 100)
+                : 0}%`,
+              background: depleted
+                ? "linear-gradient(90deg, #ef4444, #f87171)"
+                : "linear-gradient(90deg, #f59e0b, #eab308, #f59e0b)",
+            }}
+          />
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes fadeSlideDown {
+          from { opacity: 0; transform: translate(-50%, -20px); }
+          to   { opacity: 1; transform: translate(-50%, 0); }
+        }
+        @keyframes shimmer {
+          0%, 100% { transform: translateX(-100%) rotate(12deg); }
+          50%      { transform: translateX(200%) rotate(12deg); }
+        }
+      `}</style>
+    </div>
+  );
+}