solanapolis 1.0.0

package/src/components/TreasureGate.tsx

@@ -0,0 +1,505 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+
+interface TreasureGateProps {
+  walletAddress: string;
+  onEnterCity: () => void;
+}
+
+type GamePhase =
+  | "intro"        // show the gate UI
+  | "scratching"   // user is scratching / playing
+  | "transaction"  // dummy tx animation
+  | "reveal"       // result reveal animation
+  | "entering";    // cinematic city entry
+
+interface TxStep {
+  label: string;
+  done: boolean;
+  time?: string;
+}
+
+/** Generate a deterministic-looking fake tx hash */
+function fakeTxHash(seed: string): string {
+  let h = 0xdeadbeef;
+  for (let i = 0; i < seed.length; i++) h = Math.imul(h ^ seed.charCodeAt(i), 2654435761);
+  return Array.from({ length: 64 }, (_, i) => ((h >> (i % 28)) & 0xf).toString(16)).join("");
+}
+
+/** Deterministic "win" check based on wallet + timestamp-window (everyone wins for now) */
+function checkWin(_wallet: string): boolean {
+  // Always win — the idea is to hook them in. Can be tuned later.
+  return true;
+}
+
+const REWARD_SOL = 0.069420;
+
+const SLOT_SYMBOLS = ["💎", "🔥", "⚡", "🌟", "🎰", "💰", "🚀", "🎲"];
+
+export default function TreasureGate({ walletAddress, onEnterCity }: TreasureGateProps) {
+  const [phase, setPhase] = useState<GamePhase>("intro");
+  const [slotReels, setSlotReels] = useState<string[]>(["💎", "💎", "💎"]);
+  const [spinning, setSpinning] = useState(false);
+  const [won, setWon] = useState<boolean | null>(null);
+  const [txSteps, setTxSteps] = useState<TxStep[]>([]);
+  const [txHash, setTxHash] = useState("");
+  const [blockSlot, setBlockSlot] = useState(0);
+  const [txPhase, setTxPhase] = useState<"processing" | "confirmed" | "failed">("processing");
+  const [shakeClass, setShakeClass] = useState("");
+  const [particles, setParticles] = useState<Array<{ id: number; x: number; y: number; emoji: string }>>([]);
+  const reelTimers = useRef<NodeJS.Timeout[]>([]);
+  const particleId = useRef(0);
+
+  // Cleanup timers
+  useEffect(() => {
+    return () => reelTimers.current.forEach(t => clearTimeout(t));
+  }, []);
+
+  /** Play the slot machine */
+  const playSlots = useCallback(() => {
+    if (spinning) return;
+    setSpinning(true);
+    setPhase("scratching");
+
+    const isWin = checkWin(walletAddress);
+    const winSymbol = "💎";
+
+    // Rapid spin each reel then lock one by one
+    const spinInterval = 80;
+    const reelCount = 3;
+    const intervals: NodeJS.Timeout[] = [];
+
+    for (let r = 0; r < reelCount; r++) {
+      const spinId = setInterval(() => {
+        setSlotReels(prev => {
+          const next = [...prev];
+          next[r] = SLOT_SYMBOLS[Math.floor(Math.random() * SLOT_SYMBOLS.length)];
+          return next;
+        });
+      }, spinInterval);
+      intervals.push(spinId);
+
+      // Stop each reel after a staggered delay
+      const stopDelay = 1200 + r * 600;
+      const stopTimer = setTimeout(() => {
+        clearInterval(spinId);
+        setSlotReels(prev => {
+          const next = [...prev];
+          next[r] = isWin ? winSymbol : SLOT_SYMBOLS[Math.floor(Math.random() * SLOT_SYMBOLS.length)];
+          return next;
+        });
+
+        // Shake on lock
+        setShakeClass("animate-[slotShake_0.15s_ease-in-out]");
+        setTimeout(() => setShakeClass(""), 200);
+
+        // After last reel stops, start tx phase
+        if (r === reelCount - 1) {
+          setTimeout(() => {
+            setWon(isWin);
+            setSpinning(false);
+            startTransaction(isWin);
+          }, 600);
+        }
+      }, stopDelay);
+      reelTimers.current.push(stopTimer);
+    }
+
+    reelTimers.current.push(...intervals);
+  }, [spinning, walletAddress]);
+
+  /** Dummy transaction animation */
+  const startTransaction = useCallback(async (isWin: boolean) => {
+    setPhase("transaction");
+    const hash = fakeTxHash(walletAddress + Date.now());
+    const slot = 280_000_000 + Math.floor(Math.random() * 1_000_000);
+    setTxHash(hash);
+    setBlockSlot(slot);
+    setTxPhase("processing");
+
+    const steps: TxStep[] = [
+      { label: "Initiating transaction...", done: false },
+      { label: "Signing with wallet keypair", done: false },
+      { label: "Broadcasting to Solana mainnet", done: false },
+      { label: "Awaiting block confirmation", done: false },
+      { label: isWin ? "Transferring 0.069420 SOL reward" : "Verifying parcel status", done: false },
+    ];
+    setTxSteps([...steps]);
+
+    // Animate each step
+    for (let i = 0; i < steps.length; i++) {
+      await new Promise<void>(resolve => setTimeout(resolve, 700 + Math.random() * 500));
+      steps[i].done = true;
+      steps[i].time = `${(Math.random() * 0.5 + 0.08).toFixed(3)}s`;
+      setTxSteps([...steps]);
+    }
+
+    // Final result
+    await new Promise<void>(resolve => setTimeout(resolve, 800));
+    setTxPhase(isWin ? "confirmed" : "failed");
+
+    // Move to reveal phase
+    await new Promise<void>(resolve => setTimeout(resolve, 1500));
+    setPhase("reveal");
+
+    // Spawn confetti particles on win
+    if (isWin) {
+      const newParticles = Array.from({ length: 30 }, () => ({
+        id: ++particleId.current,
+        x: Math.random() * 100,
+        y: Math.random() * 100,
+        emoji: ["💎", "✨", "🎉", "💰", "⚡"][Math.floor(Math.random() * 5)],
+      }));
+      setParticles(newParticles);
+      setTimeout(() => setParticles([]), 3000);
+    }
+  }, [walletAddress]);
+
+  /** Enter the city */
+  const enterCity = useCallback(() => {
+    setPhase("entering");
+    setTimeout(() => onEnterCity(), 1500);
+  }, [onEnterCity]);
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center overflow-hidden"
+      style={{
+        background: "radial-gradient(ellipse at center, #1a0a2e 0%, #0a0612 50%, #000 100%)",
+      }}
+    >
+      {/* Animated background grid */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div
+          className="absolute inset-0 opacity-10"
+          style={{
+            backgroundImage: `
+              linear-gradient(rgba(227,89,48,0.3) 1px, transparent 1px),
+              linear-gradient(90deg, rgba(227,89,48,0.3) 1px, transparent 1px)
+            `,
+            backgroundSize: "60px 60px",
+            animation: "gridScroll 20s linear infinite",
+          }}
+        />
+        {/* Floating orbs */}
+        <div className="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-purple-600/10 blur-3xl animate-pulse" />
+        <div className="absolute bottom-1/4 right-1/4 w-48 h-48 rounded-full bg-[#E35930]/10 blur-3xl animate-pulse" style={{ animationDelay: "1s" }} />
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 rounded-full bg-amber-500/5 blur-3xl animate-pulse" style={{ animationDelay: "0.5s" }} />
+      </div>
+
+      {/* Confetti particles */}
+      {particles.map(p => (
+        <div
+          key={p.id}
+          className="absolute text-2xl pointer-events-none"
+          style={{
+            left: `${p.x}%`,
+            top: `${p.y}%`,
+            animation: "confettiFall 3s ease-out forwards",
+          }}
+        >
+          {p.emoji}
+        </div>
+      ))}
+
+      {/* Main content card */}
+      <div className={`relative z-10 w-[420px] max-w-[92vw] transition-all duration-700 ${
+        phase === "entering" ? "scale-150 opacity-0" : "scale-100 opacity-100"
+      }`}>
+        {/* Outer glow */}
+        <div className="absolute -inset-2 rounded-[2rem] opacity-50 blur-xl bg-gradient-to-br from-[#E35930]/30 via-purple-600/20 to-amber-500/30 animate-pulse" />
+
+        <div className="relative bg-gradient-to-b from-gray-900/95 to-black/98 backdrop-blur-3xl border border-white/10 rounded-[2rem] overflow-hidden shadow-2xl shadow-black/50">
+          {/* Scan line */}
+          <div className="absolute inset-0 overflow-hidden rounded-[2rem] pointer-events-none">
+            <div
+              className="absolute left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#E35930]/50 to-transparent"
+              style={{ animation: "scanLine 2.5s ease-in-out infinite" }}
+            />
+          </div>
+
+          {/* Header */}
+          <div className="relative px-6 pt-7 pb-4 text-center">
+            {/* Skip button */}
+            <button
+              onClick={enterCity}
+              className="absolute top-4 right-4 text-[10px] text-white/25 hover:text-white/60 transition-colors cursor-pointer uppercase tracking-wider"
+            >
+              Skip →
+            </button>
+
+            <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-[#E35930]/10 border border-[#E35930]/20 rounded-full mb-4">
+              <span className="w-2 h-2 rounded-full bg-[#E35930] animate-pulse" />
+              <span className="text-[10px] uppercase tracking-widest font-bold text-[#E35930]/80">
+                Solana Mainnet
+              </span>
+            </div>
+
+            <h1 className="text-2xl font-black tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-amber-200 via-yellow-300 to-amber-200 mb-1.5">
+              SOL TREASURE HUNT
+            </h1>
+            <p className="text-xs text-white/40">
+              Play to see if your parcel has hidden treasure before you enter the city
+            </p>
+
+            {/* Wallet address chip */}
+            <div className="mt-3 inline-flex items-center gap-2 px-3 py-1.5 bg-white/[0.04] border border-white/[0.06] rounded-xl">
+              <div className="w-2 h-2 rounded-full bg-emerald-400" />
+              <span className="text-[10px] font-mono text-white/40">
+                {walletAddress.slice(0, 6)}...{walletAddress.slice(-4)}
+              </span>
+            </div>
+          </div>
+
+          {/* ─── INTRO: Slot Machine ─── */}
+          {(phase === "intro" || phase === "scratching") && (
+            <div className="px-6 pb-6">
+              {/* Slot machine display */}
+              <div className="relative bg-black/50 border border-white/[0.08] rounded-2xl p-4 mb-4">
+                <div className="absolute -inset-px rounded-2xl bg-gradient-to-b from-amber-500/10 to-transparent pointer-events-none" />
+
+                <p className="text-[8px] uppercase tracking-[0.2em] text-amber-400/40 text-center mb-3 font-bold">
+                  ✦ MATCH 3 TO WIN {REWARD_SOL} SOL ✦
+                </p>
+
+                <div className={`flex items-center justify-center gap-3 ${shakeClass}`}>
+                  {slotReels.map((symbol, i) => (
+                    <div
+                      key={i}
+                      className={`w-20 h-20 sm:w-24 sm:h-24 rounded-2xl border-2 flex items-center justify-center text-4xl sm:text-5xl transition-all duration-200 ${
+                        spinning
+                          ? "border-[#E35930]/40 bg-[#E35930]/5 shadow-lg shadow-[#E35930]/10"
+                          : won === true
+                            ? "border-emerald-400/50 bg-emerald-500/10 shadow-lg shadow-emerald-500/20"
+                            : won === false
+                              ? "border-red-400/50 bg-red-500/10"
+                              : "border-white/10 bg-white/[0.03]"
+                      }`}
+                    >
+                      <span className={spinning ? "animate-bounce" : won !== null ? "animate-[popIn_0.4s_ease-out]" : ""}>
+                        {symbol}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+
+                {/* Win line */}
+                {won === true && (
+                  <div className="absolute left-6 right-6 top-1/2 -translate-y-1/2 h-0.5 bg-gradient-to-r from-transparent via-emerald-400/60 to-transparent animate-pulse pointer-events-none" />
+                )}
+              </div>
+
+              {/* Reward preview */}
+              <div className="flex items-center justify-between bg-amber-500/5 border border-amber-500/10 rounded-xl px-4 py-2.5 mb-4">
+                <div>
+                  <p className="text-[8px] uppercase tracking-widest text-amber-400/40">Jackpot</p>
+                  <p className="text-lg font-black text-amber-200 tabular-nums">
+                    {REWARD_SOL} <span className="text-sm text-amber-400/60">SOL</span>
+                  </p>
+                </div>
+                <div className="text-3xl animate-bounce" style={{ animationDuration: "2s" }}>💎</div>
+              </div>
+
+              {/* Play button */}
+              {!spinning && won === null && (
+                <button
+                  onClick={playSlots}
+                  className="w-full group relative py-4 rounded-2xl text-base font-black text-white tracking-wide transition-all cursor-pointer active:scale-[0.97]"
+                  style={{
+                    background: "linear-gradient(135deg, #E35930 0%, #c94420 50%, #E35930 100%)",
+                    backgroundSize: "200% 200%",
+                    animation: "claimShimmer 3s ease infinite",
+                    boxShadow: "0 0 40px rgba(227,89,48,0.4), 0 0 80px rgba(227,89,48,0.15)",
+                  }}
+                >
+                  <div className="absolute -inset-1 rounded-2xl blur-md bg-gradient-to-r from-[#E35930]/40 to-purple-500/30 opacity-60 group-hover:opacity-80 transition-opacity" />
+                  <span className="relative flex items-center justify-center gap-2">
+                    🎰 SPIN TO WIN
+                  </span>
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* ─── TRANSACTION: Dummy TX animation ─── */}
+          {phase === "transaction" && (
+            <div className="px-6 pb-6">
+              {/* TX Hash */}
+              <div className="bg-black/40 rounded-xl px-4 py-3 mb-4 border border-white/[0.06]">
+                <p className="text-[8px] uppercase tracking-[0.15em] text-white/20 mb-1">TRANSACTION HASH</p>
+                <p className="text-[10px] font-mono text-[#E35930]/70 break-all leading-relaxed">
+                  {txHash.slice(0, 44)}...
+                </p>
+              </div>
+
+              {/* Block info */}
+              <div className="flex gap-3 mb-4">
+                <div className="flex-1 bg-black/30 rounded-xl px-3 py-2 border border-white/[0.05] text-center">
+                  <p className="text-[7px] uppercase tracking-wider text-white/20">Block</p>
+                  <p className="text-xs font-bold text-white/60 tabular-nums">{blockSlot.toLocaleString()}</p>
+                </div>
+                <div className="flex-1 bg-black/30 rounded-xl px-3 py-2 border border-white/[0.05] text-center">
+                  <p className="text-[7px] uppercase tracking-wider text-white/20">Finality</p>
+                  <p className="text-xs font-bold text-white/60">{txPhase === "confirmed" ? "Confirmed" : "Pending..."}</p>
+                </div>
+                <div className="flex-1 bg-black/30 rounded-xl px-3 py-2 border border-white/[0.05] text-center">
+                  <p className="text-[7px] uppercase tracking-wider text-white/20">Network</p>
+                  <p className="text-xs font-bold text-[#E35930]/70">Mainnet</p>
+                </div>
+              </div>
+
+              {/* Steps */}
+              <div className="space-y-2.5 mb-4">
+                {txSteps.map((step, i) => (
+                  <div key={i} className="flex items-center gap-3">
+                    <div className={`w-5 h-5 rounded-full flex items-center justify-center shrink-0 transition-all duration-500 ${
+                      step.done
+                        ? "bg-emerald-500/20 text-emerald-400"
+                        : txSteps[i - 1]?.done || i === 0
+                          ? "bg-[#E35930]/20 text-[#E35930]"
+                          : "bg-white/5 text-white/15"
+                    }`}>
+                      {step.done ? (
+                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                          <path d="M20 6L9 17l-5-5" />
+                        </svg>
+                      ) : (txSteps[i - 1]?.done || i === 0) && !step.done ? (
+                        <div className="w-2.5 h-2.5 border-2 border-current border-t-transparent rounded-full animate-spin" />
+                      ) : (
+                        <div className="w-1.5 h-1.5 rounded-full bg-current opacity-30" />
+                      )}
+                    </div>
+                    <span className={`text-xs transition-all duration-500 ${step.done ? "text-white/70" : "text-white/25"}`}>
+                      {step.label}
+                    </span>
+                    {step.time && (
+                      <span className="ml-auto text-[8px] font-mono text-emerald-400/50">{step.time}</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+
+              {/* Progress bar */}
+              <div className="h-1.5 rounded-full bg-white/5 overflow-hidden">
+                <div
+                  className="h-full rounded-full transition-all duration-700 ease-out"
+                  style={{
+                    width: `${(txSteps.filter(s => s.done).length / txSteps.length) * 100}%`,
+                    background: "linear-gradient(90deg, #E35930, #8b5cf6, #E35930)",
+                    backgroundSize: "200% 100%",
+                    animation: "claimShimmer 2s ease infinite",
+                  }}
+                />
+              </div>
+
+              {/* Confirmed result */}
+              {txPhase === "confirmed" && (
+                <div className="mt-4 bg-emerald-500/10 border border-emerald-500/20 rounded-xl px-4 py-3 text-center animate-[popIn_0.5s_ease-out]">
+                  <p className="text-sm font-bold text-emerald-300">✓ Transaction Confirmed</p>
+                  <p className="text-[9px] text-emerald-400/40 mt-0.5">Finalized on Solana mainnet-beta</p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* ─── REVEAL: Win/Lose result ─── */}
+          {phase === "reveal" && (
+            <div className="px-6 pb-6 text-center">
+              {won ? (
+                <>
+                  <div className="text-7xl mb-4 animate-bounce">💎</div>
+                  <h2 className="text-2xl font-black bg-clip-text text-transparent bg-gradient-to-r from-amber-200 via-yellow-300 to-amber-200 mb-2">
+                    YOU WON!
+                  </h2>
+                  <p className="text-sm text-white/50 mb-4">
+                    Your parcel has <span className="text-amber-200 font-bold">{REWARD_SOL} SOL</span> hidden inside!
+                  </p>
+
+                  {/* Reward card */}
+                  <div className="bg-gradient-to-r from-amber-900/40 to-yellow-900/40 border border-amber-500/20 rounded-2xl px-5 py-4 mb-5">
+                    <p className="text-[8px] uppercase tracking-[0.2em] text-amber-400/40 mb-1">Reward credited</p>
+                    <p className="text-3xl font-black text-amber-200 tabular-nums">
+                      {REWARD_SOL} <span className="text-lg text-amber-400/60">SOL</span>
+                    </p>
+                    <p className="text-[9px] text-amber-400/30 mt-1 font-mono">
+                      Claim it inside your building in the city
+                    </p>
+                  </div>
+
+                  {/* Enter city button */}
+                  <button
+                    onClick={enterCity}
+                    className="w-full py-4 rounded-2xl text-base font-black text-black transition-all cursor-pointer active:scale-[0.97]"
+                    style={{
+                      background: "linear-gradient(135deg, #fbbf24, #f59e0b, #eab308)",
+                      boxShadow: "0 0 40px rgba(245,158,11,0.3), 0 0 80px rgba(245,158,11,0.1)",
+                    }}
+                  >
+                    🏙️ ENTER SOLANAPOLIS
+                  </button>
+                </>
+              ) : (
+                <>
+                  <div className="text-5xl mb-4 opacity-60">🏙️</div>
+                  <h2 className="text-xl font-bold text-white/60 mb-2">No Treasure This Time</h2>
+                  <p className="text-sm text-white/30 mb-6">
+                    Earn rewards by being an active citizen in the city!
+                  </p>
+                  <button
+                    onClick={enterCity}
+                    className="w-full py-4 rounded-2xl text-base font-bold text-white bg-white/10 hover:bg-white/15 border border-white/10 transition-all cursor-pointer active:scale-[0.97]"
+                  >
+                    Enter City Anyway →
+                  </button>
+                </>
+              )}
+            </div>
+          )}
+
+          {/* ─── ENTERING: cinematic zoom ─── */}
+          {phase === "entering" && (
+            <div className="px-6 py-12 text-center">
+              <div className="w-12 h-12 border-3 border-white/10 border-t-amber-400 rounded-full animate-spin mx-auto mb-4" />
+              <p className="text-sm font-bold text-white/50 animate-pulse tracking-wider uppercase">
+                Entering Solanapolis...
+              </p>
+              <p className="text-[10px] text-white/20 mt-2 font-mono">
+                {walletAddress.slice(0, 8)}...{walletAddress.slice(-6)}
+              </p>
+            </div>
+          )}
+
+          {/* Bottom badge */}
+          <div className="px-6 pb-5 pt-1">
+            <div className="flex items-center justify-center gap-2 text-[9px] text-white/15">
+              <span>⛓</span>
+              <span>Verified on Solana • Powered by Helius</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Inline keyframes */}
+      <style jsx>{`
+        @keyframes gridScroll {
+          from { transform: translateY(0); }
+          to { transform: translateY(60px); }
+        }
+        @keyframes popIn {
+          0% { transform: scale(0.5); opacity: 0; }
+          50% { transform: scale(1.15); }
+          100% { transform: scale(1); opacity: 1; }
+        }
+        @keyframes slotShake {
+          0%, 100% { transform: translateX(0); }
+          25% { transform: translateX(-4px); }
+          75% { transform: translateX(4px); }
+        }
+        @keyframes confettiFall {
+          0% { transform: translateY(-20px) rotate(0deg) scale(1); opacity: 1; }
+          100% { transform: translateY(100vh) rotate(720deg) scale(0.3); opacity: 0; }
+        }
+      `}</style>
+    </div>
+  );
+}