// chipformer Space: a CHIP-8 player whose CPU is a transformer.
// The WebAssembly engine (engine/src/wasm.rs) runs the model; this file only moves bytes in and
// out, paces frames, reads keys and draws. Ported from the site's engine.ts and useArcade.ts.

import { ASSET_BASE, ASSET_VERSION, GAMES, LAYERS, LIBRARY, MACHINE, MODEL_FACTS } from "./data.js";

const FRAME_MS = 1000 / 60;
const PERSIST = 20; // instructions a pixel stays lit after it goes dark (hides XOR redraw flicker)
const FADE = 0.42; // phosphor decay per frame
const TAP_FRAMES = 3;
const DEMO_SECONDS = 28;
const PHOSPHOR = [221, 245, 158];
const GLASS = [8, 12, 10];
const HEADS = LAYERS.reduce((n, l) => n + l.heads.length, 0);
const MAX_UNITS = Math.max(...LAYERS.map((l) => l.units));
const DEMOS = ["space-invaders", "tetris", "brix", "blinky", "br8kout", "ufo", "super-pong", "cave-explorer"]
  .map((id) => GAMES.find((g) => g.id === id)).filter(Boolean);

const $ = (id) => document.getElementById(id);
const fmt = (n) => Math.round(n).toLocaleString("en-US");
const hex = (v, n) => v.toString(16).toUpperCase().padStart(n, "0");
const esc = (s) => String(s).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);

// ---------------------------------------------------------------- engine

class Engine {
  constructor(x) { this.x = x; }

  static async create(wasm, model) {
    const { instance } = await WebAssembly.instantiate(wasm, {});
    const e = new Engine(instance.exports);
    const [ptr, len] = e.put(model);
    e.check(e.x.cf_load_model(ptr, len));
    e.x.cf_free(ptr, len);
    return e;
  }

  put(bytes) {
    const ptr = this.x.cf_alloc(bytes.length);
    new Uint8Array(this.x.memory.buffer, ptr, bytes.length).set(bytes);
    return [ptr, bytes.length];
  }

  check(rc) {
    if (rc !== 0) {
      const b = new Uint8Array(this.x.memory.buffer, this.x.cf_error_ptr(), this.x.cf_error_len());
      throw new Error(new TextDecoder().decode(b));
    }
  }

  start(rom, quirks) {
    const [rp, rl] = this.put(rom);
    const [qp, ql] = this.put(new TextEncoder().encode(quirks.join(",")));
    try { this.check(this.x.cf_start(rp, rl, qp, ql, 0)); } finally {
      this.x.cf_free(rp, rl);
      this.x.cf_free(qp, ql);
    }
  }

  frame(keys, ipf) { this.check(this.x.cf_frame(keys >>> 0, ipf)); }
  step() { this.check(this.x.cf_step()); }
  /** 64*32 bytes, 1 = lit (or dark for fewer than `persist` instructions). */
  screen(persist) { return new Uint8Array(this.x.memory.buffer, this.x.cf_screen(persist), 64 * 32); }
  recentTokens() {
    const n = this.x.cf_tokens(0);
    return new Uint32Array(this.x.memory.buffer, this.x.cf_tokens_ptr(), n).slice();
  }
  peek(addr) { return this.x.cf_peek(addr); }
  setTelemetry(on) { this.check(this.x.cf_telemetry(on ? 1 : 0)); }
  clearTelemetry() { this.x.cf_telemetry_clear(); }
  /** Attention distances since the last clear: one per head per token, heads in model order. */
  telemetry() {
    const n = this.x.cf_telemetry_len();
    return n ? new Uint32Array(this.x.memory.buffer, this.x.cf_telemetry_ptr(), n) : new Uint32Array();
  }
  stats() {
    return { tokens: this.x.cf_stat(0), instructions: this.x.cf_stat(1), context: this.x.cf_stat(2) };
  }
  nextInstruction() {
    const pc = this.peek(MACHINE.PC);
    return { pc, op: (this.peek(pc) << 8) | this.peek((pc + 1) & 0xfff) };
  }
}

let enginePromise = null;
function loadEngine(progress) {
  if (!enginePromise) {
    enginePromise = (async () => {
      const v = `?v=${ASSET_VERSION}`;
      const [wasm, model] = await Promise.all([
        fetch(`${ASSET_BASE}/engine.wasm${v}`).then((r) => {
          if (!r.ok) throw new Error(`engine.wasm: HTTP ${r.status}`);
          return r.arrayBuffer();
        }),
        fetchWithProgress(`${ASSET_BASE}/model.chipformer${v}`, progress),
      ]);
      return Engine.create(wasm, model);
    })();
    enginePromise.catch(() => (enginePromise = null));
  }
  return enginePromise;
}

