dotframe 0.1.0

package/templates/_base/sim.ts

@@ -0,0 +1,31 @@
+// The dotframe CLI contract: dotframe sim, snap, replay, and desync drive the game through this module.
+import { defineSim, type SimPlatform, type SimRun } from "dotframe/src/sim";
+import { checksum, createGame, PLAYERS, encode, type Game, randomInput, render, snapshot, state, step, WINDOW } from "./src/game";
+
+export default defineSim({
+  players: PLAYERS,
+  window: WINDOW,
+  options: {},
+  neutral: 0,
+  encode,
+  random: randomInput,
+  create: (_platform: SimPlatform): SimRun => {
+    let game: Game = createGame(1);
+    return {
+      ready: Promise.resolve(),
+      start: (seed: number): void => {
+        game = createGame(seed);
+      },
+      step: (inputs: number[]): void => step(game, inputs),
+      checksum: (): number => checksum(game),
+      state: (): unknown => state(game),
+      over: (): boolean => game.winner >= 0,
+      save: (): unknown => snapshot(game),
+      restore: (saved: unknown): void => {
+        Object.assign(game, snapshot(saved as Game));
+      },
+      inspect: (): unknown => game,
+      render: (draw) => render(game, draw),
+    };
+  },
+});

package/templates/blank/game.ts

@@ -0,0 +1,64 @@
+// The smallest dotframe game: two squares. All simulation state lives in Game and changes only in step(), so
+// dotframe can replay, snapshot, and roll it back. render() only reads it.
+import type { Draw2D } from "dotframe/src/draw2d";
+import type { Input } from "dotframe/src/input";
+
+export const WINDOW = { width: 960, height: 540, title: "__NAME__" };
+export const PLAYERS = 2;
+
+export interface Game {
+  frame: number;
+  players: { x: number; y: number }[];
+  // Never ends; set it to a player index to finish the match.
+  winner: number;
+}
+
+export function createGame(_seed: number): Game {
+  return { frame: 0, players: [{ x: 300, y: 270 }, { x: 660, y: 270 }], winner: -1 };
+}
+
+// Bits: left, right, up, action.
+export function encode(input: unknown): number {
+  const i = input as { left?: boolean; right?: boolean; up?: boolean; action?: boolean };
+  return (i.left ? 1 : 0) | (i.right ? 2 : 0) | (i.up ? 4 : 0) | (i.action ? 8 : 0);
+}
+
+export function keyInput(input: Input, keys: number[]): number {
+  return keys.reduce((bits: number, key: number, i: number): number => (input.down(key) ? bits | (1 << i) : bits), 0);
+}
+
+export function randomInput(next: () => number): number {
+  return Math.floor(next() * 16);
+}
+
+export function step(game: Game, inputs: number[]): void {
+  game.frame += 1;
+  game.players.forEach((p, i: number): void => {
+    const bits = inputs[i] ?? 0;
+    p.x = Math.max(20, Math.min(WINDOW.width - 20, p.x + (bits & 2 ? 4 : 0) - (bits & 1 ? 4 : 0)));
+    p.y = Math.max(20, Math.min(WINDOW.height - 20, p.y - (bits & 4 ? 4 : 0) + 1));
+  });
+}
+
+export function checksum(game: Game): number {
+  let h = 2166136261 ^ game.frame;
+  for (const p of game.players) h = Math.imul(Math.imul(h ^ p.x, 16777619) ^ p.y, 16777619);
+  return h >>> 0;
+}
+
+export function state(game: Game): unknown {
+  return game;
+}
+
+export function snapshot(game: Game): Game {
+  return structuredClone(game);
+}
+
+export function render(game: Game, draw: Draw2D): void {
+  draw.setFillStyle("#101018");
+  draw.fillRect(0, 0, WINDOW.width, WINDOW.height);
+  game.players.forEach((p, i: number): void => {
+    draw.setFillStyle(i === 0 ? "#ff5a5f" : "#3fa7ff");
+    draw.fillRect(p.x - 20, p.y - 20, 40, 40);
+  });
+}

package/templates/fighter/game.ts

