solanapolis 1.0.0

package/src/components/BeachScene.tsx

@@ -0,0 +1,280 @@
+"use client";
+
+import { useRef, useMemo, useEffect } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { OceanAmbient, maybePlaySeagull, initAudio } from "@/lib/sound-engine";
+
+// ─── Constants ────────────────────────────────────────────────
+
+const OCEAN_SIZE = 600;
+const OCEAN_OFFSET = 180;      // how far from city centre the beach starts
+const BEACH_DEPTH = 40;        // sandy strip width
+const WAVE_SEGMENTS = 128;
+const SEAGULL_COUNT = 18;
+const BOAT_COUNT = 50;
+
+// ─── Helpers ──────────────────────────────────────────────────
+
+function seededRandom(seed: number): number {
+  const x = Math.sin(seed * 127.1 + 311.7) * 43758.5453;
+  return x - Math.floor(x);
+}
+
+// ─── Ocean surface (animated waves via vertex shader) ─────────
+
+function Ocean() {
+  const meshRef = useRef<THREE.Mesh>(null);
+  const geoRef = useRef<THREE.PlaneGeometry>(null);
+
+  useFrame(({ clock }) => {
+    if (!geoRef.current) return;
+    const t = clock.getElapsedTime();
+    const pos = geoRef.current.attributes.position;
+    for (let i = 0; i < pos.count; i++) {
+      const x = pos.getX(i);
+      const z = pos.getZ(i);
+      const y =
+        Math.sin(x * 0.08 + t * 0.6) * 0.8 +
+        Math.sin(z * 0.12 + t * 0.8) * 0.5 +
+        Math.sin((x + z) * 0.05 + t * 0.3) * 1.2;
+      pos.setY(i, y);
+    }
+    pos.needsUpdate = true;
+    geoRef.current.computeVertexNormals();
+  });
+
+  return (
+    <mesh
+      ref={meshRef}
+      rotation={[-Math.PI / 2, 0, 0]}
+      position={[0, -0.5, -(OCEAN_OFFSET + OCEAN_SIZE / 2)]}
+      receiveShadow
+    >
+      <planeGeometry ref={geoRef} args={[OCEAN_SIZE * 2, OCEAN_SIZE, WAVE_SEGMENTS, WAVE_SEGMENTS]} />
+      <meshStandardMaterial
+        color="#0c4a6e"
+        transparent
+        opacity={0.85}
+        metalness={0.3}
+        roughness={0.4}
+        side={THREE.DoubleSide}
+      />
+    </mesh>
+  );
+}
+
+// ─── Sandy beach strip ────────────────────────────────────────
+
+function Beach() {
+  return (
+    <mesh
+      rotation={[-Math.PI / 2, 0, 0]}
+      position={[0, -0.08, -(OCEAN_OFFSET - BEACH_DEPTH / 2)]}
+      receiveShadow
+    >
+      <planeGeometry args={[OCEAN_SIZE * 2, BEACH_DEPTH]} />
+      <meshStandardMaterial color="#e8c97a" roughness={0.95} metalness={0} />
+    </mesh>
+  );
+}
+
+// ─── Foam line (white strip at water's edge) ──────────────────
+
+function Foam() {
+  const ref = useRef<THREE.Mesh>(null);
+
+  useFrame(({ clock }) => {
+    if (!ref.current) return;
+    const t = clock.getElapsedTime();
+    ref.current.position.z = -(OCEAN_OFFSET) + Math.sin(t * 0.5) * 1.5;
+    (ref.current.material as THREE.MeshStandardMaterial).opacity =
+      0.3 + Math.sin(t * 0.8) * 0.15;
+  });
+
+  return (
+    <mesh ref={ref} rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.01, -OCEAN_OFFSET]}>
+      <planeGeometry args={[OCEAN_SIZE * 2, 3]} />
+      <meshStandardMaterial color="#ffffff" transparent opacity={0.4} roughness={1} />
+    </mesh>
+  );
+}
+
+// ─── Seagulls (simple animated "V" shapes) ────────────────────
+
+function Seagulls() {
+  const groupRef = useRef<THREE.Group>(null);
+
+  const birds = useMemo(() => {
+    return Array.from({ length: SEAGULL_COUNT }, (_, i) => ({
+      id: i,
+      cx: (seededRandom(i * 3) - 0.5) * 400,
+      cy: 25 + seededRandom(i * 3 + 1) * 30,
+      cz: -(OCEAN_OFFSET + seededRandom(i * 3 + 2) * OCEAN_SIZE * 0.4),
+      radius: 15 + seededRandom(i * 7) * 30,
+      speed: 0.15 + seededRandom(i * 11) * 0.25,
+      phaseOffset: seededRandom(i * 13) * Math.PI * 2,
+      flapSpeed: 3 + seededRandom(i * 17) * 3,
+    }));
+  }, []);
+
+  useFrame(({ clock }) => {
+    if (!groupRef.current) return;
+    const t = clock.getElapsedTime();
+    groupRef.current.children.forEach((group, i) => {
+      const b = birds[i];
+      const angle = t * b.speed + b.phaseOffset;
+      group.position.set(
+        b.cx + Math.cos(angle) * b.radius,
+        b.cy + Math.sin(t * 0.5 + b.phaseOffset) * 2,
+        b.cz + Math.sin(angle) * b.radius * 0.5,
+      );
+      group.rotation.y = angle + Math.PI / 2;
+
+      // Wing flap
+      const flap = Math.sin(t * b.flapSpeed + b.phaseOffset) * 0.4;
+      const leftWing = group.children[0] as THREE.Mesh;
+      const rightWing = group.children[1] as THREE.Mesh;
+      if (leftWing) leftWing.rotation.z = flap;
+      if (rightWing) rightWing.rotation.z = -flap;
+    });
+  });
+
+  return (
+    <group ref={groupRef}>
+      {birds.map((b) => (
+        <group key={b.id}>
+          {/* Left wing */}
+          <mesh position={[-0.4, 0, 0]}>
+            <boxGeometry args={[0.8, 0.05, 0.15]} />
+            <meshStandardMaterial color="#e8e8e8" />
+          </mesh>
+          {/* Right wing */}
+          <mesh position={[0.4, 0, 0]}>
+            <boxGeometry args={[0.8, 0.05, 0.15]} />
+            <meshStandardMaterial color="#e8e8e8" />
+          </mesh>
+          {/* Body */}
+          <mesh>
+            <boxGeometry args={[0.12, 0.08, 0.5]} />
+            <meshStandardMaterial color="#d4d4d4" />
+          </mesh>
+        </group>
+      ))}
+    </group>
+  );
+}
+
+// ─── Boats (50 boats floating on the ocean) ───────────────────
+
+interface BoatData {
+  id: number;
+  x: number;
+  z: number;
+  heading: number;
+  speed: number;
+  size: number;
+  hue: number;
+}
+
+function Boats() {
+  const groupRef = useRef<THREE.Group>(null);
+
+  const boats = useMemo<BoatData[]>(() => {
+    return Array.from({ length: BOAT_COUNT }, (_, i) => ({
+      id: i,
+      x: (seededRandom(i * 31) - 0.5) * OCEAN_SIZE * 1.5,
+      z: -(OCEAN_OFFSET + 20 + seededRandom(i * 37) * OCEAN_SIZE * 0.6),
+      heading: seededRandom(i * 41) * Math.PI * 2,
+      speed: 0.5 + seededRandom(i * 43) * 2,
+      size: 0.7 + seededRandom(i * 47) * 0.6,
+      hue: Math.floor(seededRandom(i * 53) * 360),
+    }));
+  }, []);
+
+  useFrame(({ clock }) => {
+    if (!groupRef.current) return;
+    const t = clock.getElapsedTime();
+    groupRef.current.children.forEach((boat, i) => {
+      const b = boats[i];
+      // Gentle cruising motion
+      const dx = Math.sin(b.heading) * b.speed * 0.3;
+      const dz = Math.cos(b.heading) * b.speed * 0.3;
+      boat.position.set(
+        b.x + dx * t * 0.1 + Math.sin(t * 0.2 + i) * 3,
+        Math.sin(t * 0.8 + i * 0.7) * 0.6,
+        b.z + dz * t * 0.1 + Math.cos(t * 0.15 + i) * 3,
+      );
+      // Rock on waves
+      boat.rotation.x = Math.sin(t * 0.7 + i * 0.5) * 0.06;
+      boat.rotation.z = Math.sin(t * 0.5 + i * 0.3) * 0.04;
+      boat.rotation.y = b.heading + Math.sin(t * 0.1 + i) * 0.05;
+    });
+  });
+
+  return (
+    <group ref={groupRef}>
+      {boats.map((b) => {
+        const color = `hsl(${b.hue}, 60%, 50%)`;
+        const s = b.size;
+        return (
+          <group key={b.id} position={[b.x, 0, b.z]}>
+            {/* Hull */}
+            <mesh>
+              <boxGeometry args={[2 * s, 0.6 * s, 5 * s]} />
+              <meshStandardMaterial color={color} roughness={0.6} />
+            </mesh>
+            {/* Cabin */}
+            <mesh position={[0, 0.5 * s, -0.3 * s]}>
+              <boxGeometry args={[1.2 * s, 0.7 * s, 1.5 * s]} />
+              <meshStandardMaterial color="#f0f0f0" roughness={0.5} />
+            </mesh>
+            {/* Mast / pole */}
+            <mesh position={[0, 1.2 * s, 0.5 * s]}>
+              <boxGeometry args={[0.08 * s, 1.5 * s, 0.08 * s]} />
+              <meshStandardMaterial color="#8B7355" roughness={0.8} />
+            </mesh>
+          </group>
+        );
+      })}
+    </group>
+  );
+}
+
+// ─── Main Beach Scene Export ──────────────────────────────────
+
+export default function BeachScene() {
+  const oceanSoundRef = useRef<OceanAmbient | null>(null);
+  const startedRef = useRef(false);
+
+  // Start ocean ambient on first user interaction
+  useFrame(() => {
+    if (!startedRef.current) {
+      try {
+        initAudio();
+        const oa = new OceanAmbient();
+        oa.start();
+        oceanSoundRef.current = oa;
+        startedRef.current = true;
+      } catch { /* AudioContext not ready yet */ }
+    }
+    // Random seagull calls
+    maybePlaySeagull();
+  });
+
+  useEffect(() => {
+    return () => {
+      oceanSoundRef.current?.stop();
+    };
+  }, []);
+
+  return (
+    <group>
+      <Beach />
+      <Foam />
+      <Ocean />
+      <Seagulls />
+      <Boats />
+    </group>
+  );
+}

