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,45 @@
+import type { Metadata, Viewport } from "next";
+import { Big_Shoulders, 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",
+  weight: ["700", "900"],
+  subsets: ["latin"],
+});
+
+const spaceGrotesk = Space_Grotesk({
+  variable: "--font-space-grotesk",
+  subsets: ["latin"],
+});
+
+const plexMono = IBM_Plex_Mono({
+  variable: "--font-plex-mono",
+  weight: ["400", "500", "600"],
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "vpinball — Visual Pinball in your browser",
+  description:
+    "Play real .vpx pinball tables in the browser, powered by a WebAssembly build of Visual Pinball. Drop in your own table or play the bundled demo.",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#0b0b0f",
+};
+
+export default function RootLayout({ children }: LayoutProps<"/">) {
+  return (
+    <html
+      lang="en"
+      className={`${bigShoulders.variable} ${spaceGrotesk.variable} ${plexMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col bg-ink text-paper font-body">
+        {children}
+        <RegisterServiceWorker />
+      </body>
+    </html>
+  );
+}