sci2-ts 0.0.0-stage → 0.2.1

package/apps/viewer/src/sound-preview.ts

@@ -0,0 +1,228 @@
+import { AudioIndex, ResourceType, SongPlayer, SoundDevice, parseAdLibBank, parseSound, type MidiOutput, type ResourceManager, type Song } from "../../../packages/sci/src/index.ts";
+import { AdLibOutput } from "./adlib.ts";
+import { WebAudioOutput } from "./audio.ts";
+import { BASE, httpFiles } from "./files.ts";
+import { SoundFontMidi } from "./music.ts";
+
+/**
+ * A mini player for sound resources in the resource viewer: the General MIDI track through
+ * the SoundFont, the AdLib track through the OPL2 emulator, or the digital version from
+ * RESOURCE.SFX when there is one. Music plays on a 60 Hz tick clock, as in the game.
+ */
+
+interface Audio {
+  out: WebAudioOutput;
+  gm: SoundFontMidi;
+  gmReady: Promise<void>;
+  /** Only for games with an AdLib instrument bank (patch 3). */
+  adlib: AdLibOutput | undefined;
+  index: AudioIndex;
+}
+
+let audio: Promise<Audio> | undefined;
+const openAudio = (rm: ResourceManager) =>
+  (audio ??= (async () => {
+    await rm.preload(); // the audio maps and the AdLib bank are read synchronously
+    const out = new WebAudioOutput(httpFiles, (name) => rm.file(name));
+    const gm = new SoundFontMidi(out.ctx);
+    const gmReady = gm.load(`${BASE}soundfonts/GeneralUser-GS.sf2`);
+    gmReady.catch((e) => console.warn("SoundFont unavailable:", e));
+    const bank = { type: ResourceType.Patch, number: 3 };
+    const adlib = rm.has(bank) ? await AdLibOutput.create(out.ctx, parseAdLibBank(rm.loadSync(bank).data)) : undefined;
+    return { out, gm, gmReady, adlib, index: AudioIndex.build(rm) };
+  })());
+
+type Source = "gm" | "adlib" | "digital";
+const SOURCE_NAMES: Record<Source, string> = { gm: "General MIDI", adlib: "AdLib", digital: "Digital (SFX)" };
+
+const nowTicks = () => (performance.now() * 60) / 1000;
+const clock = (ticks: number) => {
+  const s = Math.max(0, Math.round(ticks / 60));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+};
+
+/** What's playing, so switching resources (or sources) can stop it. */
+let stopCurrent: (() => void) | undefined;
+let toggleCurrent: (() => void) | undefined;
+
+export function stopSoundPreview(): void {
+  stopCurrent?.();
+  stopCurrent = undefined;
+  toggleCurrent = undefined;
+}
+
+/** Space in the viewer: play or pause the sound on show, if any. */
+export function toggleSoundPreview(): boolean {
+  if (!toggleCurrent) return false;
+  toggleCurrent();
+  return true;
+}
+
+/** The sound's length and tracks, for its row in the list. */
+export function soundSummary(data: Uint8Array): string {
+  const gm = parseSound(data, SoundDevice.GeneralMidi);
+  const adlib = parseSound(data, SoundDevice.AdLib);
+  const tracks = [gm && "MIDI", adlib && "AdLib"].filter(Boolean).join(" · ");
+  const length = gm?.length ?? adlib?.length;
+  return [length !== undefined ? clock(length) : undefined, tracks].filter(Boolean).join(" · ");
+}
+
+const make = <K extends keyof HTMLElementTagNameMap>(tag: K, props: Record<string, unknown> = {}): HTMLElementTagNameMap[K] =>
+  Object.assign(document.createElement(tag), props);
+
+export async function renderSound(rm: ResourceManager, number: number, data: Uint8Array, stillWanted: () => boolean = () => true): Promise<HTMLElement> {
+  stopSoundPreview();
+  const songs: Partial<Record<Source, Song>> = {};
+  const gmSong = parseSound(data, SoundDevice.GeneralMidi);
+  const adlibSong = parseSound(data, SoundDevice.AdLib);
+  if (gmSong) songs.gm = gmSong;
+  // The AdLib track needs the game's instrument bank.
+  if (adlibSong && rm.has({ type: ResourceType.Patch, number: 3 })) songs.adlib = adlibSong;
+
+  const wrap = make("div", { className: "sound" });
+  const info = make("p", { className: "meta" });
+  const controls = make("div", { className: "player" });
+  const play = make("button", { type: "button", className: "play", textContent: "▶", title: "Play / pause (Space)" });
+  const stop = make("button", { type: "button", textContent: "■", title: "Stop" });
+  const source = make("select", { title: "Which version to play" });
+  const loopBox = make("input", { type: "checkbox" });
+  const loop = make("label", { className: "loop-opt" });
+  loop.append(loopBox, " loop");
+  const seek = make("input", { type: "range", min: "0", max: "1000", value: "0", className: "seek" });
+  const time = make("span", { className: "time", textContent: "0:00 / 0:00" });
+  controls.append(play, stop, source, loop, seek, time);
+  wrap.append(info, controls);
+
+  const a = await openAudio(rm);
+  const clip = a.index.effects.get(number);
+  const sources = ([...(clip ? ["digital"] : []), ...(songs.gm ? ["gm"] : []), ...(songs.adlib ? ["adlib"] : [])] as Source[]);
+  for (const s of sources) source.append(make("option", { value: s, textContent: SOURCE_NAMES[s] }));
+  if (!sources.length) {
+    info.textContent = "No playable track for these devices.";
+    play.disabled = stop.disabled = true;
+    return wrap;
+  }
+  const describe = (s: Song) => `${s.channels.length} channels · ${s.events.length} events · ${clock(s.length)}`;
+  info.textContent = [
+    songs.gm && `General MIDI: ${describe(songs.gm)}`,
+    songs.adlib && `AdLib: ${describe(songs.adlib)}`,
+    clip && `digital effect: ${clock(clip.ticks ?? 0)}`,
+  ].filter(Boolean).join(" · ");
+
+  // --- Playback ---
+  let player: SongPlayer | undefined;
+  let midi: MidiOutput | undefined;
+  let started = 0; // tick at position 0
+  let pausedAt: number | undefined;
+  let digitalPlaying = false;
+  // A timer, not animation frames: music keeps playing in a background tab.
+  let timer: ReturnType<typeof setInterval> | undefined;
+  const length = () => (source.value === "digital" ? clip?.ticks ?? 0 : songs[source.value as Source]?.length ?? 0);
+  const position = () => {
+    const at = (pausedAt ?? nowTicks()) - started;
+    const len = Math.max(length(), 1);
+    return loopBox.checked ? at % len : Math.min(at, len);
+  };
+  const playing = () => !!player || digitalPlaying;
+
+  const frame = () => {
+    if (player && pausedAt === undefined) {
+      player.update(nowTicks());
+      if (player.finished) return halt();
+    }
+    if (digitalPlaying && pausedAt === undefined && !loopBox.checked && nowTicks() - started >= length()) return halt();
+    seek.value = String(Math.round((position() / Math.max(length(), 1)) * 1000));
+    time.textContent = `${clock(position())} / ${clock(length())}`;
+  };
+
+  const silence = () => {
+    if (!midi) return;
+    for (let c = 0; c < 16; c++) midi.send([0xb0 | c, 123, 0]); // all notes off
+  };
+  function halt(): void {
+    clearInterval(timer);
+    timer = undefined;
+    player?.stop();
+    silence();
+    player = undefined;
+    if (digitalPlaying) a.out.stop("preview");
+    digitalPlaying = false;
+    pausedAt = undefined;
+    play.textContent = "▶";
+    seek.value = "0";
+    time.textContent = `0:00 / ${clock(length())}`;
+  }
+
+  const start = async (from = 0) => {
+    halt();
+    a.out.unlock();
+    const s = source.value as Source;
+    if (s === "digital") {
+      a.out.play("preview", clip!, { loop: loopBox.checked, volume: 1 });
+      digitalPlaying = true;
+      started = nowTicks();
+    } else {
+      if (s === "gm") {
+        time.textContent = "loading SoundFont…";
+        await a.gmReady.catch(() => undefined); // the SoundFont is 32 MB: the first time takes a moment
+        midi = a.gm;
+      } else {
+        a.adlib!.reset();
+        midi = a.adlib!;
+      }
+      player = new SongPlayer(songs[s]!, midi, loopBox.checked, 127, nowTicks());
+      if (from) player.seek(from, nowTicks());
+      started = nowTicks() - from;
+    }
+    play.textContent = "❚❚";
+    timer = setInterval(frame, 15);
+  };
+
+  const toggle = () => {
+    if (!playing()) return void start();
+    const now = nowTicks();
+    if (pausedAt === undefined) {
+      pausedAt = now;
+      player?.pause(now);
+      if (digitalPlaying) a.out.pause("preview");
+      play.textContent = "▶";
+    } else {
+      started += now - pausedAt;
+      player?.resume(now);
+      if (digitalPlaying) a.out.resume("preview");
+      pausedAt = undefined;
+      play.textContent = "❚❚";
+    }
+  };
+
+  play.onclick = toggle;
+  stop.onclick = halt;
+  source.onchange = () => {
+    const was = playing();
+    halt();
+    seek.disabled = source.value === "digital";
+    if (was) void start();
+  };
+  loopBox.onchange = () => {
+    if (player) player.loop = loopBox.checked;
+  };
+  // Seeking: music only (digital clips play from the start).
+  seek.oninput = () => {
+    if (source.value === "digital") return;
+    const to = (Number(seek.value) / 1000) * length();
+    if (player) {
+      player.seek(to, nowTicks());
+      started = nowTicks() - to;
+      if (pausedAt !== undefined) pausedAt = nowTicks();
+    } else void start(to);
+  };
+  seek.disabled = source.value === "digital";
+  time.textContent = `0:00 / ${clock(length())}`;
+
+  // Only the sound on show owns the controls (a slow load may finish after moving on).
+  if (stillWanted()) {
+    stopCurrent = halt;
+    toggleCurrent = toggle;
+  }
+  return wrap;
+}

