solanapolis 1.0.0

package/src/components/ParcelReward.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+interface ParcelRewardProps {
+  walletAddress: string | null;
+  /** Called when the reward is claimed */
+  onClaimed?: (amount: number) => void;
+}
+
+interface RewardInfo {
+  eligible: boolean;
+  rank?: number;
+  totalSlots?: number;
+  rewardSOL?: number;
+  claimed?: boolean;
+  message?: string;
+}
+
+/**
+ * Parcel Reward — treasure chest that appears for early wallet holders (first 50).
+ * Shows a gold pulsing reward popup when their building is generated.
+ * They can click to claim the hidden SOL from the treasury.
+ */
+export default function ParcelReward({ walletAddress, onClaimed }: ParcelRewardProps) {
+  const [reward, setReward] = useState<RewardInfo | null>(null);
+  const [claiming, setClaiming] = useState(false);
+  const [claimResult, setClaimResult] = useState<string | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  // Check reward eligibility when wallet connects
+  useEffect(() => {
+    if (!walletAddress) {
+      setReward(null);
+      setDismissed(false);
+      setClaimResult(null);
+      return;
+    }
+
+    async function checkReward() {
+      try {
+        const res = await fetch(`/api/parcel-reward?wallet=${walletAddress}`);
+        const data = await res.json();
+        setReward(data);
+        if (data.eligible && !data.claimed) {
+          // Delay entrance for dramatic effect
+          setTimeout(() => setVisible(true), 2000);
+        }
+      } catch {
+        // Silently fail
+      }
+    }
+
+    checkReward();
+  }, [walletAddress]);
+
+  const handleClaim = useCallback(async () => {
+    if (!walletAddress || claiming) return;
+    setClaiming(true);
+    setClaimResult(null);
+
+    try {
+      const res = await fetch("/api/parcel-reward", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ wallet: walletAddress, action: "claim" }),
+      });
+      const data = await res.json();
+
+      if (data.success) {
+        setClaimResult(`🎉 ${data.amount} SOL sent!`);
+        setReward((prev) => prev ? { ...prev, claimed: true } : prev);
+        onClaimed?.(data.amount);
+
+        // Auto-dismiss after showing success
+        setTimeout(() => setDismissed(true), 5000);
+      } else {
+        setClaimResult(data.error || "Claim failed");
+      }
+    } catch {
+      setClaimResult("Network error — try again");
+    } finally {
+      setClaiming(false);
+    }
+  }, [walletAddress, claiming, onClaimed]);
+
+  // Don't render if not eligible, already dismissed, or no reward
+  if (!reward?.eligible || dismissed || !visible) return null;
+
+  const { rank, totalSlots, rewardSOL, claimed } = reward;
+
+  return (
+    <div className="fixed bottom-32 left-1/2 -translate-x-1/2 z-40 animate-[slideUp_0.6s_ease-out]">
+      <div className="relative bg-gradient-to-br from-amber-900/90 via-yellow-900/80 to-amber-800/90 backdrop-blur-2xl border border-amber-500/30 rounded-3xl px-6 py-5 shadow-2xl shadow-amber-900/50 min-w-[320px] max-w-[400px]">
+        {/* Glow effect */}
+        <div className="absolute -inset-1 bg-gradient-to-r from-amber-400/20 via-yellow-400/10 to-amber-500/20 rounded-3xl blur-xl -z-10 animate-pulse" />
+
+        {/* Close button */}
+        <button
+          onClick={() => setDismissed(true)}
+          className="absolute top-3 right-3 w-6 h-6 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 text-white/40 hover:text-white/70 text-xs transition-all cursor-pointer"
+        >
+          ✕
+        </button>
+
+        {/* Header */}
+        <div className="flex items-center gap-3 mb-3">
+          <div className="text-3xl animate-bounce">🎁</div>
+          <div>
+            <h3 className="text-sm font-bold text-amber-200 tracking-tight">
+              Hidden Parcel Reward!
+            </h3>
+            <p className="text-[10px] text-amber-300/50">
+              Parcel #{rank} of {totalSlots} • Early Builder Bonus
+            </p>
+          </div>
+        </div>
+
+        {/* Reward amount */}
+        <div className="bg-black/30 rounded-2xl px-4 py-3 mb-3 border border-amber-500/10">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-[9px] uppercase tracking-wider text-amber-400/40 mb-0.5">
+                Hidden in your parcel
+              </p>
+              <p className="text-2xl font-bold text-amber-200 tabular-nums">
+                {rewardSOL} <span className="text-base text-amber-400/60">SOL</span>
+              </p>
+            </div>
+            <div className="text-4xl opacity-80">
+              💰
+            </div>
+          </div>
+        </div>
+
+        {/* Claim button or status */}
+        {claimResult ? (
+          <div className={`text-center py-2 rounded-xl text-sm font-medium ${
+            claimResult.includes("🎉")
+              ? "bg-emerald-500/20 text-emerald-300 border border-emerald-500/20"
+              : "bg-red-500/20 text-red-300 border border-red-500/20"
+          }`}>
+            {claimResult}
+          </div>
+        ) : claimed ? (
+          <div className="text-center py-2 bg-emerald-500/10 rounded-xl text-sm text-emerald-300/70 border border-emerald-500/10">
+            ✅ Already claimed
+          </div>
+        ) : (
+          <button
+            onClick={handleClaim}
+            disabled={claiming}
+            className={`w-full py-3 rounded-xl text-sm font-bold transition-all cursor-pointer ${
+              claiming
+                ? "bg-amber-600/30 text-amber-300/50"
+                : "bg-gradient-to-r from-amber-500 to-yellow-500 hover:from-amber-400 hover:to-yellow-400 text-black shadow-lg shadow-amber-500/30 hover:shadow-amber-400/40 active:scale-95"
+            }`}
+          >
+            {claiming ? (
+              <span className="flex items-center justify-center gap-2">
+                <span className="w-4 h-4 border-2 border-amber-300/30 border-t-amber-300 rounded-full animate-spin" />
+                Claiming...
+              </span>
+            ) : (
+              "⚡ Claim Reward"
+            )}
+          </button>
+        )}
+
+        {/* Fine print */}
+        <p className="text-[8px] text-amber-400/25 text-center mt-2">
+          First {totalSlots} wallets get 0.069420 SOL hidden in their city parcels
+        </p>
+      </div>
+
+      <style jsx>{`
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translate(-50%, 20px);
+          }
+          to {
+            opacity: 1;
+            transform: translate(-50%, 0);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}

package/src/components/Park.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+interface ParkProps {
+  position: [number, number, number];
+  width: number;
+  depth: number;
+}
+
+/**
+ * A park block — green ground with walking paths.
+ * Trees are rendered externally via InstancedTrees for performance.
+ */
+export default function Park({ position, width, depth }: ParkProps) {
+  return (
+    <group>
+      {/* Green ground for the park */}
+      <mesh
+        position={[position[0], 0.01, position[2]]}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <planeGeometry args={[width, depth]} />
+        <meshStandardMaterial color="#2d6b2d" />
+      </mesh>
+
+      {/* Walking path through the park */}
+      <mesh
+        position={[position[0], 0.03, position[2]]}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <planeGeometry args={[0.8, depth * 0.85]} />
+        <meshStandardMaterial color="#6b6055" />
+      </mesh>
+      <mesh
+        position={[position[0], 0.03, position[2]]}
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        <planeGeometry args={[width * 0.85, 0.8]} />
+        <meshStandardMaterial color="#6b6055" />
+      </mesh>
+    </group>
+  );
+}

package/src/components/PhantomWrapper.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { PhantomProvider, darkTheme, AddressType } from "@phantom/react-sdk";
+
+export default function PhantomWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <PhantomProvider
+      config={{
+        providers: ["google", "apple", "injected"],
+        appId: "a09f21aa-0afd-4493-a64d-ff32d210f47a",
+        addressTypes: [AddressType.solana],
+        authOptions: {
+          redirectUrl: "https://solanapolis.com/auth/callback",
+        },
+      }}
+      theme={darkTheme}
+      appName="solanapolis"
+      appIcon="/helius-icon.svg"
+    >
+      {children}
+    </PhantomProvider>
+  );
+}

package/src/components/PixelStreamViewer.tsx

@@ -0,0 +1,335 @@
+"use client";
+
+/**
+ * PixelStreamViewer — embeds the UE5 SOLANApolis build via Pixel Streaming.
+ *
+ * The UE5 process runs a WebRTC signaling server (default ws://localhost:8888).
+ * This component negotiates the WebRTC offer/answer, receives the H.264 stream,
+ * and forwards keyboard/mouse/touch events back to UE5 using the standard
+ * Pixel Streaming input protocol.
+ *
+ * Setup:
+ *  1. Build and launch the UE5 SOLANApolis project with -PixelStreamingIP=0.0.0.0 -PixelStreamingPort=8888
+ *  2. Set NEXT_PUBLIC_PIXEL_STREAMING_URL in .env.local (ws://your-server:8888)
+ *  3. Drop <PixelStreamViewer /> anywhere in your scene
+ */
+
+import { useEffect, useRef, useState, useCallback } from "react";
+
+const SIGNALING_URL =
+  process.env.NEXT_PUBLIC_PIXEL_STREAMING_URL ?? "ws://localhost:8888";
+
+// ── Pixel Streaming message types ────────────────────────────────────────────
+
+const PS_MSG = {
+  IceCandidate: 50,
+  Answer: 51,
+  // UE → browser
+  Config: 100,
+  PlayerCount: 101,
+  QualityControl: 102,
+  // Input (browser → UE)
+  UIInteraction: 50,
+  KeyDown: 60,
+  KeyUp: 61,
+  MouseMove: 70,
+  MouseDown: 71,
+  MouseUp: 72,
+  MouseWheel: 73,
+  TouchStart: 80,
+  TouchEnd: 81,
+  TouchMove: 82,
+} as const;
+
+function encodeKeyDown(keyCode: number, isRepeat: boolean): Uint8Array {
+  const buf = new Uint8Array(4);
+  buf[0] = PS_MSG.KeyDown;
+  buf[1] = keyCode;
+  buf[2] = isRepeat ? 1 : 0;
+  buf[3] = 0;
+  return buf;
+}
+
+function encodeKeyUp(keyCode: number): Uint8Array {
+  const buf = new Uint8Array(3);
+  buf[0] = PS_MSG.KeyUp;
+  buf[1] = keyCode;
+  buf[2] = 0;
+  return buf;
+}
+
+function encodeMouseMove(
+  x: number, y: number, dx: number, dy: number,
+  width: number, height: number
+): Uint8Array {
+  const buf = new DataView(new ArrayBuffer(9));
+  buf.setUint8(0, PS_MSG.MouseMove);
+  buf.setUint16(1, Math.round((x / width) * 65535), true);
+  buf.setUint16(3, Math.round((y / height) * 65535), true);
+  buf.setInt16(5, Math.round(dx), true);
+  buf.setInt16(7, Math.round(dy), true);
+  return new Uint8Array(buf.buffer);
+}
+
+function encodeMouseButton(type: number, button: number, x: number, y: number,
+  width: number, height: number): Uint8Array {
+  const buf = new DataView(new ArrayBuffer(6));
+  buf.setUint8(0, type);
+  buf.setUint8(1, button);
+  buf.setUint16(2, Math.round((x / width) * 65535), true);
+  buf.setUint16(4, Math.round((y / height) * 65535), true);
+  return new Uint8Array(buf.buffer);
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+interface Props {
+  /** Called when UE5 stream is connected */
+  onConnected?: () => void;
+  /** Called when stream disconnects */
+  onDisconnected?: () => void;
+  className?: string;
+}
+
+type StreamStatus = "idle" | "connecting" | "connected" | "error";
+
+export default function PixelStreamViewer({ onConnected, onDisconnected, className }: Props) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const pcRef = useRef<RTCPeerConnection | null>(null);
+  const dcRef = useRef<RTCDataChannel | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [status, setStatus] = useState<StreamStatus>("idle");
+  const [error, setError] = useState<string>("");
+
+  // ── WebRTC + WebSocket setup ───────────────────────────────────────────────
+
+  const connect = useCallback(() => {
+    setStatus("connecting");
+    setError("");
+
+    const ws = new WebSocket(SIGNALING_URL);
+    wsRef.current = ws;
+
+    const pc = new RTCPeerConnection({
+      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
+    });
+    pcRef.current = pc;
+
+    // Data channel for input events (UE5 expects channel named "cirrus")
+    const dc = pc.createDataChannel("cirrus", { ordered: true });
+    dcRef.current = dc;
+
+    // ── Video track ─────────────────────────────────────────────────────────
+    pc.ontrack = (evt) => {
+      if (videoRef.current && evt.streams[0]) {
+        videoRef.current.srcObject = evt.streams[0];
+        videoRef.current.play().catch(() => {/* autoplay blocked — user must click */ });
+        setStatus("connected");
+        onConnected?.();
+      }
+    };
+
+    // ── ICE ─────────────────────────────────────────────────────────────────
+    pc.onicecandidate = (evt) => {
+      if (evt.candidate && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: "iceCandidate", candidate: evt.candidate }));
+      }
+    };
+
+    pc.oniceconnectionstatechange = () => {
+      if (pc.iceConnectionState === "disconnected" || pc.iceConnectionState === "failed") {
+        setStatus("error");
+        setError("WebRTC connection lost");
+        onDisconnected?.();
+      }
+    };
+
+    // ── Signaling messages ───────────────────────────────────────────────────
+    ws.onmessage = async (evt) => {
+      let msg: Record<string, unknown>;
+      try { msg = JSON.parse(evt.data as string); } catch { return; }
+
+      if (msg.type === "config") {
+        // UE5 sends config first — then we create an offer
+        const offer = await pc.createOffer({ offerToReceiveVideo: true, offerToReceiveAudio: true });
+        await pc.setLocalDescription(offer);
+        ws.send(JSON.stringify({ type: "offer", sdp: pc.localDescription }));
+      } else if (msg.type === "answer") {
+        const answer = (msg as unknown as { sdp?: RTCSessionDescriptionInit }).sdp;
+        if (!answer) return;
+        await pc.setRemoteDescription(new RTCSessionDescription(answer));
+      } else if (msg.type === "iceCandidate") {
+        try {
+          await pc.addIceCandidate(new RTCIceCandidate((msg.candidate as RTCIceCandidateInit)));
+        } catch { /* ignore */ }
+      }
+    };
+
+    ws.onerror = () => {
+      setStatus("error");
+      setError(`Cannot reach UE5 at ${SIGNALING_URL} — is the game running?`);
+    };
+
+    ws.onclose = () => {
+      if (status !== "connected") {
+        setStatus("error");
+        setError("Signaling server closed connection");
+      }
+    };
+  }, [onConnected, onDisconnected, status]);
+
+  const disconnect = useCallback(() => {
+    dcRef.current?.close();
+    pcRef.current?.close();
+    wsRef.current?.close();
+    if (videoRef.current) videoRef.current.srcObject = null;
+    setStatus("idle");
+    onDisconnected?.();
+  }, [onDisconnected]);
+
+  useEffect(() => {
+    return () => { disconnect(); };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Input forwarding ──────────────────────────────────────────────────────
+
+  const sendInput = useCallback((data: Uint8Array) => {
+    if (dcRef.current?.readyState === "open") {
+      const payload = new Uint8Array(data.byteLength);
+      payload.set(data);
+      dcRef.current.send(payload);
+    }
+  }, []);
+
+  const getContainerSize = () => {
+    const el = containerRef.current;
+    return el ? { width: el.clientWidth, height: el.clientHeight } : { width: 1920, height: 1080 };
+  };
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    e.preventDefault();
+    sendInput(encodeKeyDown(e.keyCode, e.repeat));
+  }, [sendInput]);
+
+  const handleKeyUp = useCallback((e: React.KeyboardEvent) => {
+    e.preventDefault();
+    sendInput(encodeKeyUp(e.keyCode));
+  }, [sendInput]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    const { width, height } = getContainerSize();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    sendInput(encodeMouseMove(
+      e.clientX - rect.left, e.clientY - rect.top,
+      e.movementX, e.movementY,
+      width, height
+    ));
+  }, [sendInput]);
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    const { width, height } = getContainerSize();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    sendInput(encodeMouseButton(PS_MSG.MouseDown, e.button,
+      e.clientX - rect.left, e.clientY - rect.top, width, height));
+  }, [sendInput]);
+
+  const handleMouseUp = useCallback((e: React.MouseEvent) => {
+    const { width, height } = getContainerSize();
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    sendInput(encodeMouseButton(PS_MSG.MouseUp, e.button,
+      e.clientX - rect.left, e.clientY - rect.top, width, height));
+  }, [sendInput]);
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{ position: "relative", background: "#000", overflow: "hidden" }}
+      tabIndex={0}
+      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
+      onMouseMove={handleMouseMove}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      {/* Stream video */}
+      <video
+        ref={videoRef}
+        autoPlay
+        playsInline
+        muted={false}
+        style={{ width: "100%", height: "100%", objectFit: "cover", display: status === "connected" ? "block" : "none" }}
+      />
+
+      {/* Idle / loading overlay */}
+      {status !== "connected" && (
+        <div style={{
+          position: "absolute", inset: 0, display: "flex", flexDirection: "column",
+          alignItems: "center", justifyContent: "center", gap: 16,
+          background: "linear-gradient(135deg, #0a0a12 0%, #12091e 100%)",
+          color: "#fff",
+        }}>
+          {/* Logo */}
+          <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: "0.15em", color: "#E35930" }}>
+            SOLANApolis
+          </div>
+          <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", letterSpacing: "0.2em" }}>
+            UNREAL ENGINE 5 · PIXEL STREAMING
+          </div>
+
+          {status === "error" && (
+            <div style={{
+              marginTop: 8, padding: "8px 16px", background: "rgba(255,60,60,0.15)",
+              border: "1px solid rgba(255,60,60,0.3)", borderRadius: 8,
+              fontSize: 12, color: "#ff6b6b", maxWidth: 360, textAlign: "center",
+            }}>
+              {error}
+            </div>
+          )}
+
+          {status === "connecting" && (
+            <div style={{ fontSize: 12, color: "rgba(255,255,255,0.4)", letterSpacing: "0.15em" }}>
+              Connecting to UE5…
+            </div>
+          )}
+
+          <button
+            onClick={status === "connecting" ? disconnect : connect}
+            style={{
+              marginTop: 8, padding: "10px 28px",
+              background: status === "connecting" ? "rgba(255,255,255,0.08)" : "#E35930",
+              border: "none", borderRadius: 8, color: "#fff",
+              fontSize: 13, fontWeight: 600, cursor: "pointer", letterSpacing: "0.08em",
+            }}
+          >
+            {status === "connecting" ? "Cancel" : status === "error" ? "Retry" : "Launch UE5"}
+          </button>
+
+          <div style={{ fontSize: 10, color: "rgba(255,255,255,0.2)", textAlign: "center", maxWidth: 280 }}>
+            Requires UE5 SOLANApolis running with Pixel Streaming enabled
+          </div>
+        </div>
+      )}
+
+      {/* Connected HUD badge */}
+      {status === "connected" && (
+        <div style={{
+          position: "absolute", top: 12, right: 12,
+          display: "flex", alignItems: "center", gap: 6,
+          background: "rgba(0,0,0,0.6)", backdropFilter: "blur(8px)",
+          border: "1px solid rgba(227,89,48,0.3)", borderRadius: 20,
+          padding: "4px 10px", fontSize: 10, color: "rgba(255,255,255,0.7)",
+          pointerEvents: "none",
+        }}>
+          <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#4caf50", display: "inline-block" }} />
+          UE5 LIVE
+        </div>
+      )}
+    </div>
+  );
+}