@@ -0,0 +1,131 @@
+// A two-player box fighter. All simulation state lives in Game and changes only in step(), so dotframe can
+// replay, snapshot, and roll it back. render() only reads it.
+import type { Draw2D } from "dotframe/src/draw2d";
+import type { Input } from "dotframe/src/input";
+
+export const WINDOW = { width: 960, height: 540, title: "__NAME__" };
+export const PLAYERS = 2;
+
+const LEFT = 1;
+const RIGHT = 2;
+const JUMP = 4;
+const ATTACK = 8;
+const GROUND = 440;
+const GRAVITY = 0.8;
+const SPEED = 5;
+const JUMP_SPEED = 15;
+const STOCKS = 3;
+
+export interface Fighter {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  facing: number;
+  damage: number;
+  stocks: number;
+  cooldown: number;
+  stun: number;
+  held: number;
+}
+
+export interface Game {
+  frame: number;
+  seed: number;
+  fighters: Fighter[];
+  // Index of the winner, or -1 while the match runs.
+  winner: number;
+}
+
+const fighter = (x: number, facing: number): Fighter => ({ x, y: GROUND, vx: 0, vy: 0, facing, damage: 0, stocks: STOCKS, cooldown: 0, stun: 0, held: 0 });
+
+export function createGame(seed: number): Game {
+  return { frame: 0, seed: seed >>> 0, fighters: [fighter(300, 1), fighter(660, -1)], winner: -1 };
+}
+
+export function encode(input: unknown): number {
+  const i = input as { left?: boolean; right?: boolean; jump?: boolean; attack?: boolean };
+  return (i.left ? LEFT : 0) | (i.right ? RIGHT : 0) | (i.jump ? JUMP : 0) | (i.attack ? ATTACK : 0);
+}
+
+export function keyInput(input: Input, keys: number[]): number {
+  return keys.reduce((bits: number, key: number, i: number): number => (input.down(key) ? bits | (1 << i) : bits), 0);
+}
+
+export function randomInput(next: () => number): number {
+  return (next() < 0.4 ? LEFT : next() < 0.6 ? RIGHT : 0) | (next() < 0.15 ? JUMP : 0) | (next() < 0.3 ? ATTACK : 0);
+}
+
+export function step(game: Game, inputs: number[]): void {
+  if (game.winner >= 0) return;
+  game.frame += 1;
+  game.fighters.forEach((f: Fighter, i: number): void => {
+    const other = game.fighters[1 - i];
+    const bits = inputs[i] ?? 0;
+    const pressed = bits & ~f.held;
+    f.held = bits;
+    if (f.stun > 0) f.stun -= 1;
+    else {
+      const move = (bits & RIGHT ? 1 : 0) - (bits & LEFT ? 1 : 0);
+      f.vx = move * SPEED;
+      if (move !== 0) f.facing = move;
+      if (pressed & JUMP && f.y >= GROUND) f.vy = -JUMP_SPEED;
+      if (pressed & ATTACK && f.cooldown === 0) {
+        f.cooldown = 20;
+        const dx = other.x - f.x;
+        if (Math.sign(dx) === f.facing && Math.abs(dx) < 70 && Math.abs(other.y - f.y) < 60) {
+          other.damage += 8;
+          other.vx = f.facing * (4 + other.damage * 0.12);
+          other.vy = -(5 + other.damage * 0.08);
+          other.stun = 15;
+        }
+      }
+    }
+    if (f.cooldown > 0) f.cooldown -= 1;
+    f.vy += GRAVITY;
+    f.x += f.vx;
+    f.y = Math.min(GROUND, f.y + f.vy);
+    if (f.y >= GROUND) f.vy = 0;
+    if (f.x < -100 || f.x > WINDOW.width + 100) {
+      f.stocks -= 1;
+      Object.assign(f, { ...fighter(WINDOW.width / 2, f.facing), stocks: f.stocks });
+      if (f.stocks === 0) game.winner = 1 - i;
+    }
+  });
+}
+
+export function checksum(game: Game): number {
+  let h = 2166136261 ^ game.frame;
+  for (const f of game.fighters) for (const v of [f.x, f.y, f.vx, f.vy, f.damage, f.stocks]) h = Math.imul(h ^ Math.round(v * 100), 16777619);
+  return h >>> 0;
+}
+
+export function state(game: Game): unknown {
+  return { frame: game.frame, winner: game.winner, fighters: game.fighters.map(({ x, y, damage, stocks }) => ({ x: Math.round(x), y: Math.round(y), damage, stocks })) };
+}
+
+export function snapshot(game: Game): Game {
+  return structuredClone(game);
+}
+
+const COLORS = ["#ff5a5f", "#3fa7ff"];
+
+export function render(game: Game, draw: Draw2D): void {
+  draw.setFillStyle("#14121f");
+  draw.fillRect(0, 0, WINDOW.width, WINDOW.height);
+  draw.setFillStyle("#3a3654");
+  draw.fillRect(80, GROUND + 30, WINDOW.width - 160, 20);
+  game.fighters.forEach((f: Fighter, i: number): void => {
+    draw.setFillStyle(f.stun > 0 ? "#ffffff" : COLORS[i]);
+    draw.fillRect(f.x - 20, f.y - 30, 40, 60);
+    draw.setFillStyle("#ffffff");
+    draw.fillRect(f.x + f.facing * 14 - 4, f.y - 18, 8, 8);
+    // HUD: damage bar and stocks, no fonts needed.
+    const hx = i === 0 ? 40 : WINDOW.width - 240;
+    draw.setFillStyle("#2a2740");
+    draw.fillRect(hx, 30, 200, 12);
+    draw.setFillStyle(COLORS[i]);
+    draw.fillRect(hx, 30, Math.min(200, f.damage), 12);
+    for (let s = 0; s < f.stocks; s++) draw.fillRect(hx + s * 18, 50, 12, 12);
+  });
+}