async function fetchWithProgress(url, progress) {
  const res = await fetch(url);
  if (!res.ok || !res.body) throw new Error(`${url}: HTTP ${res.status}`);
  const total = Number(res.headers.get("content-length")) || 0;
  const reader = res.body.getReader();
  const chunks = [];
  let got = 0;
  for (;;) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
    got += value.length;
    if (total) progress(Math.min(1, got / total));
  }
  progress(1);
  const out = new Uint8Array(got);
  let off = 0;
  for (const c of chunks) { out.set(c, off); off += c.length; }
  return out;
}

const romCache = new Map();
function loadRom(g) {
  if (!romCache.has(g.id)) {
    romCache.set(g.id, fetch(`${ASSET_BASE}/roms/${g.id}.ch8?v=${ASSET_VERSION}`).then(async (r) => {
      if (!r.ok) throw new Error(`${g.id}.ch8: HTTP ${r.status}`);
      return new Uint8Array(await r.arrayBuffer());
    }));
  }
  return romCache.get(g.id);
}

// ---------------------------------------------------------------- keys

/** Keyboard keys (KeyboardEvent.code) for each role; mirrors engine/src/games.rs. */
function roleKeys(role, two) {
  switch (role) {
    case "up": return two ? ["KeyW", "KeyA"] : ["ArrowUp", "KeyW"];
    case "down": return two ? ["KeyS", "KeyD"] : ["ArrowDown", "KeyS"];
    case "player2Up": return ["ArrowUp", "ArrowLeft"];
    case "player2Down": return ["ArrowDown", "ArrowRight"];
    case "left": return ["ArrowLeft", "KeyA"];
    case "right": return ["ArrowRight", "KeyD"];
    case "a": return ["Space", "KeyE"];
    case "b": return ["Enter", "KeyQ"];
  }
  return [];
}

/** The classic CHIP-8 keypad on a QWERTY keyboard: 123C/456D/789E/A0BF on 1234/QWER/ASDF/ZXCV. */
const CLASSIC = [
  ["Digit1", 0x1], ["Digit2", 0x2], ["Digit3", 0x3], ["Digit4", 0xc],
  ["KeyQ", 0x4], ["KeyW", 0x5], ["KeyE", 0x6], ["KeyR", 0xd],
  ["KeyA", 0x7], ["KeyS", 0x8], ["KeyD", 0x9], ["KeyF", 0xe],
  ["KeyZ", 0xa], ["KeyX", 0x0], ["KeyC", 0xb], ["KeyV", 0xf],
];
const isTwoPlayer = (g) => Object.keys(g.keys).some((r) => r.startsWith("player2"));

function keyBindings(g) {
  const two = isTwoPlayer(g);
  const map = new Map();
  const used = new Set();
  const add = (code, chip) => map.set(code, [...(map.get(code) ?? []), chip]);
  for (const [role, chip] of Object.entries(g.keys)) {
    for (const code of roleKeys(role, two)) add(code, chip);
    used.add(chip);
  }
  for (const [code, chip] of CLASSIC) if (!map.has(code) && !used.has(chip)) add(code, chip);
  return map;
}

const KEY_LABELS = { ArrowUp: "↑", ArrowDown: "↓", ArrowLeft: "←", ArrowRight: "→", Space: "Space", Enter: "Enter" };
const keyLabel = (code) => KEY_LABELS[code] ?? code.replace(/^Key|^Digit/, "");
const ROLE_LABELS = {
  up: "Up", down: "Down", left: "Left", right: "Right", a: "Action", b: "Second action",
  player2Up: "Player 2 up", player2Down: "Player 2 down",
};

// ---------------------------------------------------------------- tokens

