dotframe 0.1.8 → 0.2.0

package/src/native/relay.ts

@@ -0,0 +1,95 @@
+// The relay transport for native builds (macOS, Windows, iOS): the same RelayLink as connectRelay on the web, over
+// the native WebSocket client, polled from the game's frame because library mode (iOS) has no promises or events.
+import type { InputMessage, NetMessage, RelayLink, SumMessage } from "../netplay";
+import { dfWs, dfWsText } from "./ffi";
+
+const dfWsOpen = (url: string): number => dfWsText(0, -1, url);
+const dfWsState = (socket: number): number => dfWs(0, socket, 0);
+const dfWsNext = (socket: number): number => dfWs(1, socket, 0);
+const dfWsByte = (socket: number, index: number): number => dfWs(2, socket, index);
+const dfWsPop = (socket: number): number => dfWs(3, socket, 0);
+const dfWsClose = (socket: number): number => dfWs(4, socket, 0);
+
+const STATE_OPEN = 1;
+const STATE_CLOSED = 2;
+const STATE_ERROR = 3;
+
+// Loops instead of splice: scriptc cannot splice an array of a generic instantiated with unknown, and generic
+// helpers must live at module scope.
+function drain<T>(queue: T[]): T[] {
+  const out: T[] = [];
+  for (let i = 0; i < queue.length; i++) out.push(queue[i]);
+  queue.length = 0;
+  return out;
+}
+
+export function connectRelayNative<A = unknown>(url: string, room: string): RelayLink<A> {
+  const socket = dfWsOpen(`${url}${url.includes("?") ? "&" : "?"}room=${encodeURIComponent(room)}`);
+    const decoder = new TextDecoder();
+  let status = socket < 0 ? "closed" : "connecting";
+  let slot = -1;
+  const app: A[] = [];
+  const net: NetMessage[] = [];
+
+  // Drains the native inbox into the game and netplay queues. Called by every read, so polling happens per frame.
+  const pump = (): void => {
+    if (socket < 0) return;
+    const state = dfWsState(socket);
+    if (state === STATE_CLOSED || state === STATE_ERROR) status = "closed";
+    for (let len = dfWsNext(socket); len >= 0; len = dfWsNext(socket)) {
+      const bytes = new Uint8Array(len);
+      for (let i = 0; i < len; i++) bytes[i] = dfWsByte(socket, i);
+      dfWsPop(socket);
+      const text = decoder.decode(bytes);
+      // scriptc builds a parsed value in the asserted shape and cannot re-shape it later, so each message is parsed
+      // once more as its final type, chosen by its "t".
+      const header = JSON.parse(text) as { t?: string; slot?: number; here?: boolean };
+      if (header.t === "hello") {
+        slot = header.slot ?? -1;
+        status = "waiting";
+      } else if (header.t === "peer") {
+        status = header.here ? "paired" : "waiting";
+        if (!header.here) net.length = 0;
+      } else if (header.t === "input") net.push(JSON.parse(text) as InputMessage);
+      else if (header.t === "sum") net.push(JSON.parse(text) as SumMessage);
+      else app.push(JSON.parse(text) as A);
+    }
+  };
+  const send = (message: unknown): void => {
+    if (socket >= 0 && dfWsState(socket) === STATE_OPEN) dfWsText(1, socket, JSON.stringify(message));
+  };
+  return {
+    room,
+    status: (): string => {
+      pump();
+      return status;
+    },
+    slot: (): number => {
+      pump();
+      return slot;
+    },
+    send: (message: A): void => send(message),
+    receive: (): A[] => {
+      pump();
+      return drain(app);
+    },
+    transport: {
+      send: (message: NetMessage): void => send(message),
+      receive: (): NetMessage[] => {
+        pump();
+        return drain(net);
+      },
+    },
+    close: (): void => {
+      if (socket >= 0) dfWsClose(socket);
+      status = "closed";
+    },
+  };
+}
+
+// Shares text, such as a room link: the share sheet on iOS, the clipboard on macOS and Windows.
+// Returns "sheet", "clipboard" or "failed".
+export function shareText(text: string): string {
+  const result = dfWsText(2, -1, text);
+  return result === 1 ? "sheet" : result === 2 ? "clipboard" : "failed";
+}

package/src/native/run.ts

