Files
vpinball/app/layout.tsx
T
valknarandClaude Sonnet 5 e493a12e68 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

46 lines
1.3 KiB
TypeScript

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