function cellName(a) {
  if (a < 0x1000) return `M[${hex(a, 3)}]`;
  if (a < 0x1010) return `V${hex(a - 0x1000, 1)}`;
  const named = { 0x1010: "I", [MACHINE.PC]: "PC", 0x1012: "SP", 0x1013: "DT", 0x1014: "ST",
    [MACHINE.RNG]: "RNG", [MACHINE.CLS]: "CLS", [MACHINE.NULL]: "NULL" };
  if (named[a]) return named[a];
  if (a >= MACHINE.QUIRKS && a < MACHINE.QUIRKS + 6) return `Q.${MACHINE.QUIRK_NAMES[a - MACHINE.QUIRKS]}`;
  if (a >= 0x1020 && a < 0x1030) return `STACK${hex(a - 0x1020, 1)}`;
  if (a >= MACHINE.KEYS && a < MACHINE.KEYS + 16) return `KEY${hex(a - MACHINE.KEYS, 1)}`;
  if (a >= MACHINE.DISPLAY && a < MACHINE.NULL) {
    const i = a - MACHINE.DISPLAY;
    return `SCREEN[${Math.floor(i / 8)}:${i % 8}]`;
  }
  return `CELL ${hex(a, 4)}`;
}

function tokenText(t) {
  if (t < MACHINE.ADDR_BASE) return `=${hex(t - MACHINE.VAL_BASE, 2)}`;
  if (t < MACHINE.STEP) return `@${cellName(t - MACHINE.ADDR_BASE)}`;
  return t === MACHINE.STEP ? "STEP" : t === MACHINE.TICK ? "TICK" : t === MACHINE.BOOT ? "BOOT" : `#${t}`;
}

/** The most recent write (an ADDR token followed by its VAL) in a token window. */
function lastWrite(tokens) {
  for (let i = tokens.length - 2; i >= 0; i--) {
    const t = tokens[i];
    if (t >= MACHINE.ADDR_BASE && t < MACHINE.STEP && tokens[i + 1] < MACHINE.ADDR_BASE)
      return { addr: t - MACHINE.ADDR_BASE, value: tokens[i + 1] - MACHINE.VAL_BASE };
  }
  return null;
}

/** Mnemonic and a plain-English description of a CHIP-8 opcode. */
function describe(op) {
  const x = (op >> 8) & 0xf, y = (op >> 4) & 0xf, n = op & 0xf, nn = op & 0xff, nnn = op & 0xfff;
  const vx = `V${hex(x, 1)}`, vy = `V${hex(y, 1)}`;
  const d = (text) => ({ code: hex(op, 4), text });
  switch (op >> 12) {
    case 0x0: return d(op === 0x00e0 ? "Clear the screen" : op === 0x00ee ? "Return from a subroutine" : "Machine-code call (ignored)");
    case 0x1: return d(`Jump to ${hex(nnn, 3)}`);
    case 0x2: return d(`Call the subroutine at ${hex(nnn, 3)}`);
    case 0x3: return d(`Skip the next instruction if ${vx} = ${hex(nn, 2)}`);
    case 0x4: return d(`Skip the next instruction if ${vx} ≠ ${hex(nn, 2)}`);
    case 0x5: return d(`Skip the next instruction if ${vx} = ${vy}`);
    case 0x6: return d(`Set ${vx} to ${hex(nn, 2)}`);
    case 0x7: return d(`Add ${hex(nn, 2)} to ${vx}`);
    case 0x8: return d({
      0x0: `Copy ${vy} into ${vx}`, 0x1: `${vx} |= ${vy}`, 0x2: `${vx} &= ${vy}`, 0x3: `${vx} ^= ${vy}`,
      0x4: `${vx} += ${vy}, VF = carry`, 0x5: `${vx} -= ${vy}, VF = no borrow`,
      0x6: "Shift right, VF = the bit shifted out", 0x7: `${vx} = ${vy} − ${vx}, VF = no borrow`,
      0xe: "Shift left, VF = the bit shifted out",
    }[n] ?? "Unknown arithmetic (no effect)");
    case 0x9: return d(`Skip the next instruction if ${vx} ≠ ${vy}`);
    case 0xa: return d(`Point I at ${hex(nnn, 3)}`);
    case 0xb: return d(`Jump to ${hex(nnn, 3)} plus a register`);
    case 0xc: return d(`${vx} = random byte & ${hex(nn, 2)}`);
    case 0xd: return d(`Draw an 8×${n} sprite at (${vx}, ${vy}), VF = collision`);
    case 0xe: return d(nn === 0x9e ? `Skip if the key in ${vx} is held` : nn === 0xa1 ? `Skip if the key in ${vx} is not held` : "Unknown key instruction (no effect)");
    case 0xf: return d({
      0x07: `${vx} = delay timer`, 0x0a: `Wait for a key, store it in ${vx}`, 0x15: `Delay timer = ${vx}`,
      0x18: `Sound timer = ${vx}`, 0x1e: `I += ${vx}`, 0x29: `Point I at the font glyph for ${vx}`,
      0x33: `Write the decimal digits of ${vx} to memory`, 0x55: `Store V0–${vx} in memory`,
      0x65: `Load V0–${vx} from memory`,
    }[nn] ?? "Unknown instruction (no effect)");
  }
  return d("Unknown instruction");
}

