import { useEffect, useRef, useState } from "react";
import { useSQLQuery, useDiveState } from "@motherduck/react-sql-query";

// ─────────────────────────────────────────────────────────────────────────────
// DOOM — the real id Software DOOM (1993), playing inside a MotherDuck dive.
//
// There is no game server and no CDN. The DOOM engine is a single WebAssembly
// module (jacobenget/doom.wasm — pure WASM, 10 imports, 4 exports, shareware WAD
// baked in). It's stored as a BLOB in doom.main.doom_assets and pulled into the
// browser through the ONLY channel a dive has: a SQL query. The dive then
// instantiates it client-side, blits DOOM's framebuffer to a <canvas>, and feeds
// it the keyboard. "DOOM, served from a column in your data warehouse."
// ─────────────────────────────────────────────────────────────────────────────

export const REQUIRED_DATABASES = [
  // Share (not a bare database) so the dive attaches in the dives GALLERY, not just
  // the editor — the gallery can only attach shares. Matches the financial dive.
  { type: "share", path: "md:_share/doom/05f17dac-f798-4367-8d63-c99ba5334247", alias: "doom" },
];
const DB = "doom";

// A MotherDuck BLOB cell arrives as a wrapper object { bytes: Uint8Array }. Pull the
// raw bytes out robustly, whatever exact shape the wasm-client hands us.
function toU8(v: any): Uint8Array | null {
  if (v == null) return null;
  if (v instanceof Uint8Array) return v;
  if (v instanceof ArrayBuffer) return new Uint8Array(v);
  if (ArrayBuffer.isView(v)) return new Uint8Array((v as any).buffer, (v as any).byteOffset, (v as any).byteLength);
  if (v.bytes instanceof Uint8Array) return v.bytes;
  if (Array.isArray(v.bytes)) return Uint8Array.from(v.bytes);
  if (Array.isArray(v)) return Uint8Array.from(v);
  return null;
}

// Exported wasm globals surface as WebAssembly.Global; unwrap to the number.
const gv = (g: any) => (g && typeof g === "object" && "value" in g ? g.value : g);

const C = { bg: "#0a0a0a", panel: "#141414", red: "#bc1200", ink: "#e8e8e8", mut: "#8a8a8a", line: "#2a2a2a" };
const SANS = '-apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';