@@ -52,6 +52,7 @@ export async function run(options: WindowOptions, setup: Setup): Promise<void> {
     createPipeline: render.createPipeline,
     bind: render.bind,
     createTexture: render.createTexture,
+    destroyTexture: render.destroyTexture,
     frame: render.frame,
     aspect: render.aspect,
     createImage: async (png: Uint8Array, smooth: boolean): Promise<Texture> => createNativeImage(png, smooth),

package/src/probe-web.ts

@@ -0,0 +1,7 @@
+// Web only: exposes a probe's state as globalThis.__dotframe for dotframe play --online. Native builds must not import
+// this (assigning globalThis traps in scriptc); they write the state to a file.
+import type { ProbeState } from "./probe";
+
+export function publishProbe(state: ProbeState): void {
+  (globalThis as { __dotframe?: ProbeState }).__dotframe = state;
+}

package/src/probe.ts

@@ -0,0 +1,53 @@
+// The state `dotframe play --online` reads from each browser: frame, confirmed frame, link status, and this peer's
+// checksum at every 30th confirmed frame. Call update() once per fixed step. On the web, publishProbe (probe-web.ts)
+// exposes the state as globalThis.__dotframe; native builds write it to a file instead (writing globalThis traps in
+// scriptc).
+import type { Rollback } from "./netplay";
+
+export interface ProbeState {
+  frame: number;
+  confirmed: number;
+  status: string;
+  sums: Record<number, number>;
+}
+
+export interface Probe {
+  state: ProbeState;
+  // Online: pass the rollback and the link status. Local: pass null and the frame just simulated.
+  update: (rollback: Rollback | null, status: string, localFrame?: number) => void;
+}
+
+const EVERY = 30;
+
+export function createProbe(): Probe {
+  const state: ProbeState = { frame: 0, confirmed: 0, status: "local", sums: {} };
+  return {
+    state,
+    update: (rollback: Rollback | null, status: string, localFrame?: number): void => {
+      state.status = status;
+      if (!rollback) {
+        if (localFrame !== undefined) state.frame = localFrame;
+        return;
+      }
+      state.frame = rollback.stats().frame;
+      state.confirmed = rollback.confirmedFrame();
+      for (let f = EVERY; f < state.confirmed; f += EVERY) if (state.sums[f] === undefined) state.sums[f] = rollback.sumAt(f) ?? 0;
+    },
+  };
+}
+
+// A scripted masher for tests: a new random input every 6 frames from a seed, like the CLI's --mash.
+export function createMasher(seed: number, random: (next: () => number) => number): () => number {
+  let s = seed >>> 0;
+  const next = (): number => {
+    s = (Math.imul(s, 1103515245) + 12345) >>> 0;
+    return s / 4294967296;
+  };
+  let frame = 0;
+  let input = 0;
+  return (): number => {
+    if (frame % 6 === 0) input = random(next);
+    frame += 1;
+    return input;
+  };
+}

package/src/ui.ts

@@ -0,0 +1,191 @@
+// Menus that draw and hit-test from one layout, so a button's rectangle exists once. Buttons and arrow rows
+// (prev, value, next), focus for keyboard and gamepad, and taps from mouse or touch in logical coordinates.
+import type { Draw2D } from "./draw2d";
+import type { Input } from "./input";
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface UiItem {
+  id: string;
+  kind: "button" | "row";
+  label: string;
+  // Rows show a value between their arrows.
+  value: string;
+  disabled: boolean;
+  rect: Rect;
+}
+
+export interface UiSpec {
+  id: string;
+  kind: "button" | "row";
+  label: string;
+  value?: string;
+  disabled?: boolean;
+}
+
+// "prev" and "next" are a row's arrow zones (the outer fifth on each side); everything else is "body".
+export interface UiHit {
+  id: string;
+  part: "body" | "prev" | "next";
+}
+
+export interface ColumnArea {
+  x: number;
+  y: number;
+  width: number;
+  itemHeight: number;
+  gap: number;
+}
+
+// Lays items out top to bottom. Recompute it whenever labels or values change; it is cheap.
+export function column(specs: UiSpec[], area: ColumnArea): UiItem[] {
+  const items: UiItem[] = [];
+  for (let i = 0; i < specs.length; i++) {
+    const s = specs[i];
+    items.push({
+      id: s.id,
+      kind: s.kind,
+      label: s.label,
+      value: s.value ?? "",
+      disabled: s.disabled === true,
+      rect: { x: area.x, y: area.y + i * (area.itemHeight + area.gap), w: area.width, h: area.itemHeight },
+    });
+  }
+  return items;
+}
+
+export function hit(items: UiItem[], x: number, y: number): UiHit | null {
+  for (let i = 0; i < items.length; i++) {
+    const it = items[i];
+    const r = it.rect;
+    if (it.disabled || x < r.x || x > r.x + r.w || y < r.y || y > r.y + r.h) continue;
+    if (it.kind === "row") {
+      const zone = r.w / 5;
+      if (x < r.x + zone) return { id: it.id, part: "prev" };
+      if (x > r.x + r.w - zone) return { id: it.id, part: "next" };
+    }
+    return { id: it.id, part: "body" };
+  }
+  return null;
+}
+
+// Next enabled item in direction delta (+1 down, -1 up), wrapping; the first enabled item when focus is unknown.
+export function moveFocus(items: UiItem[], focus: string, delta: number): string {
+  if (items.length === 0) return focus;
+  let index = -1;
+  for (let i = 0; i < items.length; i++) if (items[i].id === focus) index = i;
+  for (let step = 1; step <= items.length; step++) {
+    const i = (((index < 0 ? (delta > 0 ? -1 : 0) : index) + step * delta) % items.length + items.length) % items.length;
+    if (!items[i].disabled) return items[i].id;
+  }
+  return focus;
+}
+
+export interface UiStyle {
+  // A CSS font for draw.setFont; the family must be registered with draw.addFont.
+  font: string;
+  fill: string;
+  focusFill: string;
+  text: string;
+  disabledText: string;
+}
+
+export const DEFAULT_STYLE: UiStyle = { font: "24px sans-serif", fill: "#24213a", focusFill: "#3d3866", text: "#ffffff", disabledText: "#77748f" };
+
+export function drawUi(draw: Draw2D, items: UiItem[], focus: string, style: UiStyle = DEFAULT_STYLE): void {
+  draw.setFont(style.font);
+  draw.setTextBaseline("middle");
+  for (let i = 0; i < items.length; i++) {
+    const it = items[i];
+    const r = it.rect;
+    draw.setFillStyle(it.id === focus && !it.disabled ? style.focusFill : style.fill);
+    draw.fillRect(r.x, r.y, r.w, r.h);
+    draw.setFillStyle(it.disabled ? style.disabledText : style.text);
+    const cy = r.y + r.h / 2;
+    if (it.kind === "row") {
+      draw.setTextAlign("left");
+      draw.fillText("<", r.x + 12, cy);
+      draw.setTextAlign("right");
+      draw.fillText(">", r.x + r.w - 12, cy);
+      draw.setTextAlign("center");
+      draw.fillText(it.value === "" ? it.label : `${it.label}: ${it.value}`, r.x + r.w / 2, cy);
+    } else {
+      draw.setTextAlign("center");
+      draw.fillText(it.label, r.x + r.w / 2, cy);
+    }
+  }
+}
+
+// Maps the window-normalized pointer ([0, 1] across the window) to game coordinates, for example undoing an
+// aspect letterbox: (nx, ny) => ({ x: nx * logicalWidth - offsetX, y: ny * logicalHeight - offsetY }).
+export type PointerMap = (nx: number, ny: number) => { x: number; y: number };
+
+export interface Tap {
+  x: number;
+  y: number;
+}
+
+export interface Tapper {
+  // Call once per step. Returns a tap on the step the press is released, at the release point.
+  update: (input: Input) => Tap | null;
+  // Ignore input until every button and finger is up: call it on a screen change so the press that caused it does
+  // not also count on the next screen.
+  disarm: () => void;
+}
+
+function pressed(input: Input): { down: boolean; nx: number; ny: number } {
+  const touches = input.touches();
+  if (touches.length > 0) return { down: true, nx: touches[0].x, ny: touches[0].y };
+  const p = input.pointer();
+  return { down: p.buttons !== 0, nx: p.x, ny: p.y };
+}
+
+export function createTap(map: PointerMap): Tapper {
+  let armed = true;
+  let wasDown = false;
+  let last = { x: 0, y: 0 };
+  return {
+    update: (input: Input): Tap | null => {
+      const now = pressed(input);
+      if (now.down) last = map(now.nx, now.ny);
+      if (!armed) {
+        if (!now.down) armed = true;
+        wasDown = false;
+        return null;
+      }
+      const tap = wasDown && !now.down ? { x: last.x, y: last.y } : null;
+      wasDown = now.down;
+      return tap;
+    },
+    disarm: (): void => {
+      armed = false;
+      wasDown = false;
+    },
+  };
+}
+
+export interface ReleaseGate {
+  // True once nothing has been held since the last disarm().
+  ready: (input: Input) => boolean;
+  disarm: () => void;
+}
+
+// Arm-after-release for gameplay: disarm when a match starts, and read game input only once ready() is true, so the
+// click or tap that pressed START does not keep going into the match (and, say, charge a shot).
+export function createReleaseGate(): ReleaseGate {
+  let armed = true;
+  return {
+    ready: (input: Input): boolean => {
+      if (!armed && !pressed(input).down) armed = true;
+      return armed;
+    },
+    disarm: (): void => {
+      armed = false;
+    },
+  };
+}

package/src/web/run.ts

@@ -22,7 +22,13 @@ export async function loadBytes(path: string): Promise<Uint8Array> {
   return new Uint8Array(await response.arrayBuffer());
 }
 
-export async function run(options: WindowOptions, setup: Setup): Promise<void> {
+export interface RunOptions {
+  // "fixed" (default): a canvas of the window options' size. "window": the canvas fills the browser window and
+  // follows its size; gpu.aspect() reports the current shape.
+  fit?: "fixed" | "window";
+}
+
+export async function run(options: WindowOptions, setup: Setup, runOptions: RunOptions = {}): Promise<void> {
   if (!navigator.gpu) throw new Error("WebGPU is not available in this browser");
   const adapter = await navigator.gpu.requestAdapter();
   if (!adapter) throw new Error("No WebGPU adapter");
@@ -31,26 +37,43 @@ export async function run(options: WindowOptions, setup: Setup): Promise<void> {
   document.title = options.title;
   const canvas = document.createElement("canvas");
   const dpr = globalThis.devicePixelRatio ?? 1;
-  canvas.style.width = `${options.width}px`;
-  canvas.style.height = `${options.height}px`;
-  canvas.width = Math.round(options.width * dpr);
-  canvas.height = Math.round(options.height * dpr);
+  const fill = runOptions.fit === "window";
+  const cssSize = (): [number, number] => (fill ? [window.innerWidth, window.innerHeight] : [options.width, options.height]);
+  const sizeCanvas = (): void => {
+    const [w, h] = cssSize();
+    canvas.style.width = `${w}px`;
+    canvas.style.height = `${h}px`;
+    canvas.width = Math.max(1, Math.round(w * dpr));
+    canvas.height = Math.max(1, Math.round(h * dpr));
+  };
+  if (fill) {
+    document.body.style.margin = "0";
+    document.body.style.overflow = "hidden";
+    canvas.style.display = "block";
+  }
+  sizeCanvas();
   document.body.appendChild(canvas);
 
   const context = canvas.getContext("webgpu");
   if (!context) throw new Error("Could not create a WebGPU canvas context");
   const format = navigator.gpu.getPreferredCanvasFormat();
   context.configure({ device, format, alphaMode: "opaque" });
-  const depthTexture = device.createTexture({
-    size: [canvas.width, canvas.height],
-    format: "depth24plus",
-    usage: GPUTextureUsage.RENDER_ATTACHMENT,
-  });
+  const createDepth = (): GPUTexture =>
+    device.createTexture({ size: [canvas.width, canvas.height], format: "depth24plus", usage: GPUTextureUsage.RENDER_ATTACHMENT });
+  let depthTexture = createDepth();
+  if (fill) {
+    window.addEventListener("resize", (): void => {
+      sizeCanvas();
+      depthTexture.destroy();
+      depthTexture = createDepth();
+    });
+  }
 
   const pipelines: GPURenderPipeline[] = [];
   const buffers: GPUBuffer[] = [];
   const bindGroups: GPUBindGroup[] = [];
   const textureViews: GPUTextureView[] = [];
+  const textures: (GPUTexture | null)[] = [];
   const textureSmooth: boolean[] = [];
   // Nearest keeps pixel art crisp; linear suits fonts and photos.
   const nearest = device.createSampler({ magFilter: "nearest", minFilter: "nearest" });
@@ -67,6 +90,7 @@ export async function run(options: WindowOptions, setup: Setup): Promise<void> {
       usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
     });
     write(texture);
+    textures.push(texture);
     textureViews.push(texture.createView());
     textureSmooth.push(smooth);
     return { id: textureViews.length - 1, width, height };
@@ -144,6 +168,10 @@ export async function run(options: WindowOptions, setup: Setup): Promise<void> {
       bindGroups.push(device.createBindGroup({ layout: pipelines[pipeline].getBindGroupLayout(0), entries }));
       return bindGroups.length - 1;
     },
+    destroyTexture: (texture: Texture): void => {
+      textures[texture.id]?.destroy();
+      textures[texture.id] = null;
+    },
     createTexture: (width: number, height: number, rgba: Uint8Array, smooth: boolean): Texture =>
       uploadTexture(width, height, smooth, (texture) =>
         device.queue.writeTexture({ texture }, rgba as Uint8Array<ArrayBuffer>, { bytesPerRow: width * 4, rowsPerImage: height }, [width, height]),

package/templates/_base/main.ios.ts

@@ -10,7 +10,7 @@ let tick: Frame | null = null;
 
 export function init(_base: string): void {
   const platform = openLibraryPlatform(WINDOW);
-  tick = createSetup({ link: null, mash: null })(platform);
+  tick = createSetup({ link: null, mash: null, onProbe: (): void => {} })(platform);
 }
 
 // Returns false to ask the host to quit.

package/templates/_base/main.native.ts

@@ -1,7 +1,32 @@
 // Native entry for dotframe build macos|windows. The CLI stages it with the engine and compiles it with scriptc.
-// Online play is web only for now (native builds have no WebSocket).
+// DOTFRAME_ROOM plays online through a relay (DOTFRAME_RELAY, default the local relay), DOTFRAME_MASH scripts player
+// 1, and DOTFRAME_PROBE is where dotframe play --online --native reads this peer's checksums.
+import { writeFileSync } from "node:fs";
+import { connectRelayNative } from "dotframe/src/native/relay";
+import type { Frame } from "dotframe/src/gpu";
 import { run } from "dotframe/src/native/run";
+import type { Platform } from "dotframe/src/platform";
+import type { ProbeState } from "dotframe/src/probe";
 import { WINDOW } from "./src/game";
 import { createSetup } from "./src/setup";
 
-await run(WINDOW, createSetup({ link: null, mash: null }));
+const room = process.env.DOTFRAME_ROOM ?? "";
+const relay = process.env.DOTFRAME_RELAY ?? "ws://localhost:8787";
+const mash = process.env.DOTFRAME_MASH ?? "";
+const probeFile = process.env.DOTFRAME_PROBE ?? "";
+let written = -1;
+
+const setup = createSetup({
+  link: room === "" ? null : connectRelayNative(relay, room),
+  mash: mash === "" ? null : Number(mash),
+  onProbe: (state: ProbeState): void => {
+    // Every 30 confirmed frames is enough for the CLI, which compares every 30th checksum.
+    if (probeFile === "" || state.confirmed === 0 || state.confirmed - written < 30) return;
+    written = state.confirmed;
+    writeFileSync(probeFile, JSON.stringify(state));
+  },
+});
+
+// run() takes (platform: Platform) => Frame. Pass a function of exactly that type: scriptc cannot convert a function
+// value whose parameter type differs (setup takes the narrower SetupPlatform), though it can pass a wider argument.
+await run(WINDOW, (platform: Platform): Frame => setup(platform));

package/templates/_base/main.web.ts

@@ -1,3 +1,4 @@
+import { publishProbe } from "dotframe/src/probe-web";
 import { connectRelay } from "dotframe/src/relay-client";
 import { run } from "dotframe/src/web/run";
 import { WINDOW } from "./src/game";
@@ -10,4 +11,5 @@ const room = params.get("room");
 const relay = params.get("relay") ?? `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/relay`;
 const mash = params.get("mash");
 
-await run(WINDOW, createSetup({ link: room ? connectRelay(relay, room) : null, mash: mash === null ? null : Number(mash) }));
+// fit: "window" fills the browser window; the setup refits the canvas when its shape changes.
+await run(WINDOW, createSetup({ link: room ? connectRelay(relay, room) : null, mash: mash === null ? null : Number(mash), onProbe: publishProbe }), { fit: "window" });

package/templates/_base/src/setup.ts

@@ -6,6 +6,7 @@ import type { Frame, RenderGpu } from "dotframe/src/gpu";
 import type { Input } from "dotframe/src/input";
 import { Key, MouseButton } from "dotframe/src/input";
 import { createRollback, type RelayLink, type Rollback } from "dotframe/src/netplay";
+import { createMasher, createProbe, type ProbeState } from "dotframe/src/probe";
 import { checksum, createGame, type Game, keyInput, PLAYERS, POINTER_BIT, randomInput, render, restore, snapshot, step, WINDOW } from "./game";
 
 export interface SetupOptions {
@@ -13,15 +14,11 @@ export interface SetupOptions {
   link: RelayLink | null;
   // A seed makes player 1 a scripted masher (tests); null reads the keyboard and pointer.
   mash: number | null;
+  // Called after each step with the probe state: the web publishes it as globalThis.__dotframe, native builds write
+  // it to a file for dotframe play --native. Required, not optional: scriptc cannot represent an optional function.
+  onProbe: (state: ProbeState) => void;
 }
 
-// What `dotframe play --online` reads from each browser.
-interface Probe {
-  frame: number;
-  confirmed: number;
-  status: string;
-  sums: Record<number, number>;
-}
 
 const STEP = 1 / 60;
 // A full charge takes one second of holding.
@@ -38,24 +35,28 @@ export function createSetup(options: SetupOptions): (platform: SetupPlatform) =>
   return ({ gpu, input, audio }: SetupPlatform): Frame => {
     // The logical canvas keeps the game's aspect and grows to fill the screen: on a 2.16 phone the game area is
     // centered with extra width around it instead of being stretched.
-    const aspect = gpu.aspect();
-    const logicalWidth = Math.max(WINDOW.width, Math.round(WINDOW.height * aspect));
-    const logicalHeight = Math.max(WINDOW.height, Math.round(WINDOW.width / aspect));
-    const offsetX = (logicalWidth - WINDOW.width) / 2;
-    const offsetY = (logicalHeight - WINDOW.height) / 2;
-    const draw = createDraw2D(gpu, logicalWidth, logicalHeight);
+    // Recomputed when the surface changes shape (a resizable window, run(..., { fit: "window" }) on the web).
+    let aspect = 0;
+    let offsetX = 0;
+    let offsetY = 0;
+    const draw = createDraw2D(gpu, WINDOW.width, WINDOW.height);
+    const fit = (): void => {
+      const now = gpu.aspect();
+      if (now === aspect) return;
+      aspect = now;
+      const logicalWidth = Math.max(WINDOW.width, Math.round(WINDOW.height * aspect));
+      const logicalHeight = Math.max(WINDOW.height, Math.round(WINDOW.width / aspect));
+      offsetX = (logicalWidth - WINDOW.width) / 2;
+      offsetY = (logicalHeight - WINDOW.height) / 2;
+      draw.resize(logicalWidth, logicalHeight);
+    };
     // Online peers must start from the same state, so the seed is fixed there.
     const game: Game = createGame(options.link ? 1 : Math.floor(Math.random() * 1e9));
     let rollback: Rollback | null = null;
-    let mashState = options.mash ?? 0;
-    const nextRandom = (): number => {
-      mashState = (Math.imul(mashState, 1103515245) + 12345) >>> 0;
-      return mashState / 4294967296;
-    };
-    let mashed = 0;
-    let mashInput = 0;
-    const probe: Probe = { frame: 0, confirmed: 0, status: options.link ? "connecting" : "local", sums: {} };
-    (globalThis as { __dotframe?: Probe }).__dotframe = probe;
+    const mash = options.mash === null ? null : createMasher(options.mash, randomInput);
+    // What dotframe play --online reads from each browser.
+    const probe = createProbe();
+    let localFrame = 0;
     let simulated = -1;
     // Hold to charge, release to act: the pattern most mouse and touch games need.
     let charge = 0;
@@ -77,15 +78,9 @@ export function createSetup(options: SetupOptions): (platform: SetupPlatform) =>
         wasDown = down;
         const keys = [keyInput(input, [Key.A, Key.D, Key.W, Key.J]), keyInput(input, [Key.Left, Key.Right, Key.Up, Key.L])];
         if (released) keys[0] = keys[0] | POINTER_BIT;
-        if (options.mash !== null) {
-          // A new random input every 6 frames, like a mashing player.
-          if (mashed % 6 === 0) mashInput = randomInput(nextRandom);
-          keys[0] = mashInput;
-          mashed += 1;
-        }
+        if (mash) keys[0] = mash();
         const link = options.link;
         if (link) {
-          probe.status = link.status();
           if (!rollback && link.status() === "paired") {
             rollback = createRollback({
               sim: {
@@ -102,18 +97,18 @@ export function createSetup(options: SetupOptions): (platform: SetupPlatform) =>
             });
           }
           // Online, each browser controls its own player with player 1's keys.
-          if (rollback) {
-            rollback.tick(keys[0]);
-            probe.frame = rollback.stats().frame;
-            probe.confirmed = rollback.confirmedFrame();
-            for (let f = 30; f < probe.confirmed; f += 30) if (probe.sums[f] === undefined) probe.sums[f] = rollback.sumAt(f) ?? 0;
-          }
+          if (rollback) rollback.tick(keys[0]);
+          probe.update(rollback, link.status());
+          options.onProbe(probe.state);
         } else {
           step(game, keys.slice(0, PLAYERS));
-          probe.frame += 1;
+          localFrame += 1;
+          probe.update(null, "local", localFrame);
+          options.onProbe(probe.state);
         }
         simulated += STEP;
       }
+      fit();
       draw.begin();
       draw.translate(offsetX, offsetY);
       render(game, draw);

package/tools/gen-library-glue.ts

@@ -1,7 +1,8 @@
 // Generates what a scriptc library-mode host needs from an app spec and native/ffi.<target>.json:
 //   <out>/<name>.profile.json  library profile: the app's exports plus every df* function as a callback channel
 //   <out>/<name>_glue.c         C trampolines (scriptc calls callbacks as fn(ctx, args...)) and a registration function
-// Usage: bun tools/gen-library-glue.ts <app.json> <out-dir> [ffi manifest]
+// Usage: bun tools/gen-library-glue.ts <app.json> <out-dir> [ffi manifest] [used names, comma-separated]
+// With used names, only those functions become callbacks: library mode caps a library at 32.
 // app.json: { "name": "smash", "entry": "app.ts" (relative to app.json), "exports": [{ "export": "frame", "params": ["f64"], "returns": "bool" }] }
 import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { dirname, join, resolve } from "node:path";
@@ -25,7 +26,8 @@ interface AppSpec {
   exports: AppExport[];
 }
 
-const [appPath, outDir, manifestPath = join(import.meta.dir, "..", "native", "ffi.macos.json")] = process.argv.slice(2);
+const [appPath, outDir, manifestPath = join(import.meta.dir, "..", "native", "ffi.macos.json"), usedList = ""] = process.argv.slice(2);
+const used = usedList === "" ? null : new Set(usedList.split(","));
 const app = JSON.parse(readFileSync(appPath, "utf8")) as AppSpec;
 const manifest = JSON.parse(readFileSync(manifestPath, "utf8")) as { functions: ManifestFunction[] };
 
@@ -35,9 +37,13 @@ const CALLBACK_RETURNS = new Set(["f64", "bool", "u8", "u32", "i32", "void"]);
 // The host drives the event loop and shutdown itself, so these stay out of the 32-channel callback budget.
 const HOST_OWNED = new Set(["dfPoll", "dfClose"]);
 const usable = manifest.functions.filter(
-  (f) => !HOST_OWNED.has(f.name) && f.params.every((p) => CALLBACK_PARAMS.has(p)) && CALLBACK_RETURNS.has(f.returns),
+  (f) => !HOST_OWNED.has(f.name) && (!used || used.has(f.name)) && f.params.every((p) => CALLBACK_PARAMS.has(p)) && CALLBACK_RETURNS.has(f.returns),
 );
-const skipped = manifest.functions.filter((f) => !usable.includes(f) && !HOST_OWNED.has(f.name)).map((f) => f.name);
+const skipped = manifest.functions.filter((f) => !usable.includes(f) && !HOST_OWNED.has(f.name) && (!used || used.has(f.name))).map((f) => f.name);
+if (usable.length > 32) {
+  console.error(`${usable.length} callbacks exceed scriptc library mode's 32: ${usable.map((f) => f.name).join(", ")}`);
+  process.exit(1);
+}
 
 const cType: Record<string, string> = { f64: "double", bool: "uint8_t", u8: "uint8_t", u32: "uint32_t", i32: "int32_t", void: "void" };
 const cParams = (params: string[]): string[] =>