Add ROM upload, local table library, engine bump, and UX/responsiveness fixes

- Bump @valknar/vpinball-wasm to 0.3.2 (PinMAME ROM support, MsgBox fix) - Add optional PinMAME ROM .zip upload alongside .vpx tables - Persist uploaded tables/ROMs in IndexedDB so users don't have to re-upload on later visits, with a library list on the landing page - Fix Insert Coin key mismatch with the engine's real coin-door gating (now bound to 4, matching the shared table scripts) and surface it in the controls legend and "Tap to Start" hint - Make the landing page, staging panel, and in-game HUD responsive for portrait phone widths; drop the landscape hint since portrait plays fine - Replace the separate STATS HUD toggle with an FPS row in the info panel Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01N9JmzRBZenapVkFWjw9jmG
2026-08-23 20:15:41 +02:00
parent 5b30442c4a
commit 35fb68c916
21 changed files with 472 additions and 99 deletions
@@ -4,18 +4,33 @@ 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 TableStaging from "./TableStaging";
 import { setPendingTable } from "@/lib/pinball/tableSelectionStore";

 export default function AttractHero() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
+  const [stagedFile, setStagedFile] = useState<File | null>(null);

  const handleFile = (file: File) => {
    setError(null);
-    setPendingTable(file);
+    setStagedFile(file);
+  };
+
+  const handlePlay = (romFile: File | undefined, saveToLibrary: boolean) => {
+    if (!stagedFile) return;
+    setPendingTable({ kind: "upload", vpxFile: stagedFile, romFile, saveToLibrary });
    router.push("/play");
  };

+  if (stagedFile) {
+    return (
+      <div className="w-full max-w-4xl">
+        <TableStaging vpxFile={stagedFile} onPlay={handlePlay} onCancel={() => setStagedFile(null)} />
+      </div>
+    );
+  }
+
  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">
@@ -37,9 +52,9 @@ export default function AttractHero() {
          }}
        />

-        <div className="relative flex flex-col items-center gap-6 px-8 py-20 text-center sm:py-28">
+        <div className="relative flex flex-col items-center gap-6 px-4 py-14 text-center sm:px-8 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">
+          <h1 className="font-display text-5xl font-black leading-none tracking-wide text-paper sm:text-8xl">
            VPINBALL
          </h1>
          <p className="max-w-md font-body text-chrome">