// ---------------------------------------------------------------- state

const S = {
  mode: "boot", // boot | attract | howto | play | paused | operator | gameover | error
  game: GAMES.find((g) => g.id === location.hash.slice(1)) ?? DEMOS[0] ?? GAMES[0],
  engine: null,
  progress: 0,
  error: "",
  bindings: new Map(),
  tapChips: new Set(),
  pressed: new Map(), // keyboard code -> CHIP-8 keys
  touch: new Set(), // CHIP-8 keys held on the touch controls
  pulses: new Map(), // tap keys: frames left
  glow: new Float32Array(64 * 32),
  ema: new Float32Array(HEADS),
  sound: true,
  audio: null,
  loadSeq: 0,
};

function setMode(m) {
  S.mode = m;
  renderOverlay();
  renderTools();
  renderInspector();
}

function setGame(g) {
  S.game = g;
  S.bindings = keyBindings(g);
  S.tapChips = new Set(g.tap.map((r) => g.keys[r]).filter((c) => c !== undefined));
  renderChips();
  renderHints();
  renderTouch();
  renderCredit();
}

async function load(g) {
  const seq = ++S.loadSeq;
  const [e, rom] = await Promise.all([loadEngine((p) => { S.progress = p; if (S.mode === "boot") renderOverlay(); }), loadRom(g)]);
  if (seq !== S.loadSeq) return false; // a newer choice won
  e.start(rom, g.quirks);
  e.setTelemetry(true);
  S.engine = e;
  S.glow.fill(0);
  S.pressed.clear();
  S.touch.clear();
  S.pulses.clear();
  setGame(g);
  drawScreen();
  return true;
}

function fail(err) {
  S.error = err instanceof Error ? err.message : String(err);
  beep(false);
  setMode("error");
}

async function startDemo(g) {
  try { if (await load(g)) setMode("attract"); } catch (err) { fail(err); }
}

async function choose(g, then = "howto") {
  try {
    if (await load(g)) {
      setMode(then);
      history.replaceState(null, "", `#${g.id}`);
    }
  } catch (err) { fail(err); }
}

// ---------------------------------------------------------------- drawing

const canvas = $("screen");
const ctx = canvas.getContext("2d");
const small = document.createElement("canvas");
small.width = 64;
small.height = 32;
const sctx = small.getContext("2d");
const img = sctx.createImageData(64, 32);

function drawScreen() {
  const e = S.engine;
  if (!e) return;
  const vis = e.screen(PERSIST), g = S.glow;
  for (let i = 0; i < 2048; i++) {
    g[i] = vis[i] ? 1 : g[i] * FADE;
    for (let c = 0; c < 3; c++) img.data[i * 4 + c] = GLASS[c] + (PHOSPHOR[c] - GLASS[c]) * g[i];
    img.data[i * 4 + 3] = 255;
  }
  sctx.putImageData(img, 0, 0);
  ctx.globalCompositeOperation = "source-over";
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(small, 0, 0, canvas.width, canvas.height);
  if ("filter" in ctx) {
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.38;
    ctx.imageSmoothingEnabled = true;
    ctx.filter = "blur(16px)";
    ctx.drawImage(small, 0, 0, canvas.width, canvas.height);
    ctx.filter = "none";
    ctx.globalAlpha = 1;
    ctx.globalCompositeOperation = "source-over";
  }
  // LCD pixel grid, drawn into the canvas
  ctx.fillStyle = "rgba(0, 0, 0, 0.42)";
  const cw = canvas.width / 64, ch = canvas.height / 32;
  for (let x = 1; x < 64; x++) ctx.fillRect(Math.round(x * cw) - 1, 0, 2, canvas.height);
  for (let y = 1; y < 32; y++) ctx.fillRect(0, Math.round(y * ch) - 1, canvas.width, 2);
}

// ---------------------------------------------------------------- the live model panel

