sci2-ts 0.0.0-stage → 0.2.1

package/apps/viewer/src/opl-worklet.ts

@@ -0,0 +1,55 @@
+/**
+ * AudioWorklet running the OPL2 emulator. The main thread's AdLib driver posts register
+ * writes as flat [reg, value, reg, value, ...] arrays; this renders the chip at its native
+ * 49,716 Hz and linearly resamples to the AudioContext's rate.
+ */
+import { OPL_RATE, Opl2 } from "../../../packages/sci/src/audio/opl2.ts";
+
+declare const sampleRate: number;
+declare function registerProcessor(name: string, ctor: new () => AudioWorkletProcessorBase): void;
+declare class AudioWorkletProcessorBase {
+  readonly port: MessagePort;
+  process(inputs: Float32Array[][], outputs: Float32Array[][]): boolean;
+}
+const Base = (globalThis as unknown as { AudioWorkletProcessor: typeof AudioWorkletProcessorBase }).AudioWorkletProcessor;
+
+class OplProcessor extends Base {
+  private chip = new Opl2();
+  private readonly one = new Float32Array(1);
+  private prev = 0;
+  private next = 0;
+  private frac = 0;
+
+  constructor() {
+    super();
+    this.port.onmessage = (e: MessageEvent<number[] | "reset">) => {
+      if (e.data === "reset") {
+        this.chip = new Opl2();
+        return;
+      }
+      const w = e.data;
+      for (let i = 0; i + 1 < w.length; i += 2) this.chip.write(w[i]!, w[i + 1]!);
+    };
+  }
+
+  override process(_inputs: Float32Array[][], outputs: Float32Array[][]): boolean {
+    const out = outputs[0];
+    if (!out?.[0]) return true;
+    const step = OPL_RATE / sampleRate;
+    const left = out[0];
+    for (let i = 0; i < left.length; i++) {
+      this.frac += step;
+      while (this.frac >= 1) {
+        this.prev = this.next;
+        this.chip.generate(this.one, 0, 1);
+        this.next = this.one[0]!;
+        this.frac -= 1;
+      }
+      left[i] = this.prev + (this.next - this.prev) * this.frac;
+    }
+    for (let c = 1; c < out.length; c++) out[c]!.set(left);
+    return true;
+  }
+}
+
+registerProcessor("opl2", OplProcessor);

package/apps/viewer/src/overlay.d.ts

@@ -0,0 +1,31 @@
+import { type Vm } from "../../../packages/sci/src/index.ts";
+/**
+ * What the interpreter knows about the room, drawn over the game screen as SVG in game
+ * coordinates (320x200): clickable features, sprites, walk polygons and where actors are
+ * going. Used by the explorer's live view and the room editor.
+ */
+export interface OverlayOptions {
+    /** Drawn sprites (cast members) with their names. */
+    sprites?: boolean;
+    /** The room's features (clickable areas) with their names, and approach points. */
+    features?: boolean;
+    /** Walk polygons: green total access, yellow near point, red barred, blue contained. */
+    polygons?: boolean;
+    /** Where moving actors are headed (PolyPath routes). */
+    paths?: boolean;
+    /** An object to outline in white. */
+    selected?: number;
+    /** Tells exits from other features (the editor knows from the room's YAML). */
+    isExit?: (name: string) => boolean;
+}
+export declare const OVERLAY_COLORS: {
+    polygons: string[];
+    feature: string;
+    exit: string;
+    sprite: string;
+    hero: string;
+    selected: string;
+};
+/** An SVG to lay over the game canvas (position it over the canvas, same size). */
+export declare function createOverlay(): SVGSVGElement;
+export declare function drawRoomOverlay(root: SVGSVGElement, vm: Vm, o: OverlayOptions): void;

package/apps/viewer/src/overlay.js

