sci2-ts 0.0.0-stage → 0.2.1

package/apps/viewer/src/explore/context.ts

@@ -0,0 +1,124 @@
+import {
+  ResourceType, celToRgba, mergePalette, parseMessages, parsePic,
+  type GameIndex, type MessageFile, type ObjectInfo, type Palette, type ResourceManager, type ScriptWorld,
+} from "../../../../packages/sci/src/index.ts";
+
+/** Everything the explorer's views share. */
+export interface Explorer {
+  rm: ResourceManager;
+  /** Mods loaded over the game (their saves are kept apart). */
+  mods: string[];
+  world: ScriptWorld;
+  index: GameIndex;
+  basePalette: Palette;
+  /** Navigates to a hash route, e.g. "room/710" (the current tab is kept). */
+  href(route: string): string;
+  messages(n: number): Promise<MessageFile | undefined>;
+  pic(n: number): Promise<HTMLCanvasElement | undefined>;
+  object(script: number, offset: number): ObjectInfo | undefined;
+  objectsNamed(name: string): ObjectInfo[];
+}
+
+type Child = Node | string | null | undefined | false;
+
+/** `el("a", { href }, "text", child)`: a tiny DOM builder. */
+export function el<K extends keyof HTMLElementTagNameMap>(tag: K, props: Partial<HTMLElementTagNameMap[K]> & Record<string, unknown> = {}, ...children: Child[]): HTMLElementTagNameMap[K] {
+  const node = Object.assign(document.createElement(tag), props);
+  for (const c of children) if (c !== null && c !== undefined && c !== false) node.append(c);
+  return node;
+}
+
+export const hex = (n: number) => `$${n.toString(16).padStart(4, "0")}`;
+/** Property values: small numbers as decimal, the rest (addresses, flags) as hex too. */
+export const showValue = (v: number) => (v >= 0x8000 ? `${v - 0x10000}` : v > 255 ? `${v} (${hex(v)})` : `${v}`);
+
+export function createExplorer(rm: ResourceManager, mods: string[], world: ScriptWorld, index: GameIndex, basePalette: Palette, currentTab: () => string): Explorer {
+  const messageCache = new Map<number, Promise<MessageFile | undefined>>();
+  const picCache = new Map<number, Promise<HTMLCanvasElement | undefined>>();
+  const objects = new Map<string, ObjectInfo>();
+  const byName = new Map<string, ObjectInfo[]>();
+  for (const s of index.scripts) {
+    for (const o of s.objects) {
+      objects.set(`${o.script}:${o.offset}`, o);
+      byName.set(o.name, [...(byName.get(o.name) ?? []), o]);
+    }
+  }
+
+  return {
+    rm, mods, world, index, basePalette,
+    href: (route) => `#/${currentTab()}/${route}`,
+    object: (script, offset) => objects.get(`${script}:${offset}`),
+    objectsNamed: (name) => byName.get(name) ?? [],
+    messages(n) {
+      let p = messageCache.get(n);
+      if (!p) {
+        p = rm.has({ type: ResourceType.Message, number: n })
+          ? rm.load({ type: ResourceType.Message, number: n }).then((r) => parseMessages(r.data))
+          : Promise.resolve(undefined);
+        messageCache.set(n, p);
+      }
+      return p;
+    },
+    pic(n) {
+      let p = picCache.get(n);
+      if (!p) {
+        p = rm.has({ type: ResourceType.Pic, number: n }) ? rm.load({ type: ResourceType.Pic, number: n }).then((r) => renderPic(r.data, basePalette)) : Promise.resolve(undefined);
+        picCache.set(n, p);
+      }
+      return p;
+    },
+  };
+}
+
+// Remap colours (shadows, torch light) only mean something at run time: approximate.
+const REMAP = new Map([[253, 64], [254, 110]]);
+
+function renderPic(data: Uint8Array, base: Palette): HTMLCanvasElement {
+  const pic = parsePic(data);
+  const palette = mergePalette(base, pic.palette);
+  const canvas = el("canvas", { width: pic.width, height: pic.height });
+  const ctx = canvas.getContext("2d")!;
+  for (const cel of [...pic.cels].sort((a, b) => a.priority - b.priority)) {
+    if (!cel.width || !cel.height) continue;
+    const layer = el("canvas", { width: cel.width, height: cel.height });
+    layer.getContext("2d")!.putImageData(new ImageData(celToRgba(cel, palette, { remap: REMAP }), cel.width, cel.height), 0, 0);
+    ctx.drawImage(layer, cel.x, cel.y);
+  }
+  return canvas;
+}
+
+/** A small copy of a canvas as a data URL, for map thumbnails. */
+export function thumbnail(canvas: HTMLCanvasElement, width = 96): string {
+  const height = Math.round((canvas.height / canvas.width) * width * 1.2);
+  const small = el("canvas", { width, height });
+  const ctx = small.getContext("2d")!;
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(canvas, 0, 0, width, height);
+  return small.toDataURL();
+}
+
+// --- Rooms the editor can open ------------------------------------------------------------
+
+let editable: Promise<{ name: string; rooms: number[] }[]> | undefined;
+
+/**
+ * The room editor's address for room `n`, if a mod describes it in a .room.yaml (preferring
+ * the mods loaded here). The dev server's /__editor/mods lists them; elsewhere, none.
+ */
+export async function editorUrl(n: number, preferred: string[] = []): Promise<string | undefined> {
+  editable ??= fetch("/__editor/mods")
+    .then((r) => (r.ok ? r.json() : []))
+    .catch(() => []);
+  const mods = (await editable).filter((m) => m.rooms.includes(n));
+  const mod = mods.find((m) => preferred.includes(m.name)) ?? mods[0];
+  return mod && `/editor.html?mod=${encodeURIComponent(mod.name)}&room=${n}`;
+}
+
+/** An "Edit room n" link to the editor, filled in once we know the room is editable. */
+export function editorLink(n: number, preferred: string[] = []): HTMLAnchorElement {
+  const a = el("a", { className: "edit-link", target: "_blank", hidden: true, title: "Open this room in the room editor" }, `Edit room ${n}`);
+  void editorUrl(n, preferred).then((url) => {
+    if (url) (a.href = url), (a.hidden = false);
+  });
+  return a;
+}