const headCells = [];
function buildLayers() {
  const ol = $("layers");
  LAYERS.forEach((l, i) => {
    const li = document.createElement("li");
    li.className = "layer";
    li.title = l.heads.length ? `layer ${i} heads read: ${l.heads.join(", ")}` : `layer ${i}: arithmetic only`;
    li.innerHTML = `<b>L${String(i).padStart(2, "0")}</b><span class="heads"></span>` +
      `<span class="relu" style="width:${Math.max(8, Math.sqrt(l.units / MAX_UNITS) * 100)}%"></span>`;
    const heads = li.querySelector(".heads");
    for (const h of l.heads) {
      const s = document.createElement("span");
      s.className = "head";
      s.title = h;
      heads.appendChild(s);
      headCells.push(s);
    }
    ol.appendChild(li);
  });
  $("embed-note").textContent = `${fmt(MODEL_FACTS.vocab)} → ${MODEL_FACTS.dModel} dims`;
}

let lastPanel = 0;
function updatePanel(e, force = false) {
  const d = e.telemetry();
  const n = Math.floor(d.length / HEADS);
  for (let h = 0; h < HEADS && n; h++) {
    let sum = 0;
    for (let t = 0; t < n; t++) sum += Math.log2(d[t * HEADS + h] + 1);
    S.ema[h] = S.ema[h] * 0.6 + (sum / n / 20) * 0.4;
  }
  const now = performance.now();
  if (!force && now - lastPanel < 50) return;
  lastPanel = now;
  for (let h = 0; h < HEADS; h++) headCells[h].style.opacity = String(0.3 + 0.7 * Math.min(1, S.ema[h]));
  const toks = e.recentTokens();
  $("tokens-in").textContent = Array.from(toks.slice(-7), tokenText).join("  ");
  const w = lastWrite(toks.slice(-40));
  if (w) {
    $("next-cell").textContent = `@${cellName(w.addr)}`;
    $("next-val").textContent = `=${hex(w.value, w.value > 0xff ? 3 : 2)}`;
  }
  $("next-count").textContent = `#${fmt(e.stats().tokens)}`;
}

function renderInspector() {
  const box = $("inspector");
  const show = (S.mode === "paused" || S.mode === "operator") && S.engine;
  box.hidden = !show;
  if (!show) return;
  const next = S.engine.nextInstruction();
  const d = describe(next.op);
  $("insp-pc").textContent = `Next instruction · ${hex(next.pc, 3)}`;
  $("insp-code").textContent = d.code;
  $("insp-text").textContent = d.text;
}

// ---------------------------------------------------------------- sound

function beep(on) {
  if (on && S.sound && !S.audio) {
    const Ctx = window.AudioContext || window.webkitAudioContext;
    if (!Ctx) return;
    const ac = new Ctx();
    const osc = ac.createOscillator(), gain = ac.createGain();
    osc.type = "square";
    osc.frequency.value = 440;
    gain.gain.value = 0;
    osc.connect(gain).connect(ac.destination);
    osc.start();
    S.audio = { ac, gain };
  }
  const a = S.audio;
  if (a) a.gain.gain.setTargetAtTime(on && S.sound ? 0.03 : 0, a.ac.currentTime, 0.008);
}

// ---------------------------------------------------------------- main loop

let acc = 0, prevT = performance.now();
let demoKeys = 0, demoUntil = 0, demoSince = performance.now();
let last = { t: performance.now(), tokens: 0, instructions: 0 };
let fullSince = 0; // game-over rule: when the watched screen region became lit

