vpinball/components/pinball/PinballCanvasImpl.tsx

"use client";

import { useRef } from "react";
import { usePinballInstance, type RomSelection } 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;
  rom?: RomSelection;
  tableInfo: TableInfo;
}

export default function PinballCanvasImpl({ tableData, rom, tableInfo }: PinballCanvasImplProps) {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const { status, progress, error, loadTimeMs, instanceRef, start } = usePinballInstance(
    canvasRef,
    tableData,
    rom,
  );
  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 flex-col items-center justify-center gap-3 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>
          {/* Most tables gate Start Game behind having a credit, same as a
              real coin-op cabinet — pressing 1 alone does nothing until a
              credit is added. Surfaced here since it's the first thing
              anyone hits and easy to mistake for the app not responding. */}
          <p className="max-w-md px-4 text-center font-mono text-xs text-chrome">
            If Start doesn&apos;t respond: press <span className="text-arc">4</span> to insert a coin, then{" "}
            <span className="text-arc">1</span> to start.
          </p>
        </div>
      )}
    </div>
  );
}