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