valknarandClaude Sonnet 5
958f091c56
- Shorten CTA labels to "Play Demo" / "Load Table" - Fix mismatched corner radii on the hero and table-staging panels - Add horizontal padding to the in-game "insert coin" hint on mobile - Match the 404 page's "TILT" eyebrow label size to the rest of the site - Only register the service worker in production — it precaches /404.html, which doesn't exist as a static file under `next dev` and was failing cache.addAll() on every load Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
"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 TableStaging from "./TableStaging";
|
|
import { setPendingTable } from "@/lib/pinball/tableSelectionStore";
|
|
|
|
export default function AttractHero() {
|
|
const router = useRouter();
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [stagedFile, setStagedFile] = useState<File | null>(null);
|
|
|
|
const handleFile = (file: File) => {
|
|
setError(null);
|
|
setStagedFile(file);
|
|
};
|
|
|
|
const handlePlay = (romFile: File | undefined, saveToLibrary: boolean) => {
|
|
if (!stagedFile) return;
|
|
setPendingTable({ kind: "upload", vpxFile: stagedFile, romFile, saveToLibrary });
|
|
router.push("/play");
|
|
};
|
|
|
|
if (stagedFile) {
|
|
return (
|
|
<div className="w-full max-w-4xl">
|
|
<TableStaging vpxFile={stagedFile} onPlay={handlePlay} onCancel={() => setStagedFile(null)} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FileDropZone onFile={handleFile} onError={setError} className="w-full max-w-4xl">
|
|
<div className="relative overflow-hidden rounded-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-4 py-14 text-center sm:px-8 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-5xl 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")}>
|
|
Play Demo
|
|
</Button>
|
|
<label htmlFor={VPX_FILE_INPUT_ID} className={buttonClassName("outline", "cursor-pointer")}>
|
|
Load 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>
|
|
);
|
|
}
|