function loop(now) {
  requestAnimationFrame(loop);
  const e = S.engine, m = S.mode, g = S.game;
  if (!e || !(m === "attract" || m === "play")) {
    prevT = now;
    acc = 0;
    return;
  }
  // The game advances at exactly 60 frames a second whatever the display's refresh rate.
  // Catch up at most 3 frames after a stall.
  acc += Math.min(100, now - prevT);
  prevT = now;
  if (acc < FRAME_MS) return;
  if (m === "attract") {
    if (now > demoUntil) {
      const roles = Object.values(g.keys);
      demoKeys = Math.random() < 0.6 && roles.length ? 1 << roles[Math.floor(Math.random() * roles.length)] : 0;
      demoUntil = now + 100 + Math.random() * 450;
    }
    if (now - demoSince > DEMO_SECONDS * 1000) {
      demoSince = now;
      acc = 0;
      void startDemo(DEMOS[(DEMOS.indexOf(g) + 1) % DEMOS.length]);
      return;
    }
  }
  e.clearTelemetry();
  for (let n = 0; acc >= FRAME_MS; n++) {
    if (n === 3) { acc = 0; break; }
    acc -= FRAME_MS;
    let keys = 0;
    if (m === "play") {
      for (const chips of S.pressed.values()) for (const c of chips) if (!S.tapChips.has(c)) keys |= 1 << c;
      for (const c of S.touch) if (!S.tapChips.has(c)) keys |= 1 << c;
      for (const [c, left] of S.pulses) {
        if (left > 0) {
          keys |= 1 << c;
          S.pulses.set(c, left - 1);
        }
      }
    } else keys = demoKeys;
    try { e.frame(keys, g.ipf); } catch (err) { fail(err); return; }
  }
  drawScreen();
  updatePanel(e);
  const rule = g.gameOver;
  if (m === "play" && rule) {
    const px = e.screen(0);
    let lit = false;
    for (const y of rule.rows) for (let x = rule.cols[0]; x <= rule.cols[1]; x++) lit ||= px[y * 64 + x] === 1;
    if (!lit) fullSince = 0;
    else if (!fullSince) fullSince = now;
    else if (now - fullSince > rule.seconds * 1000) {
      fullSince = 0;
      beep(false);
      setMode("gameover");
      return;
    }
  }
  beep(m === "play" && e.peek(0x1014) > 0);
  if (now - last.t > 500) {
    const s = e.stats(), dt = (now - last.t) / 1000;
    const tps = Math.max(0, (s.tokens - last.tokens) / dt), ips = Math.max(0, (s.instructions - last.instructions) / dt);
    $("readout").textContent = `${fmt(tps)} tokens/s · ${fmt(ips)} instructions/s · ${(ips / (g.ipf * 60)).toFixed(1)}× the game's normal speed · running in your browser`;
    last = { t: now, tokens: s.tokens, instructions: s.instructions };
  }
}

// ---------------------------------------------------------------- actions

function step() {
  const e = S.engine;
  if (!e) return;
  try {
    e.clearTelemetry();
    e.step();
  } catch (err) { fail(err); return; }
  drawScreen();
  updatePanel(e, true);
  renderInspector();
}

function pause() {
  if (S.mode !== "play") return;
  beep(false);
  setMode("paused");
}

function resume() { setMode("play"); }

function stepAction() {
  if (S.mode !== "operator") { beep(false); setMode("operator"); }
  step();
}

function restart() { void choose(S.game, "play"); }

/** Enter / Space / Esc outside play mode. */
function nav(action) {
  switch (S.mode) {
    case "attract": if (action === "start") void choose(S.game); break;
    case "howto": if (action === "start") setMode("play"); break;
    case "play": if (action === "back") pause(); break;
    case "paused": if (action === "start") resume(); break;
    case "operator": if (action === "start") step(); else if (action === "back") setMode("paused"); break;
    case "gameover": if (action === "start") restart(); break;
    case "error": if (action === "start") void choose(S.game); break;
  }
}

// ---------------------------------------------------------------- rendering

function renderChips() {
  const box = $("chips");
  if (!box.childElementCount) {
    for (const g of GAMES) {
      const b = document.createElement("button");
      b.className = "chip";
      b.textContent = g.title;
      b.dataset.id = g.id;
      b.onclick = () => void choose(g);
      box.appendChild(b);
    }
  }
  for (const b of box.children) b.setAttribute("aria-pressed", String(b.dataset.id === S.game.id && S.mode !== "attract"));
}

function keysHtml(g, max, p1 = "Player 1") {
  const two = isTwoPlayer(g);
  return Object.keys(g.keys).slice(0, max).map((r) =>
    `<span>${roleKeys(r, two).slice(0, 2).map((k) => `<kbd class="key">${esc(keyLabel(k))}</kbd>`).join("")}` +
    `<span>${two && (r === "up" || r === "down") ? `${p1} ${r}` : ROLE_LABELS[r]}</span></span>`).join("");
}

function renderHints() {
  $("hints").innerHTML = keysHtml(S.game, 5) + `<span><kbd class="key">Esc</kbd><span>Pause</span></span>`;
}