package/apps/viewer/src/style.css

@@ -0,0 +1,64 @@
+:root { --bg: #111; --fg: #ddd; --muted: #888; --accent: #e8b04a; --line: #2a2a2a; color-scheme: dark; }
+* { box-sizing: border-box; }
+body { margin: 0; display: grid; grid-template-columns: 260px 1fr; height: 100vh; background: var(--bg); color: var(--fg); font: 13px/1.4 ui-monospace, Menlo, monospace; }
+aside { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
+select { margin: 8px; background: #1b1b1b; color: var(--fg); border: 1px solid var(--line); padding: 4px; }
+ul { list-style: none; margin: 0; padding: 0; overflow: auto; }
+li { padding: 2px 12px; cursor: pointer; }
+li:hover, li.active { background: #1f1f1f; color: var(--accent); }
+li small { color: var(--muted); }
+main { overflow: auto; padding: 12px 20px; }
+h1 { font-size: 14px; color: var(--accent); }
+pre { color: #bbb; }
+canvas { image-rendering: pixelated; display: block; }
+.opt { margin: 0 8px 8px; color: var(--muted); }
+.meta { color: var(--muted); margin: 6px 0; }
+.error { color: #f66; }
+details { margin-top: 16px; }
+summary { cursor: pointer; color: var(--muted); }
+.swatches { display: grid; grid-template-columns: repeat(16, 24px); gap: 2px; }
+.sw { width: 24px; height: 24px; border-radius: 2px; }
+.sw.unused { opacity: 0.15; outline: 1px dashed #555; }
+.loop { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 12px 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
+.loop .meta { width: 100%; }
+.stage { padding: 12px; background: #1a1a1a; display: inline-block; margin: 8px 0; }
+main select { background: #1b1b1b; color: var(--fg); border: 1px solid var(--line); padding: 4px; margin: 4px 0; }
+.dialog { display: inline-block; margin: 8px 0 16px; padding: 12px 16px; background: #1d2a44; border: 3px double #8aa0c8; min-height: 40px; }
+table.messages { border-collapse: collapse; width: 100%; }
+.messages th { text-align: left; color: var(--muted); font-weight: normal; border-bottom: 1px solid var(--line); padding: 4px 8px; position: sticky; top: 0; background: var(--bg); }
+.messages td { padding: 3px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
+.messages td:nth-child(-n+5) { color: var(--muted); white-space: nowrap; }
+.messages tr { cursor: pointer; }
+.messages tr:hover td, .messages tr.active td { color: var(--accent); }
+pre.asm { color: #cfcfcf; line-height: 1.5; }
+pre.asm .c { color: #7f9f7f; }
+pre.asm .fn { color: var(--accent); font-weight: bold; scroll-margin-top: 12px; }
+ul.thumbs li { display: flex; align-items: center; gap: 10px; padding: 4px 10px; min-height: 30px; }
+ul.thumbs .thumb { flex: none; width: 96px; display: flex; align-items: center; justify-content: center; }
+ul.thumbs .thumb canvas { max-width: 96px; max-height: 64px; width: auto; height: auto; image-rendering: pixelated; }
+ul.thumbs.type-pic .thumb { height: 60px; background: #000; }
+ul.thumbs.type-pic .thumb canvas { width: 96px; height: 60px; }
+ul.thumbs.type-view .thumb { height: 48px; background: #1a1a1a; border-radius: 3px; }
+ul.thumbs.type-view .thumb canvas { max-height: 44px; max-width: 92px; }
+ul.thumbs.type-message .thumb { width: 150px; justify-content: flex-start; }
+ul.thumbs .snippet { color: var(--muted); font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+ul.thumbs li.active { box-shadow: inset 3px 0 var(--accent); }
+.keys { margin: 0 8px 8px; color: var(--muted); font-size: 11px; }
+#search { margin: 0 8px 6px; padding: 5px 8px; background: #1b1b1b; color: var(--fg); border: 1px solid var(--line); border-radius: 4px; font: inherit; }
+#search:focus { outline: none; border-color: var(--accent); }
+li .num { display: flex; flex-direction: column; min-width: 0; }
+li .tags { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
+#uses { margin: -4px 0 12px; }
+#uses .use { color: var(--muted); margin: 2px 0; }
+#uses .use b { color: var(--fg); font-weight: normal; }
+#uses .use q { color: #c9c0a8; font-style: italic; }
+.empty { padding: 8px 12px; color: var(--muted); }
+ul.thumbs.type-sound .thumb { width: 110px; justify-content: flex-start; }
+.player { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; background: #1a1a1a; border: 1px solid var(--line); border-radius: 6px; max-width: 720px; }
+.player button { background: #222; color: var(--fg); border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px; font: inherit; cursor: pointer; min-width: 36px; }
+.player button.play { color: var(--accent); border-color: var(--accent); }
+.player button:hover { border-color: var(--accent); }
+.player select { margin: 0; }
+.player .loop-opt { color: var(--muted); }
+.player .seek { flex: 1; min-width: 160px; accent-color: var(--accent); }
+.player .time { color: var(--muted); min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }

package/apps/viewer/vite.config.ts

@@ -0,0 +1,25 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import { sciGame } from "./plugin.ts";
+
+/** The game to serve: original/ unless SCI_GAME names another (e.g. out/games/hello). */
+const GAME_DIR = resolve(import.meta.dirname, "../..", process.env.SCI_GAME ?? "original");
+
+/**
+ * The resource viewer, player, explorer and room editor, for the game in SCI_GAME: its
+ * files, built mods (`pnpm mod build mods/<name>` → out/mods/<name>), SoundFonts
+ * (assets/soundfonts) and the editor's routes come from the sciGame plugin.
+ */
+export default defineConfig({
+  publicDir: false,
+  // Allow access through ngrok tunnels (Vite blocks unknown hostnames by default).
+  server: { allowedHosts: [".ngrok-free.app", ".ngrok-free.dev", ".ngrok.app", ".ngrok.io"] },
+  plugins: [
+    sciGame({
+      game: GAME_DIR,
+      mods: resolve(import.meta.dirname, "../../out/mods"),
+      soundfonts: resolve(import.meta.dirname, "../../assets/soundfonts"),
+      editor: true,
+    }),
+  ],
+});

package/bin/sci-ts.mjs

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+// The sci-ts command, run with tsx so that a game's own TypeScript (resources.ts) loads.
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+
+const cli = fileURLToPath(new URL("../tools/cli.js", import.meta.url));
+const child = spawn(process.execPath, ["--import", import.meta.resolve("tsx"), cli, ...process.argv.slice(2)], { stdio: "inherit" });
+child.on("exit", (code, signal) => (signal ? process.kill(process.pid, signal) : process.exit(code ?? 1)));
+for (const signal of ["SIGINT", "SIGTERM"]) process.on(signal, () => child.kill(signal));

package/lib/994.sc

@@ -0,0 +1,49 @@
+;;; Sound: music and effects. A sound resource number plays as a digital effect if there
+;;; is one, else as music.
+(script 994)
+(include "system.sh")
+
+(class Sound of Obj
+  (properties
+    number 0
+    loop 1          ; -1: forever
+    vol 127
+    priority 0
+    handle 0        ; set while playing (the interpreter's)
+    signal 0        ; -1 when it has ended
+    dataInc 0
+    nodePtr 0
+    client 0)       ; cued when it ends
+
+  (method (init)
+    (DoSound SND_INIT self)
+    (sounds add: self))
+
+  (method (play who)
+    (if (not nodePtr) (self init:))
+    (= client (if argc who else 0))
+    (DoSound SND_PLAY self))
+
+  (method (stop)
+    (DoSound SND_STOP self))
+
+  ;; How many times to play: -1 forever.
+  (method (setLoop n)
+    (= loop n)
+    (return self))
+
+  ;; Each cycle (from the game): has it ended?
+  (method (check &tmp c)
+    (if handle
+      (DoSound SND_UPDATE_CUES self)
+      (if (== signal -1)
+        (self stop:)
+        (= c client)
+        (= client 0)
+        (if c (c cue:)))))
+
+  (method (dispose)
+    (DoSound SND_STOP self)
+    (DoSound SND_DISPOSE self)
+    (sounds delete: self)
+    (super dispose:)))

package/lib/995.sc

@@ -0,0 +1,53 @@
+;;; Input: events, and what clicks do.
+(script 995)
+(include "system.sh")
+
+;; What GetEvent fills in.
+(class Event of Obj
+  (properties
+    type 0
+    message 0
+    modifiers 0
+    x 0 y 0
+    claimed 0))
+
+;; Turns clicks into walking and verbs. Right-click goes to the next verb (and cursor);
+;; a click walks the hero there, or does the verb to what's under the cursor: an actor or
+;; prop, a feature, or else the room. A click while a line is shown dismisses it; while a
+;; menu is open, it goes to the menu.
+(class User of Obj
+  (properties
+    verb V_WALK
+    canInput TRUE)
+
+  (method (init)
+    (self setVerb: verb))
+
+  (method (setVerb v)
+    (= verb v)
+    (SetCursor (+ CURSOR_BASE v) 0 0))
+
+  (method (doit)
+    (while (GetEvent EV_ALL theEvent)
+      (self handleEvent: theEvent)))
+
+  (method (handleEvent event &tmp obj ex ey)
+    (event claimed: FALSE)
+    ;; A line being shown, then an open menu, get clicks first.
+    (if (and talking (talking handleEvent: event)) (return))
+    (if dialog
+      (dialog handleEvent: event)
+      (return))
+    (if (or (not canInput) (!= (event type?) EV_MOUSE_DOWN)) (return))
+    (if (& (event modifiers?) MOD_RIGHT)
+      (self setVerb: (+ (mod verb VERB_COUNT) 1))
+      (return))
+    (= ex (event x?))
+    (= ey (event y?))
+    (if (== verb V_WALK)
+      (if ego (ego setMotion: PolyPath ex ey))
+      (return))
+    (= obj (cast firstTrue: #onMe ex ey))
+    (if (not obj) (= obj (features firstTrue: #onMe ex ey)))
+    (if (not obj) (= obj curRoom))
+    (if obj (obj doVerb: verb))))