sci2-ts 0.14.0 → 0.15.1

package/packages/sci/src/vm/kernels/text.ts

@@ -1,5 +1,6 @@
 import { ResourceType } from "../../resource/types.ts";
-import { parseFont, textWidth, wrapText, type Font } from "../../text/font.ts";
+import { parseFont, type Font } from "../../text/font.ts";
+import { parseStyled, placeLine, styledWidth, wrapStyled } from "../../text/styled.ts";
 import { hasRef, parseMessages, type MessageFile, type MessageTuple } from "../../text/message.ts";
 import type { SciBitmap } from "../memory.ts";
 import type { FrameRequest, KernelFn, SendRequest, Vm } from "../vm.ts";
@@ -106,28 +107,37 @@ const DEFAULT_MAX_WIDTH = (320 * 3) / 5;
  */
 export const unescapeText = (s: string) => s.replace(/\\([0-9a-fA-F]{2})/g, (_m, hex: string) => String.fromCharCode(parseInt(hex, 16)));
 
-/** Draws wrapped text into a bitmap, inside `rect`, with alignment. */
-function drawText(bmp: SciBitmap, font: Font, str: string, rect: { left: number; top: number; right: number; bottom: number }, color: number, align: number) {
+/**
+ * Draws wrapped text into a bitmap, inside `rect`, with alignment. The text can change font
+ * and colour (`|f3|`, `|c5|`). Ink can start left of the pen or run past it (an italic's
+ * tail) into the box's margin; only the bitmap's edges stop it.
+ */
+function drawText(vm: Vm, bmp: SciBitmap, fontNo: number, str: string, rect: { left: number; top: number; right: number; bottom: number }, color: number, align: number) {
+  const fontOf = (n: number) => text(vm).font(n);
   const width = rect.right - rect.left;
-  const lines = wrapText(font, str, width);
-  lines.forEach((line, row) => {
-    const w = textWidth(font, line);
-    let x = rect.left + (align === TextAlign.Center ? Math.floor((width - w) / 2) : align === TextAlign.Right ? width - w : 0);
-    const y0 = rect.top + row * font.height;
-    for (const ch of line) {
-      const g = font.glyphs[ch.charCodeAt(0)];
-      if (!g) continue;
+  let y0 = rect.top;
+  for (const line of wrapStyled(fontOf, parseStyled(str, fontNo), fontNo, width)) {
+    const x = rect.left + (align === TextAlign.Center ? Math.floor((width - line.width) / 2) : align === TextAlign.Right ? width - line.width : 0);
+    for (const { glyph: g, x: gx0, color: c } of placeLine(fontOf, line, x)) {
+      const ink = c ?? color;
       for (let gy = 0; gy < g.height; gy++) {
         const y = y0 + gy;
         if (y < rect.top || y >= rect.bottom || y >= bmp.height) continue;
         for (let gx = 0; gx < g.width; gx++) {
-          const px = x + gx;
-          if (g.pixels[gy * g.width + gx] && px >= 0 && px < bmp.width) bmp.pixels[y * bmp.width + px] = color;
+          const px = gx0 + gx;
+          if (g.pixels[gy * g.width + gx] && px >= 0 && px < bmp.width) bmp.pixels[y * bmp.width + px] = ink;
         }
       }
-      x += g.width;
     }
-  });
+    y0 += line.height;
+  }
+}
+
+/** The size text takes in a font, wrapped to maxWidth: the widest line's advance, and the lines' heights. */
+function measure(vm: Vm, fontNo: number, str: string, maxWidth: number): { width: number; height: number } {
+  const fontOf = (n: number) => text(vm).font(n);
+  const lines = wrapStyled(fontOf, parseStyled(str, fontNo), fontNo, maxWidth);
+  return { width: Math.max(0, ...lines.map((l) => l.width)), height: lines.reduce((h, l) => h + l.height, 0) };
 }
 
 function drawBorder(bmp: SciBitmap, color: number) {
@@ -185,30 +195,33 @@ export const textKernels: Record<string, KernelFn> = {
 
   // TextSize(rectArray, text, font, maxWidth): writes [left, top, right, bottom] (inclusive).
   TextSize: (vm, [rect = 0, str = 0, fontNo = 0, maxWidth = 0]) => {
-    const font = text(vm).font(fontNo);
     const s = stringHelpers.str(vm, str);
+    const fontOf = (n: number) => text(vm).font(n);
+    const oneLine = () => {
+      const chars = parseStyled(s, fontNo);
+      return { width: styledWidth(fontOf, chars), height: Math.max(fontOf(fontNo).height, ...chars.map((c) => fontOf(c.font).height)) };
+    };
     let w: number, h: number;
     const max = toSigned(maxWidth);
     if (max >= 0) {
       const limit = max || DEFAULT_MAX_WIDTH;
-      if (!/[\r\n]/.test(s) && textWidth(font, s) <= limit) {
+      const one = oneLine();
+      if (!/[\r\n]/.test(s) && one.width <= limit) {
         // Fits on one line: measured as-is, spaces included (a lone " " has a width).
-        w = textWidth(font, s);
-        h = font.height;
+        ({ width: w, height: h } = one);
       } else {
-        const lines = wrapText(font, s, limit);
-        w = Math.min(limit, Math.max(0, ...lines.map((l) => textWidth(font, l))));
-        h = lines.length * font.height;
+        const m = measure(vm, fontNo, s, limit);
+        w = Math.min(limit, m.width);
+        h = m.height;
       }
     } else {
-      w = textWidth(font, s);
-      h = font.height;
+      ({ width: w, height: h } = oneLine());
     }
     const a = stringHelpers.resolve(vm, rect);
     if (a) a.data.splice(0, 4, 0, 0, fromInt(w - 1), fromInt(h - 1));
     return 0;
   },
-  TextWidth: (vm, [str = 0, fontNo = 0]) => textWidth(text(vm).font(fontNo), stringHelpers.str(vm, str)),
+  TextWidth: (vm, [str = 0, fontNo = 0]) => styledWidth((n) => text(vm).font(n), parseStyled(stringHelpers.str(vm, str), fontNo)),
   PointSize: (vm, [fontNo = 0]) => text(vm).font(fontNo).height,
   TextFonts: () => 0,
   TextColors: () => 0,
@@ -221,7 +234,7 @@ export const textKernels: Record<string, KernelFn> = {
     if (!vm.memory.object(obj)) return NULL;
     const w = Math.max(1, toSigned(width)), h = Math.max(1, toSigned(height));
     const str = unescapeText(stringHelpers.str(vm, vm.getProp(obj, "text") ?? 0));
-    const font = text(vm).font(prop(vm, obj, "font"));
+    const fontNo = prop(vm, obj, "font");
     const fore = prop(vm, obj, "fore") & 0xff;
     const align = prop(vm, obj, "mode");
     const rect = {
@@ -247,7 +260,7 @@ export const textKernels: Record<string, KernelFn> = {
       ref = vm.memory.newBitmap(cw, ch, found?.cel.skipColor ?? 0, found?.cel.skipColor ?? 0);
       if (found) vm.memory.bitmap(ref)!.pixels.set(found.cel.pixels);
     }
-    drawText(vm.memory.bitmap(ref)!, font, str, rect, fore, align);
+    drawText(vm, vm.memory.bitmap(ref)!, fontNo, str, rect, fore, align);
     return ref;
   },
 
@@ -295,7 +308,7 @@ export const textKernels: Record<string, KernelFn> = {
       const bmp = vm.memory.bitmap(bitmap)!;
       if (border >= 0) drawBorder(bmp, border & 0xff);
       const cursor = (frame >> 4) & 1 ? "" : "_"; // blink
-      drawText(bmp, font, text + cursor, rect, fore, TextAlign.Left);
+      drawText(vm, bmp, prop(vm, obj, "font"), text + cursor, rect, fore, TextAlign.Left);
       vm.setProp(obj, "bitmap", bitmap);
       graphicsKernels.FrameOut!(vm, []);
       yield { frame: true };

package/tools/art/build.d.ts

@@ -24,8 +24,11 @@ export interface ArtManifest {
             mirror: boolean;
         })[];
     }[];
-    /** Fonts drawn as sheets of glyphs (tools/art/font.ts). */
-    fonts?: {
+    /**
+     * Fonts (tools/art/font.ts): drawn as sheets of glyphs, or a bitmap font with its own
+     * metrics, a JSON file (bearings, advances, its atlas) exported from the font's source.
+     */
+    fonts?: ({
         number: number;
         png: string;
         cell: [number, number];
@@ -33,7 +36,10 @@ export interface ArtManifest {
         spacing?: number;
         space?: number;
         lineHeight?: number;
-    }[];
+    } | {
+        number: number;
+        metrics: string;
+    })[];
 }
 export declare class ArtError extends Error {
 }

package/tools/art/build.js

@@ -3,7 +3,7 @@ import { dirname, resolve } from "node:path";
 import { ResourceType, writeFont, writeHunkPalette, writePic, writeView } from "../../packages/sci/src/index.js";
 import { basePalette } from "../game/defaults.js";
 import { decodePng } from "../png.js";
-import { FontSheetError, fontFromSheet } from "./font.js";
+import { FontSheetError, fontFromMetrics, fontFromSheet } from "./font.js";
 export class ArtError extends Error {
 }
 export function buildArt(file) {
@@ -173,8 +173,39 @@ export function buildArt(file) {
     });
     list(m.fonts ?? [], "fonts", 0, 65536).forEach((value, i) => {
         const where = `fonts[${i}]`;
-        const f = object(value, where, ["number", "png", "cell", "first", "spacing", "space", "lineHeight"]);
+        const f = object(value, where, ["number", "png", "cell", "first", "spacing", "space", "lineHeight", "metrics"]);
         const n = number(f.number, "font", `${where}.number`);
+        // A bitmap font with its own metrics: a sidecar JSON naming its atlas.
+        if (f.metrics !== undefined) {
+            if (f.png !== undefined || f.cell !== undefined)
+                return fail(where, "a font is a sheet (png, cell) or has metrics, not both");
+            const metricsFile = path(f.metrics, `${where}.metrics`);
+            let metrics;
+            try {
+                metrics = JSON.parse(readFileSync(metricsFile, "utf8"));
+            }
+            catch (e) {
+                return fail(`${where}.metrics`, `${metricsFile}: ${e.message}`);
+            }
+            const atlas = resolve(dirname(metricsFile), String(metrics.atlas));
+            let img;
+            try {
+                img = decodePng(readFileSync(atlas));
+            }
+            catch (e) {
+                return fail(`${where}.metrics`, `${atlas}: ${e.message}`);
+            }
+            try {
+                resources.push({ type: ResourceType.Font, number: n, data: writeFont(fontFromMetrics(img, metrics)) });
+                images++;
+            }
+            catch (e) {
+                if (!(e instanceof FontSheetError))
+                    throw e;
+                fail(`${where}.metrics`, e.message);
+            }
+            return;
+        }
         const filename = path(f.png, `${where}.png`);
         let img;
         try {

package/tools/art/build.ts

@@ -3,7 +3,7 @@ import { dirname, resolve } from "node:path";
 import { ResourceType, writeFont, writeHunkPalette, writePic, writeView, type ResourceData, type ViewLoop } from "../../packages/sci/src/index.ts";
 import { basePalette } from "../game/defaults.ts";
 import { decodePng } from "../png.ts";
-import { FontSheetError, fontFromSheet } from "./font.ts";
+import { FontSheetError, fontFromMetrics, fontFromSheet, type FontMetrics } from "./font.ts";
 
 /** Editor-neutral, exact-colour art for standalone games. See docs/art-workflow.md. */
 export interface ArtManifest {
@@ -13,8 +13,11 @@ export interface ArtManifest {
   maxColours?: number;
   pictures: { number: number; layers: { png: string; priority: number }[] }[];
   views: { number: number; loops: ({ cels: { png: string; anchor: [number, number] }[] } | { link: number; mirror: boolean })[] }[];
-  /** Fonts drawn as sheets of glyphs (tools/art/font.ts). */
-  fonts?: { number: number; png: string; cell: [number, number]; first?: number; spacing?: number; space?: number; lineHeight?: number }[];
+  /**
+   * Fonts (tools/art/font.ts): drawn as sheets of glyphs, or a bitmap font with its own
+   * metrics, a JSON file (bearings, advances, its atlas) exported from the font's source.
+   */
+  fonts?: ({ number: number; png: string; cell: [number, number]; first?: number; spacing?: number; space?: number; lineHeight?: number } | { number: number; metrics: string })[];
 }
 
 export class ArtError extends Error {}
@@ -153,8 +156,28 @@ export function buildArt(file: string): { resources: ResourceData[]; colours: st
   });
   list(m.fonts ?? [], "fonts", 0, 65536).forEach((value, i) => {
     const where = `fonts[${i}]`;
-    const f = object(value, where, ["number", "png", "cell", "first", "spacing", "space", "lineHeight"]);
+    const f = object(value, where, ["number", "png", "cell", "first", "spacing", "space", "lineHeight", "metrics"]);
     const n = number(f.number, "font", `${where}.number`);
+    // A bitmap font with its own metrics: a sidecar JSON naming its atlas.
+    if (f.metrics !== undefined) {
+      if (f.png !== undefined || f.cell !== undefined) return fail(where, "a font is a sheet (png, cell) or has metrics, not both");
+      const metricsFile = path(f.metrics, `${where}.metrics`);
+      let metrics: FontMetrics;
+      try { metrics = JSON.parse(readFileSync(metricsFile, "utf8")) as FontMetrics; }
+      catch (e) { return fail(`${where}.metrics`, `${metricsFile}: ${(e as Error).message}`); }
+      const atlas = resolve(dirname(metricsFile), String(metrics.atlas));
+      let img: ReturnType<typeof decodePng>;
+      try { img = decodePng(readFileSync(atlas)); }
+      catch (e) { return fail(`${where}.metrics`, `${atlas}: ${(e as Error).message}`); }
+      try {
+        resources.push({ type: ResourceType.Font, number: n, data: writeFont(fontFromMetrics(img, metrics)) });
+        images++;
+      } catch (e) {
+        if (!(e instanceof FontSheetError)) throw e;
+        fail(`${where}.metrics`, e.message);
+      }
+      return;
+    }
     const filename = path(f.png, `${where}.png`);
     let img: ReturnType<typeof decodePng>;
     try { img = decodePng(readFileSync(filename)); }

package/tools/art/font.d.ts

@@ -22,3 +22,23 @@ export interface FontSheet {
 export declare class FontSheetError extends Error {
 }
 export declare function fontFromSheet(img: Rgba, sheet: FontSheet): Font;
+/**
+ * A font from a bitmap font's own metrics (sidecar JSON next to an atlas, as exported from
+ * BDF): each glyph's rectangle in the atlas, where its top sits below the line's top, its
+ * bearing from the pen and its advance. Nothing is trimmed, moved or respaced: the glyph is
+ * the rectangle's ink, with blank rows above it down to its top.
+ */
+export interface FontMetrics {
+    lineHeight: number;
+    first: number;
+    last: number;
+    atlas: string;
+    glyphs: {
+        code: number;
+        rect: [number, number, number, number];
+        bearingX: number;
+        top: number;
+        advance: number;
+    }[];
+}
+export declare function fontFromMetrics(img: Rgba, m: FontMetrics): Font;

package/tools/art/font.js

@@ -38,3 +38,38 @@ export function fontFromSheet(img, sheet) {
     }
     return { height: lineHeight, glyphs };
 }
+export function fontFromMetrics(img, m) {
+    const fail = (message) => { throw new FontSheetError(message); };
+    if (!Number.isInteger(m.lineHeight) || m.lineHeight < 1 || m.lineHeight > 255)
+        fail(`line height ${m.lineHeight} is outside 1..255`);
+    const glyphs = Array.from({ length: Math.max(128, m.last + 1) }, () => ({ width: 0, height: 0, pixels: new Uint8Array(0) }));
+    const seen = new Set();
+    for (const g of m.glyphs) {
+        const [x, y, w, h] = g.rect;
+        if (!Number.isInteger(g.code) || g.code < 0 || g.code > 255)
+            fail(`character ${g.code} is outside 0..255`);
+        if (seen.has(g.code))
+            fail(`character ${g.code} is there twice`);
+        seen.add(g.code);
+        if (x < 0 || y < 0 || x + w > img.width || y + h > img.height)
+            fail(`character ${g.code}: its rectangle ${g.rect.join(",")} is outside the ${img.width}x${img.height} atlas`);
+        if (g.top < 0 || g.top + h > 255)
+            fail(`character ${g.code}: top ${g.top} with height ${h}`);
+        const height = g.top + h;
+        const pixels = new Uint8Array(w * height);
+        for (let gy = 0; gy < h; gy++) {
+            for (let gx = 0; gx < w; gx++) {
+                const a = img.data[((y + gy) * img.width + x + gx) * 4 + 3];
+                if (a !== 0 && a !== 255)
+                    fail(`character ${g.code} (${x + gx},${y + gy}): alpha ${a}; the ink is opaque or clear`);
+                if (a)
+                    pixels[(g.top + gy) * w + gx] = 1;
+            }
+        }
+        glyphs[g.code] = { width: w, height, pixels, ...(g.bearingX ? { bearingX: g.bearingX } : {}), ...(g.advance !== w ? { advance: g.advance } : {}) };
+    }
+    for (let c = m.first; c <= m.last; c++)
+        if (!seen.has(c))
+            fail(`character ${c} is in ${m.first}..${m.last} but has no glyph`);
+    return { height: m.lineHeight, glyphs };
+}

package/tools/art/font.ts

@@ -54,3 +54,44 @@ export function fontFromSheet(img: Rgba, sheet: FontSheet): Font {
   }
   return { height: lineHeight, glyphs };
 }
+
+/**
+ * A font from a bitmap font's own metrics (sidecar JSON next to an atlas, as exported from
+ * BDF): each glyph's rectangle in the atlas, where its top sits below the line's top, its
+ * bearing from the pen and its advance. Nothing is trimmed, moved or respaced: the glyph is
+ * the rectangle's ink, with blank rows above it down to its top.
+ */
+export interface FontMetrics {
+  lineHeight: number;
+  first: number;
+  last: number;
+  atlas: string;
+  glyphs: { code: number; rect: [number, number, number, number]; bearingX: number; top: number; advance: number }[];
+}
+
+export function fontFromMetrics(img: Rgba, m: FontMetrics): Font {
+  const fail = (message: string): never => { throw new FontSheetError(message); };
+  if (!Number.isInteger(m.lineHeight) || m.lineHeight < 1 || m.lineHeight > 255) fail(`line height ${m.lineHeight} is outside 1..255`);
+  const glyphs: (Glyph | undefined)[] = Array.from({ length: Math.max(128, m.last + 1) }, () => ({ width: 0, height: 0, pixels: new Uint8Array(0) }));
+  const seen = new Set<number>();
+  for (const g of m.glyphs) {
+    const [x, y, w, h] = g.rect;
+    if (!Number.isInteger(g.code) || g.code < 0 || g.code > 255) fail(`character ${g.code} is outside 0..255`);
+    if (seen.has(g.code)) fail(`character ${g.code} is there twice`);
+    seen.add(g.code);
+    if (x < 0 || y < 0 || x + w > img.width || y + h > img.height) fail(`character ${g.code}: its rectangle ${g.rect.join(",")} is outside the ${img.width}x${img.height} atlas`);
+    if (g.top < 0 || g.top + h > 255) fail(`character ${g.code}: top ${g.top} with height ${h}`);
+    const height = g.top + h;
+    const pixels = new Uint8Array(w * height);
+    for (let gy = 0; gy < h; gy++) {
+      for (let gx = 0; gx < w; gx++) {
+        const a = img.data[((y + gy) * img.width + x + gx) * 4 + 3]!;
+        if (a !== 0 && a !== 255) fail(`character ${g.code} (${x + gx},${y + gy}): alpha ${a}; the ink is opaque or clear`);
+        if (a) pixels[(g.top + gy) * w + gx] = 1;
+      }
+    }
+    glyphs[g.code] = { width: w, height, pixels, ...(g.bearingX ? { bearingX: g.bearingX } : {}), ...(g.advance !== w ? { advance: g.advance } : {}) };
+  }
+  for (let c = m.first; c <= m.last; c++) if (!seen.has(c)) fail(`character ${c} is in ${m.first}..${m.last} but has no glyph`);
+  return { height: m.lineHeight, glyphs };
+}

package/tools/game/build.d.ts

@@ -20,7 +20,9 @@ import { type SpokenLine } from "../../packages/content/src/index.ts";
  *                                  voices/lines.json, the script, up to date
  *   games/<name>/resources.ts      optional: `export default () => ResourceData[]` for art,
  *                                  music and anything else made by code
- *   games/<name>/game.json         optional: { "library": false } to build without lib/
+ *   games/<name>/game.json         optional: { "library": false } to build without lib/;
+ *                                  "fonts": { "bold": 3, "italic": 4, "boldItalic": 5 }
+ *                                  for the rooms' [b] and [i] markup
  *
  * plus the class library (lib/: its scripts and resources) and font 0, palette 999 and cursor
  * view 999 (tools/game/defaults.ts), unless the game makes its own. Selectors are numbered as the scripts use them, starting with the nine object

package/tools/game/build.js

@@ -20,6 +20,17 @@ import { ITEMS_SCRIPT, libraryTarget } from "./target.js";
 const HEADER = OBJECT_HEADER;
 export class GameBuildError extends Error {
 }
+/** game.json's fonts for the rooms' markup: bold, italic and boldItalic font numbers. */
+function gameFonts(value) {
+    if (value === undefined)
+        return undefined;
+    const ok = (n) => Number.isInteger(n) && n >= 0 && n <= 65535;
+    const f = value;
+    if (typeof value !== "object" || value === null || !ok(f.bold) || !ok(f.italic) || !ok(f.boldItalic)) {
+        throw new GameBuildError(`game.json: "fonts" is { "bold": n, "italic": n, "boldItalic": n }, font numbers`);
+    }
+    return { bold: f.bold, italic: f.italic, boldItalic: f.boldItalic };
+}
 /** sci-ts's class library: scripts every game gets, and the resources they use. */
 export const LIBRARY_DIR = resolve(import.meta.dirname, "../../lib");
 export async function buildGame(dir, options = {}) {
@@ -27,6 +38,7 @@ export async function buildGame(dir, options = {}) {
     if (!existsSync(scriptsDir))
         throw new GameBuildError(`${dir}: no scripts/ folder`);
     const config = existsSync(join(dir, "game.json")) ? JSON.parse(readFileSync(join(dir, "game.json"), "utf8")) : {};
+    const fonts = gameFonts(config.fonts);
     const library = options.library ?? config.library ?? true;
     const load = (from, re) => readdirSync(from).sort().filter((f) => re.test(f)).map((f) => ({ file: join(from, f), text: readFileSync(join(from, f), "utf8") }));
     const sources = load(scriptsDir, /^\d+\.sca$/);
@@ -119,7 +131,7 @@ export async function buildGame(dir, options = {}) {
         const roomsDir = join(dir, "rooms");
         if (!existsSync(roomsDir))
             return [];
-        const target = libraryTarget(globals, items);
+        const target = { ...libraryTarget(globals, items), ...(fonts ? { fonts } : {}) };
         const flags = modFlags(dir, { content: target });
         const out = [];
         for (const { file, text } of load(roomsDir, /^\d+\.room\.yaml$/)) {

package/tools/game/build.ts

@@ -34,7 +34,9 @@ import { ITEMS_SCRIPT, libraryTarget } from "./target.ts";
  *                                  voices/lines.json, the script, up to date
  *   games/<name>/resources.ts      optional: `export default () => ResourceData[]` for art,
  *                                  music and anything else made by code
- *   games/<name>/game.json         optional: { "library": false } to build without lib/
+ *   games/<name>/game.json         optional: { "library": false } to build without lib/;
+ *                                  "fonts": { "bold": 3, "italic": 4, "boldItalic": 5 }
+ *                                  for the rooms' [b] and [i] markup
  *
  * plus the class library (lib/: its scripts and resources) and font 0, palette 999 and cursor
  * view 999 (tools/game/defaults.ts), unless the game makes its own. Selectors are numbered as the scripts use them, starting with the nine object
@@ -62,13 +64,25 @@ const HEADER = OBJECT_HEADER;
 
 export class GameBuildError extends Error {}
 
+/** game.json's fonts for the rooms' markup: bold, italic and boldItalic font numbers. */
+function gameFonts(value: unknown): { bold: number; italic: number; boldItalic: number } | undefined {
+  if (value === undefined) return undefined;
+  const ok = (n: unknown) => Number.isInteger(n) && (n as number) >= 0 && (n as number) <= 65535;
+  const f = value as Record<string, unknown>;
+  if (typeof value !== "object" || value === null || !ok(f.bold) || !ok(f.italic) || !ok(f.boldItalic)) {
+    throw new GameBuildError(`game.json: "fonts" is { "bold": n, "italic": n, "boldItalic": n }, font numbers`);
+  }
+  return { bold: f.bold as number, italic: f.italic as number, boldItalic: f.boldItalic as number };
+}
+
 /** sci-ts's class library: scripts every game gets, and the resources they use. */
 export const LIBRARY_DIR = resolve(import.meta.dirname, "../../lib");
 
 export async function buildGame(dir: string, options: { library?: boolean } = {}): Promise<BuiltGame> {
   const scriptsDir = join(dir, "scripts");
   if (!existsSync(scriptsDir)) throw new GameBuildError(`${dir}: no scripts/ folder`);
-  const config = existsSync(join(dir, "game.json")) ? (JSON.parse(readFileSync(join(dir, "game.json"), "utf8")) as { library?: boolean }) : {};
+  const config = existsSync(join(dir, "game.json")) ? (JSON.parse(readFileSync(join(dir, "game.json"), "utf8")) as { library?: boolean; fonts?: unknown }) : {};
+  const fonts = gameFonts(config.fonts);
   const library = options.library ?? config.library ?? true;
   const load = (from: string, re: RegExp) =>
     readdirSync(from).sort().filter((f) => re.test(f)).map((f) => ({ file: join(from, f), text: readFileSync(join(from, f), "utf8") }));
@@ -158,7 +172,7 @@ export async function buildGame(dir: string, options: { library?: boolean } = {}
   const compileRooms = (): { file: string; text: string }[] => {
     const roomsDir = join(dir, "rooms");
     if (!existsSync(roomsDir)) return [];
-    const target = libraryTarget(globals, items);
+    const target = { ...libraryTarget(globals, items), ...(fonts ? { fonts } : {}) };
     const flags = modFlags(dir, { content: target });
     const out: { file: string; text: string }[] = [];
     for (const { file, text } of load(roomsDir, /^\d+\.room\.yaml$/)) {

package/tools/site/build.d.ts

@@ -6,3 +6,5 @@ export declare function buildSite(gameDir: string, outDir: string, options?: {
     game: string;
     soundFont: boolean;
 }>;
+/** A short hash of the game's files: changes whenever any of them does. */
+export declare function buildVersion(files: Record<string, Uint8Array>): string;

package/tools/site/build.js

@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import { cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { writeResourceArchive } from "../../packages/sci/src/index.js";
@@ -40,7 +41,8 @@ export async function buildSite(gameDir, outDir, options = {}) {
     for (const [name, data] of Object.entries(files))
         writeFileSync(join(play, "game", name), data);
     // What the player lists in place of the dev server's directory listings.
-    writeFileSync(join(play, "game/files.json"), JSON.stringify({ "": Object.keys(files) }));
+    // With the build's version, which the player fetches every file with (apps/viewer/src/files.ts).
+    writeFileSync(join(play, "game/files.json"), JSON.stringify({ "": Object.keys(files), version: buildVersion(files) }));
     const sf2 = [join(resolve(gameDir), SOUNDFONT), join(ROOT, SOUNDFONT)].find((f) => existsSync(f));
     const soundFont = sf2 !== undefined;
     if (sf2)
@@ -110,3 +112,10 @@ ${body}
 </html>
 `;
 }
+/** A short hash of the game's files: changes whenever any of them does. */
+export function buildVersion(files) {
+    const hash = createHash("sha256");
+    for (const name of Object.keys(files).sort())
+        hash.update(name).update(files[name]);
+    return hash.digest("hex").slice(0, 12);
+}

package/tools/site/build.ts

@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import { cpSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
 import { writeResourceArchive } from "../../packages/sci/src/index.ts";
@@ -46,7 +47,8 @@ export async function buildSite(
   mkdirSync(join(play, "game"), { recursive: true });
   for (const [name, data] of Object.entries(files)) writeFileSync(join(play, "game", name), data);
   // What the player lists in place of the dev server's directory listings.
-  writeFileSync(join(play, "game/files.json"), JSON.stringify({ "": Object.keys(files) }));
+  // With the build's version, which the player fetches every file with (apps/viewer/src/files.ts).
+  writeFileSync(join(play, "game/files.json"), JSON.stringify({ "": Object.keys(files), version: buildVersion(files) }));
   const sf2 = [join(resolve(gameDir), SOUNDFONT), join(ROOT, SOUNDFONT)].find((f) => existsSync(f));
   const soundFont = sf2 !== undefined;
   if (sf2) cpSync(sf2, join(play, "soundfonts", basename(sf2)));
@@ -116,3 +118,10 @@ ${body}
 </html>
 `;
 }
+
+/** A short hash of the game's files: changes whenever any of them does. */
+export function buildVersion(files: Record<string, Uint8Array>): string {
+  const hash = createHash("sha256");
+  for (const name of Object.keys(files).sort()) hash.update(name).update(files[name]!);
+  return hash.digest("hex").slice(0, 12);
+}