package/src/components/Building.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useRef, useState, useMemo } from "react";
+import { useFrame } from "@react-three/fiber";
+import { Mesh, Color, AdditiveBlending } from "three";
+import { WalletBuilding } from "@/types/wallet";
+import { getBuildingDimensions, getBuildingColor } from "@/lib/building-math";
+
+interface BuildingProps {
+  wallet: WalletBuilding;
+  position: [number, number, number];
+  selected?: boolean;
+  onSelect: (wallet: WalletBuilding, position: [number, number, number]) => void;
+}
+
+const BEAM_HEIGHT = 60;
+
+/**
+ * Selection effect — only mounted when a building is selected.
+ * Isolates the useFrame callback so unselected buildings have zero per-frame cost.
+ */
+function SelectionEffect({
+  position,
+  height,
+  width,
+  depth,
+  color,
+}: {
+  position: [number, number, number];
+  height: number;
+  width: number;
+  depth: number;
+  color: Color;
+}) {
+  const glowRef = useRef<Mesh>(null);
+  const beamRef = useRef<Mesh>(null);
+  const buildingMatRef = useRef<import("three").MeshStandardMaterial>(null);
+
+  useFrame(({ clock }) => {
+    const t = clock.getElapsedTime();
+    const pulse = 0.4 + Math.sin(t * 2.5) * 0.2;
+
+    if (buildingMatRef.current) {
+      buildingMatRef.current.emissiveIntensity = pulse;
+    }
+    if (glowRef.current) {
+      glowRef.current.scale.set(1 + pulse * 0.15, 1, 1 + pulse * 0.15);
+      const gMat = glowRef.current.material as import("three").MeshBasicMaterial;
+      gMat.opacity = 0.12 + Math.sin(t * 2.5) * 0.06;
+    }
+    if (beamRef.current) {
+      const bMat = beamRef.current.material as import("three").MeshBasicMaterial;
+      bMat.opacity = 0.15 + Math.sin(t * 3) * 0.07;
+    }
+  });
+
+  return (
+    <>
+      {/* Invisible overlay mesh to drive emissive on the building —
+          we attach the material ref here and sync it in useFrame.
+          Actually, let's just render the glow shell and beam. */}
+      <mesh ref={glowRef} position={position}>
+        <boxGeometry args={[width + 0.4, height + 0.2, depth + 0.4]} />
+        <meshBasicMaterial
+          color={color}
+          transparent
+          opacity={0.15}
+          blending={AdditiveBlending}
+          depthWrite={false}
+        />
+      </mesh>
+
+      <mesh
+        ref={beamRef}
+        position={[position[0], position[1] - height / 2 + height + BEAM_HEIGHT / 2, position[2]]}
+      >
+        <cylinderGeometry args={[0.08, Math.max(width, depth) * 0.4, BEAM_HEIGHT, 8, 1, true]} />
+        <meshBasicMaterial
+          color={color}
+          transparent
+          opacity={0.18}
+          blending={AdditiveBlending}
+          depthWrite={false}
+          side={2}
+        />
+      </mesh>
+    </>
+  );
+}
+
+export default function Building({ wallet, position, selected, onSelect }: BuildingProps) {
+  const [hovered, setHovered] = useState(false);
+
+  const { height, width, depth } = getBuildingDimensions(wallet);
+  const color = getBuildingColor(height);
+  const colorObj = useMemo(() => new Color(color), [color]);
+
+  const y = position[1] + height / 2;
+
+  return (
+    <group>
+      <mesh
+        position={[position[0], y, position[2]]}
+        onPointerOver={(e) => {
+          e.stopPropagation();
+          setHovered(true);
+          document.body.style.cursor = "pointer";
+        }}
+        onPointerOut={() => {
+          setHovered(false);
+          document.body.style.cursor = "default";
+        }}
+        onClick={(e) => {
+          e.stopPropagation();
+          onSelect(wallet, [position[0], y, position[2]]);
+        }}
+      >
+        <boxGeometry args={[width, height, depth]} />
+        <meshStandardMaterial
+          color={hovered || selected ? "#ffffff" : color}
+          emissive={hovered ? color : selected ? colorObj : "#000000"}
+          emissiveIntensity={hovered ? 0.3 : selected ? 0.5 : 0}
+        />
+      </mesh>
+
+      {/* Only mounted when selected — no per-frame cost for unselected buildings */}
+      {selected && (
+        <SelectionEffect
+          position={[position[0], y, position[2]]}
+          height={height}
+          width={width}
+          depth={depth}
+          color={colorObj}
+        />
+      )}
+    </group>
+  );
+}