@@ -0,0 +1,103 @@
+import { collectionElements, drawnItems, gameGlobal, isKindOf, namedObject, objectAt, polygonOf, readInts, roomPlane, signedProp, } from "../../../packages/sci/src/index.js";
+const SVG = "http://www.w3.org/2000/svg";
+const svg = (tag, attrs = {}, text) => {
+    const node = document.createElementNS(SVG, tag);
+    for (const [k, v] of Object.entries(attrs))
+        node.setAttribute(k, String(v));
+    if (text)
+        node.textContent = text;
+    return node;
+};
+export const OVERLAY_COLORS = {
+    polygons: ["#6fb07a", "#d8c050", "#e05555", "#5fa0e8"],
+    feature: "#e8b04a",
+    exit: "#5fd08c",
+    sprite: "#7fb3e8",
+    hero: "#f08fd0",
+    selected: "#ffffff",
+};
+/** An SVG to lay over the game canvas (position it over the canvas, same size). */
+export function createOverlay() {
+    const root = svg("svg", { viewBox: "0 0 320 200", preserveAspectRatio: "none" });
+    root.style.pointerEvents = "none";
+    return root;
+}
+const label = (x, y, text, color) => svg("text", {
+    x, y, fill: color, stroke: "#000", "stroke-width": 1.2, "paint-order": "stroke", "font-size": 5, "font-family": "ui-monospace, Menlo, monospace",
+}, text);
+export function drawRoomOverlay(root, vm, o) {
+    root.replaceChildren();
+    const plane = roomPlane(vm);
+    const room = objectAt(vm, gameGlobal(vm, "curRoom"));
+    // Room objects use the room plane's coordinates (below the status bar).
+    const local = svg("g", { transform: plane ? `translate(${plane.left} ${plane.top})` : "" });
+    root.append(local);
+    const colorOf = (address, normal) => (address === o.selected ? OVERLAY_COLORS.selected : normal);
+    if (o.polygons && room) {
+        for (const poly of collectionElements(vm, vm.getProp(room, "obstacles"))) {
+            const { type, points } = polygonOf(vm, poly);
+            if (points.length < 3)
+                continue;
+            const color = OVERLAY_COLORS.polygons[type] ?? "#aaa";
+            local.append(svg("polygon", { points: points.map((p) => p.join(",")).join(" "), fill: `${color}22`, stroke: color, "stroke-width": 0.6 }));
+        }
+    }
+    if (o.features) {
+        for (const f of collectionElements(vm, namedObject(vm, "features"))) {
+            const color = colorOf(f.address, o.isExit?.(f.name) ? OVERLAY_COLORS.exit : OVERLAY_COLORS.feature);
+            const style = { fill: `${color}18`, stroke: color, "stroke-width": f.address === o.selected ? 1.2 : 0.5 };
+            const check = objectAt(vm, vm.getProp(f, "onMeCheck"));
+            let at;
+            if (check && isKindOf(vm, check, "Polygon")) {
+                const { points } = polygonOf(vm, check);
+                if (points.length < 3)
+                    continue;
+                local.append(svg("polygon", { points: points.map((p) => p.join(",")).join(" "), ...style }));
+                at = [points[0][0] + 2, points[0][1] + 6];
+            }
+            else {
+                const [l, t, r, b] = ["nsLeft", "nsTop", "nsRight", "nsBottom"].map((n) => signedProp(vm, f, n));
+                if (r <= l || b <= t)
+                    continue;
+                local.append(svg("rect", { x: l, y: t, width: r - l, height: b - t, ...style }));
+                at = [l + 2, t + 6];
+            }
+            local.append(label(at[0], at[1], f.name, color));
+            // Where the hero walks to before using it.
+            const ax = signedProp(vm, f, "approachX"), ay = signedProp(vm, f, "approachY");
+            if (ax || ay) {
+                local.append(svg("path", { d: `M${ax - 2} ${ay - 2}L${ax + 2} ${ay + 2}M${ax - 2} ${ay + 2}L${ax + 2} ${ay - 2}`, stroke: color, "stroke-width": 0.6 }));
+            }
+        }
+    }
+    if (o.paths) {
+        for (const actor of collectionElements(vm, namedObject(vm, "cast"))) {
+            const mover = objectAt(vm, vm.getProp(actor, "mover"));
+            if (!mover)
+                continue;
+            const pts = [[signedProp(vm, actor, "x"), signedProp(vm, actor, "y")]];
+            // PolyPath keeps the whole route: an array ending in 0x7777, `value` = next index.
+            const route = vm.getProp(mover, "points");
+            if (route) {
+                const flat = readInts(vm, route, 200);
+                for (let i = signedProp(vm, mover, "value"); i + 1 < flat.length && flat[i] !== 0x7777; i += 2)
+                    pts.push([flat[i], flat[i + 1]]);
+            }
+            const target = [signedProp(vm, mover, "x"), signedProp(vm, mover, "y")];
+            if (pts.length === 1)
+                pts.push(target);
+            local.append(svg("polyline", { points: pts.map((p) => p.join(",")).join(" "), fill: "none", stroke: "#fff", "stroke-width": 0.6, "stroke-dasharray": "2 1.5" }));
+            local.append(svg("circle", { cx: target[0], cy: target[1], r: 1.8, fill: "#fff" }));
+        }
+    }
+    if (o.sprites) {
+        const ego = gameGlobal(vm, "ego");
+        for (const d of drawnItems(vm)) {
+            if (plane && d.plane !== plane.address)
+                continue;
+            const color = colorOf(d.item.address, d.item.address === ego ? OVERLAY_COLORS.hero : OVERLAY_COLORS.sprite);
+            root.append(svg("rect", { x: d.x, y: d.y, width: d.w, height: d.h, fill: "none", stroke: color, "stroke-width": d.item.address === o.selected ? 1.2 : 0.5 }));
+            root.append(label(d.x, d.y - 1, d.item.name, color));
+        }
+    }
+}

