solanapolis 1.0.0

package/src/components/InstancedSkyscrapers.tsx

@@ -0,0 +1,434 @@
+"use client";
+
+import { useRef, useEffect, useCallback, useMemo } from "react";
+import { useFrame, ThreeEvent } from "@react-three/fiber";
+import * as THREE from "three";
+import { PlacedWallet } from "@/types/wallet";
+import {
+  getBuildingDimensions,
+  getBuildingColor,
+  getWindowCols,
+  getWindowFillRatio,
+  getLitRatio,
+  getInstanceSeed,
+  getWindowRows,
+  getWalletWorldPosition,
+} from "@/lib/building-math";
+import { createBuildingMaterial } from "@/lib/building-shader";
+import { createHouseMaterial } from "@/lib/house-shader";
+import { SkyscraperType, TierDef, SKYSCRAPER_DEFS } from "@/lib/skyscraper-types";
+import { WindowHoverInfo } from "./WindowTooltip";
+
+interface InstancedSkyscrapersProps {
+  wallets: PlacedWallet[];
+  skyscraperTypes: SkyscraperType[]; // parallel to wallets
+  onSelectWallet: (wallet: PlacedWallet, position: [number, number, number]) => void;
+  onHoverWindow?: (info: WindowHoverInfo | null) => void;
+  timeRef: React.MutableRefObject<number>;
+  selectedAddress?: string | null;
+}
+
+// ---- Precomputed data per wallet ----
+interface WalletData {
+  wallet: PlacedWallet;
+  type: Exclude<SkyscraperType, "box">;
+  dims: { width: number; height: number; depth: number };
+  basePos: [number, number, number]; // ground-level center (y = height/2 in original, but we'll compute per-tier)
+  color: string;
+  seed: number;
+  yRotation: number; // 0, π/2, π, or 3π/2
+}
+
+// One InstancedMesh per (type, tierIndex) — all wallets of the same type share instances
+interface TierGroup {
+  type: Exclude<SkyscraperType, "box">;
+  tierIndex: number;
+  tierDef: TierDef;
+  walletIndices: number[]; // indices into walletData array
+}
+
+const _dummy = new THREE.Object3D();
+const _color = new THREE.Color();
+
+export default function InstancedSkyscrapers({
+  wallets,
+  skyscraperTypes,
+  onSelectWallet,
+  onHoverWindow,
+  timeRef,
+  selectedAddress,
+}: InstancedSkyscrapersProps) {
+  const timeUniformRef = useRef<{ value: number }>({ value: 0 });
+  const elapsedUniformRef = useRef<{ value: number }>({ value: 0 });
+  const buildingMat = useMemo(
+    () => createBuildingMaterial(timeUniformRef.current, elapsedUniformRef.current),
+    [],
+  );
+  const solidMat = useMemo(
+    () => createHouseMaterial(timeUniformRef.current, 0.85, 1.0),
+    [],
+  );
+
+  // Refs for all tier meshes — stored as flat array, indexed by tierGroups order
+  const meshRefs = useRef<(THREE.InstancedMesh | null)[]>([]);
+  const hoveredWalletIdx = useRef<number | null>(null);
+
+  // Precompute wallet data
+  const walletData: WalletData[] = useMemo(() => {
+    return wallets.map((w, i) => {
+      const type = skyscraperTypes[i] as Exclude<SkyscraperType, "box">;
+      const dims = getBuildingDimensions(w);
+      const basePos = getWalletWorldPosition(w, dims);
+      const color = getBuildingColor(dims.height);
+      const seed = getInstanceSeed(w.address);
+      // Deterministic 90° rotation: 0, 1, 2, or 3 quarter-turns
+      const yRotation = Math.floor(seed * 4) * (Math.PI / 2);
+      return { wallet: w, type, dims, basePos, color, seed, yRotation };
+    });
+  }, [wallets, skyscraperTypes]);
+
+  // Group wallets by (type, tierIndex)
+  const tierGroups: TierGroup[] = useMemo(() => {
+    const groups: TierGroup[] = [];
+    const typeSet = new Set(walletData.map((d) => d.type));
+
+    for (const type of typeSet) {
+      const tiers = SKYSCRAPER_DEFS[type];
+      for (let ti = 0; ti < tiers.length; ti++) {
+        const walletIndices: number[] = [];
+        for (let wi = 0; wi < walletData.length; wi++) {
+          if (walletData[wi].type === type) walletIndices.push(wi);
+        }
+        if (walletIndices.length > 0) {
+          groups.push({ type, tierIndex: ti, tierDef: tiers[ti], walletIndices });
+        }
+      }
+    }
+    return groups;
+  }, [walletData]);
+
+  // Build a reverse lookup: for each tier group mesh index + instance id → walletData index
+  const meshToWallet = useMemo(() => {
+    return tierGroups.map((g) => g.walletIndices);
+  }, [tierGroups]);
+
+  // Also build: for each walletData index → list of (meshIdx, instanceId) so we can highlight all tiers
+  const walletToMeshInstances = useMemo(() => {
+    const map: { meshIdx: number; instanceId: number }[][] = new Array(walletData.length);
+    for (let i = 0; i < walletData.length; i++) map[i] = [];
+    for (let mi = 0; mi < tierGroups.length; mi++) {
+      const indices = tierGroups[mi].walletIndices;
+      for (let ii = 0; ii < indices.length; ii++) {
+        map[indices[ii]].push({ meshIdx: mi, instanceId: ii });
+      }
+    }
+    return map;
+  }, [tierGroups, walletData.length]);
+
+  // Set instance matrices and attributes for all tier meshes
+  useEffect(() => {
+    for (let mi = 0; mi < tierGroups.length; mi++) {
+      const mesh = meshRefs.current[mi];
+      const group = tierGroups[mi];
+      if (!mesh) continue;
+
+      const { tierDef, walletIndices } = group;
+      const count = walletIndices.length;
+
+      const colors = new Float32Array(count * 3);
+      const windowColsArr = new Float32Array(count);
+      const fillRatioArr = new Float32Array(count);
+      const litRatioArr = new Float32Array(count);
+      const seedArr = new Float32Array(count);
+      const floorsArr = new Float32Array(count);
+      const highlightArr = new Float32Array(count);
+
+      for (let ii = 0; ii < count; ii++) {
+        const wd = walletData[walletIndices[ii]];
+        const { dims, basePos, color, seed, yRotation, wallet: w } = wd;
+
+        // Compute tier dimensions in world space
+        const tierW = dims.width * tierDef.widthFrac;
+        const tierD = dims.depth * tierDef.depthFrac;
+        const tierH = dims.height * tierDef.heightFrac;
+
+        // Compute tier center position
+        // basePos[1] is dims.height/2 (center of full building box)
+        // We need ground-level Y = 0, then offset by tier
+        const groundY = 0;
+        const tierCenterY = groundY + dims.height * tierDef.yBaseFrac + tierH / 2;
+
+        // Apply X/Z offsets (relative to building dims), rotated by yRotation
+        const rawOffsetX = dims.width * tierDef.xOffsetFrac;
+        const rawOffsetZ = dims.depth * tierDef.zOffsetFrac;
+        const cosR = Math.cos(yRotation);
+        const sinR = Math.sin(yRotation);
+        const rotatedOffsetX = rawOffsetX * cosR - rawOffsetZ * sinR;
+        const rotatedOffsetZ = rawOffsetX * sinR + rawOffsetZ * cosR;
+
+        _dummy.position.set(
+          basePos[0] + rotatedOffsetX,
+          tierCenterY,
+          basePos[2] + rotatedOffsetZ,
+        );
+        _dummy.scale.set(tierW, tierH, tierD);
+        _dummy.rotation.set(0, yRotation, 0);
+        _dummy.updateMatrix();
+        mesh.setMatrixAt(ii, _dummy.matrix);
+
+        // Color
+        _color.set(color);
+        colors[ii * 3] = _color.r;
+        colors[ii * 3 + 1] = _color.g;
+        colors[ii * 3 + 2] = _color.b;
+
+        if (tierDef.hasWindows) {
+          // Window attributes — computed from TIER dimensions for correct density
+          windowColsArr[ii] = getWindowCols(tierW);
+          fillRatioArr[ii] = getWindowFillRatio(w.uniqueTokensSwapped ?? 0);
+          litRatioArr[ii] = getLitRatio(w.latestBlocktime);
+          seedArr[ii] = seed;
+          floorsArr[ii] = getWindowRows(Math.round(tierH / 0.3)); // floors in this tier
+        }
+      }
+
+      mesh.instanceMatrix.needsUpdate = true;
+
+      if (tierDef.hasWindows) {
+        mesh.geometry.setAttribute(
+          "instanceBuildingColor",
+          new THREE.InstancedBufferAttribute(colors, 3),
+        );
+        mesh.geometry.setAttribute(
+          "instanceHighlight",
+          new THREE.InstancedBufferAttribute(highlightArr, 1),
+        );
+        mesh.geometry.setAttribute(
+          "instanceWindowCols",
+          new THREE.InstancedBufferAttribute(windowColsArr, 1),
+        );
+        mesh.geometry.setAttribute(
+          "instanceFillRatio",
+          new THREE.InstancedBufferAttribute(fillRatioArr, 1),
+        );
+        mesh.geometry.setAttribute(
+          "instanceLitRatio",
+          new THREE.InstancedBufferAttribute(litRatioArr, 1),
+        );
+        mesh.geometry.setAttribute(
+          "instanceSeed",
+          new THREE.InstancedBufferAttribute(seedArr, 1),
+        );
+        mesh.geometry.setAttribute(
+          "instanceFloors",
+          new THREE.InstancedBufferAttribute(floorsArr, 1),
+        );
+      } else {
+        // Solid-color tiers use instanceColor for the house-shader
+        mesh.instanceColor = new THREE.InstancedBufferAttribute(colors, 3);
+        mesh.geometry.setAttribute(
+          "instanceHighlight",
+          new THREE.InstancedBufferAttribute(highlightArr, 1),
+        );
+      }
+    }
+  }, [tierGroups, walletData]);
+
+  // Update time uniforms
+  useFrame((state) => {
+    timeUniformRef.current.value = timeRef.current;
+    elapsedUniformRef.current.value = state.clock.elapsedTime;
+  });
+
+  // ---- Highlight helpers ----
+  const setWalletHighlight = useCallback(
+    (walletIdx: number, value: number) => {
+      const entries = walletToMeshInstances[walletIdx];
+      if (!entries) return;
+      for (const { meshIdx, instanceId } of entries) {
+        const mesh = meshRefs.current[meshIdx];
+        if (!mesh) continue;
+        const attr = mesh.geometry.getAttribute("instanceHighlight") as THREE.InstancedBufferAttribute;
+        if (attr) {
+          attr.setX(instanceId, value);
+          attr.needsUpdate = true;
+        }
+      }
+    },
+    [walletToMeshInstances],
+  );
+
+  // ---- Resolve which wallet was hit ----
+  const resolveWallet = useCallback(
+    (meshIdx: number, instanceId: number): number | undefined => {
+      const indices = meshToWallet[meshIdx];
+      return indices?.[instanceId];
+    },
+    [meshToWallet],
+  );
+
+  // ---- Pointer handlers ----
+  const makePointerMove = useCallback(
+    (meshIdx: number) => (e: ThreeEvent<PointerEvent>) => {
+      e.stopPropagation();
+      const id = e.instanceId;
+      if (id === undefined) {
+        onHoverWindow?.(null);
+        return;
+      }
+
+      const walletIdx = resolveWallet(meshIdx, id);
+      if (walletIdx === undefined) return;
+
+      const prev = hoveredWalletIdx.current;
+      if (prev !== walletIdx) {
+        if (prev !== null) setWalletHighlight(prev, 0.0);
+        setWalletHighlight(walletIdx, 1.0);
+        hoveredWalletIdx.current = walletIdx;
+        document.body.style.cursor = "pointer";
+      }
+
+      if (!onHoverWindow) return;
+
+      const wd = walletData[walletIdx];
+      const w = wd.wallet;
+
+      if (w.address !== selectedAddress) {
+        onHoverWindow({
+          address: w.address,
+          tokenIndex: 0,
+          screenX: e.nativeEvent.clientX,
+          screenY: e.nativeEvent.clientY,
+          mode: "building",
+          identityName: w.identityName,
+          identityType: w.identityType,
+          identityCategory: w.identityCategory,
+        });
+        return;
+      }
+
+      // Selected building — window-level tooltip on windowed tiers
+      const tierDef = tierGroups[meshIdx]?.tierDef;
+      if (!tierDef?.hasWindows) {
+        onHoverWindow(null);
+        return;
+      }
+
+      const faceNormal = e.face?.normal;
+      if (!faceNormal || Math.abs(faceNormal.y) > 0.5) {
+        onHoverWindow(null);
+        return;
+      }
+
+      // Approximate: use tier dimensions for local coord conversion
+      const tierW = wd.dims.width * tierDef.widthFrac;
+      const tierH = wd.dims.height * tierDef.heightFrac;
+      const tierD = wd.dims.depth * tierDef.depthFrac;
+      const tierCenterY = wd.dims.height * tierDef.yBaseFrac + tierH / 2;
+
+      const rawOffsetX = wd.dims.width * tierDef.xOffsetFrac;
+      const rawOffsetZ = wd.dims.depth * tierDef.zOffsetFrac;
+      const cosR = Math.cos(wd.yRotation);
+      const sinR = Math.sin(wd.yRotation);
+      const rotatedOffsetX = rawOffsetX * cosR - rawOffsetZ * sinR;
+      const rotatedOffsetZ = rawOffsetX * sinR + rawOffsetZ * cosR;
+
+      const tierCenterX = wd.basePos[0] + rotatedOffsetX;
+      const tierCenterZ = wd.basePos[2] + rotatedOffsetZ;
+
+      // Transform hit point into tier-local coords, accounting for rotation
+      const dx = e.point.x - tierCenterX;
+      const dz = e.point.z - tierCenterZ;
+      // Un-rotate
+      const localX = (dx * cosR + dz * sinR) / tierW;
+      const localY = (e.point.y - tierCenterY) / tierH;
+      const localZ = (-dx * sinR + dz * cosR) / tierD;
+
+      // Determine face UV — same approach as InstancedBuildings
+      // Need to figure out which local face was hit by examining the un-rotated normal
+      const nx = faceNormal.x * cosR + faceNormal.z * sinR;
+      let faceU: number, faceV: number;
+      if (Math.abs(nx) > 0.5) {
+        faceU = localZ + 0.5;
+        faceV = localY + 0.5;
+      } else {
+        faceU = localX + 0.5;
+        faceV = localY + 0.5;
+      }
+
+      const cols = getWindowCols(tierW);
+      const rows = getWindowRows(Math.round(tierH / 0.3));
+      if (cols < 1 || rows < 1) { onHoverWindow(null); return; }
+
+      const colIdx = Math.floor(faceU * cols);
+      const rowIdx = Math.floor(faceV * rows);
+      const cellU = faceU * cols - colIdx;
+      const cellV = faceV * rows - rowIdx;
+
+      if (!(cellU > 0.2 && cellU < 0.8 && cellV > 0.2 && cellV < 0.8)) {
+        onHoverWindow(null);
+        return;
+      }
+
+      const tokenIndex = Math.abs(
+        (colIdx * 127 + rowIdx * 311 + Math.floor(wd.seed * 10007)) | 0,
+      );
+
+      onHoverWindow({
+        address: w.address,
+        tokenIndex,
+        screenX: e.nativeEvent.clientX,
+        screenY: e.nativeEvent.clientY,
+        mode: "token",
+      });
+    },
+    [walletData, tierGroups, resolveWallet, setWalletHighlight, onHoverWindow, selectedAddress],
+  );
+
+  const handlePointerOut = useCallback(() => {
+    const prev = hoveredWalletIdx.current;
+    if (prev !== null) {
+      setWalletHighlight(prev, 0.0);
+    }
+    hoveredWalletIdx.current = null;
+    document.body.style.cursor = "default";
+    onHoverWindow?.(null);
+  }, [setWalletHighlight, onHoverWindow]);
+
+  const makeClick = useCallback(
+    (meshIdx: number) => (e: ThreeEvent<MouseEvent>) => {
+      e.stopPropagation();
+      const id = e.instanceId;
+      if (id === undefined) return;
+      const walletIdx = resolveWallet(meshIdx, id);
+      if (walletIdx === undefined) return;
+      const wd = walletData[walletIdx];
+      onSelectWallet(wd.wallet, wd.basePos);
+    },
+    [walletData, resolveWallet, onSelectWallet],
+  );
+
+  if (wallets.length === 0) return null;
+
+  return (
+    <group>
+      {tierGroups.map((group, mi) => (
+        <instancedMesh
+          key={`${group.type}-${group.tierIndex}-${group.walletIndices.length}`}
+          ref={(el) => { meshRefs.current[mi] = el; }}
+          args={[undefined!, undefined!, group.walletIndices.length]}
+          frustumCulled={false}
+          onPointerMove={makePointerMove(mi)}
+          onPointerOut={handlePointerOut}
+          onClick={makeClick(mi)}
+        >
+          <boxGeometry args={[1, 1, 1]} />
+          <primitive
+            object={group.tierDef.hasWindows ? buildingMat : solidMat}
+            attach="material"
+          />
+        </instancedMesh>
+      ))}
+    </group>
+  );
+}