@@ -0,0 +1,68 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { formatBytes } from "@/lib/format";
+import { deleteFromLibrary, listLibrary, type LibraryEntryMeta } from "@/lib/pinball/tableLibrary";
+import { setPendingTable } from "@/lib/pinball/tableSelectionStore";
+
+export default function TableLibrary() {
+  const router = useRouter();
+  const [entries, setEntries] = useState<LibraryEntryMeta[] | null>(null);
+
+  useEffect(() => {
+    listLibrary()
+      .then(setEntries)
+      .catch((err) => {
+        console.error("Failed to read table library:", err);
+        setEntries([]);
+      });
+  }, []);
+
+  if (!entries || entries.length === 0) return null;
+
+  const handlePlay = (id: string) => {
+    setPendingTable({ kind: "library", id });
+    router.push("/play");
+  };
+
+  const handleDelete = async (id: string) => {
+    await deleteFromLibrary(id);
+    setEntries((prev) => prev?.filter((entry) => entry.id !== id) ?? null);
+  };
+
+  return (
+    <div className="w-full max-w-4xl">
+      <h2 className="mb-3 font-display text-xl tracking-wide text-paper">Your Library</h2>
+      <ul className="divide-y divide-chrome/20 rounded-lg border border-chrome/30 bg-ash">
+        {entries.map((entry) => (
+          <li key={entry.id} className="flex items-center justify-between gap-3 px-4 py-3">
+            <div className="min-w-0">
+              <div className="truncate font-mono text-sm text-paper">{entry.name}</div>
+              <div className="font-mono text-xs text-chrome">
+                {formatBytes(entry.sizeBytes)}
+                {entry.romFileName ? ` · ROM: ${entry.romFileName}` : ""}
+              </div>
+            </div>
+            <div className="flex shrink-0 items-center gap-2">
+              <button
+                type="button"
+                onClick={() => handlePlay(entry.id)}
+                className="rounded-full border-2 border-marquee bg-marquee/10 px-4 py-1.5 font-display text-sm tracking-wide text-marquee transition hover:bg-marquee/20"
+              >
+                Play
+              </button>
+              <button
+                type="button"
+                onClick={() => handleDelete(entry.id)}
+                className="rounded-full border border-chrome/40 px-4 py-1.5 font-display text-sm tracking-wide text-chrome transition hover:border-marquee hover:text-marquee"
+              >
+                Delete
+              </button>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
@@ -0,0 +1,94 @@
+"use client";
+
+import { useState, type ChangeEvent } from "react";
+import Button, { buttonClassName } from "@/components/ui/Button";
+import { formatBytes } from "@/lib/format";
+
+const ROM_FILE_INPUT_ID = "rom-file-input";
+
+export interface TableStagingProps {
+  vpxFile: File;
+  onPlay: (romFile: File | undefined, saveToLibrary: boolean) => void;
+  onCancel: () => void;
+}
+
+export default function TableStaging({ vpxFile, onPlay, onCancel }: TableStagingProps) {
+  const [romFile, setRomFile] = useState<File | null>(null);
+  const [saveToLibrary, setSaveToLibrary] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleRomChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    if (!file.name.toLowerCase().endsWith(".zip")) {
+      setError(`"${file.name}" isn't a .zip file.`);
+      return;
+    }
+    setError(null);
+    setRomFile(file);
+  };
+
+  return (
+    <div className="relative overflow-hidden rounded-t-3xl rounded-b-lg border-2 border-chrome/40 bg-ash shadow-2xl">
+      <div className="relative flex flex-col items-center gap-5 px-4 py-14 text-center sm:px-8">
+        <p className="font-mono text-xs tracking-[0.3em] text-arc">TABLE SELECTED</p>
+        <h2 className="max-w-lg truncate font-display text-3xl font-black tracking-wide text-paper sm:text-4xl">
+          {vpxFile.name}
+        </h2>
+        <p className="font-mono text-xs text-chrome">{formatBytes(vpxFile.size)}</p>
+
+        <div className="mt-2 flex flex-col items-center gap-2">
+          <p className="max-w-sm font-body text-sm text-chrome">
+            Real-hardware (&quot;SS&quot;) tables need a matching PinMAME ROM. Attach its zip if you have one
+            — most tables don&apos;t need this.
+          </p>
+          <label htmlFor={ROM_FILE_INPUT_ID} className={buttonClassName("outline", "cursor-pointer text-sm")}>
+            {romFile ? `ROM: ${romFile.name}` : "Attach ROM (.zip) — optional"}
+          </label>
+          <input
+            id={ROM_FILE_INPUT_ID}
+            type="file"
+            accept=".zip"
+            className="sr-only"
+            onChange={handleRomChange}
+          />
+          {romFile && (
+            <button
+              type="button"
+              onClick={() => setRomFile(null)}
+              className="font-mono text-xs text-chrome underline decoration-dotted underline-offset-2 hover:text-arc"
+            >
+              Remove ROM
+            </button>
+          )}
+        </div>
+
+        <label className="flex items-center gap-2 font-mono text-xs text-chrome">
+          <input
+            type="checkbox"
+            checked={saveToLibrary}
+            onChange={(e) => setSaveToLibrary(e.target.checked)}
+            className="accent-marquee"
+          />
+          Save to my library, so I don&apos;t need to re-upload it later
+        </label>
+
+        {error && (
+          <p role="alert" className="font-mono text-sm text-marquee">
+            {error}
+          </p>
+        )}
+
+        <div className="mt-2 flex items-center gap-3">
+          <Button type="button" variant="primary" onClick={() => onPlay(romFile ?? undefined, saveToLibrary)}>
+            Play
+          </Button>
+          <Button type="button" variant="quiet" onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}