package/apps/viewer/src/overlay.ts

@@ -0,0 +1,123 @@
+import {
+  collectionElements, drawnItems, gameGlobal, isKindOf, namedObject, objectAt, polygonOf, readInts, roomPlane, signedProp,
+  type Vm,
+} from "../../../packages/sci/src/index.ts";
+
+/**
+ * What the interpreter knows about the room, drawn over the game screen as SVG in game
+ * coordinates (320x200): clickable features, sprites, walk polygons and where actors are
+ * going. Used by the explorer's live view and the room editor.
+ */
+export interface OverlayOptions {
+  /** Drawn sprites (cast members) with their names. */
+  sprites?: boolean;
+  /** The room's features (clickable areas) with their names, and approach points. */
+  features?: boolean;
+  /** Walk polygons: green total access, yellow near point, red barred, blue contained. */
+  polygons?: boolean;
+  /** Where moving actors are headed (PolyPath routes). */
+  paths?: boolean;
+  /** An object to outline in white. */
+  selected?: number;
+  /** Tells exits from other features (the editor knows from the room's YAML). */
+  isExit?: (name: string) => boolean;
+}
+
+const SVG = "http://www.w3.org/2000/svg";
+const svg = <K extends keyof SVGElementTagNameMap>(tag: K, attrs: Record<string, string | number> = {}, text?: string) => {
+  const node = document.createElementNS(SVG, tag);
+  for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, String(v));
+  if (text) node.textContent = text;
+  return node;
+};
+
+export const OVERLAY_COLORS = {
+  polygons: ["#6fb07a", "#d8c050", "#e05555", "#5fa0e8"],
+  feature: "#e8b04a",
+  exit: "#5fd08c",
+  sprite: "#7fb3e8",
+  hero: "#f08fd0",
+  selected: "#ffffff",
+};
+
+/** An SVG to lay over the game canvas (position it over the canvas, same size). */
+export function createOverlay(): SVGSVGElement {
+  const root = svg("svg", { viewBox: "0 0 320 200", preserveAspectRatio: "none" });
+  root.style.pointerEvents = "none";
+  return root;
+}
+
+const label = (x: number, y: number, text: string, color: string) =>
+  svg("text", {
+    x, y, fill: color, stroke: "#000", "stroke-width": 1.2, "paint-order": "stroke", "font-size": 5, "font-family": "ui-monospace, Menlo, monospace",
+  }, text);
+
+export function drawRoomOverlay(root: SVGSVGElement, vm: Vm, o: OverlayOptions): void {
+  root.replaceChildren();
+  const plane = roomPlane(vm);
+  const room = objectAt(vm, gameGlobal(vm, "curRoom"));
+  // Room objects use the room plane's coordinates (below the status bar).
+  const local = svg("g", { transform: plane ? `translate(${plane.left} ${plane.top})` : "" });
+  root.append(local);
+  const colorOf = (address: number, normal: string) => (address === o.selected ? OVERLAY_COLORS.selected : normal);
+
+  if (o.polygons && room) {
+    for (const poly of collectionElements(vm, vm.getProp(room, "obstacles"))) {
+      const { type, points } = polygonOf(vm, poly);
+      if (points.length < 3) continue;
+      const color = OVERLAY_COLORS.polygons[type] ?? "#aaa";
+      local.append(svg("polygon", { points: points.map((p) => p.join(",")).join(" "), fill: `${color}22`, stroke: color, "stroke-width": 0.6 }));
+    }
+  }
+  if (o.features) {
+    for (const f of collectionElements(vm, namedObject(vm, "features"))) {
+      const color = colorOf(f.address, o.isExit?.(f.name) ? OVERLAY_COLORS.exit : OVERLAY_COLORS.feature);
+      const style = { fill: `${color}18`, stroke: color, "stroke-width": f.address === o.selected ? 1.2 : 0.5 };
+      const check = objectAt(vm, vm.getProp(f, "onMeCheck"));
+      let at: [number, number] | undefined;
+      if (check && isKindOf(vm, check, "Polygon")) {
+        const { points } = polygonOf(vm, check);
+        if (points.length < 3) continue;
+        local.append(svg("polygon", { points: points.map((p) => p.join(",")).join(" "), ...style }));
+        at = [points[0]![0] + 2, points[0]![1] + 6];
+      } else {
+        const [l, t, r, b] = ["nsLeft", "nsTop", "nsRight", "nsBottom"].map((n) => signedProp(vm, f, n)) as [number, number, number, number];
+        if (r <= l || b <= t) continue;
+        local.append(svg("rect", { x: l, y: t, width: r - l, height: b - t, ...style }));
+        at = [l + 2, t + 6];
+      }
+      local.append(label(at[0], at[1], f.name, color));
+      // Where the hero walks to before using it.
+      const ax = signedProp(vm, f, "approachX"), ay = signedProp(vm, f, "approachY");
+      if (ax || ay) {
+        local.append(svg("path", { d: `M${ax - 2} ${ay - 2}L${ax + 2} ${ay + 2}M${ax - 2} ${ay + 2}L${ax + 2} ${ay - 2}`, stroke: color, "stroke-width": 0.6 }));
+      }
+    }
+  }
+  if (o.paths) {
+    for (const actor of collectionElements(vm, namedObject(vm, "cast"))) {
+      const mover = objectAt(vm, vm.getProp(actor, "mover"));
+      if (!mover) continue;
+      const pts = [[signedProp(vm, actor, "x"), signedProp(vm, actor, "y")]];
+      // PolyPath keeps the whole route: an array ending in 0x7777, `value` = next index.
+      const route = vm.getProp(mover, "points");
+      if (route) {
+        const flat = readInts(vm, route, 200);
+        for (let i = signedProp(vm, mover, "value"); i + 1 < flat.length && flat[i] !== 0x7777; i += 2) pts.push([flat[i]!, flat[i + 1]!]);
+      }
+      const target = [signedProp(vm, mover, "x"), signedProp(vm, mover, "y")];
+      if (pts.length === 1) pts.push(target);
+      local.append(svg("polyline", { points: pts.map((p) => p.join(",")).join(" "), fill: "none", stroke: "#fff", "stroke-width": 0.6, "stroke-dasharray": "2 1.5" }));
+      local.append(svg("circle", { cx: target[0]!, cy: target[1]!, r: 1.8, fill: "#fff" }));
+    }
+  }
+  if (o.sprites) {
+    const ego = gameGlobal(vm, "ego");
+    for (const d of drawnItems(vm)) {
+      if (plane && d.plane !== plane.address) continue;
+      const color = colorOf(d.item.address, d.item.address === ego ? OVERLAY_COLORS.hero : OVERLAY_COLORS.sprite);
+      root.append(svg("rect", { x: d.x, y: d.y, width: d.w, height: d.h, fill: "none", stroke: color, "stroke-width": d.item.address === o.selected ? 1.2 : 0.5 }));
+      root.append(label(d.x, d.y - 1, d.item.name, color));
+    }
+  }
+}

