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,70 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import Button, { buttonClassName } from "@/components/ui/Button";
+import FileDropZone, { VPX_FILE_INPUT_ID } from "@/components/FileDropZone";
+import { setPendingTable } from "@/lib/pinball/tableSelectionStore";
+
+export default function AttractHero() {
+  const router = useRouter();
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFile = (file: File) => {
+    setError(null);
+    setPendingTable(file);
+    router.push("/play");
+  };
+
+  return (
+    <FileDropZone onFile={handleFile} onError={setError} className="w-full max-w-4xl">
+      <div className="relative overflow-hidden rounded-t-3xl rounded-b-lg border-2 border-chrome/40 bg-ash shadow-2xl">
+        {/* Backglass glow — stands in for real playfield art; GI-lamp amber + a cyan tube accent. */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 opacity-70"
+          style={{
+            background:
+              "radial-gradient(60% 50% at 30% 20%, rgba(255,122,41,0.35), transparent 70%), radial-gradient(45% 40% at 80% 70%, rgba(76,224,210,0.25), transparent 70%)",
+          }}
+        />
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0"
+          style={{
+            backgroundImage:
+              "repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px)",
+          }}
+        />
+
+        <div className="relative flex flex-col items-center gap-6 px-8 py-20 text-center sm:py-28">
+          <p className="font-mono text-xs tracking-[0.3em] text-arc">WEBASSEMBLY · WEBGL2 · REAL .VPX TABLES</p>
+          <h1 className="font-display text-6xl font-black leading-none tracking-wide text-paper sm:text-8xl">
+            VPINBALL
+          </h1>
+          <p className="max-w-md font-body text-chrome">
+            Real Visual Pinball tables, playing in your browser. Drop in a{" "}
+            <code className="font-mono text-arc">.vpx</code> file, or try the bundled demo.
+          </p>
+
+          <div className="mt-4 flex flex-col items-center gap-3 sm:flex-row">
+            <Button type="button" variant="primary" onClick={() => router.push("/play")}>
+              Insert Coin — Play Demo
+            </Button>
+            <label htmlFor={VPX_FILE_INPUT_ID} className={buttonClassName("outline", "cursor-pointer")}>
+              Load Your Table
+            </label>
+          </div>
+
+          <p className="font-mono text-xs text-chrome">or drag a .vpx file anywhere onto this panel</p>
+
+          {error && (
+            <p role="alert" className="font-mono text-sm text-marquee">
+              {error}
+            </p>
+          )}
+        </div>
+      </div>
+    </FileDropZone>
+  );
+}