package/templates/platformer/game.ts

@@ -0,0 +1,120 @@
+// A one-player platformer: run, jump, collect every coin. All simulation state lives in Game and changes only in
+// step(), so dotframe can replay, snapshot, and roll it back. render() only reads it.
+import type { Draw2D } from "dotframe/src/draw2d";
+import type { Input } from "dotframe/src/input";
+
+export const WINDOW = { width: 960, height: 540, title: "__NAME__" };
+export const PLAYERS = 1;
+
+const LEFT = 1;
+const RIGHT = 2;
+const JUMP = 4;
+const GRAVITY = 0.7;
+const SPEED = 4.5;
+const JUMP_SPEED = 13;
+const SIZE = 28;
+
+interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+const PLATFORMS: Rect[] = [
+  { x: 0, y: 500, w: 960, h: 40 },
+  { x: 140, y: 400, w: 160, h: 16 },
+  { x: 380, y: 320, w: 180, h: 16 },
+  { x: 640, y: 240, w: 160, h: 16 },
+  { x: 420, y: 150, w: 120, h: 16 },
+];
+
+export interface Game {
+  frame: number;
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  onGround: boolean;
+  held: number;
+  coins: { x: number; y: number; taken: boolean }[];
+  // 0 once every coin is taken, -1 while playing.
+  winner: number;
+}
+
+export function createGame(_seed: number): Game {
+  const coins = [
+    { x: 220, y: 370 },
+    { x: 470, y: 290 },
+    { x: 720, y: 210 },
+    { x: 480, y: 120 },
+    { x: 880, y: 470 },
+  ].map((c) => ({ ...c, taken: false }));
+  return { frame: 0, x: 60, y: 500 - SIZE, vx: 0, vy: 0, onGround: true, held: 0, coins, winner: -1 };
+}
+
+export function encode(input: unknown): number {
+  const i = input as { left?: boolean; right?: boolean; jump?: boolean };
+  return (i.left ? LEFT : 0) | (i.right ? RIGHT : 0) | (i.jump ? JUMP : 0);
+}
+
+export function keyInput(input: Input, keys: number[]): number {
+  return keys.reduce((bits: number, key: number, i: number): number => (input.down(key) ? bits | (1 << i) : bits), 0);
+}
+
+export function randomInput(next: () => number): number {
+  return (next() < 0.35 ? LEFT : next() < 0.75 ? RIGHT : 0) | (next() < 0.3 ? JUMP : 0);
+}
+
+export function step(game: Game, inputs: number[]): void {
+  if (game.winner >= 0) return;
+  game.frame += 1;
+  const bits = inputs[0] ?? 0;
+  const pressed = bits & ~game.held;
+  game.held = bits;
+  game.vx = ((bits & RIGHT ? 1 : 0) - (bits & LEFT ? 1 : 0)) * SPEED;
+  if (pressed & JUMP && game.onGround) game.vy = -JUMP_SPEED;
+  game.vy = Math.min(game.vy + GRAVITY, 16);
+  game.x = Math.max(0, Math.min(WINDOW.width - SIZE, game.x + game.vx));
+  const prevBottom = game.y + SIZE;
+  game.y += game.vy;
+  game.onGround = false;
+  // One-way platforms: land only when falling onto the top edge.
+  for (const p of PLATFORMS) {
+    const overX = game.x + SIZE > p.x && game.x < p.x + p.w;
+    if (overX && game.vy >= 0 && prevBottom <= p.y && game.y + SIZE >= p.y) {
+      game.y = p.y - SIZE;
+      game.vy = 0;
+      game.onGround = true;
+    }
+  }
+  for (const c of game.coins) {
+    if (!c.taken && Math.abs(game.x + SIZE / 2 - c.x) < 22 && Math.abs(game.y + SIZE / 2 - c.y) < 22) c.taken = true;
+  }
+  if (game.coins.every((c) => c.taken)) game.winner = 0;
+}
+
+export function checksum(game: Game): number {
+  let h = 2166136261 ^ game.frame;
+  for (const v of [game.x, game.y, game.vx, game.vy, ...game.coins.map((c) => (c.taken ? 1 : 0))]) h = Math.imul(h ^ Math.round(v * 100), 16777619);
+  return h >>> 0;
+}
+
+export function state(game: Game): unknown {
+  return { frame: game.frame, x: Math.round(game.x), y: Math.round(game.y), coins: game.coins.filter((c) => c.taken).length, of: game.coins.length, won: game.winner === 0 };
+}
+
+export function snapshot(game: Game): Game {
+  return structuredClone(game);
+}
+
+export function render(game: Game, draw: Draw2D): void {
+  draw.setFillStyle("#0f1a2b");
+  draw.fillRect(0, 0, WINDOW.width, WINDOW.height);
+  draw.setFillStyle("#3c5a7a");
+  for (const p of PLATFORMS) draw.fillRect(p.x, p.y, p.w, p.h);
+  draw.setFillStyle("#ffd23f");
+  for (const c of game.coins) if (!c.taken) draw.fillRect(c.x - 8, c.y - 8, 16, 16);
+  draw.setFillStyle(game.winner === 0 ? "#7cff8a" : "#ff5a5f");
+  draw.fillRect(game.x, game.y, SIZE, SIZE);
+}