function renderOverlay() {
  const o = $("overlay"), g = S.game;
  o.className = "overlay";
  const dim = (html) => { o.className = "overlay center dim"; o.innerHTML = `<div class="stack">${html}</div>`; };
  switch (S.mode) {
    case "boot":
      dim(`<p>Loading the transformer</p><div class="bar"><i style="width:${Math.round(S.progress * 100)}%"></i></div>` +
        `<p class="label" style="color:rgb(255 255 255/.6)">${fmt(MODEL_FACTS.nonzero)} weights · ${(MODEL_FACTS.modelBytes / 1e6).toFixed(1)} MB</p>`);
      break;
    case "attract":
      o.className = "overlay corner";
      o.innerHTML = `<span class="label tag">Demo · ${esc(g.title)} · random input</span>` +
        `<button class="btn btn-acid" data-act="choose" style="margin-left:auto">Play ${esc(g.title)} <span aria-hidden="true">↗</span></button>`;
      break;
    case "howto":
      dim(`<p class="title">${esc(g.title)}</p><p class="sub">${esc(g.controls)}.</p>` +
        `<div class="keys fine">${keysHtml(g, 6, "P1")}</div>` +
        `<button class="btn btn-acid" data-act="start">Start</button><p class="label fine" style="color:rgb(255 255 255/.5)">or press any game key</p>`);
      break;
    case "paused":
      dim(`<p style="font-size:22px;letter-spacing:-.03em">Paused</p><div style="display:flex;gap:8px;flex-wrap:wrap;justify-content:center">` +
        `<button class="btn btn-acid" data-act="resume">Resume</button><button class="btn btn-ghost" data-act="step">Step one instruction</button></div>`);
      break;
    case "operator":
      o.className = "overlay center";
      o.style.alignItems = "flex-start";
      o.innerHTML = `<span style="margin-top:14px;background:rgb(0 0 0/.8);color:#fff;padding:6px 12px;font-size:12px">Stepping · Space runs one instruction · Esc back</span>`;
      return;
    case "gameover":
      dim(`<p style="font-size:26px;letter-spacing:-.03em">Game over</p>${g.gameOver ? `<p class="sub">${esc(g.gameOver.message)}.</p>` : ""}` +
        `<button class="btn btn-acid" data-act="restart">Play again</button>`);
      break;
    case "error":
      dim(`<p style="font-size:17px">Something went wrong</p><p class="mono" style="font-size:12px;color:rgb(255 255 255/.6)">${esc(S.error)}</p>` +
        `<button class="btn btn-acid" data-act="choose">Try again</button>`);
      break;
    default:
      o.innerHTML = "";
  }
  o.style.alignItems = "";
}

$("overlay").addEventListener("click", (ev) => {
  const act = ev.target.closest("[data-act]")?.dataset.act;
  if (act === "choose") void choose(S.game);
  else if (act === "start") setMode("play");
  else if (act === "resume") resume();
  else if (act === "step") stepAction();
  else if (act === "restart") restart();
});

function renderTools() {
  const play = $("btn-play");
  play.textContent = S.mode === "play" ? "Pause" : "Play";
  $("btn-step").disabled = S.mode === "boot" || S.mode === "error";
  renderChips();
}

$("btn-play").onclick = () => {
  const m = S.mode;
  if (m === "play") pause();
  else if (m === "paused" || m === "operator" || m === "howto") resume();
  else if (m === "gameover") restart();
  else void choose(S.game, "play");
};
$("btn-step").onclick = stepAction;
$("btn-restart").onclick = restart;
$("btn-sound").onclick = (ev) => {
  S.sound = !S.sound;
  ev.currentTarget.setAttribute("aria-pressed", String(S.sound));
  if (!S.sound) beep(false);
};
$("insp-step").onclick = stepAction;

function renderTouch() {
  const box = $("touch"), g = S.game;
  const pad = (role, label, w, h, round = false) => {
    const missing = g.keys[role] === undefined;
    return `<button type="button" class="pad${round ? " round" : ""}" data-role="${role}" aria-label="${ROLE_LABELS[role]}"` +
      `${missing ? " disabled" : ""} style="width:${w}rem;height:${h}rem">${label}</button>`;
  };
  if (isTwoPlayer(g)) {
    box.innerHTML = `<div class="pcol">${pad("up", "▲", 4, 3.5)}${pad("down", "▼", 4, 3.5)}<span class="label">Player 1</span></div>` +
      `<div class="pcol">${pad("player2Up", "▲", 4, 3.5)}${pad("player2Down", "▼", 4, 3.5)}<span class="label">Player 2</span></div>`;
  } else {
    box.innerHTML = `<div class="dpad"><span></span>${pad("up", "▲", 3, 3)}<span></span>${pad("left", "◀", 3, 3)}<span></span>` +
      `${pad("right", "▶", 3, 3)}<span></span>${pad("down", "▼", 3, 3)}<span></span></div>` +
      `<div class="ab">${pad("b", "B", 3.5, 3.5, true)}${pad("a", "A", 4, 4, true)}</div>`;
  }
  for (const b of box.querySelectorAll(".pad")) {
    const set = (down) => {
      b.dataset.held = String(down);
      setRole(b.dataset.role, down);
    };
    b.onpointerdown = (ev) => { ev.preventDefault(); b.setPointerCapture(ev.pointerId); set(true); navigator.vibrate?.(8); };
    b.onpointerup = () => set(false);
    b.onpointercancel = () => set(false);
    b.onlostpointercapture = () => b.dataset.held === "true" && set(false);
    b.oncontextmenu = (ev) => ev.preventDefault();
  }
}

