@gtanczyk/diorama 0.0.0-stage → 0.1.0

package/app/web/pad.ts

@@ -0,0 +1,174 @@
+// Gamepads on the play page: read every frame through the Gamepad API, so a child can play with a pad alone.
+// One pad or six, they all steer the same hero; a press is reported once, on the frame it goes down.
+
+export type Point = [number, number];
+/** What a press means on the page, whatever pad and layout it came from. */
+export type PadButton = 'use' | 'back' | 'next' | 'prev' | 'start' | 'up' | 'down' | 'left' | 'right';
+
+/** Where the stick or d-pad points, one of eight ways, or null; and the presses that began this frame. */
+export type PadFrame = { dir: Point | null; pressed: PadButton[]; pads: number };
+
+// The standard layout (Xbox names): A 0, B 1, X 2, Y 3, LB 4, RB 5, LT 6, RT 7, select 8, start 9, d-pad 12-15.
+const STANDARD: Array<[number, PadButton]> = [[0, 'use'], [1, 'back'], [2, 'prev'], [3, 'next'], [4, 'prev'], [5, 'next'], [6, 'prev'], [7, 'next'], [9, 'start'], [12, 'up'], [13, 'down'], [14, 'left'], [15, 'right']];
+// Another pad the browser does not map: the face buttons come first, in no fixed order, so the two lowest both use (a
+// child presses whichever), the rest go through the bag (its last step is empty hands), and the highest start.
+const LOOSE: Array<[number, PadButton]> = [[0, 'use'], [1, 'use'], [2, 'next'], [3, 'next'], [4, 'next'], [5, 'prev'], [6, 'prev'], [7, 'next'], [8, 'prev'], [9, 'next'], [10, 'start'], [11, 'start']];
+const DEAD = 0.4;
+const IDLE_S = 25;
+
+const seen = new Map<number, Set<PadButton>>();
+
+/** Reads every connected pad once, by gamepad index; call it once a frame (presses are edges since the last call). */
+export function readEachPad(): Map<number, PadFrame> {
+  const out = new Map<number, PadFrame>();
+  for (const pad of navigator.getGamepads?.() ?? []) {
+    if (!pad?.connected) continue;
+    const down = new Set<PadButton>();
+    // The 8BitDo Micro (D-input or the Mac's MFi profile) is seen as a standard pad, its buttons by face position.
+    const micro = microButtons(pad);
+    const map = pad.mapping === 'standard' || micro ? STANDARD : LOOSE;
+    for (const [i, b] of map) if (micro ? micro[i] : pad.buttons[i]?.pressed) down.add(b);
+    // The left stick (the Micro has none), then the d-pad as buttons, then a d-pad reported as one "hat" axis.
+    let [x, y] = micro ? [0, 0] : [pad.axes[0] ?? 0, pad.axes[1] ?? 0];
+    if (Math.hypot(x, y) < DEAD) [x, y] = [0, 0];
+    if (down.has('left')) x = -1;
+    if (down.has('right')) x = 1;
+    if (down.has('up')) y = -1;
+    if (down.has('down')) y = 1;
+    const hat = pad.mapping === 'standard' || micro ? undefined : hatDir(pad.axes[9]);
+    if (hat) [x, y] = hat;
+    // Directions as presses too, for moving through answer cards.
+    if (x < -0.5) down.add('left');
+    if (x > 0.5) down.add('right');
+    if (y < -0.5) down.add('up');
+    if (y > 0.5) down.add('down');
+    const was = seen.get(pad.index) ?? new Set();
+    seen.set(pad.index, down);
+    out.set(pad.index, { dir: Math.hypot(x, y) < DEAD ? null : eighth(x, y), pressed: [...down].filter((b) => !was.has(b)), pads: 1 });
+  }
+  return out;
+}
+
+/** All pads (or only pad `only`) as one: their directions summed, their presses together. */
+export function readPads(only?: number): PadFrame {
+  const each = readEachPad();
+  const pressed = new Set<PadButton>();
+  let [dx, dy] = [0, 0];
+  for (const [index, f] of each) {
+    if (only !== undefined && index !== only) continue;
+    for (const b of f.pressed) pressed.add(b);
+    if (f.dir) [dx, dy] = [dx + f.dir[0], dy + f.dir[1]];
+  }
+  const dir: Point | null = Math.hypot(dx, dy) < DEAD ? null : eighth(dx, dy);
+  return { dir, pressed: [...pressed], pads: each.size };
+}
+
+// The 8BitDo Micro, as the gamedev.pl site projects it (apps/web/src/gamepad.ts): standard slot to raw button.
+const MICRO_ORDER = {
+  hid: [1, 0, 4, 3, 6, 7, 8, 9, 10, 11, 13, 14, -1, -1, -1, -1, 12],
+  mfi: [0, 1, 5, 6, 11, 13, 12, 14, 4, 3, -1, -1, 10, 7, 8, 9, 2],
+} as const;
+
+/** An 8BitDo Micro's buttons in the standard slots (A 0, B 1, ... d-pad 12-15); undefined for any other pad. */
+export function microButtons(pad: Pick<Gamepad, 'id' | 'mapping' | 'axes' | 'buttons'>): boolean[] | undefined {
+  if (pad.mapping === 'standard') return undefined;
+  if (!/^8bitdo micro(?: gamepad)?(?:$|[ (])/i.test(pad.id) && !/vendor:\s*2dc8\s+product:\s*9020/i.test(pad.id)) return undefined;
+  // D-input reports 10 axes and 16 buttons; the Mac's MFi profile no axes and 15 buttons.
+  const layout = pad.axes.length === 10 && pad.buttons.length === 16 ? 'hid' : pad.axes.length === 0 && pad.buttons.length === 15 ? 'mfi' : undefined;
+  if (!layout) return undefined;
+  const slots = MICRO_ORDER[layout].map((n) => n >= 0 && !!pad.buttons[n]?.pressed);
+  if (layout === 'hid') {
+    // Chrome on a Mac puts the cross on the first two axes; others use the hat.
+    const cross: number[] = [];
+    if (pad.axes[0] < -0.5) cross.push(14);
+    if (pad.axes[0] > 0.5) cross.push(15);
+    if (pad.axes[1] < -0.5) cross.push(12);
+    if (pad.axes[1] > 0.5) cross.push(13);
+    for (const n of cross.length ? cross : microHat(pad.axes[9])) slots[n] = true;
+  }
+  return slots;
+}
+
+/** A hat value as d-pad slots (12 up, 13 down, 14 left, 15 right); none when let go (the value is then outside -1..1). */
+function microHat(value: number | undefined): number[] {
+  if (value === undefined || !Number.isFinite(value) || value < -1.01 || value > 1.01) return [];
+  const step = (value + 1) * 3.5;
+  const n = Math.round(step);
+  if (Math.abs(step - n) > 0.08 || n < 0 || n > 7) return [];
+  return [[12], [12, 15], [15], [13, 15], [13], [13, 14], [14], [12, 14]][n];
+}
+
+/** The nearest of the eight ways (straight or diagonal), so a wobbly thumb does not turn the hero every frame. */
+function eighth(x: number, y: number): Point {
+  const a = Math.round(Math.atan2(y, x) / (Math.PI / 4)) * (Math.PI / 4);
+  return [Math.round(Math.cos(a)), Math.round(Math.sin(a))];
+}
+
+/** A hat axis: -1 up, then clockwise in steps of 2/7 to 1 up-left; anything above that is let go. */
+function hatDir(v: number | undefined): Point | null {
+  if (v === undefined || v > 1.05 || v < -1.05) return null;
+  const step = Math.round((v + 1) / (2 / 7));
+  return ([[0, -1], [1, -1], [1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1]] as Point[])[step] ?? null;
+}
+
+/** Colours for players 1 to 6, the same on the badge and the hand-over card; stickers on the pads can match. */
+export const PLAYER_COLOURS = ['#d9534f', '#3b7dd8', '#3fa34d', '#e8b923', '#9b59b6', '#e67e22'];
+
+/**
+ * Pads take turns with one hero (?pads=turns): only the pad whose turn it is steers. The turn passes to the next
+ * connected pad after a conversation ends, or after `seconds` from the player's first press (a player who never
+ * presses loses the turn after IDLE_S), never in the middle of a line or a talk.
+ */
+export class Turns {
+  /** The gamepad index whose turn it is; undefined until a pad is pressed. */
+  active: number | undefined;
+  /** When the turn began, and when its player first pressed (undefined until then). */
+  private given = 0;
+  private started: number | undefined;
+
+  constructor(private readonly seconds: number) {}
+
+  /** Connected pads, by index. */
+  connected(): number[] {
+    return [...(navigator.getGamepads?.() ?? [])].filter((p): p is Gamepad => !!p?.connected).map((p) => p.index).sort((a, b) => a - b);
+  }
+
+  /** Who plays now: keeps the turn while its pad is there, else the first pad that presses anything takes it. */
+  current(now: number): number | undefined {
+    const pads = this.connected();
+    if (this.active !== undefined && pads.includes(this.active)) return this.active;
+    this.active = undefined;
+    for (const p of navigator.getGamepads?.() ?? []) {
+      if (p?.connected && p.buttons.some((b) => b.pressed)) {
+        [this.active, this.given, this.started] = [p.index, now, now];
+        break;
+      }
+    }
+    return this.active;
+  }
+
+  /** The player whose turn it is pressed or steered. */
+  touched(now: number) {
+    this.started ??= now;
+  }
+
+  /** Whether the time is up (only counted while more than one pad is there). */
+  due(now: number): boolean {
+    if (this.active === undefined || this.connected().length < 2) return false;
+    return this.started === undefined ? now - this.given > IDLE_S * 1000 : now - this.started > this.seconds * 1000;
+  }
+
+  /** Passes the turn to the next connected pad; returns it when it changed. */
+  pass(now: number): number | undefined {
+    const pads = this.connected();
+    if (pads.length < 2 || this.active === undefined) return undefined;
+    const next = pads.find((i) => i > this.active!) ?? pads[0];
+    [this.active, this.given, this.started] = [next, now, undefined];
+    return next;
+  }
+
+  /** "Player N" is the pad's place among the connected ones, so it stays 1 to 6 whatever indexes the browser gave. */
+  player(index: number): number {
+    return this.connected().indexOf(index) + 1 || index + 1;
+  }
+}

package/app/web/reactions.ts

@@ -0,0 +1,79 @@
+import { ReactionTriggers, type ReactionEvent, type Reactions } from '../src/play/reactions.ts';
+import { personPx, type Geometry } from '../src/play/geometry.ts';
+import { hashSeed, seeded } from '../src/play/weather.ts';
+
+type Particle = { x: number; y: number; depth: number; vx: number; vy: number; size: number; life: number; age: number; angle: number; spin: number; kind: ReactionEvent['burst']['kind']; colour: string; alpha: number };
+type Rect = [number, number, number, number];
+const LIMIT = 96;
+
+/** Small pooled-in-count particles, drawn in the scene's depth order, below UI and weather. */
+export class ReactionFx {
+  readonly triggers: ReactionTriggers;
+  readonly particles: Particle[] = [];
+  readonly counts = { step: 0, enter: 0, interaction: 0 };
+  private rand: () => number;
+  private textures = new Map<string, HTMLCanvasElement>();
+  constructor(rules: Reactions, private readonly g: Geometry, key: string, private readonly reduced = false) {
+    this.rand = seeded(hashSeed(`reactions:${key}`));
+    this.triggers = new ReactionTriggers(rules, g, (e) => this.spawn(e));
+  }
+  reset() { this.particles.length = 0; this.triggers.reset(); }
+  private spawn(e: ReactionEvent) {
+    this.counts[e.trigger]++;
+    if (this.reduced) return;
+    const body = e.actor as { yaw?: number; phase?: number; figure?: { height?: number } };
+    const h = personPx(this.g, e.depth) * (e.trigger === 'interaction' ? 1 : (body.figure?.height ?? 1.62) / 1.62);
+    const scale = e.trigger === 'step' ? 0.85 : 1.15;
+    const strength = e.burst.strength;
+    const n = Math.ceil((e.burst.kind === 'dust' ? 5 : 7) * (0.5 + strength) * scale);
+    const foot = e.trigger === 'step' ? Math.cos(body.yaw ?? 0) * h * 0.035 * ((e.step ?? 0) % 2 ? -1 : 1) : 0;
+    for (let i = 0; i < n; i++) {
+      if (this.particles.length >= LIMIT) this.particles.shift();
+      const dust = e.burst.kind === 'dust';
+      this.particles.push({ x: e.x + foot + (this.rand() - .5) * h * .025, y: e.y, depth: e.depth,
+        vx: (this.rand() - .5) * h * (dust ? .22 : .28), vy: -h * (dust ? .045 + this.rand() * .045 : .12 + this.rand() * .17),
+        size: h * (dust ? .036 + this.rand() * .0225 : .008 + this.rand() * .01) * scale,
+        life: dust ? .65 + this.rand() * .3 : .45 + this.rand() * .3, age: 0,
+        angle: this.rand() * Math.PI, spin: (this.rand() - .5) * 7,
+        kind: e.burst.kind, colour: e.burst.colour, alpha: (dust ? .48 + .2 * strength : .65 + .25 * strength) });
+    }
+  }
+  update(dt: number) {
+    this.triggers.update(dt);
+    for (let i = this.particles.length - 1; i >= 0; i--) {
+      const p = this.particles[i];
+      p.age += dt;
+      if (p.age >= p.life) { this.particles.splice(i, 1); continue; }
+      p.x += p.vx * dt; p.y += p.vy * dt; p.angle += p.spin * dt;
+      if (p.kind !== 'dust' && p.kind !== 'sparks') p.vy += personPx(this.g, p.depth) * .5 * dt;
+    }
+    this.particles.sort((a, b) => a.depth - b.depth);
+  }
+  private blob(colour: string) {
+    let c = this.textures.get(colour);
+    if (c) return c;
+    c = Object.assign(document.createElement('canvas'), { width: 48, height: 48 });
+    const ctx = c.getContext('2d')!, grad = ctx.createRadialGradient(24, 24, 1, 24, 24, 24);
+    // A readable body with a soft edge: a tiny Gaussian vanished against detailed painted floors.
+    const shade = '#' + colour.slice(1).match(/../g)!.map((v) => Math.round(parseInt(v, 16) * .74).toString(16).padStart(2, '0')).join('');
+    grad.addColorStop(0, colour); grad.addColorStop(.4, colour);
+    grad.addColorStop(.7, shade + 'bb'); grad.addColorStop(1, shade + '00');
+    ctx.fillStyle = grad; ctx.fillRect(0, 0, 48, 48);
+    this.textures.set(colour, c); return c;
+  }
+  draw(ctx: CanvasRenderingContext2D, lo: number, hi: number, shift: (y: number) => [number, number], occlude: (r: Rect, depth: number) => void) {
+    for (const p of this.particles) {
+      if (p.depth < lo || p.depth >= hi) continue;
+      const t = p.age / p.life, [sx, sy] = shift(p.depth), x = p.x + sx, y = p.y + sy;
+      const r = p.size * (p.kind === 'dust' ? .6 + t : 1);
+      ctx.save(); ctx.translate(x, y); ctx.rotate(p.angle);
+      ctx.globalAlpha = p.alpha * Math.min(1, t * 16) * (1 - t * t);
+      ctx.fillStyle = p.colour;
+      if (p.kind === 'dust') ctx.drawImage(this.blob(p.colour), -r, -r * .6, 2 * r, 1.2 * r);
+      else if (p.kind === 'leaves') { ctx.beginPath(); ctx.ellipse(0, 0, r, r * .4, 0, 0, Math.PI * 2); ctx.fill(); }
+      else { ctx.beginPath(); ctx.ellipse(0, 0, r * .6, p.kind === 'splash' ? r : r * .6, 0, 0, Math.PI * 2); ctx.fill(); }
+      ctx.restore();
+      occlude([x - r * 1.3, y - r * 1.3, x + r * 1.3, y + r * 1.3], p.depth);
+    }
+  }
+}

package/app/web/sheet.ts

@@ -0,0 +1,36 @@
+// A walk-cycle (or talking) sheet of the 3D figure for `diorama sprites`: one facing, the frames in a grid on a
+// transparent canvas, each figure's feet at the same spot of its cell. Muse paints over it later.
+import { Figure3D, type ModelInfo } from './hero3d.ts';
+
+export type SheetAsk = { info: ModelInfo; base: string; yaw: number; cols: number; rows: number; width: number; height: number; feetAt: number; px: number; elevation: number;
+  /** Talking: the gesture (index into src/play/gestures.ts) for each cell, in order; cells past the end stay empty. */
+  gestures?: number[];
+  /** Walk cycle length, independent of spare grid cells. Omitted: fill the grid (legacy guides). */
+  frames?: number;
+  /** Append a standing pose after the walk; remaining grid cells stay transparent. */
+  stand?: boolean;
+  /** Plain grey clay with one key light instead of the painted textures. */
+  plain?: boolean };
+
+let figure: Promise<Figure3D> | undefined;
+const CLAY = { sky: 0xffffff, ground: 0x777777, ambient: 1.1, key: { dir: [-1, 2, 3] as [number, number, number], color: 0xffffff, intensity: 2.2 } };
+
+(window as unknown as { renderSheet: (a: SheetAsk) => Promise<string> }).renderSheet = async (a) => {
+  // UV textures already carry their painted detail; the guide's heavy painterly filter blurs faces.
+  figure ??= Figure3D.load(a.info, (f) => `${a.base}/${f}`, a.info.texture === 'model' ? 0 : 2);
+  const fig = await figure;
+  if (a.plain) fig.plain();
+  const out = document.createElement('canvas');
+  [out.width, out.height] = [a.width, a.height];
+  const ctx = out.getContext('2d')!;
+  const [cw, ch] = [a.width / a.cols, a.height / a.rows];
+  const n = a.frames ?? a.cols * a.rows;
+  const count = a.gestures?.length ?? n + (a.stand ? 1 : 0);
+  if (!Number.isInteger(n) || n < 1 || count > a.cols * a.rows) throw new Error('Sprite poses do not fit the sheet');
+  for (let i = 0; i < count; i++) {
+    const c = fig.draw({ phase: i < n ? i / n : 0, walking: !a.gestures && i < n, time: 0, gesture: a.gestures?.[i], yaw: a.yaw, elevation: a.elevation, px: a.px, light: a.plain ? CLAY : undefined });
+    const [x, y] = [(i % a.cols) * cw + cw / 2, Math.floor(i / a.cols) * ch + ch * a.feetAt];
+    ctx.drawImage(c, x - c.width / 2, y - c.height * fig.feetAt);
+  }
+  return out.toDataURL('image/png');
+};

package/app/web/synth.ts

@@ -0,0 +1,140 @@
+// Sound made on the spot for a world that has none of its own: a quiet music bed when the world has no music,
+// and rain and sea when a place has no ambience but its weather rains or its painting holds water. A player who
+// found a silent game asked three times where the music was; a missing or rejected take should never mean silence.
+
+/** A, then F, C, G: a slow, kind minor loop that sits under any story without telling it how to feel. */
+const CHORDS = [
+  [57, 60, 64],
+  [53, 57, 60],
+  [48, 52, 55],
+  [55, 59, 62],
+];
+const BAR = 4.8;
+const hz = (midi: number) => 440 * 2 ** ((midi - 69) / 12);
+
+export class Synth {
+  private noise: AudioBuffer;
+  private rain?: { gain: GainNode };
+  private sea?: { gain: GainNode };
+  private music?: { out: GainNode; timer: number; next: number; bar: number };
+
+  constructor(private ctx: AudioContext, private musicBus: AudioNode, private master: AudioNode) {
+    const n = ctx.sampleRate * 3;
+    this.noise = ctx.createBuffer(1, n, ctx.sampleRate);
+    const d = this.noise.getChannelData(0);
+    // Pink-ish noise (Paul Kellet's filter): softer than white, so rain is not a hiss.
+    let [b0, b1, b2] = [0, 0, 0];
+    for (let i = 0; i < n; i++) {
+      const w = Math.random() * 2 - 1;
+      b0 = 0.99765 * b0 + w * 0.099046;
+      b1 = 0.963 * b1 + w * 0.2965164;
+      b2 = 0.57 * b2 + w * 1.0526913;
+      d[i] = (b0 + b1 + b2 + w * 0.1848) * 0.18;
+    }
+  }
+
+  private noiseThrough(filters: BiquadFilterNode[], out: AudioNode): AudioBufferSourceNode {
+    const src = this.ctx.createBufferSource();
+    src.buffer = this.noise;
+    src.loop = true;
+    let node: AudioNode = src;
+    for (const f of filters) node = node.connect(f);
+    node.connect(out);
+    src.start(0, Math.random() * 2);
+    return src;
+  }
+
+  /** The place's own air: rain by how hard it falls, the sea's wash rolling in and out. 0 leaves each out. */
+  ambience(rain: number, sea: boolean) {
+    const now = this.ctx.currentTime;
+    if (rain > 0 && !this.rain) {
+      const gain = this.ctx.createGain();
+      gain.gain.value = 0;
+      gain.connect(this.master);
+      this.noiseThrough([new BiquadFilterNode(this.ctx, { type: 'highpass', frequency: 700 }), new BiquadFilterNode(this.ctx, { type: 'lowpass', frequency: 6500 })], gain);
+      this.rain = { gain };
+    }
+    this.rain?.gain.gain.setTargetAtTime(rain > 0 ? 0.025 + 0.05 * rain : 0, now, 0.8);
+    if (sea && !this.sea) {
+      const gain = this.ctx.createGain();
+      gain.gain.value = 0;
+      const swell = this.ctx.createGain();
+      swell.gain.value = 0.6;
+      // Waves: the wash swells and falls back every seven seconds or so.
+      const lfo = new OscillatorNode(this.ctx, { frequency: 0.14 });
+      const depth = new GainNode(this.ctx, { gain: 0.4 });
+      lfo.connect(depth).connect(swell.gain);
+      lfo.start();
+      swell.connect(gain).connect(this.master);
+      this.noiseThrough([new BiquadFilterNode(this.ctx, { type: 'lowpass', frequency: 520, Q: 0.4 })], swell);
+      this.sea = { gain };
+    }
+    this.sea?.gain.gain.setTargetAtTime(sea ? 0.12 : 0, now, 0.8);
+  }
+
+  /** The music bed: soft pad chords and a few music-box notes over them, scheduled a little ahead. */
+  startMusic() {
+    if (this.music) return;
+    const out = this.ctx.createGain();
+    out.gain.value = 0;
+    out.gain.setTargetAtTime(2, this.ctx.currentTime, 2);
+    // A short echo for the music box, so the notes hang in the air.
+    const echo = new DelayNode(this.ctx, { delayTime: 0.36 });
+    const back = new GainNode(this.ctx, { gain: 0.32 });
+    const wet = new GainNode(this.ctx, { gain: 0.4 });
+    echo.connect(back).connect(echo);
+    echo.connect(wet).connect(out);
+    out.connect(this.musicBus);
+    const music = { out, timer: 0, next: this.ctx.currentTime + 0.3, bar: 0 };
+    const box = (midi: number, at: number, level: number) => {
+      const o = new OscillatorNode(this.ctx, { type: 'sine', frequency: hz(midi) });
+      const o2 = new OscillatorNode(this.ctx, { type: 'sine', frequency: hz(midi) * 3.01 });
+      const g = new GainNode(this.ctx, { gain: 0 });
+      const g2 = new GainNode(this.ctx, { gain: 0.12 });
+      o.connect(g);
+      o2.connect(g2).connect(g);
+      g.connect(out);
+      g.connect(echo);
+      g.gain.setValueAtTime(0, at);
+      g.gain.linearRampToValueAtTime(level, at + 0.006);
+      g.gain.exponentialRampToValueAtTime(0.0001, at + 1.8);
+      o.start(at);
+      o2.start(at);
+      o.stop(at + 1.9);
+      o2.stop(at + 1.9);
+    };
+    const pad = (notes: number[], at: number) => {
+      const lp = new BiquadFilterNode(this.ctx, { type: 'lowpass', frequency: 900 });
+      const g = new GainNode(this.ctx, { gain: 0 });
+      lp.connect(g).connect(out);
+      g.gain.setValueAtTime(0, at);
+      g.gain.linearRampToValueAtTime(0.022, at + 1.6);
+      g.gain.setValueAtTime(0.022, at + BAR - 0.4);
+      g.gain.linearRampToValueAtTime(0, at + BAR + 1.4);
+      for (const n of [notes[0] - 12, ...notes]) for (const detune of [-6, 6]) {
+        const o = new OscillatorNode(this.ctx, { type: 'triangle', frequency: hz(n), detune });
+        o.connect(lp);
+        o.start(at);
+        o.stop(at + BAR + 1.5);
+      }
+    };
+    const tick = () => {
+      while (music.next < this.ctx.currentTime + 0.5) {
+        const at = music.next;
+        const chord = CHORDS[music.bar % CHORDS.length];
+        pad(chord, at);
+        // Eight slots a bar, about half of them a note: chord tones an octave or two up, now and then the ninth.
+        for (let k = 0; k < 8; k++) {
+          if (Math.random() > (k % 2 ? 0.25 : 0.55)) continue;
+          const tones = [...chord.map((n) => n + 12), chord[0] + 14, chord[0] + 24];
+          box(tones[Math.floor(Math.random() * tones.length)], at + (k * BAR) / 8 + Math.random() * 0.02, 0.05 + Math.random() * 0.03);
+        }
+        music.next += BAR;
+        music.bar++;
+      }
+    };
+    tick();
+    music.timer = window.setInterval(tick, 250);
+    this.music = music;
+  }
+}

package/app/web/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": { "lib": ["ES2023", "DOM", "DOM.Iterable"], "types": [] },
+  "include": ["."]
+}