solanapolis 1.0.0

package/src/components/CityLandmarks.tsx

@@ -0,0 +1,427 @@
+"use client";
+
+import React, { useMemo, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { Html } from "@react-three/drei";
+
+/**
+ * Iconic landmark structures placed around the city for visual interest and navigation.
+ * Each landmark is a stylized low-poly version built from primitives.
+ */
+
+interface LandmarkDef {
+  name: string;
+  emoji: string;
+  x: number;
+  z: number;
+  build: (mats: LandmarkMats) => React.ReactNode;
+}
+
+interface LandmarkMats {
+  steel: THREE.MeshStandardMaterial;
+  gold: THREE.MeshStandardMaterial;
+  stone: THREE.MeshStandardMaterial;
+  glass: THREE.MeshStandardMaterial;
+  copper: THREE.MeshStandardMaterial;
+  white: THREE.MeshStandardMaterial;
+  red: THREE.MeshStandardMaterial;
+  dark: THREE.MeshStandardMaterial;
+  neon: THREE.MeshStandardMaterial;
+}
+
+// ─── Empire State Building ───────────────────────────────────────────────────
+function EmpireState({ mats }: { mats: LandmarkMats }) {
+  return (
+    <group>
+      {/* Main tower base */}
+      <mesh position={[0, 15, 0]} material={mats.stone}>
+        <boxGeometry args={[8, 30, 8]} />
+      </mesh>
+      {/* Mid section */}
+      <mesh position={[0, 35, 0]} material={mats.stone}>
+        <boxGeometry args={[6, 10, 6]} />
+      </mesh>
+      {/* Upper section */}
+      <mesh position={[0, 45, 0]} material={mats.stone}>
+        <boxGeometry args={[4, 10, 4]} />
+      </mesh>
+      {/* Spire */}
+      <mesh position={[0, 56, 0]} material={mats.steel}>
+        <cylinderGeometry args={[0.3, 1.2, 12, 8]} />
+      </mesh>
+      {/* Antenna tip — glowing */}
+      <mesh position={[0, 63, 0]} material={mats.neon}>
+        <sphereGeometry args={[0.4, 8, 8]} />
+      </mesh>
+      {/* Windows (dark strips) */}
+      {[10, 20, 30, 38, 44].map((y, i) => (
+        <mesh key={i} position={[0, y, 4.01]} material={mats.glass}>
+          <planeGeometry args={[6, 1]} />
+        </mesh>
+      ))}
+      {/* Art deco crown detail */}
+      <mesh position={[0, 41, 0]} material={mats.gold}>
+        <boxGeometry args={[7, 0.5, 7]} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── Solana Obelisk (Washington Monument style) ──────────────────────────────
+function SolanaObelisk({ mats }: { mats: LandmarkMats }) {
+  return (
+    <group>
+      {/* Main shaft */}
+      <mesh position={[0, 25, 0]} material={mats.white}>
+        <boxGeometry args={[4, 50, 4]} />
+      </mesh>
+      {/* Pyramid cap */}
+      <mesh position={[0, 52, 0]} material={mats.gold}>
+        <coneGeometry args={[2.8, 5, 4]} />
+      </mesh>
+      {/* Solana logo accent rings */}
+      {[10, 20, 30, 40].map((y, i) => (
+        <mesh key={i} position={[0, y, 0]} rotation={[0, Math.PI / 4, 0]} material={mats.neon}>
+          <torusGeometry args={[2.5, 0.1, 4, 4]} />
+        </mesh>
+      ))}
+      {/* Base platform */}
+      <mesh position={[0, 0.25, 0]} material={mats.stone}>
+        <boxGeometry args={[10, 0.5, 10]} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── Crypto Colosseum (Roman Colosseum) ──────────────────────────────────────
+function CryptoColosseum({ mats }: { mats: LandmarkMats }) {
+  return (
+    <group>
+      {/* Outer ring */}
+      <mesh position={[0, 5, 0]} material={mats.stone}>
+        <cylinderGeometry args={[12, 13, 10, 24, 1, true]} />
+      </mesh>
+      {/* Inner ring */}
+      <mesh position={[0, 4, 0]} material={mats.stone}>
+        <cylinderGeometry args={[9, 10, 8, 20, 1, true]} />
+      </mesh>
+      {/* Floor */}
+      <mesh position={[0, 0.1, 0]} rotation={[-Math.PI / 2, 0, 0]} material={mats.dark}>
+        <circleGeometry args={[9, 20]} />
+      </mesh>
+      {/* Arches — decorative columns around the rim */}
+      {Array.from({ length: 16 }).map((_, i) => {
+        const angle = (i / 16) * Math.PI * 2;
+        return (
+          <mesh
+            key={i}
+            position={[Math.cos(angle) * 12.5, 5, Math.sin(angle) * 12.5]}
+            material={mats.stone}
+          >
+            <boxGeometry args={[0.5, 10, 1.5]} />
+          </mesh>
+        );
+      })}
+      {/* Top crown */}
+      <mesh position={[0, 10.5, 0]} material={mats.copper}>
+        <torusGeometry args={[12.5, 0.3, 4, 24]} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── DeFi Tower (Eiffel Tower inspired) ──────────────────────────────────────
+function DeFiTower({ mats }: { mats: LandmarkMats }) {
+  return (
+    <group>
+      {/* Four legs */}
+      {[[-3, 3], [3, 3], [-3, -3], [3, -3]].map(([xo, zo], i) => (
+        <mesh
+          key={i}
+          position={[xo * 0.5, 12, zo * 0.5]}
+          rotation={[
+            zo > 0 ? -0.15 : 0.15,
+            0,
+            xo > 0 ? 0.15 : -0.15,
+          ]}
+          material={mats.steel}
+        >
+          <boxGeometry args={[1.5, 26, 1.5]} />
+        </mesh>
+      ))}
+      {/* Platform 1 */}
+      <mesh position={[0, 10, 0]} material={mats.steel}>
+        <boxGeometry args={[7, 0.5, 7]} />
+      </mesh>
+      {/* Platform 2 */}
+      <mesh position={[0, 20, 0]} material={mats.steel}>
+        <boxGeometry args={[4, 0.5, 4]} />
+      </mesh>
+      {/* Upper shaft */}
+      <mesh position={[0, 30, 0]} material={mats.steel}>
+        <boxGeometry args={[1.5, 18, 1.5]} />
+      </mesh>
+      {/* Antenna */}
+      <mesh position={[0, 41, 0]} material={mats.steel}>
+        <cylinderGeometry args={[0.1, 0.5, 4, 6]} />
+      </mesh>
+      {/* Top beacon */}
+      <mesh position={[0, 43.5, 0]} material={mats.neon}>
+        <sphereGeometry args={[0.5, 8, 8]} />
+      </mesh>
+      {/* Cross braces */}
+      {[5, 15].map((y, i) => (
+        <group key={i}>
+          <mesh position={[0, y, 0]} rotation={[0, 0, Math.PI / 4]} material={mats.steel}>
+            <boxGeometry args={[0.2, 8, 0.2]} />
+          </mesh>
+          <mesh position={[0, y, 0]} rotation={[0, Math.PI / 2, Math.PI / 4]} material={mats.steel}>
+            <boxGeometry args={[0.2, 8, 0.2]} />
+          </mesh>
+        </group>
+      ))}
+    </group>
+  );
+}
+
+// ─── Moon Pyramid (Pyramid of Giza) ─────────────────────────────────────────
+function MoonPyramid({ mats }: { mats: LandmarkMats }) {
+  return (
+    <group>
+      {/* Main pyramid */}
+      <mesh position={[0, 10, 0]} material={mats.gold}>
+        <coneGeometry args={[14, 20, 4]} />
+      </mesh>
+      {/* Smaller companion pyramid */}
+      <mesh position={[18, 5, 4]} material={mats.gold}>
+        <coneGeometry args={[7, 10, 4]} />
+      </mesh>
+      {/* Even smaller one */}
+      <mesh position={[14, 3, -10]} material={mats.gold}>
+        <coneGeometry args={[4, 6, 4]} />
+      </mesh>
+      {/* Glowing capstone */}
+      <mesh position={[0, 20.5, 0]} material={mats.neon}>
+        <coneGeometry args={[1.5, 2.5, 4]} />
+      </mesh>
+      {/* Sand base */}
+      <mesh position={[5, 0.1, 0]} rotation={[-Math.PI / 2, 0, 0]} material={mats.stone}>
+        <circleGeometry args={[22, 6]} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── SOL Gate (Golden Gate Bridge section) ───────────────────────────────────
+function SolGate({ mats }: { mats: LandmarkMats }) {
+  return (
+    <group>
+      {/* Two towers */}
+      <mesh position={[-10, 18, 0]} material={mats.red}>
+        <boxGeometry args={[2.5, 36, 2.5]} />
+      </mesh>
+      <mesh position={[10, 18, 0]} material={mats.red}>
+        <boxGeometry args={[2.5, 36, 2.5]} />
+      </mesh>
+      {/* Top beam */}
+      <mesh position={[0, 35, 0]} material={mats.red}>
+        <boxGeometry args={[22, 1.5, 2.5]} />
+      </mesh>
+      {/* Road deck */}
+      <mesh position={[0, 8, 0]} material={mats.dark}>
+        <boxGeometry args={[24, 0.8, 6]} />
+      </mesh>
+      {/* Suspension cables (simplified as thin boxes) */}
+      {[-7, -4, 0, 4, 7].map((x, i) => (
+        <mesh key={i} position={[x, 22, 0]} rotation={[0, 0, x * 0.02]} material={mats.red}>
+          <boxGeometry args={[0.15, 28, 0.15]} />
+        </mesh>
+      ))}
+      {/* Road stripes */}
+      {[-6, 0, 6].map((x, i) => (
+        <mesh key={`s${i}`} position={[x, 8.41, 0]} material={mats.gold}>
+          <boxGeometry args={[0.2, 0.01, 6]} />
+        </mesh>
+      ))}
+    </group>
+  );
+}
+
+// ─── Ape Tower (Big Ben / Clock Tower) ───────────────────────────────────────
+function ApeTower({ mats }: { mats: LandmarkMats }) {
+  return (
+    <group>
+      {/* Main shaft */}
+      <mesh position={[0, 17, 0]} material={mats.stone}>
+        <boxGeometry args={[5, 34, 5]} />
+      </mesh>
+      {/* Clock face (4 sides) */}
+      {[
+        [0, 30, 2.51, 0] as const,
+        [0, 30, -2.51, Math.PI] as const,
+        [2.51, 30, 0, Math.PI / 2] as const,
+        [-2.51, 30, 0, -Math.PI / 2] as const,
+      ].map(([x, y, z, ry], i) => (
+        <group key={i} position={[x, y, z]} rotation={[0, ry, 0]}>
+          <mesh material={mats.white}>
+            <circleGeometry args={[2, 16]} />
+          </mesh>
+          {/* Hour hand */}
+          <mesh position={[0, 0.3, 0.05]} material={mats.dark}>
+            <boxGeometry args={[0.12, 1.2, 0.05]} />
+          </mesh>
+          {/* Minute hand */}
+          <mesh position={[0.3, 0.1, 0.05]} rotation={[0, 0, -0.8]} material={mats.dark}>
+            <boxGeometry args={[0.08, 1.6, 0.05]} />
+          </mesh>
+        </group>
+      ))}
+      {/* Roof */}
+      <mesh position={[0, 36, 0]} material={mats.copper}>
+        <coneGeometry args={[3.5, 5, 4]} />
+      </mesh>
+      {/* Spire */}
+      <mesh position={[0, 40, 0]} material={mats.gold}>
+        <cylinderGeometry args={[0.15, 0.6, 3, 6]} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── Token Sphinx ────────────────────────────────────────────────────────────
+function TokenSphinx({ mats }: { mats: LandmarkMats }) {
+  return (
+    <group>
+      {/* Body */}
+      <mesh position={[0, 2, 0]} material={mats.stone}>
+        <boxGeometry args={[5, 4, 12]} />
+      </mesh>
+      {/* Head */}
+      <mesh position={[0, 5.5, -5]} material={mats.stone}>
+        <boxGeometry args={[3.5, 4, 3.5]} />
+      </mesh>
+      {/* Headdress */}
+      <mesh position={[0, 7, -5]} material={mats.gold}>
+        <boxGeometry args={[4, 1.5, 4]} />
+      </mesh>
+      {/* Paws */}
+      <mesh position={[-2, 0.5, -8]} material={mats.stone}>
+        <boxGeometry args={[1.5, 1, 4]} />
+      </mesh>
+      <mesh position={[2, 0.5, -8]} material={mats.stone}>
+        <boxGeometry args={[1.5, 1, 4]} />
+      </mesh>
+      {/* Glowing eyes */}
+      <mesh position={[-0.8, 5.5, -6.76]} material={mats.neon}>
+        <sphereGeometry args={[0.25, 6, 6]} />
+      </mesh>
+      <mesh position={[0.8, 5.5, -6.76]} material={mats.neon}>
+        <sphereGeometry args={[0.25, 6, 6]} />
+      </mesh>
+    </group>
+  );
+}
+
+// ─── Landmark definitions with positions ────────────────────────────────────
+const LANDMARKS: LandmarkDef[] = [
+  {
+    name: "Empire State NFT",
+    emoji: "🏙️",
+    x: -200, z: -180,
+    build: (m) => <EmpireState mats={m} />,
+  },
+  {
+    name: "Solana Obelisk",
+    emoji: "⚡",
+    x: 0, z: -220,
+    build: (m) => <SolanaObelisk mats={m} />,
+  },
+  {
+    name: "Crypto Colosseum",
+    emoji: "🏛️",
+    x: 200, z: 180,
+    build: (m) => <CryptoColosseum mats={m} />,
+  },
+  {
+    name: "DeFi Tower",
+    emoji: "🗼",
+    x: -180, z: 200,
+    build: (m) => <DeFiTower mats={m} />,
+  },
+  {
+    name: "Moon Pyramids",
+    emoji: "🔺",
+    x: 220, z: -200,
+    build: (m) => <MoonPyramid mats={m} />,
+  },
+  {
+    name: "SOL Gate Bridge",
+    emoji: "🌉",
+    x: 0, z: 260,
+    build: (m) => <SolGate mats={m} />,
+  },
+  {
+    name: "Ape Tower",
+    emoji: "🕰️",
+    x: -230, z: 0,
+    build: (m) => <ApeTower mats={m} />,
+  },
+  {
+    name: "Token Sphinx",
+    emoji: "🦁",
+    x: 230, z: -30,
+    build: (m) => <TokenSphinx mats={m} />,
+  },
+];
+
+export default function CityLandmarks() {
+  const beaconRef = useRef<THREE.Mesh>(null);
+
+  // Shared materials
+  const mats = useMemo<LandmarkMats>(() => ({
+    steel: new THREE.MeshStandardMaterial({ color: "#8899aa", metalness: 0.8, roughness: 0.3 }),
+    gold: new THREE.MeshStandardMaterial({ color: "#d4a843", metalness: 0.9, roughness: 0.2, emissive: "#d4a843", emissiveIntensity: 0.15 }),
+    stone: new THREE.MeshStandardMaterial({ color: "#b8a99a", metalness: 0.1, roughness: 0.9 }),
+    glass: new THREE.MeshStandardMaterial({ color: "#1a2a3a", metalness: 0.5, roughness: 0.1, transparent: true, opacity: 0.7 }),
+    copper: new THREE.MeshStandardMaterial({ color: "#5d8a6e", metalness: 0.7, roughness: 0.4 }),
+    white: new THREE.MeshStandardMaterial({ color: "#f0ede8", metalness: 0.1, roughness: 0.6 }),
+    red: new THREE.MeshStandardMaterial({ color: "#c4372a", metalness: 0.3, roughness: 0.5 }),
+    dark: new THREE.MeshStandardMaterial({ color: "#2a2a2a", metalness: 0.2, roughness: 0.8 }),
+    neon: new THREE.MeshStandardMaterial({ color: "#E35930", emissive: "#E35930", emissiveIntensity: 2.0, toneMapped: false }),
+  }), []);
+
+  // Animate neon glow
+  useFrame(({ clock }) => {
+    const t = clock.getElapsedTime();
+    mats.neon.emissiveIntensity = 1.5 + Math.sin(t * 2) * 0.8;
+  });
+
+  return (
+    <group>
+      {LANDMARKS.map((lm) => (
+        <group key={lm.name} position={[lm.x, 0, lm.z]}>
+          {/* The landmark geometry */}
+          {lm.build(mats)}
+
+          {/* Floating name label */}
+          <Html
+            center
+            position={[0, 50, 0]}
+            distanceFactor={30}
+            style={{ pointerEvents: "none" }}
+          >
+            <div className="text-center whitespace-nowrap">
+              <div className="px-3 py-1.5 rounded-xl bg-black/70 backdrop-blur-md border border-white/10 shadow-lg shadow-black/30">
+                <span className="text-sm mr-1.5">{lm.emoji}</span>
+                <span className="text-[10px] font-bold text-white/80 uppercase tracking-wider">
+                  {lm.name}
+                </span>
+              </div>
+            </div>
+          </Html>
+        </group>
+      ))}
+    </group>
+  );
+}