export default function Doom() {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);
  const engineRef = useRef<{ interval: any; kd: (e: KeyboardEvent) => void; ku: (e: KeyboardEvent) => void } | null>(null);
  const [phase, setPhase] = useState<"loading" | "ready" | "booting" | "running" | "error">("loading");
  const [err, setErr] = useState("");
  // Viewer-adjustable presentation — persists in the URL via dive state.
  const [bg, setBg] = useDiveState("bg", "#0a0a0a");
  const [size, setSize] = useDiveState("size", 640);

  // The engine wasm (shareware WAD embedded) — one BLOB is the whole game.
  const q = useSQLQuery(`SELECT bytes AS blob, nbytes FROM "${DB}"."main"."doom_assets" WHERE name = 'doom.wasm'`);

  useEffect(() => {
    if (q.isError) { setErr(q.error?.message || "could not read doom_assets"); setPhase("error"); return; }
    const ready = !!toU8((Array.isArray(q.data) ? q.data[0] : undefined)?.blob);
    // Only a real query error is an error; a transient empty result just stays "loading"
    // and recovers when the bytes arrive. Never disturb a booting/running game.
    setPhase((p) => (p === "booting" || p === "running" ? p : ready ? "ready" : "loading"));
  }, [q.isError, q.error, q.data]);

  // Tear the engine down on unmount (stop the loop + key listeners).
  useEffect(() => () => {
    const e = engineRef.current;
    if (e) { clearInterval(e.interval); window.removeEventListener("keydown", e.kd); window.removeEventListener("keyup", e.ku); }
    engineRef.current = null;
  }, []);

  async function play() {
    if (engineRef.current) return; // already running
    const wasmBytes = toU8((Array.isArray(q.data) ? q.data[0] : undefined)?.blob);
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext("2d");
    if (!wasmBytes || !canvas || !ctx) { setErr("engine bytes or canvas unavailable"); setPhase("error"); return; }

    // Closure state shared by the imports below.
    let memory: WebAssembly.Memory | null = null;
    let img: ImageData | null = null;
    const readStr = (ptr: number, len: number) =>
      new TextDecoder("utf-8", { fatal: false }).decode(new Uint8Array(memory!.buffer, ptr, len));

    const imports = {
      loading: {
        onGameInit: (w: number, h: number) => { canvas.width = w; canvas.height = h; img = ctx.createImageData(w, h); },
        wadSizes: () => {},   // no-op → engine uses its embedded Doom Shareware WAD
        readWads: () => {},
      },
      ui: {
        drawFrame: (ptr: number) => {
          if (!img || !memory) return;
          const n = canvas.width * canvas.height * 4;
          const fb = new Uint8Array(memory.buffer, ptr, n); // read fresh; memory may grow
          const out = img.data;
          for (let i = 0; i < n; i += 4) {                  // framebuffer is BGRA → ImageData is RGBA
            out[i] = fb[i + 2]; out[i + 1] = fb[i + 1]; out[i + 2] = fb[i]; out[i + 3] = 255;
          }
          ctx.putImageData(img, 0, 0);
        },
      },
      runtimeControl: { timeInMilliseconds: () => BigInt(Math.trunc(performance.now())) }, // i64 → BigInt
      console: {
        onInfoMessage: (p: number, l: number) => console.log("[Doom]", readStr(p, l)),
        onErrorMessage: (p: number, l: number) => console.error("[Doom]", readStr(p, l)),
      },
      gameSaving: { sizeOfSaveGame: () => 0, readSaveGame: () => 0, writeSaveGame: () => 0 },
    };

    setPhase("booting");
    try {
      const { instance } = await WebAssembly.instantiate(wasmBytes, imports as any);
      const ex: any = instance.exports;
      memory = ex.memory;

      const keyMap = new Map<string, number>([
        ["ArrowLeft", gv(ex.KEY_LEFTARROW)], ["ArrowRight", gv(ex.KEY_RIGHTARROW)],
        ["ArrowUp", gv(ex.KEY_UPARROW)], ["ArrowDown", gv(ex.KEY_DOWNARROW)],
        [",", gv(ex.KEY_STRAFE_L)], [".", gv(ex.KEY_STRAFE_R)],
        ["Control", gv(ex.KEY_FIRE)], [" ", gv(ex.KEY_USE)], ["Shift", gv(ex.KEY_SHIFT)],
        ["Tab", gv(ex.KEY_TAB)], ["Escape", gv(ex.KEY_ESCAPE)], ["Enter", gv(ex.KEY_ENTER)],
        ["Backspace", gv(ex.KEY_BACKSPACE)], ["Alt", gv(ex.KEY_ALT)],
      ]);
      const toDoomKey = (e: KeyboardEvent): number | null =>
        keyMap.has(e.key) ? keyMap.get(e.key)! : e.key.length === 1 ? e.key.charCodeAt(0) : null;

      const kd = (e: KeyboardEvent) => { const k = toDoomKey(e); if (k != null) { e.preventDefault(); ex.reportKeyDown(k); } };
      const ku = (e: KeyboardEvent) => { const k = toDoomKey(e); if (k != null) { e.preventDefault(); ex.reportKeyUp(k); } };
      window.addEventListener("keydown", kd);
      window.addEventListener("keyup", ku);

      ex.initGame();
      const interval = setInterval(() => { try { ex.tickGame(); } catch (e) { /* keep looping */ } }, 1000 / 35);
      engineRef.current = { interval, kd, ku };
      setPhase("running");
      canvas.focus();
    } catch (e: any) {
      setErr(String(e?.message || e));
      setPhase("error");
    }
  }

  const nbytes = Number((Array.isArray(q.data) ? q.data[0] : undefined)?.nbytes ?? 0);

  return (
    <div style={{ background: bg, color: C.ink, fontFamily: SANS, minHeight: "100%", padding: "20px 22px" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 4 }}>
        <span style={{ fontFamily: "Georgia, serif", fontWeight: 700, fontSize: 30, letterSpacing: 6, color: C.red }}>DOOM</span>
        <span style={{ color: C.mut, fontSize: 13 }}>running inside a MotherDuck dive · engine streamed from a BLOB column</span>
      </div>

      {/* Viewer settings — background color + play-window size (persist via dive state). Top bar (v2). */}
      <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 18, marginTop: 10, fontSize: 12.5, color: C.mut }}>
        <label style={{ display: "flex", alignItems: "center", gap: 8 }}>
          Background
          <input type="color" value={bg} onChange={(e) => setBg(e.target.value)}
            style={{ width: 30, height: 22, padding: 0, border: `1px solid ${C.line}`, background: "none", cursor: "pointer" }} />
        </label>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          {["#0a0a0a", "#000000", "#1a1a1a", "#2a0a0a", "#0b1a2a", "#f8f8f8"].map((c) => (
            <button key={c} onClick={() => setBg(c)} title={c} aria-label={c}
              style={{ width: 18, height: 18, borderRadius: 3, padding: 0, cursor: "pointer", background: c, border: (bg || "").toLowerCase() === c ? "2px solid #fff" : `1px solid ${C.line}` }} />
          ))}
        </div>
        <label style={{ display: "flex", alignItems: "center", gap: 8 }}>
          Size
          <input type="range" min={360} max={1024} step={8} value={size} onChange={(e) => setSize(Number(e.target.value))} style={{ cursor: "pointer" }} />
          <span style={{ fontVariantNumeric: "tabular-nums", color: C.ink }}>{size}px</span>
        </label>
        <button onClick={() => { setBg("#0a0a0a"); setSize(640); }}
          style={{ fontFamily: SANS, fontSize: 11, color: C.mut, background: "none", border: `1px solid ${C.line}`, borderRadius: 4, padding: "3px 8px", cursor: "pointer" }}>reset</button>
      </div>

      {/* Game stage — canvas always mounted so the ref exists; overlays sit on top. */}
      <div style={{ position: "relative", width: size, maxWidth: "100%", margin: "14px auto 0" }}>
        <canvas
          ref={canvasRef}
          width={640}
          height={400}
          tabIndex={0}
          onClick={() => { if (phase === "ready") play(); else canvasRef.current?.focus(); }}
          style={{ display: "block", width: "100%", aspectRatio: "640 / 400", background: "#000", border: `1px solid ${C.line}`, imageRendering: "pixelated", outline: "none", cursor: phase === "ready" ? "pointer" : "default" }}
        />

        {phase !== "running" && (
          <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, background: "rgba(0,0,0,0.72)", textAlign: "center", padding: 20 }}>
            {phase === "loading" && <div style={{ color: C.mut }}>Loading the DOOM engine… <span style={{ fontVariantNumeric: "tabular-nums" }}>(4.5&nbsp;MB wasm from a BLOB column)</span></div>}
            {phase === "ready" && (
              <button onClick={play} style={{ fontFamily: SANS, fontWeight: 700, fontSize: 18, letterSpacing: 2, color: "#fff", background: C.red, border: "none", borderRadius: 6, padding: "12px 26px", cursor: "pointer" }}>▶ CLICK TO PLAY</button>
            )}
            {phase === "ready" && <div style={{ color: C.mut, fontSize: 12 }}>{(nbytes / 1048576).toFixed(2)} MB engine loaded · click to boot, then use the keyboard</div>}
            {phase === "booting" && <div style={{ color: C.mut }}>Booting DOOM…</div>}
            {phase === "error" && (
              <div style={{ color: C.red, maxWidth: 460 }}>
                <div style={{ fontWeight: 700, marginBottom: 6 }}>Could not start DOOM</div>
                <div style={{ color: C.mut, fontSize: 12, wordBreak: "break-word" }}>{err}</div>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Controls */}
      <div style={{ width: size, maxWidth: "100%", margin: "12px auto 0", color: C.mut, fontSize: 12.5, lineHeight: 1.7 }}>
        <span style={{ color: C.ink }}>↑ ↓ ← →</span> move · <span style={{ color: C.ink }}>Ctrl</span> fire ·{" "}
        <span style={{ color: C.ink }}>Space</span> open / use · <span style={{ color: C.ink }}>, .</span> strafe ·{" "}
        <span style={{ color: C.ink }}>1–7</span> weapons · <span style={{ color: C.ink }}>Esc</span> menu · <span style={{ color: C.ink }}>Enter</span> select
        <div style={{ marginTop: 4, color: "#666" }}>Click the screen first so it has keyboard focus. Shareware episode (E1) — sound is off.</div>
      </div>
    </div>
  );
}


Real DOOM (1993) playing inside a dive — engine wasm streamed from a BLOB column.

MotherDOOM

Comments