DOM ENGINEV0.10.0FIZLET
Start

HUD V0.10.0

fizlet/hud

Change-only HUD bindings that never allocate in the steady state. A binding reads a number (or a flag) every render, compares it as a number after rounding to what the readout shows, and formats and writes only when that changed. Feeds and banners react to the event ring (engine.events), never to polling. Every write goes through engine.ledger, so destroy() gives the page back. Render phase only: no layout reads, nothing in the step. No visuals of its own: it binds to the game's markup (Board UI or anything else).

APISource ↗
fizlet/hud · GZIP1,320 B1.3 KB of a 1.5 KB budget

Measured on this build: minified and gzipped with everything it imports, the way npm run size checks the budget in CI.

MODULES · hosted on this site
import { hud } from "https://coded-dot-design.github.io/fizlet/dist/hud.js";
NPM · COMING SOON
npm install fizlet   # not published yet
import { hud } from "fizlet/hud";

API

Every export, with its doc comment, read from the published type declarations of v0.10.0.

Fmt type

How a number shows: int 12 · clock 3:05 (seconds) · rank #2 · pct 75% (0..1 in), or your own.

export type Fmt = "int" | "clock" | "rank" | "pct" | ((v: number) => string);

Src type

Where a number comes from: a getter, or a slot in a typed array ([state, 3]). A getter V8 doesn't inline boxes a fractional double on every call (16 bytes); a slot never does, so it is the safe choice for running fractions (clock, hp, heat). Whole numbers and booleans never box.

export type Src = (() => number) | readonly [ArrayLike<number>, number];

hud function

export declare function hud(engine: Engine, root?: ParentNode): {
    /** A number readout: written only when its shown value changes. */
    num: (t: Target, get: Src, fmt?: Fmt) => /*elided*/ any;
    /** A bar: `width` in whole percent (0..1 in), `aria-valuenow` on a progressbar, class `low` at or under `low`. */
    meter: (t: Target, get: Src, low?: number) => /*elided*/ any;
    /** A class that follows a condition. */
    flag: (t: Target, cls: string, get: () => boolean) => /*elided*/ any;
    /** A list of the last `rows` events of a type, newest first (`play` runs on the newest row). */
    feed: (list: Target, rows: number, on: string, line: (a: number, b: number) => string, play?: (row: HTMLElement) => void) => /*elided*/ any;
    /** Title and sub from an event; `play` (re)starts the game's own animation. */
    banner: (t: Target, on: string, text: (a: number, b: number) => readonly [string, string?], play?: (el: HTMLElement) => void) => /*elided*/ any;
    /** The render system (already added to the engine; `engine.remove(system)` unbinds everything). */
    system: System;
};

Hud type

export type Hud = ReturnType<typeof hud>;