package/tools/check-audio.ts

@@ -0,0 +1,57 @@
+// Verifies the mix written by examples/audio-check through SDL's disk audio driver.
+// Usage: bun tools/check-audio.ts <out.raw>   (F32LE, stereo, 48 kHz)
+const RATE = 48000;
+const WINDOW = RATE / 20;
+
+const bytes = new Uint8Array(await Bun.file(process.argv[2]).arrayBuffer());
+const samples = new Float32Array(bytes.buffer, 0, Math.floor(bytes.byteLength / 4));
+
+interface Window {
+  start: number;
+  rms: number;
+  crossings: number;
+}
+
+const windows: Window[] = [];
+for (let frame = 0; frame + WINDOW <= samples.length / 2; frame += WINDOW) {
+  let sum = 0;
+  let crossings = 0;
+  for (let k = 0; k < WINDOW; k++) {
+    const value = samples[(frame + k) * 2];
+    sum += value * value;
+    if (k > 0 && samples[(frame + k - 1) * 2] < 0 !== value < 0) crossings++;
+  }
+  windows.push({ start: frame / RATE, rms: Math.sqrt(sum / WINDOW), crossings });
+}
+
+const loud = (w: Window): boolean => w.rms > 0.003;
+// Segments of consecutive loud windows, in order. Device start latency shifts the timeline, so match by sequence.
+const segments: Window[][] = [];
+for (const w of windows) {
+  if (!loud(w)) continue;
+  const last = segments[segments.length - 1];
+  if (last && Math.abs(last[last.length - 1].start + WINDOW / RATE - w.start) < 1e-6) last.push(w);
+  else segments.push([w]);
+}
+
+const failures: string[] = [];
+const describe = (segment: Window[]): string =>
+  `${segment[0].start.toFixed(2)}s-${(segment[segment.length - 1].start + 0.05).toFixed(2)}s`;
+const steadyCrossings = (segment: Window[]): number[] => segment.slice(1, -1).map((w) => w.crossings);
+
+if (segments.length !== 3) failures.push(`expected 3 sound segments (hit, tone, music), got ${segments.length}`);
+const [hit, tone, music] = segments;
+if (hit && (hit.length < 4 || hit.length > 7)) failures.push(`hit lasted ${describe(hit)}, expected about 0.25s`);
+if (tone && !steadyCrossings(tone).every((c) => Math.abs(c - 88) <= 2)) {
+  failures.push(`tone is not 880 Hz: crossings ${steadyCrossings(tone).join(",")}`);
+}
+if (music && (music.length < 18 || music.length > 22)) failures.push(`music lasted ${describe(music)}, expected about 1s`);
+if (music && Math.abs(music[2].crossings - 26) > 2) failures.push(`music does not start on 262 Hz: ${music[2].crossings}`);
+if (windows.length > 0 && loud(windows[windows.length - 1])) failures.push("mix does not end in silence after stop");
+
+for (const segment of segments) console.log(`segment ${describe(segment)} peak rms ${Math.max(...segment.map((w) => w.rms)).toFixed(4)}`);
+if (failures.length > 0) {
+  for (const failure of failures) console.error(`FAIL ${failure}`);
+  process.exit(1);
+}
+console.log("audio mix OK: hit, 880 Hz tone, 262 Hz music, silence after stop");