package/apps/viewer/src/play.css

@@ -0,0 +1,14 @@
+:root { color-scheme: dark; }
+body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #0b0b0b; color: #999; font: 12px/1.4 ui-monospace, Menlo, monospace; }
+main { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; }
+canvas { width: min(960px, 100vw - 32px); aspect-ratio: 4 / 3; image-rendering: pixelated; background: #000; outline: 1px solid #222; cursor: none; }
+#error { color: #f77; max-width: 960px; white-space: pre-wrap; }
+.bar { display: flex; gap: 16px; align-items: center; justify-content: space-between; width: min(960px, 100vw - 32px); }
+#music { background: #1b1b1b; color: #ddd; border: 1px solid #333; border-radius: 4px; padding: 6px 10px; font: inherit; cursor: pointer; }
+#music:hover { border-color: #e8b04a; color: #e8b04a; }
+#mods { position: relative; }
+#mods summary { cursor: pointer; color: #ddd; }
+#mods[open] > div, #mods[open] > button { position: absolute; right: 0; z-index: 1; background: #161616; border: 1px solid #333; }
+#mods > div { bottom: 2.4em; min-width: 220px; padding: 8px 10px; border-radius: 4px; display: flex; flex-direction: column; gap: 4px; }
+#mods > button { bottom: -2.2em; background: #1b1b1b; color: #ddd; border-radius: 4px; padding: 4px 8px; font: inherit; cursor: pointer; white-space: nowrap; }
+#mods .none { color: #777; }

package/apps/viewer/src/play.d.ts

@@ -0,0 +1 @@
+export {};

package/apps/viewer/src/play.js

@@ -0,0 +1,179 @@
+import { activeMods, availableMods, openGame, rememberMods } from "./files.js";
+import { GameSession } from "./session.js";
+import { ResourceType, gameGlobal, heroInPlay, requestRoom, saves, savesToJson } from "../../../packages/sci/src/index.js";
+import { APP_ID } from "./app.js";
+import { gameProfile } from "./game-profile.js";
+const canvas = document.getElementById("screen");
+const status = document.getElementById("status");
+const errorBox = document.getElementById("error");
+const musicButton = document.getElementById("music");
+// Mods (?mods=a,b or the last choice) load as patch directories over the game.
+const { rm, mods } = await openGame();
+// `?mute` keeps audio off (e.g. automated testing in a background tab).
+const params = new URLSearchParams(location.search);
+// `?debug` turns on Sierra's own debug room (Alt-T teleport, Alt-G flags, Alt-I items...).
+const session = await GameSession.create({ canvas, rm, mods, muted: params.has("mute"), debug: params.has("debug") });
+await setUpModPicker();
+// For poking at the running game from the browser console (and automated checks).
+window.sci = { session };
+// Saved games as a JSON file, to replay them headlessly (tools/explore.ts loadsaves:<file>).
+document.getElementById("export-saves").addEventListener("click", () => {
+    const store = saves(session.vm).store;
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(new Blob([savesToJson([...store.saves.values()])], { type: "application/json" }));
+    a.download = `${APP_ID}-saves${mods.length ? `-${mods.join("+")}` : ""}.json`;
+    a.click();
+    URL.revokeObjectURL(a.href);
+});
+const startRoom = /^#room\/(\d+)$/.exec(location.hash) ? Number(location.hash.slice(6)) : undefined;
+/** What room navigation is doing, shown on the status line. */
+let roomStatus;
+setUpRoomNavigation();
+/**
+ * Rooms in the address bar: `#room/250` goes there. Opened that way, the game doesn't make
+ * you sit through the intro: it loads your newest saved game (your hero, your progress), or
+ * with none (or `?fresh`), fast-forwards through character creation to a new Wizard called
+ * Hero. Then it jumps. Editing the hash jumps again, and Back returns to the last jump; the
+ * hash follows the game's own room changes without adding history entries.
+ */
+function setUpRoomNavigation() {
+    /** The room asked for, kept until the game gets there (or gives up). */
+    let wanted;
+    let shown = 0;
+    const readHash = () => {
+        const m = /^#room\/(\d+)$/.exec(location.hash);
+        if (!m)
+            return;
+        const room = Number(m[1]);
+        if (room === shown && !wanted)
+            return; // the hash we wrote ourselves
+        if (!rm.has({ type: ResourceType.Script, number: room })) {
+            roomStatus = `There's no room ${room}`;
+            return;
+        }
+        wanted = { room, since: performance.now() };
+    };
+    readHash();
+    // Editing the address bar fires hashchange (and popstate, in some browsers and for Back).
+    addEventListener("hashchange", readHash);
+    addEventListener("popstate", readHash);
+    session.onDraw.push(() => {
+        const vm = session.vm;
+        // The 20 s allowance only counts while a hero is in play (making one takes a while).
+        if (session.fastForwarding || !heroInPlay(vm)) {
+            if (wanted)
+                wanted.since = performance.now();
+            if (session.fastForwarding)
+                return;
+        }
+        const room = gameGlobal(vm, "curRoomNum") ?? 0;
+        if (wanted) {
+            if (room === wanted.room) {
+                roomStatus = undefined;
+                wanted = undefined;
+            }
+            else if (!heroInPlay(vm)) {
+                roomStatus = `Room ${wanted.room}: waiting for a hero (create one, or restore a save)`;
+            }
+            else if (performance.now() - wanted.since > 20_000) {
+                roomStatus = `Couldn't get to room ${wanted.room} (the game didn't leave room ${room})`;
+                wanted = undefined;
+            }
+            else {
+                // Ask again every frame: while a message or a scripted scene holds the game, its
+                // main loop isn't checking, and a room may reset the request when it starts.
+                requestRoom(vm, wanted.room);
+                roomStatus = performance.now() - wanted.since > 1500
+                    ? `Going to room ${wanted.room}… (close any message on screen)`
+                    : `Going to room ${wanted.room}…`;
+            }
+        }
+        if (room && room !== shown && heroInPlay(vm)) {
+            shown = room;
+            if (location.hash !== `#room/${room}`)
+                history.replaceState(null, "", `#room/${room}`);
+        }
+    });
+}
+/** How a `#room/N` visit gets a hero: the newest save, or a quick new one. */
+const quickStart = gameProfile(session.vm)?.quickStart(session.vm);
+function startGame() {
+    const store = saves(session.vm).store;
+    const info = params.has("fresh") ? undefined : store.list()[0];
+    const newest = info && store.get(info.id);
+    if (startRoom === undefined)
+        return session.start();
+    if (newest) {
+        status.textContent = `Loading "${newest.info.description}" to go to room ${startRoom}…`;
+        session.start();
+        // Restore once the game is up (it needs its first frame to exist), like the game's own Restore.
+        let done = false;
+        session.onDraw.push(() => {
+            if (done)
+                return;
+            done = true;
+            session.restore(newest.snapshot);
+        });
+        return;
+    }
+    if (!quickStart) {
+        status.textContent = `Play until your character can walk around, then it goes to room ${startRoom}`;
+        return session.start();
+    }
+    status.textContent = `Creating a hero to go to room ${startRoom}…`;
+    session.start({ fastForward: quickStart });
+}
+/** Checkboxes for the built mods; applying reloads the page with the new set. */
+async function setUpModPicker() {
+    const list = document.getElementById("mod-list");
+    const apply = document.getElementById("mods-apply");
+    const summary = document.querySelector("#mods summary");
+    const built = await availableMods();
+    const on = new Set(activeMods());
+    summary.textContent = on.size ? `Mods: ${[...on].join(", ")}` : "Mods";
+    if (!built.length) {
+        list.innerHTML = '<span class="none">No mods built. Try <code>pnpm mod build mods/altar-hello</code>.</span>';
+        apply.hidden = true;
+        return;
+    }
+    for (const name of built) {
+        const box = Object.assign(document.createElement("input"), { type: "checkbox", checked: on.has(name), value: name });
+        const label = document.createElement("label");
+        label.append(box, ` ${name}`);
+        list.append(label);
+    }
+    apply.addEventListener("click", () => {
+        const chosen = [...list.querySelectorAll("input:checked")].map((b) => b.value);
+        rememberMods(chosen);
+        const url = new URL(location.href);
+        url.searchParams.set("mods", chosen.join(","));
+        location.href = url.toString();
+    });
+}
+const showMusicMode = () => (musicButton.textContent = session.musicMode === "adlib" ? "Music: AdLib (OPL2 FM, 1994 Sound Blaster)" : "Music: General MIDI (SoundFont)");
+musicButton.addEventListener("click", () => {
+    if (session.hasAdLib)
+        session.setMusicMode(session.musicMode === "adlib" ? "gm" : "adlib");
+    showMusicMode();
+});
+showMusicMode();
+let lastStatus = 0;
+session.onDraw.push(() => {
+    if (session.error) {
+        errorBox.hidden = false;
+        errorBox.textContent = `${session.error.message}\n${session.error.backtrace.map((l) => `  at ${l}`).join("\n")}`;
+        return;
+    }
+    const now = performance.now();
+    if (session.fastForwarding) {
+        if (now - lastStatus > 250)
+            (status.textContent = `Creating a hero… (${Math.min(100, Math.round((session.frames / (quickStart?.until ?? 1)) * 100))}%)`), (lastStatus = now);
+        return;
+    }
+    if (now - lastStatus < 1000)
+        return;
+    lastStatus = now;
+    status.textContent = !session.vm.running ? "Game exited." : roomStatus ?? `${session.fps} fps · ${session.vm.instructions.toLocaleString()} instructions${mods.length ? ` · mods: ${mods.join(", ")}` : ""}${params.has("debug") ? " · debug: Alt-T teleport" : ""}${session.musicMode === "gm" && !session.music.ready ? " · SoundFont loading" : ""}`;
+});
+status.textContent = "Running";
+startGame();