package/src/components/InstancedTrees.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useRef, useEffect, useMemo } from "react";
+import * as THREE from "three";
+
+interface TreeData {
+  pos: [number, number, number];
+  scale: number;
+}
+
+/**
+ * Renders all trees in the scene using two InstancedMesh draw calls
+ * (one for trunks, one for canopies) instead of 2 meshes per tree.
+ */
+export default function InstancedTrees({ trees }: { trees: TreeData[] }) {
+  const trunkRef = useRef<THREE.InstancedMesh>(null);
+  const canopyRef = useRef<THREE.InstancedMesh>(null);
+  const dummy = useMemo(() => new THREE.Object3D(), []);
+
+  useEffect(() => {
+    const trunk = trunkRef.current;
+    const canopy = canopyRef.current;
+    if (!trunk || !canopy) return;
+
+    for (let i = 0; i < trees.length; i++) {
+      const { pos, scale } = trees[i];
+
+      // Position-based variation (matches original Tree component logic)
+      const seed = Math.abs(pos[0] * 73.1 + pos[2] * 37.7);
+      const v = 0.85 + ((seed % 100) / 100) * 0.3;
+
+      const trunkH = 0.6 * scale * v;
+      const canopyH = 1.4 * scale * v;
+
+      // Trunk instance
+      dummy.position.set(pos[0], trunkH / 2, pos[2]);
+      dummy.rotation.set(0, 0, 0);
+      dummy.scale.set(scale, scale * v, scale);
+      dummy.updateMatrix();
+      trunk.setMatrixAt(i, dummy.matrix);
+
+      // Canopy instance
+      dummy.position.set(pos[0], trunkH + canopyH / 2.5, pos[2]);
+      dummy.scale.set(scale * v, scale * v, scale * v);
+      dummy.updateMatrix();
+      canopy.setMatrixAt(i, dummy.matrix);
+    }
+
+    trunk.instanceMatrix.needsUpdate = true;
+    canopy.instanceMatrix.needsUpdate = true;
+  }, [trees, dummy]);
+
+  if (trees.length === 0) return null;
+
+  return (
+    <>
+      <instancedMesh ref={trunkRef} args={[undefined!, undefined!, trees.length]} frustumCulled={false}>
+        <cylinderGeometry args={[0.08, 0.096, 0.6, 6]} />
+        <meshStandardMaterial color="#6b4a35" />
+      </instancedMesh>
+      <instancedMesh ref={canopyRef} args={[undefined!, undefined!, trees.length]} frustumCulled={false}>
+        <coneGeometry args={[0.6, 1.4, 7]} />
+        <meshStandardMaterial color="#2e8b40" />
+      </instancedMesh>
+    </>
+  );
+}

