DOM ENGINEV0.21.3FIZLET

0.18.0 RELEASE NOTES

Fizlet 0.18.0

By Chris Cooley ↗ · · CHANGELOG.md ↗

  • fizlet/arcade canvas fills its root on 2x/zoomed screens (width:100%;height:100%): the backing store is innerWidth × dpr with no CSS size, so it drew 1.5–2× too big and game art sat away from the page targets (owner report; from fizlet#60).
  • Arcade: an array of controls and scoreboards (hud), the first step of the plan to make DOM Battlefield / Blitz the standard game UI. ArcadeDef takes hud, a preset; each preset is its own export, so a game ships only the one it names (BOARD-UI.md §19).
    • arcadeHud({ header?, nav? }), the default: the card as it was. Leaving hud out (or passing arcadeHud()) renders it byte for byte: a browser test compares the scoreboard's markup at start, at game over and on a phone with a fixture captured from 0.17.0. header and nav keep only the keys named.
    • skirmishHud({ readouts, … }): Battlefield Blitz's HUD on the shell: a top bar with readouts in their formats (num, clock, rank, pct, an armor bar with a low state), aim toggles (intents aim-auto / aim-lock), action keys with count badges, fullscreen / sound / pause / exit; a feed and a banner from the event ring; pause / surrender / countdown / result overlays (the result lists stats() keys and keeps a best on the device); on phones the pad with the aim toggles and counted keys. Values go through fizlet/hud.
    • The preset contract (ArcadeHud, HudRun, HudView) is exported, so a game can bring its own. readouts is optional in ArcadeDef (the card's; skirmish has its own).
    • tests/arcade-hud.mjs (Chromium): the card byte for byte, picked keys, every skirmish piece, change-only (0 mutations on unchanged frames), Recall exact (after a surrender, mid-run, during the countdown), the phone pad, and zero allocation in the steady state: 0 minor GCs over 200k HUD writes for the card and for skirmish, unchanged and with every value changing (best of 3; the card's own path, which allocates when values change, shows 8, so the check can see it).
    • Size: a card game (hud left out) 17,622 B gzip, +311 B over 0.17.0's 17,311 for the preset contract and the header / nav choice (budget 17,408 → 17,920, its own line "fizlet/arcade (hud omitted)"). The whole module with skirmish: 21,634 B (budget 22,016): skirmish adds 4,012 B to a game that uses it, fizlet/hud (1,320 B) included.
  • Website: gallery #007, "orange red and gold leaves fall gently". Made by fe anim from the prompt (recipe fall, the spray scene; kernel + fx + slot): live 6,784 B · total 8,710 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #008, "red orange and gold turkey feathers fan out on hover". Made by fe anim from the prompt (recipe burst, the spray scene; kernel + fx + slot): live 6,791 B · total 8,717 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #009, "white steam rises gently off a warm pie". Made by fe anim from the prompt (recipe rise, the spray scene; kernel + fx + slot): live 6,786 B · total 8,712 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #010, "a cornucopia spills red orange and lime fruit on tap". Made by fe anim from the prompt (recipe burst, the spray scene; kernel + fx + slot): live 6,785 B · total 8,711 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #011, "orange and gold leaves settle on every heading". Made by fe anim from the prompt (recipe settle, a decor scene (settle) that reads the page's own headings and writes only through the ledger; kernel + board-page + slot): live 8,903 B · total 10,829 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #012, "orange embers rise from the harvest fire". Made by fe anim from the prompt (recipe rise, the spray scene; kernel + fx + slot): live 6,788 B · total 8,714 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #013, "snow settles on every heading". Made by fe anim from the prompt (recipe settle, a decor scene (settle) that reads the page's own headings and writes only through the ledger; kernel + board-page + slot): live 8,906 B · total 10,832 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #014, "red green and gold string lights twinkle on the nav". Made by fe anim from the prompt (recipe lights, a decor scene (lights) that reads the page's own buttons and writes only through the ledger; kernel + board-page + slot): live 8,674 B · total 10,600 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #015, "a gift box pops open into red and green confetti". Made by fe anim from the prompt (recipe burst, the spray scene; kernel + fx + slot): live 6,785 B · total 8,711 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #016, "a sleigh streaks across the top with gold sparkles". Made by fe anim from the prompt (recipe trail, the spray scene; kernel + fx + slot): live 6,806 B · total 8,732 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #017, "ornaments jingle when you hover a button". Made by fe anim from the prompt (recipe jingle, a decor scene (jingle) that reads the page's own buttons and writes only through the ledger; kernel + board-page + slot): live 8,702 B · total 10,628 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #018, "gold stars pop and twinkle where you tap". Made by fe anim from the prompt (recipe burst, the spray scene; kernel + fx + slot): live 6,779 B · total 8,705 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #019, "candy cane red and white sweeps every heading". Made by fe anim from the prompt (recipe sweep, a page scene that reads the page's own headings and writes only through the ledger; kernel + board-page + slot): live 8,923 B · total 10,849 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #020, "POW BAM ZAP comic bursts where you click". Made by fe anim from the prompt (recipe burst, the spray scene; kernel + fx + slot): live 6,813 B · total 8,739 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #021, "speed lines rush past every heading". Made by fe anim from the prompt (recipe dash, a decor scene (dash) that reads the page's own headings and writes only through the ledger; kernel + board-page + slot): live 8,883 B · total 10,809 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #022, "a halftone dot wave reveals every heading". Made by fe anim from the prompt (recipe halftone, a decor scene (halftone) that reads the page's own headings and writes only through the ledger; kernel + board-page + slot): live 8,765 B · total 10,691 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #023, "a red cape whooshes across the top". Made by fe anim from the prompt (recipe trail, the spray scene; kernel + fx + slot): live 6,784 B · total 8,710 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #024, "red laser eyes scan every heading". Made by fe anim from the prompt (recipe sweep, a page scene that reads the page's own headings and writes only through the ledger; kernel + board-page + slot): live 8,923 B · total 10,849 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #025, "a comic panel wipes across every heading". Made by fe anim from the prompt (recipe wipe, a decor scene (wipe) that reads the page's own headings and writes only through the ledger; kernel + board-page + slot): live 8,667 B · total 10,593 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #026, "a hero lands with a cyan shockwave where you tap". Made by fe anim from the prompt (recipe burst, the spray scene; kernel + fx + slot): live 6,766 B · total 8,692 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #027, "bat blaster: tap to shoot the swooping pixel bats before they fly off across the page". Made by fe anim from the prompt (recipe bats, a playable Halloween hero; kernel + fx + sprite + slot): live 9,671 B · total 11,597 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #028, "pumpkin smash: whack the jack-o-lanterns as they pop up, pixel goo bursts". Made by fe anim from the prompt (recipe smash, a playable Halloween hero; kernel + fx + sprite + slot): live 9,471 B · total 11,397 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #029, "pumpkin slice: swipe through the pumpkins as they arc up, halves and seeds fall". Made by fe anim from the prompt (recipe slice, a playable Halloween hero; kernel + fx + sprite + slot): live 9,700 B · total 11,626 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #030, "haunted page: a ghost drifts over the headings and makes the letters shiver". Made by fe anim from the prompt (recipe haunt, a playable Halloween hero that reads the page's own headings and writes only through the ledger; kernel + board-page + sprite + slot): live 9,541 B · total 11,467 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: gallery #031, "candy cauldron: tap to drop candy into a bubbling cauldron and watch it fizz". Made by fe anim from the prompt (recipe cauldron, a playable Halloween hero; kernel + fx + sprite + slot): live 9,638 B · total 11,564 B gzip (with the 1,926 B loader) on this build, loaded only near the viewport, never under reduced motion; settles to zero frames.
  • Website: the gallery theme filter follows the address. A #theme- link to the page you are on (or back) now filters too, not only on arrival (hashchange); it showed once there were two themes.
  • Perf: the demo's blasts are back to 60 fps at 4× CPU throttle (30 fps since 0.10.1). Bisected to 1337112 (the layers story in the home page hero): scrolled off screen, its scene kept about 50 composited 3D layers, and Chromium layerizes the whole document on every frame that repaints, so each blast frame paid 8.4–11.7 ms of Layerize for a scene nobody could see. fizlet/slot's stage is now content-visibility: auto (a scene off screen is skipped for style, layout, paint and layers), and so is the layers figure (its slider's eight 3D plates sit outside the stage). Measured (npm run perf, Chromium 153, 4× throttle, 10 s, a busy 4-core Xeon): before p50 33.3–33.4 ms, 47–61% dropped, Layerize 10.6–11.4 ms per frame; after p50 16.7 ms, 24–32% dropped, Layerize 1.6–1.7 ms (0.4.4: 1.5–1.8). Size: fizlet/slot 1,845 B gzip (budget 2,048); layers live chunk 9,720 B (≤ 9,728; the 13 B the slot adds are paid for in the scene, which now makes its fx canvas directly instead of through a canvas branch in its element helper). The harness now reports layerizeMs, and tests/perf/budgets.json fails the demo on this regression: p50 ≤ 25 ms, p95 ≤ 67, ≤ 45% dropped, layerizeMs ≤ 4. (#55, e78c501: shipped in 0.18.0; listed under 0.17.0 until 0.21.0.)

Every release