function setRole(role, down) {
  const chip = S.game.keys[role];
  if (chip === undefined) return;
  if (down && (S.mode === "howto" || S.mode === "attract")) {
    if (S.mode === "attract") { void choose(S.game, "play"); return; }
    setMode("play");
  }
  if (S.tapChips.has(chip) && down && !S.touch.has(chip)) S.pulses.set(chip, TAP_FRAMES);
  if (down) S.touch.add(chip);
  else S.touch.delete(chip);
}

function renderCredit() {
  const g = S.game;
  const desc = g.description ? `<p class="desc">${esc(g.description)}</p>` : "";
  $("credit").innerHTML = `<span class="label">Now playing · ${esc(g.year ?? "CHIP-8")} · ${esc(g.license)}</span>` +
    `<h3>${esc(g.title)}</h3><div class="who">${esc(g.authors.join(", ") || "Unknown author")}</div>${desc}` +
    `<a class="src mono" href="${esc(g.source)}" target="_blank" rel="noopener">Source ↗</a>`;
}

function renderFacts() {
  const rows = [
    ["Architecture", "Decoder-only transformer: embeddings, causal softmax attention, ReGLU feed-forward"],
    ["Layers · heads", `${MODEL_FACTS.layers} layers · ${MODEL_FACTS.heads} heads · width ${MODEL_FACTS.dModel}`],
    ["Weights", `${fmt(MODEL_FACTS.params)} parameters, ${fmt(MODEL_FACTS.nonzero)} nonzero, all set by hand`],
    ["Training", "None. Zero gradient steps."],
    ["Correctness", `${LIBRARY.verified} of ${LIBRARY.total} games match a reference emulator token for token`],
  ];
  $("facts").innerHTML = `<span class="label">The model</span><dl>${rows.map(([k, v]) =>
    `<div class="row"><dt class="label">${k}</dt><dd>${v}</dd></div>`).join("")}</dl>`;
  $("fact-weights").textContent = fmt(MODEL_FACTS.nonzero);
}

// ---------------------------------------------------------------- keyboard

const editable = (t) => t instanceof HTMLElement && (t.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(t.tagName));

window.addEventListener("keydown", (ev) => {
  if (editable(ev.target) || ev.metaKey || ev.ctrlKey || ev.altKey) return;
  const m = S.mode;
  if (m === "play") {
    if (ev.code === "Escape") return pause();
    const chips = S.bindings.get(ev.code);
    if (!chips) return;
    ev.preventDefault();
    if (!ev.repeat) for (const c of chips) if (S.tapChips.has(c)) S.pulses.set(c, TAP_FRAMES);
    S.pressed.set(ev.code, chips);
    return;
  }
  let action = ev.code === "Enter" || ev.code === "Space" ? "start" : ev.code === "Escape" ? "back" : null;
  if (m === "howto" && S.bindings.has(ev.code)) action = "start";
  if (!action || (ev.repeat && m !== "operator")) return;
  ev.preventDefault();
  nav(action);
});
window.addEventListener("keyup", (ev) => S.pressed.delete(ev.code));
window.addEventListener("blur", () => S.pressed.clear());
document.addEventListener("visibilitychange", () => { if (document.hidden) pause(); });
window.addEventListener("hashchange", () => {
  const g = GAMES.find((x) => x.id === location.hash.slice(1));
  if (g && g.id !== S.game.id) void choose(g);
});

// ---------------------------------------------------------------- boot

buildLayers();
renderFacts();
setGame(S.game);
setMode("boot");
requestAnimationFrame(loop);
if (location.hash.length > 1 && GAMES.some((g) => g.id === location.hash.slice(1))) void choose(S.game);
else void startDemo(S.game);