package/src/components/LeaderboardPanel.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+
+interface LeaderboardEntry {
+  wallet_address: string;
+  best_score: number;
+  total_score: number;
+  total_hits: number;
+  total_sessions: number;
+  total_playtime_s: number;
+}
+
+interface LeaderboardPanelProps {
+  visible: boolean;
+  currentWallet?: string | null;
+  currentScore?: number;
+}
+
+function truncateAddress(addr: string): string {
+  if (addr.length <= 10) return addr;
+  return addr.slice(0, 4) + "…" + addr.slice(-4);
+}
+
+function formatPlaytime(secs: number): string {
+  if (secs < 60) return `${secs}s`;
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m`;
+  return `${Math.floor(mins / 60)}h ${mins % 60}m`;
+}
+
+export default function LeaderboardPanel({ visible, currentWallet, currentScore }: LeaderboardPanelProps) {
+  const [entries, setEntries] = useState<LeaderboardEntry[]>([]);
+  const [onlineCount, setOnlineCount] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const fetchLeaderboard = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await fetch("/api/leaderboard?limit=10");
+      if (!res.ok) return;
+      const data = await res.json();
+      setEntries(data.leaderboard ?? []);
+      setOnlineCount(data.onlineCount ?? 0);
+    } catch {
+      // Silently fail
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!visible) return;
+    fetchLeaderboard();
+    const interval = setInterval(fetchLeaderboard, 15000); // refresh every 15s
+    return () => clearInterval(interval);
+  }, [visible, fetchLeaderboard]);
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 w-72 bg-black/70 backdrop-blur-xl border border-white/[0.08] rounded-2xl overflow-hidden">
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-white/[0.06]">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-bold text-white/90 tracking-tight">🏆 Leaderboard</h3>
+          <div className="flex items-center gap-1.5">
+            <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+            <span className="text-[10px] text-white/40">{onlineCount} online</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Leaderboard rows */}
+      <div className="max-h-48 overflow-y-auto">
+        {loading && entries.length === 0 ? (
+          <div className="px-4 py-6 text-center text-white/30 text-xs">Loading...</div>
+        ) : entries.length === 0 ? (
+          <div className="px-4 py-6 text-center text-white/30 text-xs">No scores yet — be the first!</div>
+        ) : (
+          entries.map((entry, i) => {
+            const isMe = currentWallet && entry.wallet_address === currentWallet;
+            const rankEmoji = i === 0 ? "🥇" : i === 1 ? "🥈" : i === 2 ? "🥉" : `${i + 1}.`;
+
+            return (
+              <div
+                key={entry.wallet_address}
+                className={`flex items-center gap-2 px-4 py-2 border-b border-white/[0.04] transition-colors ${
+                  isMe ? "bg-[#E35930]/10" : "hover:bg-white/[0.02]"
+                }`}
+              >
+                <span className="text-xs w-6 text-center">{rankEmoji}</span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-1.5">
+                    <span className={`text-xs font-medium truncate ${isMe ? "text-[#E35930]" : "text-white/70"}`}>
+                      {truncateAddress(entry.wallet_address)}
+                    </span>
+                    {isMe && (
+                      <span className="text-[8px] bg-[#E35930]/20 text-[#E35930] px-1 rounded">YOU</span>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-2 mt-0.5">
+                    <span className="text-[9px] text-white/25">
+                      {entry.total_hits} hits
+                    </span>
+                    <span className="text-[9px] text-white/25">
+                      {entry.total_sessions} games
+                    </span>
+                    <span className="text-[9px] text-white/25">
+                      {formatPlaytime(entry.total_playtime_s)}
+                    </span>
+                  </div>
+                </div>
+                <span className="text-sm font-bold text-white/80 tabular-nums">
+                  {entry.best_score.toLocaleString()}
+                </span>
+              </div>
+            );
+          })
+        )}
+      </div>
+
+      {/* Current session score (if playing) */}
+      {currentScore !== undefined && currentScore > 0 && (
+        <div className="px-4 py-2 border-t border-white/[0.06] bg-[#E35930]/5">
+          <div className="flex items-center justify-between">
+            <span className="text-[10px] text-white/40">Current session</span>
+            <span className="text-sm font-bold text-[#E35930] tabular-nums">
+              {currentScore.toLocaleString()}
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}