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
This commit is contained in:
Claude Sonnet 5
+44
@@ -0,0 +1,44 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
.pnpm-debug.log*
|
||||||
|
|
||||||
|
# env files (can opt-in for committing if needed)
|
||||||
|
.env*
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
|
|
||||||
|
# vpinball-wasm engine assets, copied from node_modules at build time
|
||||||
|
/public/vendor/
|
||||||
|
|
||||||
|
# typescript
|
||||||
|
*.tsbuildinfo
|
||||||
|
next-env.d.ts
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# @valknar/vpinball-wasm is published to a private Gitea npm registry.
|
||||||
|
# It's publicly readable, so no auth token is needed here.
|
||||||
|
@valknar:registry=https://dev.pivoine.art/api/packages/valknar/npm/
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<!-- BEGIN:nextjs-agent-rules -->
|
||||||
|
|
||||||
|
# This is NOT the Next.js you know
|
||||||
|
|
||||||
|
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
|
||||||
|
|
||||||
|
This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
|
||||||
|
|
||||||
|
<!-- END:nextjs-agent-rules -->
|
||||||
+20
@@ -0,0 +1,20 @@
|
|||||||
|
# syntax=docker/dockerfile:1
|
||||||
|
FROM node:22-alpine AS base
|
||||||
|
ENV CI=true
|
||||||
|
RUN corepack enable
|
||||||
|
|
||||||
|
FROM base AS deps
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package.json pnpm-lock.yaml pnpm-workspace.yaml* .npmrc* ./
|
||||||
|
RUN pnpm install --frozen-lockfile --trust-lockfile
|
||||||
|
|
||||||
|
FROM base AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
COPY --from=deps /app/node_modules ./node_modules
|
||||||
|
COPY . .
|
||||||
|
RUN pnpm build
|
||||||
|
|
||||||
|
FROM nginx:1.27-alpine AS runner
|
||||||
|
COPY --from=builder /app/out /usr/share/nginx/html
|
||||||
|
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
EXPOSE 80
|
||||||
@@ -0,0 +1,117 @@
|
|||||||
|
# vpinball
|
||||||
|
|
||||||
|
Play real `.vpx` pinball tables in your browser. Drop in your own table or try the bundled demo —
|
||||||
|
no plugins, no native install. Powered by [`@valknar/vpinball-wasm`](https://dev.pivoine.art/valknar/vpinball-wasm),
|
||||||
|
a WebAssembly build of the real [Visual Pinball](https://github.com/vpinball/vpinball) engine
|
||||||
|
(real physics, real VBScript table scripting, real WebGL2 rendering).
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Play any self-contained `.vpx` table** — drag a file onto the landing page, or click to browse.
|
||||||
|
- **Demo mode** — a bundled table plays instantly with no upload required.
|
||||||
|
- **Fullscreen**, a live **FPS/stats** readout, and a **game info** panel (table name, size, load
|
||||||
|
time) in an in-game HUD styled after a pinball cabinet's coin door.
|
||||||
|
- **Installable as a PWA** — add it to your home screen or desktop; the engine is cached after
|
||||||
|
your first game so it's available offline afterward.
|
||||||
|
- **Deployable as a static site** via Docker Compose — no Node server at runtime, just nginx
|
||||||
|
serving prebuilt files.
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
- Node.js ≥ 20, [pnpm](https://pnpm.io) ≥ 11
|
||||||
|
- Docker + Docker Compose, for the containerized deploy
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install --frozen-lockfile --trust-lockfile
|
||||||
|
```
|
||||||
|
|
||||||
|
`vpinball-wasm` is published to a private Gitea npm registry
|
||||||
|
(`https://dev.pivoine.art/api/packages/valknar/npm/`) under the `@valknar` scope. `.npmrc` maps
|
||||||
|
that scope to the registry; the package is publicly readable, so no auth token is needed to
|
||||||
|
install it.
|
||||||
|
|
||||||
|
To bump the engine to a newer published version:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm add @valknar/vpinball-wasm@<version>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
`pnpm dev` copies the engine's build output into `public/vendor/vpinball-wasm/` first (via the
|
||||||
|
`predev` script) — it's gitignored and regenerated from `node_modules`, so this only needs
|
||||||
|
`pnpm install` to have completed. Re-run `pnpm run copy-engine-assets` by hand if you update the
|
||||||
|
dependency without restarting the dev server.
|
||||||
|
|
||||||
|
The dev server runs at `http://localhost:3000`.
|
||||||
|
|
||||||
|
## Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
Produces a fully static export in `out/` (`next.config.ts` sets `output: "export"`) — no Node
|
||||||
|
server needed to serve it.
|
||||||
|
|
||||||
|
## Docker deploy
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker compose build
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
Serves the static build via nginx on `http://localhost:8080`. No secrets or registry
|
||||||
|
authentication are required to build the image.
|
||||||
|
|
||||||
|
## PWA
|
||||||
|
|
||||||
|
The app can be installed from the browser's install prompt. A hand-rolled service worker
|
||||||
|
(`public/sw.js`) precaches the app shell; the engine's `.wasm`/`.data` files (~34 MB) are cached
|
||||||
|
on first visit to `/play`, not upfront, so installing the app doesn't force a large download
|
||||||
|
before anyone has actually played. After that first visit, offline reloads work.
|
||||||
|
|
||||||
|
When you ship a release that changes the app shell or updates the vendored engine build, bump the
|
||||||
|
cache version so returning visitors actually get the update:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm run sw:bump
|
||||||
|
```
|
||||||
|
|
||||||
|
## Controls
|
||||||
|
|
||||||
|
| Key | Action |
|
||||||
|
| -------------- | ------------- |
|
||||||
|
| Left Shift | Left flipper |
|
||||||
|
| Right Shift | Right flipper |
|
||||||
|
| Enter | Plunger |
|
||||||
|
| 1 | Start game |
|
||||||
|
|
||||||
|
On touch devices, an on-screen control overlay appears automatically once a table is running.
|
||||||
|
|
||||||
|
## Limitations
|
||||||
|
|
||||||
|
Inherited from the underlying engine:
|
||||||
|
|
||||||
|
- Only self-contained `.vpx` tables are supported — tables that reference an external `.vbs`
|
||||||
|
script override or a `Music/` folder won't load correctly.
|
||||||
|
- No PinMAME, DOF, or FlexDMD plugin support.
|
||||||
|
- Single-threaded (no `SharedArrayBuffer`) — performance depends on your device's single-core
|
||||||
|
WebGL2 throughput.
|
||||||
|
- Initial engine download is ~34 MB (cached after the first visit).
|
||||||
|
- Gamepad input and DMD rendering are implemented but not yet confirmed on real hardware/tables.
|
||||||
|
- Raw cabinet hardware input (real nudge/plunger boards) has no browser equivalent.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
This app's own source has no license file yet — add one before distributing it. Separately, the
|
||||||
|
built output bundles the `@valknar/vpinball-wasm` engine and its default table, which redistribute
|
||||||
|
Visual Pinball source under a **mixed legacy/GPLv3+ license** (migrating file-by-file to GPLv3+
|
||||||
|
since October 2020) — see that package's own `LICENSE` for the authoritative terms before
|
||||||
|
distributing a build.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -0,0 +1,42 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
/* Cabinet palette — grounded in real pinball-machine parts, not a generic dark theme. */
|
||||||
|
--color-ink: #0b0b0f; /* cabinet body / page background */
|
||||||
|
--color-ash: #1b1c22; /* panel surface */
|
||||||
|
--color-chrome: #a9aebb; /* metal bezel, borders, muted text */
|
||||||
|
--color-marquee: #ff7a29; /* GI lamp amber — primary accent, CTAs */
|
||||||
|
--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-body: var(--font-space-grotesk), system-ui, sans-serif;
|
||||||
|
--font-mono: var(--font-plex-mono), "IBM Plex Mono", ui-monospace, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
animation-duration: 0.01ms !important;
|
||||||
|
animation-iteration-count: 1 !important;
|
||||||
|
transition-duration: 0.01ms !important;
|
||||||
|
scroll-behavior: auto !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--color-ink);
|
||||||
|
color: var(--color-paper);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
background: var(--color-marquee);
|
||||||
|
color: var(--color-ink);
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--color-arc);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import type { MetadataRoute } from "next";
|
||||||
|
|
||||||
|
// Required under output: "export" — a manifest route has no per-request
|
||||||
|
// dynamic behavior anyway, so this just makes that explicit to the build.
|
||||||
|
export const dynamic = "force-static";
|
||||||
|
|
||||||
|
export default function manifest(): MetadataRoute.Manifest {
|
||||||
|
return {
|
||||||
|
name: "vpinball — Visual Pinball in your browser",
|
||||||
|
short_name: "vpinball",
|
||||||
|
description: "Play real .vpx pinball tables in the browser, powered by WebAssembly.",
|
||||||
|
start_url: "/",
|
||||||
|
display: "fullscreen",
|
||||||
|
background_color: "#0b0b0f",
|
||||||
|
theme_color: "#0b0b0f",
|
||||||
|
icons: [
|
||||||
|
{ src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
|
||||||
|
{ src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" },
|
||||||
|
{
|
||||||
|
src: "/icons/icon-512-maskable.png",
|
||||||
|
sizes: "512x512",
|
||||||
|
type: "image/png",
|
||||||
|
purpose: "maskable",
|
||||||
|
},
|
||||||
|
{ src: "/icons/icon.svg", sizes: "any", type: "image/svg+xml" },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import { buttonClassName } from "@/components/ui/Button";
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<main className="flex flex-1 flex-col items-center justify-center gap-6 px-4 py-24 text-center">
|
||||||
|
<p className="font-mono text-sm tracking-[0.3em] text-arc">TILT</p>
|
||||||
|
<h1 className="font-display text-5xl font-black tracking-wide text-marquee sm:text-7xl">
|
||||||
|
TABLE NOT FOUND
|
||||||
|
</h1>
|
||||||
|
<p className="max-w-md font-body text-chrome">
|
||||||
|
That page drained down the outlane. Head back to the cabinet and pick a table.
|
||||||
|
</p>
|
||||||
|
<Link href="/" className={buttonClassName("primary")}>
|
||||||
|
Back to Start
|
||||||
|
</Link>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import AttractHero from "@/components/landing/AttractHero";
|
||||||
|
|
||||||
|
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>
|
||||||
|
<footer className="font-mono text-xs text-chrome/70">
|
||||||
|
Powered by{" "}
|
||||||
|
<a
|
||||||
|
href="https://github.com/vpinball/vpinball"
|
||||||
|
className="underline decoration-dotted underline-offset-2 hover:text-arc"
|
||||||
|
>
|
||||||
|
Visual Pinball
|
||||||
|
</a>
|
||||||
|
, compiled to WebAssembly.
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import PlayView from "@/components/pinball/PlayView";
|
||||||
|
|
||||||
|
export default function PlayPage() {
|
||||||
|
return (
|
||||||
|
<main className="h-dvh w-full">
|
||||||
|
<PlayView />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, type ChangeEvent, type DragEvent, type ReactNode } from "react";
|
||||||
|
|
||||||
|
export const VPX_FILE_INPUT_ID = "vpx-file-input";
|
||||||
|
|
||||||
|
export interface FileDropZoneProps {
|
||||||
|
onFile: (file: File) => void;
|
||||||
|
onError: (message: string) => void;
|
||||||
|
children: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function validate(file: File | undefined, onFile: (file: File) => void, onError: (m: string) => void) {
|
||||||
|
if (!file) return;
|
||||||
|
if (!file.name.toLowerCase().endsWith(".vpx")) {
|
||||||
|
onError(`"${file.name}" isn't a .vpx file.`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onFile(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function FileDropZone({ onFile, onError, children, className = "" }: FileDropZoneProps) {
|
||||||
|
const [isDragging, setIsDragging] = useState(false);
|
||||||
|
|
||||||
|
const handleDrop = (e: DragEvent<HTMLDivElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsDragging(false);
|
||||||
|
validate(e.dataTransfer.files[0], onFile, onError);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
validate(e.target.files?.[0], onFile, onError);
|
||||||
|
e.target.value = "";
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onDragOver={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsDragging(true);
|
||||||
|
}}
|
||||||
|
onDragLeave={() => setIsDragging(false)}
|
||||||
|
onDrop={handleDrop}
|
||||||
|
className={`relative ${className}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<input
|
||||||
|
id={VPX_FILE_INPUT_ID}
|
||||||
|
type="file"
|
||||||
|
accept=".vpx"
|
||||||
|
className="sr-only"
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
{isDragging && (
|
||||||
|
<div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-lg bg-ink/85 font-display text-3xl tracking-wide text-arc ring-2 ring-arc">
|
||||||
|
DROP TO LOAD
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { formatBytes, formatDuration } from "@/lib/format";
|
||||||
|
import { KEY_BINDINGS } from "@/lib/pinball/keyBindings";
|
||||||
|
import type { TableInfo } from "@/lib/pinball/types";
|
||||||
|
|
||||||
|
export interface GameInfoPanelProps {
|
||||||
|
tableInfo: TableInfo;
|
||||||
|
loadTimeMs: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function GameInfoPanel({ tableInfo, loadTimeMs }: GameInfoPanelProps) {
|
||||||
|
return (
|
||||||
|
<div className="w-72 space-y-4 rounded border border-chrome/30 bg-ash/95 p-4 font-mono text-sm text-paper shadow-xl">
|
||||||
|
<div>
|
||||||
|
<div className="text-xs tracking-widest text-chrome">TABLE</div>
|
||||||
|
<div className="truncate text-arc">{tableInfo.name}</div>
|
||||||
|
</div>
|
||||||
|
<dl className="grid grid-cols-2 gap-x-2 gap-y-1 text-xs">
|
||||||
|
<dt className="text-chrome">Source</dt>
|
||||||
|
<dd>{tableInfo.isDemo ? "Bundled demo" : "Your upload"}</dd>
|
||||||
|
<dt className="text-chrome">Size</dt>
|
||||||
|
<dd>{tableInfo.isDemo ? "—" : formatBytes(tableInfo.sizeBytes)}</dd>
|
||||||
|
<dt className="text-chrome">Load time</dt>
|
||||||
|
<dd>{loadTimeMs !== null ? formatDuration(loadTimeMs) : "—"}</dd>
|
||||||
|
</dl>
|
||||||
|
<div>
|
||||||
|
<div className="mb-1 text-xs tracking-widest text-chrome">CONTROLS</div>
|
||||||
|
<ul className="space-y-1 text-xs">
|
||||||
|
{KEY_BINDINGS.map((binding) => (
|
||||||
|
<li key={binding.action} className="flex justify-between gap-2">
|
||||||
|
<span className="text-chrome">{binding.action}</span>
|
||||||
|
<span className="text-paper">{binding.keys}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
export default function RegisterServiceWorker() {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!("serviceWorker" in navigator)) return;
|
||||||
|
navigator.serviceWorker.register("/sw.js").catch((err) => {
|
||||||
|
console.error("Service worker registration failed:", err);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import type { PinballInstance } from "@valknar/vpinball-wasm";
|
||||||
|
import { useIdleTimer } from "./useIdleTimer";
|
||||||
|
import StatsReadout from "./StatsReadout";
|
||||||
|
import GameInfoPanel from "@/components/GameInfoPanel";
|
||||||
|
import type { TableInfo } from "@/lib/pinball/types";
|
||||||
|
|
||||||
|
export interface CoinDoorHudProps {
|
||||||
|
instanceRef: React.RefObject<PinballInstance | null>;
|
||||||
|
tableInfo: TableInfo;
|
||||||
|
loadTimeMs: number | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function HudButton({
|
||||||
|
label,
|
||||||
|
active,
|
||||||
|
onClick,
|
||||||
|
}: {
|
||||||
|
label: string;
|
||||||
|
active?: boolean;
|
||||||
|
onClick: () => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClick}
|
||||||
|
aria-pressed={active}
|
||||||
|
className={`rounded-sm border px-3 py-1.5 font-mono text-xs tracking-widest transition ${
|
||||||
|
active
|
||||||
|
? "border-marquee bg-marquee/20 text-marquee"
|
||||||
|
: "border-chrome/40 bg-black/30 text-chrome hover:border-arc hover:text-arc"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CoinDoorHud({ instanceRef, tableInfo, loadTimeMs }: CoinDoorHudProps) {
|
||||||
|
const router = useRouter();
|
||||||
|
const isIdle = useIdleTimer(3000);
|
||||||
|
const [showStats, setShowStats] = useState(false);
|
||||||
|
const [showInfo, setShowInfo] = useState(false);
|
||||||
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onChange = () => setIsFullscreen(Boolean(document.fullscreenElement));
|
||||||
|
document.addEventListener("fullscreenchange", onChange);
|
||||||
|
return () => document.removeEventListener("fullscreenchange", onChange);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleFullscreen = () => {
|
||||||
|
instanceRef.current?.requestFullscreen();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEject = () => {
|
||||||
|
// dispose() (called by usePinballInstance's unmount cleanup, triggered by
|
||||||
|
// this navigation) tears the instance down immediately. Calling stop()
|
||||||
|
// here too raced it — stop() defers teardown to the engine's next
|
||||||
|
// internal step, and dispose() freeing WASM memory before that step runs
|
||||||
|
// hung the tab.
|
||||||
|
router.push("/");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
data-hud
|
||||||
|
className={`absolute inset-x-0 top-0 z-10 flex items-center justify-between gap-3 border-b border-chrome/30 bg-ash/90 px-4 py-2 backdrop-blur transition-opacity duration-300 ${
|
||||||
|
isIdle ? "pointer-events-none opacity-0" : "opacity-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="font-display text-lg tracking-wide text-marquee">VPINBALL</span>
|
||||||
|
<span className="hidden truncate font-mono text-xs text-chrome sm:inline">
|
||||||
|
{tableInfo.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
{showStats && <StatsReadout />}
|
||||||
|
<HudButton label="INFO" active={showInfo} onClick={() => setShowInfo((v) => !v)} />
|
||||||
|
<HudButton label="STATS" active={showStats} onClick={() => setShowStats((v) => !v)} />
|
||||||
|
<HudButton
|
||||||
|
label={isFullscreen ? "EXIT FS" : "FULLSCREEN"}
|
||||||
|
active={isFullscreen}
|
||||||
|
onClick={handleFullscreen}
|
||||||
|
/>
|
||||||
|
<HudButton label="EJECT" onClick={handleEject} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showInfo && (
|
||||||
|
<div className="absolute right-4 top-16 z-10">
|
||||||
|
<GameInfoPanel tableInfo={tableInfo} loadTimeMs={loadTimeMs} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
/** Self-contained rAF-based FPS counter — the engine exposes no perf API of its own. */
|
||||||
|
export default function StatsReadout() {
|
||||||
|
const [fps, setFps] = useState<number | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let frameCount = 0;
|
||||||
|
let windowStart = performance.now();
|
||||||
|
let raf = 0;
|
||||||
|
|
||||||
|
const tick = (now: number) => {
|
||||||
|
frameCount += 1;
|
||||||
|
const elapsed = now - windowStart;
|
||||||
|
if (elapsed >= 500) {
|
||||||
|
setFps(Math.round((frameCount * 1000) / elapsed));
|
||||||
|
frameCount = 0;
|
||||||
|
windowStart = now;
|
||||||
|
}
|
||||||
|
raf = requestAnimationFrame(tick);
|
||||||
|
};
|
||||||
|
raf = requestAnimationFrame(tick);
|
||||||
|
|
||||||
|
return () => cancelAnimationFrame(raf);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-baseline gap-2 rounded border border-chrome/30 bg-black/40 px-3 py-1.5 font-mono">
|
||||||
|
<span className="text-xs tracking-widest text-chrome">FPS</span>
|
||||||
|
<span className="text-lg tabular-nums text-arc">{fps ?? "--"}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
|
||||||
|
/** True once no pointer/keyboard activity has been seen for `timeoutMs`. */
|
||||||
|
export function useIdleTimer(timeoutMs = 3000): boolean {
|
||||||
|
const [isIdle, setIsIdle] = useState(false);
|
||||||
|
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const reset = () => {
|
||||||
|
setIsIdle(false);
|
||||||
|
if (timerRef.current) clearTimeout(timerRef.current);
|
||||||
|
timerRef.current = setTimeout(() => setIsIdle(true), timeoutMs);
|
||||||
|
};
|
||||||
|
|
||||||
|
reset();
|
||||||
|
const events: Array<keyof WindowEventMap> = [
|
||||||
|
"mousemove",
|
||||||
|
"pointerdown",
|
||||||
|
"touchstart",
|
||||||
|
"keydown",
|
||||||
|
];
|
||||||
|
events.forEach((event) => window.addEventListener(event, reset, { passive: true }));
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (timerRef.current) clearTimeout(timerRef.current);
|
||||||
|
events.forEach((event) => window.removeEventListener(event, reset));
|
||||||
|
};
|
||||||
|
}, [timeoutMs]);
|
||||||
|
|
||||||
|
return isIdle;
|
||||||
|
}
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
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 { setPendingTable } from "@/lib/pinball/tableSelectionStore";
|
||||||
|
|
||||||
|
export default function AttractHero() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const handleFile = (file: File) => {
|
||||||
|
setError(null);
|
||||||
|
setPendingTable(file);
|
||||||
|
router.push("/play");
|
||||||
|
};
|
||||||
|
|
||||||
|
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">
|
||||||
|
{/* Backglass glow — stands in for real playfield art; GI-lamp amber + a cyan tube accent. */}
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="pointer-events-none absolute inset-0 opacity-70"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"radial-gradient(60% 50% at 30% 20%, rgba(255,122,41,0.35), transparent 70%), radial-gradient(45% 40% at 80% 70%, rgba(76,224,210,0.25), transparent 70%)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="pointer-events-none absolute inset-0"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative flex flex-col items-center gap-6 px-8 py-20 text-center 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">
|
||||||
|
VPINBALL
|
||||||
|
</h1>
|
||||||
|
<p className="max-w-md font-body text-chrome">
|
||||||
|
Real Visual Pinball tables, playing in your browser. Drop in a{" "}
|
||||||
|
<code className="font-mono text-arc">.vpx</code> file, or try the bundled demo.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-4 flex flex-col items-center gap-3 sm:flex-row">
|
||||||
|
<Button type="button" variant="primary" onClick={() => router.push("/play")}>
|
||||||
|
Insert Coin — Play Demo
|
||||||
|
</Button>
|
||||||
|
<label htmlFor={VPX_FILE_INPUT_ID} className={buttonClassName("outline", "cursor-pointer")}>
|
||||||
|
Load Your Table
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="font-mono text-xs text-chrome">or drag a .vpx file anywhere onto this panel</p>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p role="alert" className="font-mono text-sm text-marquee">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FileDropZone>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import dynamic from "next/dynamic";
|
||||||
|
import type { PinballCanvasImplProps } from "./PinballCanvasImpl";
|
||||||
|
|
||||||
|
// The engine touches window/canvas/WebGL as soon as it mounts, so it's kept
|
||||||
|
// out of the server render entirely rather than just deferring to an effect.
|
||||||
|
const PinballCanvasImpl = dynamic<PinballCanvasImplProps>(() => import("./PinballCanvasImpl"), {
|
||||||
|
ssr: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function PinballCanvas(props: PinballCanvasImplProps) {
|
||||||
|
return <PinballCanvasImpl {...props} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRef } from "react";
|
||||||
|
import { usePinballInstance } from "@/lib/pinball/usePinballInstance";
|
||||||
|
import { useTouchControls } from "@/lib/pinball/useTouchControls";
|
||||||
|
import CoinDoorHud from "@/components/hud/CoinDoorHud";
|
||||||
|
import type { TableInfo } from "@/lib/pinball/types";
|
||||||
|
|
||||||
|
export interface PinballCanvasImplProps {
|
||||||
|
tableData?: ArrayBuffer;
|
||||||
|
tableInfo: TableInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PinballCanvasImpl({ tableData, tableInfo }: PinballCanvasImplProps) {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||||
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const { status, progress, error, loadTimeMs, instanceRef, start } = usePinballInstance(
|
||||||
|
canvasRef,
|
||||||
|
tableData,
|
||||||
|
);
|
||||||
|
useTouchControls(containerRef, status === "running");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={containerRef} className="relative h-full w-full overflow-hidden bg-black">
|
||||||
|
{/* SDL3's Emscripten backend resolves its own window/GL-context target via
|
||||||
|
document.querySelector("#canvas") independently of Module.canvas — the
|
||||||
|
id is required or context creation silently no-ops (findCanvasEventTarget
|
||||||
|
returns null, emscripten_webgl_create_context returns handle 0, and the
|
||||||
|
engine crashes later reading an unset GL context). */}
|
||||||
|
<canvas id="canvas" ref={canvasRef} className="h-full w-full" />
|
||||||
|
|
||||||
|
{(status === "ready" || status === "running") && (
|
||||||
|
<CoinDoorHud instanceRef={instanceRef} tableInfo={tableInfo} loadTimeMs={loadTimeMs} />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{status === "loading" && (
|
||||||
|
<div className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-ink/90 text-paper">
|
||||||
|
<div className="font-display text-2xl tracking-wide text-marquee">LOADING TABLE</div>
|
||||||
|
<div className="h-2 w-64 overflow-hidden rounded-full bg-ash">
|
||||||
|
<div
|
||||||
|
className="h-full bg-marquee transition-[width]"
|
||||||
|
style={{ width: `${Math.round(progress * 100)}%` }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="font-mono text-sm text-chrome">{Math.round(progress * 100)}%</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{status === "error" && (
|
||||||
|
<div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-ink px-8 text-center text-paper">
|
||||||
|
<div className="font-display text-2xl text-marquee">TABLE NOT LOADING</div>
|
||||||
|
<p className="max-w-md font-body text-chrome">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{status === "ready" && (
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center bg-ink/80">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={start}
|
||||||
|
className="rounded-full border-2 border-marquee bg-marquee/10 px-8 py-4 font-display text-2xl tracking-wide text-marquee shadow-[0_0_24px_rgba(255,122,41,0.5)] transition hover:bg-marquee/20"
|
||||||
|
>
|
||||||
|
TAP TO START
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import PinballCanvas from "./PinballCanvas";
|
||||||
|
import { takePendingTable } from "@/lib/pinball/tableSelectionStore";
|
||||||
|
import type { TableInfo } from "@/lib/pinball/types";
|
||||||
|
|
||||||
|
interface ResolvedTable {
|
||||||
|
tableData?: ArrayBuffer;
|
||||||
|
tableInfo: TableInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PlayView() {
|
||||||
|
const [resolved, setResolved] = useState<ResolvedTable | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
(async () => {
|
||||||
|
const file = takePendingTable();
|
||||||
|
if (file) {
|
||||||
|
const tableData = await file.arrayBuffer();
|
||||||
|
if (cancelled) return;
|
||||||
|
setResolved({
|
||||||
|
tableData,
|
||||||
|
tableInfo: { name: file.name, sizeBytes: file.size, isDemo: false },
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// No pending upload (fresh visit, or a hard refresh of /play) — fall
|
||||||
|
// back to the bundled demo table rather than dead-ending the route.
|
||||||
|
setResolved({
|
||||||
|
tableInfo: { name: "Demo table", sizeBytes: 0, isDemo: true },
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!resolved) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full w-full items-center justify-center bg-ink font-mono text-chrome">
|
||||||
|
Preparing table…
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PinballCanvas tableData={resolved.tableData} tableInfo={resolved.tableInfo} key={resolved.tableInfo.name} />
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,22 @@
|
|||||||
|
import type { ButtonHTMLAttributes } from "react";
|
||||||
|
|
||||||
|
export type ButtonVariant = "primary" | "outline" | "quiet";
|
||||||
|
|
||||||
|
const variantClasses: Record<ButtonVariant, string> = {
|
||||||
|
primary:
|
||||||
|
"border-2 border-marquee bg-marquee/10 text-marquee shadow-[0_0_24px_rgba(255,122,41,0.35)] hover:bg-marquee/20",
|
||||||
|
outline: "border-2 border-chrome/50 text-paper hover:border-arc hover:text-arc",
|
||||||
|
quiet: "border border-transparent text-chrome hover:text-paper",
|
||||||
|
};
|
||||||
|
|
||||||
|
export function buttonClassName(variant: ButtonVariant = "primary", className = ""): string {
|
||||||
|
return `inline-block rounded-full px-6 py-3 font-display text-lg tracking-wide transition ${variantClasses[variant]} ${className}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
variant?: ButtonVariant;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Button({ variant = "primary", className = "", ...props }: ButtonProps) {
|
||||||
|
return <button className={buttonClassName(variant, className)} {...props} />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import type { HTMLAttributes } from "react";
|
||||||
|
|
||||||
|
export default function Panel({ className = "", ...props }: HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`rounded-lg border border-chrome/30 bg-ash/80 shadow-lg ${className}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
services:
|
||||||
|
web:
|
||||||
|
build: .
|
||||||
|
ports:
|
||||||
|
- "8080:80"
|
||||||
|
restart: unless-stopped
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name _;
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
# nginx only sees its own container-internal port (80) and has no idea
|
||||||
|
# docker-compose maps that to some other host port — an absolute redirect
|
||||||
|
# (e.g. nginx's own trailing-slash directory redirect) would silently
|
||||||
|
# drop that external port from the Location header. A relative Location
|
||||||
|
# lets the browser resolve it against whatever host:port it's already on.
|
||||||
|
absolute_redirect off;
|
||||||
|
|
||||||
|
# The stock /etc/nginx/mime.types (included by the base image's own
|
||||||
|
# nginx.conf) already maps .wasm/.woff2/.html correctly. .webmanifest
|
||||||
|
# isn't in it, so it's set per-location below rather than via a
|
||||||
|
# server-level types{} block, which would replace that whole map instead
|
||||||
|
# of extending it. .data has no meaningful type of its own and correctly
|
||||||
|
# falls through to the base config's default_type (application/octet-stream).
|
||||||
|
location = /manifest.webmanifest {
|
||||||
|
default_type application/manifest+json;
|
||||||
|
add_header Cache-Control "no-cache";
|
||||||
|
}
|
||||||
|
|
||||||
|
location = /sw.js {
|
||||||
|
add_header Cache-Control "no-cache";
|
||||||
|
}
|
||||||
|
|
||||||
|
# Large, effectively-immutable engine binaries — keep gzip off so nginx
|
||||||
|
# can still serve byte-range/If-Range requests (on-the-fly gzip disables
|
||||||
|
# range serving), and cache them aggressively.
|
||||||
|
location /vendor/vpinball-wasm/ {
|
||||||
|
gzip off;
|
||||||
|
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||||
|
}
|
||||||
|
|
||||||
|
# error_page preserves the 404 status while serving the prerendered
|
||||||
|
# not-found page's content — a bare `try_files ... /404.html;` fallback
|
||||||
|
# would serve that same content with a 200, since try_files treats an
|
||||||
|
# existing fallback file as a normal successful response.
|
||||||
|
error_page 404 /404.html;
|
||||||
|
location = /404.html {
|
||||||
|
internal;
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ $uri.html =404;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
// Vendored vpinball-wasm build output (copied from node_modules at build
|
||||||
|
// time, see scripts/copy-engine-assets.mjs) — third-party, not our code.
|
||||||
|
"public/vendor/**",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
export function formatBytes(bytes: number): string {
|
||||||
|
if (bytes === 0) return "0 B";
|
||||||
|
const units = ["B", "KB", "MB", "GB"];
|
||||||
|
const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
|
||||||
|
const value = bytes / 1024 ** exponent;
|
||||||
|
return `${exponent === 0 ? value : value.toFixed(1)} ${units[exponent]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatDuration(ms: number): string {
|
||||||
|
if (ms < 1000) return `${Math.round(ms)} ms`;
|
||||||
|
return `${(ms / 1000).toFixed(1)} s`;
|
||||||
|
}
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
export interface KeyBinding {
|
||||||
|
keys: string;
|
||||||
|
action: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const KEY_BINDINGS: KeyBinding[] = [
|
||||||
|
{ keys: "Left Shift", action: "Left flipper" },
|
||||||
|
{ keys: "Right Shift", action: "Right flipper" },
|
||||||
|
{ keys: "Enter", action: "Plunger" },
|
||||||
|
{ keys: "1", action: "Start game" },
|
||||||
|
];
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
// In-memory handoff for a user-selected .vpx File between the landing page
|
||||||
|
// and /play — a File can't survive a URL-based navigation, and this is a
|
||||||
|
// single-shot value read once on mount, so module-level state is sufficient
|
||||||
|
// (no need for anything heavier than a plain variable).
|
||||||
|
let pendingFile: File | null = null;
|
||||||
|
|
||||||
|
export function setPendingTable(file: File): void {
|
||||||
|
pendingFile = file;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function takePendingTable(): File | null {
|
||||||
|
const file = pendingFile;
|
||||||
|
pendingFile = null;
|
||||||
|
return file;
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
export interface TableInfo {
|
||||||
|
name: string;
|
||||||
|
sizeBytes: number;
|
||||||
|
isDemo: boolean;
|
||||||
|
}
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useCallback, useEffect, useRef, useState } from "react";
|
||||||
|
import type { LoadPinballOptions, PinballInstance } from "@valknar/vpinball-wasm";
|
||||||
|
import { hasWebGL2 } from "./webglSupport";
|
||||||
|
|
||||||
|
// Served as a plain static file, not bundled — loadPinball() internally does
|
||||||
|
// a dynamic import(`${baseUrl}/vpinball.js`) with a template-literal path
|
||||||
|
// that webpack can't statically resolve, so the whole engine must stay
|
||||||
|
// outside webpack's module graph (see scripts/copy-engine-assets.mjs).
|
||||||
|
const ENGINE_BASE_URL = "/vendor/vpinball-wasm";
|
||||||
|
|
||||||
|
export type PinballStatus = "idle" | "loading" | "ready" | "running" | "error";
|
||||||
|
|
||||||
|
interface EngineModule {
|
||||||
|
loadPinball(options: LoadPinballOptions): Promise<PinballInstance>;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadEngineModule(): Promise<EngineModule> {
|
||||||
|
return (await import(
|
||||||
|
/* webpackIgnore: true */ `${ENGINE_BASE_URL}/index.js`
|
||||||
|
)) as EngineModule;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface UsePinballInstanceResult {
|
||||||
|
status: PinballStatus;
|
||||||
|
/** 0-1 download progress, only meaningful while status is "loading". */
|
||||||
|
progress: number;
|
||||||
|
error: string | null;
|
||||||
|
loadTimeMs: number | null;
|
||||||
|
instanceRef: React.RefObject<PinballInstance | null>;
|
||||||
|
/** Call from a user-gesture handler (audio autoplay / fullscreen policy). */
|
||||||
|
start: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function usePinballInstance(
|
||||||
|
canvasRef: React.RefObject<HTMLCanvasElement | null>,
|
||||||
|
tableData: ArrayBuffer | undefined,
|
||||||
|
): UsePinballInstanceResult {
|
||||||
|
// Computed once at mount (not inside the effect below) so the WebGL2-
|
||||||
|
// unsupported case is derived initial state rather than a setState call
|
||||||
|
// that an effect makes only to immediately return.
|
||||||
|
const [webgl2Supported] = useState(hasWebGL2);
|
||||||
|
const [status, setStatus] = useState<PinballStatus>(webgl2Supported ? "idle" : "error");
|
||||||
|
const [progress, setProgress] = useState(0);
|
||||||
|
const [error, setError] = useState<string | null>(
|
||||||
|
webgl2Supported ? null : "Your browser doesn't support WebGL2, which this pinball engine requires.",
|
||||||
|
);
|
||||||
|
const [loadTimeMs, setLoadTimeMs] = useState<number | null>(null);
|
||||||
|
const instanceRef = useRef<PinballInstance | null>(null);
|
||||||
|
const disposedRef = useRef(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
disposedRef.current = false;
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
if (!canvas || !webgl2Supported) return;
|
||||||
|
|
||||||
|
setStatus("loading");
|
||||||
|
const startedAt = performance.now();
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
try {
|
||||||
|
const { loadPinball } = await loadEngineModule();
|
||||||
|
const instance = await loadPinball({
|
||||||
|
canvas,
|
||||||
|
baseUrl: ENGINE_BASE_URL,
|
||||||
|
tableData,
|
||||||
|
onProgress: (fraction) => {
|
||||||
|
if (!disposedRef.current) setProgress(fraction);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (disposedRef.current) {
|
||||||
|
instance.dispose();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
instanceRef.current = instance;
|
||||||
|
setLoadTimeMs(performance.now() - startedAt);
|
||||||
|
setStatus("ready");
|
||||||
|
} catch (err) {
|
||||||
|
if (!disposedRef.current) {
|
||||||
|
setStatus("error");
|
||||||
|
setError(err instanceof Error ? err.message : "Failed to load the pinball engine.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
disposedRef.current = true;
|
||||||
|
instanceRef.current?.dispose();
|
||||||
|
instanceRef.current = null;
|
||||||
|
};
|
||||||
|
// Intentionally run once: PlayView mounts a fresh PinballCanvasImpl
|
||||||
|
// (via `key`) per table rather than swapping tableData in place.
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const start = useCallback(() => {
|
||||||
|
if (!instanceRef.current) return;
|
||||||
|
instanceRef.current.start();
|
||||||
|
setStatus("running");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return { status, progress, error, loadTimeMs, instanceRef, start };
|
||||||
|
}
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import type { attachTouchControls as AttachTouchControls } from "@valknar/vpinball-wasm";
|
||||||
|
|
||||||
|
const ENGINE_BASE_URL = "/vendor/vpinball-wasm";
|
||||||
|
|
||||||
|
function isTouchDevice(): boolean {
|
||||||
|
return typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Attaches the engine's on-screen touch overlay to `containerRef` while `active` is true. */
|
||||||
|
export function useTouchControls(
|
||||||
|
containerRef: React.RefObject<HTMLElement | null>,
|
||||||
|
active: boolean,
|
||||||
|
): void {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!active || !isTouchDevice()) return;
|
||||||
|
const container = containerRef.current;
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
let handle: { detach: () => void } | undefined;
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
const { attachTouchControls } = (await import(
|
||||||
|
/* webpackIgnore: true */ `${ENGINE_BASE_URL}/index.js`
|
||||||
|
)) as { attachTouchControls: typeof AttachTouchControls };
|
||||||
|
if (cancelled) return;
|
||||||
|
handle = attachTouchControls({ container });
|
||||||
|
})();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
handle?.detach();
|
||||||
|
};
|
||||||
|
}, [containerRef, active]);
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
export function hasWebGL2(): boolean {
|
||||||
|
if (typeof window === "undefined") return false;
|
||||||
|
try {
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
return Boolean(canvas.getContext("webgl2"));
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
output: "export",
|
||||||
|
images: { unoptimized: true },
|
||||||
|
trailingSlash: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "vpinball",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"copy-engine-assets": "node scripts/copy-engine-assets.mjs",
|
||||||
|
"sw:bump": "node scripts/bump-sw-version.mjs",
|
||||||
|
"predev": "pnpm run copy-engine-assets",
|
||||||
|
"dev": "next dev",
|
||||||
|
"build": "pnpm run copy-engine-assets && next build",
|
||||||
|
"start": "next start",
|
||||||
|
"lint": "eslint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@valknar/vpinball-wasm": "0.2.0",
|
||||||
|
"next": "16.3.2",
|
||||||
|
"react": "19.2.8",
|
||||||
|
"react-dom": "19.2.8"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@types/node": "^20",
|
||||||
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.3.2",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"typescript": "^5"
|
||||||
|
},
|
||||||
|
"packageManager": "pnpm@11.21.0"
|
||||||
|
}
|
||||||
Generated
+4196
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,6 @@
|
|||||||
|
allowBuilds:
|
||||||
|
sharp: false
|
||||||
|
unrs-resolver: false
|
||||||
|
minimumReleaseAgeExclude:
|
||||||
|
- '@valknar/vpinball-wasm@0.2.0'
|
||||||
|
updateNotifier: false
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<rect width="512" height="512" fill="#0b0b0f"/>
|
||||||
|
<circle cx="256" cy="256" r="200" fill="none" stroke="#4ce0d2" stroke-width="10" opacity="0.35"/>
|
||||||
|
<circle cx="256" cy="216" r="96" fill="#ff7a29"/>
|
||||||
|
<circle cx="222" cy="182" r="26" fill="#ffd7ad" opacity="0.55"/>
|
||||||
|
<path d="M 116 372 Q 256 300 396 372 L 396 392 Q 256 340 116 392 Z" fill="#a9aebb"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 426 B |
@@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<rect width="512" height="512" fill="#0b0b0f"/>
|
||||||
|
<circle cx="256" cy="256" r="200" fill="none" stroke="#4ce0d2" stroke-width="10" opacity="0.35"/>
|
||||||
|
<circle cx="256" cy="216" r="96" fill="#ff7a29"/>
|
||||||
|
<circle cx="222" cy="182" r="26" fill="#ffd7ad" opacity="0.55"/>
|
||||||
|
<path d="M 116 372 Q 256 300 396 372 L 396 392 Q 256 340 116 392 Z" fill="#a9aebb"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 426 B |
@@ -0,0 +1,77 @@
|
|||||||
|
// Bump this on every release that changes the app shell or the vendored
|
||||||
|
// engine build — it's the only thing that invalidates old caches, since
|
||||||
|
// none of the cached URLs below are content-hashed by us.
|
||||||
|
const CACHE_VERSION = "v1";
|
||||||
|
const SHELL_CACHE = `shell-${CACHE_VERSION}`;
|
||||||
|
const ENGINE_CACHE = `engine-${CACHE_VERSION}`;
|
||||||
|
|
||||||
|
const SHELL_ASSETS = [
|
||||||
|
"/",
|
||||||
|
"/play/",
|
||||||
|
"/404.html",
|
||||||
|
"/manifest.webmanifest",
|
||||||
|
"/icons/icon-192.png",
|
||||||
|
"/icons/icon-512.png",
|
||||||
|
];
|
||||||
|
|
||||||
|
self.addEventListener("install", (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches
|
||||||
|
.open(SHELL_CACHE)
|
||||||
|
.then((cache) => cache.addAll(SHELL_ASSETS))
|
||||||
|
.then(() => self.skipWaiting()),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener("activate", (event) => {
|
||||||
|
event.waitUntil(
|
||||||
|
caches
|
||||||
|
.keys()
|
||||||
|
.then((keys) =>
|
||||||
|
Promise.all(
|
||||||
|
keys
|
||||||
|
.filter((key) => key !== SHELL_CACHE && key !== ENGINE_CACHE)
|
||||||
|
.map((key) => caches.delete(key)),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
.then(() => self.clients.claim()),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener("fetch", (event) => {
|
||||||
|
const url = new URL(event.request.url);
|
||||||
|
if (event.request.method !== "GET" || url.origin !== self.location.origin) return;
|
||||||
|
|
||||||
|
// The engine's .wasm/.data/.js are large and effectively immutable per
|
||||||
|
// release (they aren't content-hashed), so once fetched they're served
|
||||||
|
// straight from cache — cache-busting happens by bumping CACHE_VERSION.
|
||||||
|
if (url.pathname.startsWith("/vendor/vpinball-wasm/")) {
|
||||||
|
event.respondWith(
|
||||||
|
caches.open(ENGINE_CACHE).then((cache) =>
|
||||||
|
cache.match(event.request).then(
|
||||||
|
(hit) =>
|
||||||
|
hit ??
|
||||||
|
fetch(event.request).then((response) => {
|
||||||
|
cache.put(event.request, response.clone());
|
||||||
|
return response;
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
event.respondWith(
|
||||||
|
caches.match(event.request).then(
|
||||||
|
(hit) =>
|
||||||
|
hit ??
|
||||||
|
fetch(event.request).then((response) => {
|
||||||
|
if (response.ok) {
|
||||||
|
const clone = response.clone();
|
||||||
|
caches.open(SHELL_CACHE).then((cache) => cache.put(event.request, clone));
|
||||||
|
}
|
||||||
|
return response;
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
// Bumps public/sw.js's CACHE_VERSION so a deploy invalidates old caches —
|
||||||
|
// run this before cutting a release that changes the app shell or updates
|
||||||
|
// the vendored vpinball-wasm engine build.
|
||||||
|
import { readFile, writeFile } from "node:fs/promises";
|
||||||
|
import path from "node:path";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
|
||||||
|
const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
|
||||||
|
const swPath = path.join(rootDir, "public", "sw.js");
|
||||||
|
|
||||||
|
const contents = await readFile(swPath, "utf8");
|
||||||
|
const match = contents.match(/CACHE_VERSION = "v(\d+)"/);
|
||||||
|
if (!match) {
|
||||||
|
console.error(`Couldn't find CACHE_VERSION in ${swPath}`);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
const next = Number(match[1]) + 1;
|
||||||
|
const updated = contents.replace(/CACHE_VERSION = "v\d+"/, `CACHE_VERSION = "v${next}"`);
|
||||||
|
await writeFile(swPath, updated);
|
||||||
|
console.log(`Bumped service worker CACHE_VERSION to v${next}`);
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
#!/usr/bin/env node
|
||||||
|
// Copies the vpinball-wasm engine's build output into public/vendor/vpinball-wasm/
|
||||||
|
// so it's served as plain static files (see lib/pinball/usePinballInstance.ts for why:
|
||||||
|
// the package's own loadPinball() does a dynamic import() of its glue script that must
|
||||||
|
// never pass through webpack's module graph).
|
||||||
|
import { cp, mkdir, rm } from "node:fs/promises";
|
||||||
|
import { existsSync } from "node:fs";
|
||||||
|
import path from "node:path";
|
||||||
|
import { fileURLToPath } from "node:url";
|
||||||
|
|
||||||
|
const rootDir = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
|
||||||
|
const pkgDistDir = path.join(rootDir, "node_modules", "@valknar", "vpinball-wasm", "dist");
|
||||||
|
const targetDir = path.join(rootDir, "public", "vendor", "vpinball-wasm");
|
||||||
|
|
||||||
|
if (!existsSync(pkgDistDir)) {
|
||||||
|
console.error(
|
||||||
|
`vpinball-wasm not found at ${pkgDistDir} — run "pnpm install" first.`,
|
||||||
|
);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
await rm(targetDir, { recursive: true, force: true });
|
||||||
|
await mkdir(targetDir, { recursive: true });
|
||||||
|
await cp(pkgDistDir, targetDir, { recursive: true });
|
||||||
|
|
||||||
|
console.log(`Copied vpinball-wasm engine assets to ${path.relative(rootDir, targetDir)}/`);
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2017",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts",
|
||||||
|
"**/*.mts"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user