Add vpinball: a browser Visual Pinball player

Next.js app that plays real .vpx tables via @valknar/vpinball-wasm (WebAssembly Visual Pinball). Demo mode with the bundled default table, drag-and-drop custom table upload, a cabinet-styled UI with a coin-door HUD (fullscreen/stats/info/eject), a custom 404 page, PWA support (hand-rolled service worker), and a static Docker Compose deployment behind nginx. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012hQoM3jJT1Lx7CMTciMzvD
2026-08-23 05:25:15 +02:00
commit e493a12e68
51 changed files with 5570 additions and 0 deletions
@@ -0,0 +1,102 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import type { PinballInstance } from "@valknar/vpinball-wasm";
+import { useIdleTimer } from "./useIdleTimer";
+import StatsReadout from "./StatsReadout";
+import GameInfoPanel from "@/components/GameInfoPanel";
+import type { TableInfo } from "@/lib/pinball/types";
+
+export interface CoinDoorHudProps {
+  instanceRef: React.RefObject<PinballInstance | null>;
+  tableInfo: TableInfo;
+  loadTimeMs: number | null;
+}
+
+function HudButton({
+  label,
+  active,
+  onClick,
+}: {
+  label: string;
+  active?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={`rounded-sm border px-3 py-1.5 font-mono text-xs tracking-widest transition ${
+        active
+          ? "border-marquee bg-marquee/20 text-marquee"
+          : "border-chrome/40 bg-black/30 text-chrome hover:border-arc hover:text-arc"
+      }`}
+    >
+      {label}
+    </button>
+  );
+}
+
+export default function CoinDoorHud({ instanceRef, tableInfo, loadTimeMs }: CoinDoorHudProps) {
+  const router = useRouter();
+  const isIdle = useIdleTimer(3000);
+  const [showStats, setShowStats] = useState(false);
+  const [showInfo, setShowInfo] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  useEffect(() => {
+    const onChange = () => setIsFullscreen(Boolean(document.fullscreenElement));
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+
+  const handleFullscreen = () => {
+    instanceRef.current?.requestFullscreen();
+  };
+
+  const handleEject = () => {
+    // dispose() (called by usePinballInstance's unmount cleanup, triggered by
+    // this navigation) tears the instance down immediately. Calling stop()
+    // here too raced it — stop() defers teardown to the engine's next
+    // internal step, and dispose() freeing WASM memory before that step runs
+    // hung the tab.
+    router.push("/");
+  };
+
+  return (
+    <>
+      <div
+        data-hud
+        className={`absolute inset-x-0 top-0 z-10 flex items-center justify-between gap-3 border-b border-chrome/30 bg-ash/90 px-4 py-2 backdrop-blur transition-opacity duration-300 ${
+          isIdle ? "pointer-events-none opacity-0" : "opacity-100"
+        }`}
+      >
+        <div className="flex items-center gap-2">
+          <span className="font-display text-lg tracking-wide text-marquee">VPINBALL</span>
+          <span className="hidden truncate font-mono text-xs text-chrome sm:inline">
+            {tableInfo.name}
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          {showStats && <StatsReadout />}
+          <HudButton label="INFO" active={showInfo} onClick={() => setShowInfo((v) => !v)} />
+          <HudButton label="STATS" active={showStats} onClick={() => setShowStats((v) => !v)} />
+          <HudButton
+            label={isFullscreen ? "EXIT FS" : "FULLSCREEN"}
+            active={isFullscreen}
+            onClick={handleFullscreen}
+          />
+          <HudButton label="EJECT" onClick={handleEject} />
+        </div>
+      </div>
+
+      {showInfo && (
+        <div className="absolute right-4 top-16 z-10">
+          <GameInfoPanel tableInfo={tableInfo} loadTimeMs={loadTimeMs} />
+        </div>
+      )}
+    </>
+  );
+}