package/tools/gen-library-glue.ts

@@ -0,0 +1,83 @@
+// 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]
+// 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";
+
+interface ManifestFunction {
+  name: string;
+  symbol: string;
+  params: string[];
+  returns: string;
+}
+
+interface AppExport {
+  export: string;
+  params: string[];
+  returns: string;
+}
+
+interface AppSpec {
+  name: string;
+  entry: string;
+  exports: AppExport[];
+}
+
+const [appPath, outDir, manifestPath = join(import.meta.dir, "..", "native", "ffi.macos.json")] = process.argv.slice(2);
+const app = JSON.parse(readFileSync(appPath, "utf8")) as AppSpec;
+const manifest = JSON.parse(readFileSync(manifestPath, "utf8")) as { functions: ManifestFunction[] };
+
+// Profile callbacks accept scalars and borrowed string/bytes parameters, and return scalars or void.
+const CALLBACK_PARAMS = new Set(["f64", "bool", "u8", "u32", "i32", "string", "bytes"]);
+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),
+);
+const skipped = manifest.functions.filter((f) => !usable.includes(f) && !HOST_OWNED.has(f.name)).map((f) => f.name);
+
+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[] =>
+  params.flatMap((p, i) => (p === "string" || p === "bytes" ? [`const uint8_t *a${i}`, `size_t a${i}_len`] : [`${cType[p]} a${i}`]));
+const cArgs = (params: string[]): string[] => params.flatMap((p, i) => (p === "string" || p === "bytes" ? [`a${i}`, `a${i}_len`] : [`a${i}`]));
+
+const prefix = `${app.name}_`;
+const profile = {
+  profile_format: 1,
+  name: app.name,
+  entry: resolve(dirname(appPath), app.entry),
+  emission: "llvm",
+  abi: {
+    prefix,
+    init_symbol: `${prefix}runtime_init`,
+    sink_register_symbol: `${prefix}sink`,
+    callback_register_symbol: `${prefix}callback`,
+  },
+  callbacks: usable.map((f) => ({ name: f.name, params: f.params, returns: f.returns })),
+  exports: app.exports.map((e) => ({ export: e.export, symbol: `${prefix}${e.export}`, params: e.params, returns: e.returns })),
+};
+
+let glue = `// Generated by dotframe tools/gen-library-glue.ts. Connects ${app.name}'s library callbacks to the dotframe native shim.
+#include <stddef.h>
+#include <stdint.h>
+
+int32_t ${prefix}callback(const char *name, void *fn, void *ctx);
+`;
+for (const f of usable) glue += `${cType[f.returns]} ${f.symbol}(${cParams(f.params).join(", ") || "void"});\n`;
+glue += "\n";
+for (const f of usable) {
+  const params = ["void *ctx", ...cParams(f.params)].join(", ");
+  const call = `${f.symbol}(${cArgs(f.params).join(", ")})`;
+  glue += `static ${cType[f.returns]} cb_${f.name}(${params}) {\n  (void)ctx;\n  ${f.returns === "void" ? `${call};` : `return ${call};`}\n}\n\n`;
+}
+glue += `// Registers every callback; returns the number that failed to register (0 on success).\nint32_t ${prefix}register_callbacks(void) {\n  int32_t failed = 0;\n`;
+for (const f of usable) glue += `  if (${prefix}callback("${f.name}", (void *)cb_${f.name}, NULL) != 0) failed += 1;\n`;
+glue += "  return failed;\n}\n";
+
+mkdirSync(outDir, { recursive: true });
+writeFileSync(join(outDir, `${app.name}.profile.json`), `${JSON.stringify(profile, null, 2)}\n`);
+writeFileSync(join(outDir, `${app.name}_glue.c`), glue);
+console.log(`${usable.length} callbacks${skipped.length ? `, skipped (unsupported in library mode): ${skipped.join(", ")}` : ""}`);

