valknarandClaude Sonnet 5
35fb68c916
- 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
69 lines
2.5 KiB
TypeScript
69 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { formatBytes } from "@/lib/format";
|
|
import { deleteFromLibrary, listLibrary, type LibraryEntryMeta } from "@/lib/pinball/tableLibrary";
|
|
import { setPendingTable } from "@/lib/pinball/tableSelectionStore";
|
|
|
|
export default function TableLibrary() {
|
|
const router = useRouter();
|
|
const [entries, setEntries] = useState<LibraryEntryMeta[] | null>(null);
|
|
|
|
useEffect(() => {
|
|
listLibrary()
|
|
.then(setEntries)
|
|
.catch((err) => {
|
|
console.error("Failed to read table library:", err);
|
|
setEntries([]);
|
|
});
|
|
}, []);
|
|
|
|
if (!entries || entries.length === 0) return null;
|
|
|
|
const handlePlay = (id: string) => {
|
|
setPendingTable({ kind: "library", id });
|
|
router.push("/play");
|
|
};
|
|
|
|
const handleDelete = async (id: string) => {
|
|
await deleteFromLibrary(id);
|
|
setEntries((prev) => prev?.filter((entry) => entry.id !== id) ?? null);
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-4xl">
|
|
<h2 className="mb-3 font-display text-xl tracking-wide text-paper">Your Library</h2>
|
|
<ul className="divide-y divide-chrome/20 rounded-lg border border-chrome/30 bg-ash">
|
|
{entries.map((entry) => (
|
|
<li key={entry.id} className="flex items-center justify-between gap-3 px-4 py-3">
|
|
<div className="min-w-0">
|
|
<div className="truncate font-mono text-sm text-paper">{entry.name}</div>
|
|
<div className="font-mono text-xs text-chrome">
|
|
{formatBytes(entry.sizeBytes)}
|
|
{entry.romFileName ? ` · ROM: ${entry.romFileName}` : ""}
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => handlePlay(entry.id)}
|
|
className="rounded-full border-2 border-marquee bg-marquee/10 px-4 py-1.5 font-display text-sm tracking-wide text-marquee transition hover:bg-marquee/20"
|
|
>
|
|
Play
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleDelete(entry.id)}
|
|
className="rounded-full border border-chrome/40 px-4 py-1.5 font-display text-sm tracking-wide text-chrome transition hover:border-marquee hover:text-marquee"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|