package/apps/viewer/src/explore/explore.css

@@ -0,0 +1,93 @@
+:root {
+  --bg: #111; --panel: #161616; --fg: #ddd; --muted: #888; --accent: #e8b04a; --line: #2a2a2a;
+  --code: #7fb3e8; --dir: #6fb07a; --entry: #666;
+  color-scheme: dark;
+}
+* { box-sizing: border-box; }
+body {
+  margin: 0; height: 100vh; display: grid; grid-template-columns: 1fr minmax(360px, 38%); grid-template-rows: auto 1fr;
+  background: var(--bg); color: var(--fg); font: 13px/1.45 ui-monospace, Menlo, monospace;
+}
+header { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); }
+header strong { color: var(--accent); }
+nav { display: flex; gap: 4px; }
+nav a { color: var(--muted); text-decoration: none; padding: 3px 10px; border-radius: 4px; }
+nav a.active { color: var(--fg); background: #232323; }
+#search { flex: 0 1 320px; background: #1b1b1b; color: var(--fg); border: 1px solid var(--line); padding: 4px 8px; border-radius: 4px; }
+#status { color: var(--muted); margin-left: auto; }
+main { position: relative; min-height: 0; overflow: auto; }
+aside { border-left: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 12px 16px; min-height: 0; }
+a { color: var(--accent); cursor: pointer; text-decoration: none; }
+a:hover { text-decoration: underline; }
+h2 { font-size: 15px; color: var(--accent); margin: 0 0 4px; }
+h3 { font-size: 13px; color: var(--fg); margin: 18px 0 6px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
+.meta { color: var(--muted); margin: 4px 0; }
+.error { color: #f66; }
+canvas { image-rendering: pixelated; display: block; }
+table { border-collapse: collapse; width: 100%; }
+th { text-align: left; color: var(--muted); font-weight: normal; }
+td, th { padding: 2px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
+td.num { color: var(--muted); white-space: nowrap; }
+tr.hl td { background: #2a2414; }
+.kind { font-size: 11px; padding: 0 5px; border-radius: 3px; border: 1px solid currentColor; white-space: nowrap; }
+.kind.newRoom, .kind.script, .kind.property { color: var(--code); }
+.kind.direction { color: var(--dir); }
+.kind.entry { color: var(--muted); }
+details { margin: 4px 0; }
+summary { cursor: pointer; }
+pre.asm { font-size: 12px; line-height: 1.45; color: #cfcfcf; white-space: pre; overflow: auto; max-height: 70vh; background: #0c0c0c; padding: 8px; }
+.chips { display: flex; flex-wrap: wrap; gap: 4px; }
+.chips a { background: #222; padding: 1px 6px; border-radius: 3px; }
+
+/* Map */
+#map { position: absolute; inset: 0; }
+.legend { position: absolute; left: 10px; bottom: 10px; background: #000a; padding: 6px 10px; border-radius: 4px; display: flex; gap: 12px; align-items: center; }
+.legend label { color: var(--muted); }
+.legend i { display: inline-block; width: 18px; height: 0; border-top: 2px solid; vertical-align: middle; margin-right: 4px; }
+
+/* Room picture with object overlay */
+.pic { position: relative; width: 100%; aspect-ratio: 320 / 228; background: #000; margin: 8px 0; }
+.pic canvas { width: 100%; height: 100%; }
+.pic svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.pic rect { fill: #e8b04a18; stroke: #e8b04a; stroke-width: 0.6; }
+.pic circle { fill: #7fb3e8; }
+.pic .hl rect { fill: #e8b04a55; stroke-width: 1.2; }
+.pic .hl circle { fill: #fff; }
+.pic text { font: 6px ui-monospace, monospace; fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 1.5; }
+
+/* Class tree */
+.tree { padding: 10px 16px; }
+.tree ul { list-style: none; margin: 0; padding-left: 16px; border-left: 1px solid var(--line); }
+.tree > ul { padding-left: 0; border: 0; }
+.tree li { margin: 1px 0; }
+.tree .count { color: var(--muted); font-size: 11px; }
+.tree a.active { background: #2a2414; }
+.tree input { background: #1b1b1b; color: var(--fg); border: 1px solid var(--line); padding: 4px 8px; margin-bottom: 8px; width: 280px; }
+.prop-own { color: var(--fg); }
+.prop-inherited { color: var(--muted); }
+.prop-changed { color: var(--accent); }
+
+#loading { position: absolute; inset: 0; display: grid; place-content: center; color: var(--muted); }
+
+/* Live view */
+.live { padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
+.live-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+.live-bar button { background: #1b1b1b; color: var(--fg); border: 1px solid #333; border-radius: 4px; padding: 3px 10px; font: inherit; cursor: pointer; }
+.live-bar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+.live-bar button:disabled { opacity: 0.4; cursor: default; }
+.live-bar label { color: var(--muted); }
+.live-bar input[type=number] { background: #1b1b1b; color: var(--fg); border: 1px solid #333; border-radius: 4px; padding: 3px 6px; font: inherit; }
+.live-screen { position: relative; width: min(100%, 960px); aspect-ratio: 4 / 3; background: #000; }
+.live-screen canvas { width: 100%; height: 100%; cursor: none; }
+.live-screen svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+.live-screen text { font: 5px ui-monospace, monospace; fill: #fff; paint-order: stroke; stroke: #000; stroke-width: 1.2; }
+.live-screen .sprite rect { fill: none; stroke: #7fb3e8; stroke-width: 0.5; }
+.live-screen .feature rect, .live-screen .feature polygon { fill: #e8b04a14; stroke: #e8b04a; stroke-width: 0.5; }
+.live-screen .selected rect, .live-screen .selected polygon { stroke: #fff; stroke-width: 1.2; fill: #ffffff22; }
+.live-screen .path { fill: none; stroke: #fff; stroke-width: 0.6; stroke-dasharray: 2 1.5; }
+.live-screen .path-end { fill: #fff; }
+td.flash { animation: flash 0.8s ease-out; }
+@keyframes flash { from { background: #6b5320; } to { background: transparent; } }
+.edit-link { margin-left: 8px; padding: 2px 8px; border: 1px solid #e8b04a; border-radius: 4px; color: #e8b04a; font: 12px ui-monospace, monospace; text-decoration: none; white-space: nowrap; }
+.edit-link:hover { background: #e8b04a; color: #000; }
+.edit-link[hidden] { display: none; }

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

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

package/apps/viewer/src/explore/explore.js

@@ -0,0 +1,102 @@
+import { ResourceType, ScriptWorld, analyzeGame, emptyPalette, parseHunkPalette } from "../../../../packages/sci/src/index.js";
+import { openGame } from "../files.js";
+import { createClassTree } from "./classes.js";
+import { createExplorer, el } from "./context.js";
+import { renderClass, renderObject, renderRoom, renderScript } from "./inspect.js";
+import { createLiveView } from "./live.js";
+import { createRoomMap } from "./map.js";
+/**
+ * The game structure explorer: a static map of rooms, classes and objects built by
+ * `analyzeGame` from the scripts, with inspectors for each.
+ *
+ * Routes: #/<tab>/<kind>/<id...> where tab is map|classes|live and kind is room, script,
+ * class, object (static) or live (a running object by address). The tab and the inspected
+ * thing are independent.
+ */
+const stage = document.getElementById("stage");
+const inspector = document.getElementById("inspector");
+const status = document.getElementById("status");
+const search = document.getElementById("search");
+const loading = el("div", { id: "loading" }, "Loading resources…");
+stage.append(loading);
+// The explorer shows the game with the same mods as the player (?mods=, or the last choice).
+const { rm, mods } = await openGame();
+const world = await ScriptWorld.open(rm);
+const started = performance.now();
+const index = await analyzeGame(rm, { world, onProgress: (done, total) => (loading.textContent = `Analyzing scripts… ${done}/${total}`) });
+const basePalette = parseHunkPalette((await rm.load({ type: ResourceType.Palette, number: 999 })).data) ?? emptyPalette();
+loading.remove();
+let tab = "map";
+const ex = createExplorer(rm, mods, world, index, basePalette, () => tab);
+const pairs = new Set(index.exits.map((e) => [e.from, e.to].sort((a, b) => a - b).join("-")));
+const objectCount = index.scripts.reduce((n, s) => n + s.objects.length, 0);
+status.textContent = `${mods.length ? `mods: ${mods.join(", ")} · ` : ""}${index.rooms.length} rooms · ${pairs.size} connections · ${index.classes.length} classes · ${objectCount} objects · analyzed in ${Math.round(performance.now() - started)} ms`;
+let map;
+let tree;
+let live;
+let shown = {};
+async function route() {
+    const [t = "map", kind, a, b] = location.hash.replace(/^#\/?/, "").split("/");
+    tab = t === "classes" || t === "live" ? t : "map";
+    for (const link of document.querySelectorAll("nav a[data-tab]")) {
+        link.classList.toggle("active", link.dataset.tab === tab);
+        link.href = `#/${link.dataset.tab}${kind ? `/${kind}/${[a, b].filter(Boolean).join("/")}` : ""}`;
+    }
+    if (shown.tab !== tab) {
+        if (shown.tab === "live")
+            live?.deactivate();
+        shown.tab = tab;
+        shown.key = undefined; // the live tab's default panel differs
+        if (tab === "map")
+            stage.replaceChildren((map ??= createRoomMap(ex, (room) => (location.hash = ex.href(`room/${room}`)))).element);
+        else if (tab === "classes")
+            stage.replaceChildren((tree ??= createClassTree(ex)).element);
+        else {
+            live ??= createLiveView(ex, (address) => (location.hash = ex.href(`live/${address.toString(16)}`)));
+            stage.replaceChildren(live.element);
+            await live.activate();
+        }
+    }
+    const key = `${kind}/${a}/${b}`;
+    map?.select(kind === "room" ? Number(a) : undefined);
+    tree?.select(kind === "class" ? Number(a) : undefined);
+    if (shown.key === key)
+        return;
+    shown.key = key;
+    const view = kind === "room" ? await renderRoom(ex, Number(a))
+        : kind === "script" ? await renderScript(ex, Number(a))
+            : kind === "class" ? renderClass(ex, Number(a))
+                : kind === "object" ? await renderObject(ex, Number(a), Number(b))
+                    : kind === "live" && live ? live.objectPanel(parseInt(a ?? "0", 16)).element
+                        : tab === "live" && live ? live.roomPanel().element
+                            : el("p", { className: "meta" }, "Select a room or class.");
+    if (shown.key !== key)
+        return; // a newer route won the race
+    inspector.replaceChildren(view);
+    inspector.scrollTop = 0;
+}
+// Search: every room, class and object by name, through a datalist.
+const targets = new Map();
+for (const r of index.rooms)
+    targets.set(`room ${r.number} ${r.name}`, `room/${r.number}`);
+for (const c of index.classes)
+    targets.set(`class ${c.name}`, `class/${c.species}`);
+for (const s of index.scripts)
+    for (const o of s.objects)
+        targets.set(`${o.name} (${o.className}, script ${s.number})`, `object/${s.number}/${o.offset}`);
+document.getElementById("search-options").append(...[...targets.keys()].map((value) => el("option", { value })));
+search.addEventListener("input", () => {
+    const target = targets.get(search.value);
+    if (!target)
+        return;
+    location.hash = ex.href(target);
+    search.value = "";
+    search.blur();
+});
+/** A failed route shows its error in the inspector instead of failing silently. */
+const navigate = () => route().catch((e) => {
+    console.error(e);
+    inspector.replaceChildren(el("pre", { className: "error" }, e.stack ?? e.message));
+});
+addEventListener("hashchange", () => void navigate());
+await navigate();

package/apps/viewer/src/explore/explore.ts

@@ -0,0 +1,104 @@
+import { ResourceType, ScriptWorld, analyzeGame, emptyPalette, parseHunkPalette } from "../../../../packages/sci/src/index.ts";
+import { openGame } from "../files.ts";
+import { createClassTree, type ClassTree } from "./classes.ts";
+import { createExplorer, el } from "./context.ts";
+import { renderClass, renderObject, renderRoom, renderScript } from "./inspect.ts";
+import { createLiveView, type LiveView } from "./live.ts";
+import { createRoomMap, type RoomMap } from "./map.ts";
+
+/**
+ * The game structure explorer: a static map of rooms, classes and objects built by
+ * `analyzeGame` from the scripts, with inspectors for each.
+ *
+ * Routes: #/<tab>/<kind>/<id...> where tab is map|classes|live and kind is room, script,
+ * class, object (static) or live (a running object by address). The tab and the inspected
+ * thing are independent.
+ */
+const stage = document.getElementById("stage")!;
+const inspector = document.getElementById("inspector")!;
+const status = document.getElementById("status")!;
+const search = document.getElementById("search") as HTMLInputElement;
+
+const loading = el("div", { id: "loading" }, "Loading resources…");
+stage.append(loading);
+
+// The explorer shows the game with the same mods as the player (?mods=, or the last choice).
+const { rm, mods } = await openGame();
+const world = await ScriptWorld.open(rm);
+const started = performance.now();
+const index = await analyzeGame(rm, { world, onProgress: (done, total) => (loading.textContent = `Analyzing scripts… ${done}/${total}`) });
+const basePalette = parseHunkPalette((await rm.load({ type: ResourceType.Palette, number: 999 })).data) ?? emptyPalette();
+loading.remove();
+
+let tab = "map";
+const ex = createExplorer(rm, mods, world, index, basePalette, () => tab);
+const pairs = new Set(index.exits.map((e) => [e.from, e.to].sort((a, b) => a - b).join("-")));
+const objectCount = index.scripts.reduce((n, s) => n + s.objects.length, 0);
+status.textContent = `${mods.length ? `mods: ${mods.join(", ")} · ` : ""}${index.rooms.length} rooms · ${pairs.size} connections · ${index.classes.length} classes · ${objectCount} objects · analyzed in ${Math.round(performance.now() - started)} ms`;
+
+let map: RoomMap | undefined;
+let tree: ClassTree | undefined;
+let live: LiveView | undefined;
+let shown: { tab?: string; key?: string } = {};
+
+async function route() {
+  const [t = "map", kind, a, b] = location.hash.replace(/^#\/?/, "").split("/");
+  tab = t === "classes" || t === "live" ? t : "map";
+  for (const link of document.querySelectorAll<HTMLAnchorElement>("nav a[data-tab]")) {
+    link.classList.toggle("active", link.dataset.tab === tab);
+    link.href = `#/${link.dataset.tab}${kind ? `/${kind}/${[a, b].filter(Boolean).join("/")}` : ""}`;
+  }
+
+  if (shown.tab !== tab) {
+    if (shown.tab === "live") live?.deactivate();
+    shown.tab = tab;
+    shown.key = undefined; // the live tab's default panel differs
+    if (tab === "map") stage.replaceChildren((map ??= createRoomMap(ex, (room) => (location.hash = ex.href(`room/${room}`)))).element);
+    else if (tab === "classes") stage.replaceChildren((tree ??= createClassTree(ex)).element);
+    else {
+      live ??= createLiveView(ex, (address) => (location.hash = ex.href(`live/${address.toString(16)}`)));
+      stage.replaceChildren(live.element);
+      await live.activate();
+    }
+  }
+
+  const key = `${kind}/${a}/${b}`;
+  map?.select(kind === "room" ? Number(a) : undefined);
+  tree?.select(kind === "class" ? Number(a) : undefined);
+  if (shown.key === key) return;
+  shown.key = key;
+  const view =
+    kind === "room" ? await renderRoom(ex, Number(a))
+    : kind === "script" ? await renderScript(ex, Number(a))
+    : kind === "class" ? renderClass(ex, Number(a))
+    : kind === "object" ? await renderObject(ex, Number(a), Number(b))
+    : kind === "live" && live ? live.objectPanel(parseInt(a ?? "0", 16)).element
+    : tab === "live" && live ? live.roomPanel().element
+    : el("p", { className: "meta" }, "Select a room or class.");
+  if (shown.key !== key) return; // a newer route won the race
+  inspector.replaceChildren(view);
+  inspector.scrollTop = 0;
+}
+
+// Search: every room, class and object by name, through a datalist.
+const targets = new Map<string, string>();
+for (const r of index.rooms) targets.set(`room ${r.number} ${r.name}`, `room/${r.number}`);
+for (const c of index.classes) targets.set(`class ${c.name}`, `class/${c.species}`);
+for (const s of index.scripts) for (const o of s.objects) targets.set(`${o.name} (${o.className}, script ${s.number})`, `object/${s.number}/${o.offset}`);
+document.getElementById("search-options")!.append(...[...targets.keys()].map((value) => el("option", { value })));
+search.addEventListener("input", () => {
+  const target = targets.get(search.value);
+  if (!target) return;
+  location.hash = ex.href(target);
+  search.value = "";
+  search.blur();
+});
+
+/** A failed route shows its error in the inspector instead of failing silently. */
+const navigate = () =>
+  route().catch((e: Error) => {
+    console.error(e);
+    inspector.replaceChildren(el("pre", { className: "error" }, e.stack ?? e.message));
+  });
+addEventListener("hashchange", () => void navigate());
+await navigate();

package/apps/viewer/src/explore/inspect.d.ts

@@ -0,0 +1,5 @@
+import { type Explorer } from "./context.ts";
+export declare function renderRoom(ex: Explorer, n: number): Promise<HTMLElement>;
+export declare function renderScript(ex: Explorer, n: number): Promise<HTMLElement>;
+export declare function renderObject(ex: Explorer, script: number, offset: number): Promise<HTMLElement>;
+export declare function renderClass(ex: Explorer, species: number): HTMLElement;

package/apps/viewer/src/explore/inspect.js

@@ -0,0 +1,208 @@
+import { disassemble, formatDisassembly } from "../../../../packages/sci/src/index.js";
+import { editorLink, el, showValue } from "./context.js";
+const link = (ex, route, text) => el("a", { href: ex.href(route) }, text);
+const roomLink = (ex, n) => {
+    const room = ex.index.rooms.find((r) => r.number === n);
+    return link(ex, `room/${n}`, room ? `${n} ${room.name}` : `${n}`);
+};
+const scriptLink = (ex, n) => ex.index.rooms.some((r) => r.number === n) ? roomLink(ex, n) : link(ex, `script/${n}`, `script ${n}`);
+const classBySpecies = (ex, species) => ex.index.classes.find((c) => c.species === species);
+const classLink = (ex, species) => {
+    const c = classBySpecies(ex, species);
+    return c ? link(ex, `class/${c.species}`, c.name) : el("span", {}, `class ${species}`);
+};
+const objectLink = (ex, o) => link(ex, `object/${o.script}/${o.offset}`, o.name);
+const prop = (o, name) => o.props.find((p) => p.name === name)?.value;
+/** Root first. */
+function ancestry(ex, species) {
+    const chain = [];
+    for (let c = classBySpecies(ex, species); c && chain.length < 64; c = c.superclass < 0 ? undefined : classBySpecies(ex, c.superclass))
+        chain.unshift(c);
+    return chain;
+}
+const breadcrumb = (ex, species) => {
+    const chain = ancestry(ex, species);
+    const out = el("p", { className: "meta" });
+    chain.forEach((c, i) => out.append(...(i ? [" → "] : []), link(ex, `class/${c.species}`, c.name)));
+    return out;
+};
+/** Lazily disassembled listing of a script, optionally only one object's methods. */
+function disassembly(ex, script, title, owner) {
+    const pre = el("pre", { className: "asm" }, "…");
+    const details = el("details", {}, el("summary", {}, title), pre);
+    details.addEventListener("toggle", async () => {
+        if (!details.open || pre.dataset.done)
+            return;
+        pre.dataset.done = "1";
+        const s = await ex.world.script(script);
+        let fns = disassemble(s, ex.world.context());
+        if (owner !== undefined)
+            fns = fns.filter((f) => f.owner?.offset === owner);
+        pre.textContent = formatDisassembly(s, fns);
+    }, { once: false });
+    return details;
+}
+/** Messages for one module, optionally only for some nouns; grouped by noun. */
+async function messageTable(ex, module, nouns, objects = []) {
+    const file = await ex.messages(module);
+    if (!file)
+        return undefined;
+    const records = file.records.filter((r) => !nouns || nouns.has(r.noun));
+    if (!records.length)
+        return undefined;
+    const namesByNoun = new Map();
+    for (const o of objects) {
+        const noun = prop(o, "noun");
+        if (noun)
+            namesByNoun.set(noun, [...(namesByNoun.get(noun) ?? []), o.name]);
+    }
+    const verb = (v) => (v ? ex.index.verbs[v] ?? `verb ${v}` : "—");
+    const table = el("table", {}, el("tr", {}, el("th", {}, "noun"), el("th", {}, "verb"), el("th", {}, "cond"), el("th", {}, "seq"), el("th", {}, "text")));
+    for (const r of [...records].sort((a, b) => a.noun - b.noun || a.verb - b.verb || a.cond - b.cond || a.seq - b.seq)) {
+        const who = namesByNoun.get(r.noun)?.join(", ");
+        table.append(el("tr", {}, el("td", { className: "num", title: who ?? "" }, `${r.noun}${who ? ` ${who}` : ""}`), el("td", { className: "num" }, verb(r.verb)), el("td", { className: "num" }, `${r.cond}`), el("td", { className: "num" }, `${r.seq}`), el("td", {}, r.text || el("span", { className: "meta" }, "(empty)"))));
+    }
+    return el("details", { open: records.length <= 40 }, el("summary", {}, `Messages (${records.length})`), table);
+}
+/** The room picture with static object positions drawn on top. */
+async function roomPicture(ex, picture, objects) {
+    const canvas = await ex.pic(picture);
+    if (!canvas)
+        return undefined;
+    const copy = el("canvas", { width: canvas.width, height: canvas.height });
+    copy.getContext("2d").drawImage(canvas, 0, 0);
+    const box = el("div", { className: "pic" }, copy);
+    box.style.aspectRatio = `${canvas.width} / ${canvas.height * 1.2}`;
+    const NS = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(NS, "svg");
+    svg.setAttribute("viewBox", `0 0 ${canvas.width} ${canvas.height}`);
+    svg.setAttribute("preserveAspectRatio", "none");
+    const marks = new Map();
+    for (const o of objects) {
+        const [l = 0, t = 0, r = 0, b = 0] = ["nsLeft", "nsTop", "nsRight", "nsBottom"].map((n) => prop(o, n) ?? 0);
+        const x = prop(o, "x") ?? 0, y = prop(o, "y") ?? 0;
+        const g = document.createElementNS(NS, "g");
+        const title = document.createElementNS(NS, "title");
+        title.textContent = `${o.name} (${o.className})`;
+        g.append(title);
+        if (r > l && b > t && r < 0x8000) {
+            const rect = document.createElementNS(NS, "rect");
+            Object.entries({ x: l, y: t, width: r - l, height: b - t }).forEach(([k, v]) => rect.setAttribute(k, String(v)));
+            g.append(rect);
+        }
+        else if ((x || y) && x < 0x8000 && y < 0x8000) {
+            const dot = document.createElementNS(NS, "circle");
+            Object.entries({ cx: x, cy: y, r: 2.5 }).forEach(([k, v]) => dot.setAttribute(k, String(v)));
+            g.append(dot);
+        }
+        else
+            continue;
+        const label = document.createElementNS(NS, "text");
+        label.setAttribute("x", String(r > l ? l + 2 : x + 4));
+        label.setAttribute("y", String(r > l ? t + 7 : y + 2));
+        label.textContent = o.name;
+        g.append(label);
+        svg.append(g);
+        marks.set(o, g);
+    }
+    box.append(svg);
+    return {
+        element: box,
+        highlight(o) {
+            for (const [obj, g] of marks)
+                g.classList.toggle("hl", obj === o);
+        },
+    };
+}
+function exitList(ex, room) {
+    const out = ex.index.exits.filter((e) => e.from === room);
+    const into = ex.index.exits.filter((e) => e.to === room);
+    const rows = (list, other) => {
+        const table = el("table");
+        for (const e of [...list].sort((a, b) => other(a) - other(b))) {
+            table.append(el("tr", {}, el("td", {}, roomLink(ex, other(e))), el("td", {}, el("span", { className: `kind ${e.kind}` }, e.kind)), el("td", { className: "num" }, e.script === room ? e.where : el("span", {}, scriptLink(ex, e.script), ` ${e.where}`))));
+        }
+        return list.length ? table : el("p", { className: "meta" }, "none found");
+    };
+    const unresolved = ex.index.unresolved.filter((e) => e.from === room);
+    return el("div", {}, el("h3", {}, `Leads to (${new Set(out.map((e) => e.to)).size})`), rows(out, (e) => e.to), el("h3", {}, `Entered from (${new Set(into.map((e) => e.from)).size})`), rows(into, (e) => e.from), unresolved.length ? el("p", { className: "meta" }, `Also ${unresolved.map((e) => `${e.where} = ${e.to}`).join(", ")}: not room numbers (maze codes or cut rooms).`) : null);
+}
+function objectTable(ex, objects, onHover) {
+    const table = el("table", {}, el("tr", {}, el("th", {}, "object"), el("th", {}, "class"), el("th", {}, "noun"), el("th", {}, "methods")));
+    for (const o of objects) {
+        const row = el("tr", {}, el("td", {}, objectLink(ex, o)), el("td", {}, classLink(ex, o.superclass)), el("td", { className: "num" }, `${prop(o, "noun") || ""}`), el("td", { className: "num" }, o.methods.join(" ")));
+        if (onHover) {
+            row.addEventListener("mouseenter", () => { row.classList.add("hl"); onHover(o); });
+            row.addEventListener("mouseleave", () => { row.classList.remove("hl"); onHover(undefined); });
+        }
+        table.append(row);
+    }
+    return table;
+}
+export async function renderRoom(ex, n) {
+    const room = ex.index.rooms.find((r) => r.number === n);
+    const info = ex.index.scripts.find((s) => s.number === n);
+    if (!room || !info)
+        return el("p", { className: "error" }, `No room ${n}`);
+    const helpers = room.uses.filter((u) => !ex.index.rooms.some((r) => r.number === u));
+    const helperObjects = ex.index.scripts.filter((s) => helpers.includes(s.number) && s.number >= 100).flatMap((s) => s.objects);
+    const pic = room.picture >= 0 ? await roomPicture(ex, room.picture, info.objects) : undefined;
+    const roomObject = info.objects.find((o) => o.name === room.name);
+    const messages = await messageTable(ex, n, undefined, [...info.objects, ...helperObjects]);
+    return el("div", {}, el("h2", {}, `Room ${n} · ${room.name} `, editorLink(n, ex.mods)), breadcrumb(ex, roomObject.superclass), el("p", { className: "meta" }, `picture ${room.picture} · noun ${room.noun} · ${info.objects.length} objects`), room.uses.length ? el("div", { className: "chips" }, el("span", { className: "meta" }, "uses"), ...room.uses.map((u) => scriptLink(ex, u))) : null, pic?.element, exitList(ex, n), el("h3", {}, `Objects (${info.objects.length})`), el("p", { className: "meta" }, "Boxes and dots are positions set in the object's declaration; objects placed by code at run time don't show."), objectTable(ex, info.objects, pic?.highlight), messages ?? el("p", { className: "meta" }, "No messages."), disassembly(ex, n, "Disassembly"));
+}
+export async function renderScript(ex, n) {
+    const info = ex.index.scripts.find((s) => s.number === n);
+    if (!info)
+        return el("p", { className: "error" }, `No script ${n}`);
+    const users = ex.index.scripts.filter((s) => s.references.includes(n)).map((s) => s.number);
+    const classes = ex.index.classes.filter((c) => c.script === n);
+    const messages = await messageTable(ex, n, undefined, info.objects);
+    return el("div", {}, el("h2", {}, `Script ${n}`), users.length ? el("div", { className: "chips" }, el("span", { className: "meta" }, "used by"), ...users.map((u) => scriptLink(ex, u))) : null, info.references.length ? el("div", { className: "chips" }, el("span", { className: "meta" }, "uses"), ...info.references.map((u) => scriptLink(ex, u))) : null, classes.length ? el("div", {}, el("h3", {}, `Classes (${classes.length})`), el("div", { className: "chips" }, ...classes.map((c) => classLink(ex, c.species)))) : null, el("h3", {}, `Objects (${info.objects.length})`), objectTable(ex, info.objects), messages, disassembly(ex, n, "Disassembly"));
+}
+/** Props with where each value comes from: the class's default or this object's own. */
+function propTable(props, defaults) {
+    const table = el("table", {}, el("tr", {}, el("th", {}, "property"), el("th", {}, "value"), el("th", {}, defaults ? "class default" : "")));
+    for (const p of props) {
+        const d = defaults?.find((x) => x.name === p.name);
+        const changed = !!d && d.value !== p.value;
+        const isNew = defaults && !d;
+        table.append(el("tr", {}, el("td", { className: changed || isNew ? "prop-changed" : "prop-inherited" }, p.name), el("td", { className: changed || isNew ? "prop-changed" : "" }, showValue(p.value)), el("td", { className: "num" }, d ? showValue(d.value) : isNew ? "new" : "")));
+    }
+    return table;
+}
+/** Each method name with the nearest ancestor that also defines it (so this overrides it). */
+function methodList(ex, methods, superclass) {
+    const chain = superclass < 0 ? [] : ancestry(ex, superclass).reverse();
+    const list = el("div", { className: "chips" });
+    for (const m of methods) {
+        const from = chain.find((c) => c.methods.includes(m));
+        list.append(el("span", { title: from ? `overrides ${from.name}::${m}` : "new" }, from ? `${m}` : el("strong", {}, m)));
+    }
+    return methods.length ? list : el("p", { className: "meta" }, "none");
+}
+export async function renderObject(ex, script, offset) {
+    const o = ex.object(script, offset);
+    if (!o)
+        return el("p", { className: "error" }, "No such object");
+    const cls = classBySpecies(ex, o.superclass);
+    const noun = prop(o, "noun");
+    const siblings = ex.index.scripts.find((s) => s.number === script)?.objects ?? [];
+    const messages = noun ? await messageTable(ex, script, new Set([noun]), siblings) : undefined;
+    return el("div", {}, el("h2", {}, o.name), el("p", { className: "meta" }, "instance in ", scriptLink(ex, script)), breadcrumb(ex, o.superclass), el("h3", {}, "Methods (bold = new, others override the class)"), methodList(ex, o.methods, o.superclass), messages ?? null, el("h3", {}, "Properties"), propTable(o.props, cls?.props), disassembly(ex, script, "Disassembly of its methods", offset));
+}
+export function renderClass(ex, species) {
+    const c = classBySpecies(ex, species);
+    if (!c)
+        return el("p", { className: "error" }, `No class ${species}`);
+    const sup = c.superclass < 0 ? undefined : classBySpecies(ex, c.superclass);
+    const subclasses = ex.index.classes.filter((x) => x.superclass === species);
+    const instances = ex.index.scripts.flatMap((s) => s.objects.filter((o) => o.superclass === species));
+    const inherited = ancestry(ex, species).slice(0, -1).reverse();
+    const shown = instances.slice(0, 300);
+    return el("div", {}, el("h2", {}, c.name), el("p", { className: "meta" }, `class #${c.species} in `, scriptLink(ex, c.script)), breadcrumb(ex, species), subclasses.length ? el("div", {}, el("h3", {}, `Subclasses (${subclasses.length})`), el("div", { className: "chips" }, ...subclasses.map((s) => classLink(ex, s.species)))) : null, el("h3", {}, "Methods (bold = new, others override an ancestor)"), methodList(ex, c.methods, c.superclass), inherited.length ? el("details", {}, el("summary", { className: "meta" }, "Inherited methods"), ...inherited.map((a) => el("p", {}, link(ex, `class/${a.species}`, a.name), el("span", { className: "meta" }, `: ${a.methods.filter((m) => !c.methods.includes(m)).join(" ")}`)))) : null, el("h3", {}, "Properties"), propTable(c.props, sup?.props), el("h3", {}, `Direct instances (${instances.length})`), instances.length ? el("div", { className: "chips" }, ...shown.map((o) => el("a", { href: ex.href(`object/${o.script}/${o.offset}`), title: `script ${o.script}` }, `${o.name}`))) : el("p", { className: "meta" }, "none"), instances.length > shown.length ? el("p", { className: "meta" }, `…and ${instances.length - shown.length} more`) : null, disassembly(ex, c.script, "Disassembly of its methods", ex.index.scripts.length ? classOffset(ex, c) : undefined));
+}
+/** Classes aren't in `scripts[].objects` (instances only): find the heap offset from the world. */
+function classOffset(ex, c) {
+    return ex.world.classObject(c.species)?.offset;
+}