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
This commit is contained in:
2026-08-23 20:15:41 +02:00
co-authored by Claude Sonnet 5
parent 5b30442c4a
commit 35fb68c916
21 changed files with 472 additions and 99 deletions
+1 -1
View File
@@ -9,7 +9,7 @@
--color-arc: #4ce0d2; /* fluorescent-tube cyan — focus rings, secondary */
--color-paper: #f3efe6; /* aged-backglass cream — high-contrast body text */
--font-display: var(--font-big-shoulders), "Arial Narrow", sans-serif;
--font-display: var(--font-display-face), "Arial Narrow", sans-serif;
--font-body: var(--font-space-grotesk), system-ui, sans-serif;
--font-mono: var(--font-plex-mono), "IBM Plex Mono", ui-monospace, monospace;
}
+4 -9
View File
@@ -1,17 +1,12 @@
import type { Metadata, Viewport } from "next";
import { Big_Shoulders, Space_Grotesk, IBM_Plex_Mono } from "next/font/google";
import { Barlow_Condensed, Space_Grotesk, IBM_Plex_Mono } from "next/font/google";
import RegisterServiceWorker from "@/components/RegisterServiceWorker";
import "./globals.css";
const bigShoulders = Big_Shoulders({
variable: "--font-big-shoulders",
const displayFont = Barlow_Condensed({
variable: "--font-display-face",
weight: ["700", "900"],
subsets: ["latin"],
// Next's fallback-metrics table has no entry for this (newer, merged
// variable-font) family name, so the automatic CLS-reducing fallback
// override it would otherwise generate always fails with a build
// warning — opt out instead of leaving that warning unresolved.
adjustFontFallback: false,
});
const spaceGrotesk = Space_Grotesk({
@@ -39,7 +34,7 @@ export default function RootLayout({ children }: LayoutProps<"/">) {
return (
<html
lang="en"
className={`${bigShoulders.variable} ${spaceGrotesk.variable} ${plexMono.variable} h-full antialiased`}
className={`${displayFont.variable} ${spaceGrotesk.variable} ${plexMono.variable} h-full antialiased`}
>
<body className="min-h-full flex flex-col bg-ink text-paper font-body">
{children}
+2 -3
View File
@@ -1,12 +1,11 @@
import AttractHero from "@/components/landing/AttractHero";
import TableLibrary from "@/components/landing/TableLibrary";
export default function Home() {
return (
<main className="flex flex-1 flex-col items-center justify-center gap-8 px-4 py-16">
<AttractHero />
<p className="max-w-lg text-center font-mono text-xs text-chrome sm:hidden">
Pinball plays best in landscape or fullscreen rotate your device once a table loads.
</p>
<TableLibrary />
<footer className="font-mono text-xs text-chrome/70">
Powered by{" "}
<a