package/tools/make-sprite.ts

@@ -0,0 +1,92 @@
+// Generates assets/crafter.png: a 16x16 two-frame pixel-art character sheet (32x16), original art.
+import { deflateSync } from "node:zlib";
+
+const art = [
+  [
+    "................",
+    ".....oooooo.....",
+    "....oooooooo....",
+    "....ossssssso...",
+    "....osskskkso...",
+    "....ossssssso...",
+    ".....ossssso....",
+    "......bbbb......",
+    "....bbbbbbbb....",
+    "...sbbbbbbbbs...",
+    "...sbbbbbbbbs...",
+    "....bbbbbbbb....",
+    "....ddd..ddd....",
+    "....ddd..ddd....",
+    "....kkk..kkk....",
+    "................",
+  ],
+  [
+    "................",
+    ".....oooooo.....",
+    "....oooooooo....",
+    "....ossssssso...",
+    "....osskskkso...",
+    "....ossssssso...",
+    ".....ossssso....",
+    "......bbbb......",
+    "..s.bbbbbbbb.s..",
+    "...sbbbbbbbbs...",
+    "....bbbbbbbb....",
+    "....bbbbbbbb....",
+    "...ddd....ddd...",
+    "..ddd......ddd..",
+    "..kkk......kkk..",
+    "................",
+  ],
+];
+const palette: Record<string, number[]> = {
+  ".": [0, 0, 0, 0],
+  o: [249, 115, 22, 255],
+  s: [255, 214, 170, 255],
+  k: [20, 20, 30, 255],
+  b: [59, 130, 246, 255],
+  d: [40, 50, 90, 255],
+};
+const width = 32;
+const height = 16;
+const raw = new Uint8Array(height * (1 + width * 4));
+for (let y = 0; y < height; y++) {
+  raw[y * (1 + width * 4)] = 0;
+  for (let x = 0; x < width; x++) {
+    const frame = art[Math.floor(x / 16)];
+    const color = palette[frame[y][x % 16]];
+    raw.set(color, y * (1 + width * 4) + 1 + x * 4);
+  }
+}
+const crcTable = new Uint32Array(256).map((_, n) => {
+  let c = n;
+  for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+  return c >>> 0;
+});
+const crc = (bytes: Uint8Array): number => {
+  let c = 0xffffffff;
+  for (const b of bytes) c = crcTable[(c ^ b) & 0xff] ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+};
+const chunk = (type: string, data: Uint8Array): Uint8Array => {
+  const out = new Uint8Array(12 + data.length);
+  const view = new DataView(out.buffer);
+  view.setUint32(0, data.length);
+  out.set(new TextEncoder().encode(type), 4);
+  out.set(data, 8);
+  view.setUint32(8 + data.length, crc(out.subarray(4, 8 + data.length)));
+  return out;
+};
+const ihdr = new Uint8Array(13);
+const ihdrView = new DataView(ihdr.buffer);
+ihdrView.setUint32(0, width);
+ihdrView.setUint32(4, height);
+ihdr.set([8, 6, 0, 0, 0], 8);
+const png = new Uint8Array([
+  ...[137, 80, 78, 71, 13, 10, 26, 10],
+  ...chunk("IHDR", ihdr),
+  ...chunk("IDAT", deflateSync(raw)),
+  ...chunk("IEND", new Uint8Array(0)),
+]);
+await Bun.write(new URL("../assets/crafter.png", import.meta.url), png);
+console.log(`assets/crafter.png ${png.length} bytes`);