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
@@ -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>
+  );
+}