0.18.0 RELEASE NOTES
Fizlet 0.18.0
By Chris Cooley ↗ · · CHANGELOG.md ↗
fizlet/arcadecanvas fills its root on 2x/zoomed screens (width:100%;height:100%): the backing store isinnerWidth × dprwith 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.ArcadeDeftakeshud, 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. Leavinghudout (or passingarcadeHud()) 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.headerandnavkeep 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 armorbarwith alowstate), aim toggles (intentsaim-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 listsstats()keys and keeps a best on the device); on phones the pad with the aim toggles and counted keys. Values go throughfizlet/hud.- The preset contract (
ArcadeHud,HudRun,HudView) is exported, so a game can bring its own.readoutsis optional inArcadeDef(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 (
hudleft 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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 animfrom 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
Layerizefor a scene nobody could see.fizlet/slot's stage is nowcontent-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,Layerize10.6–11.4 ms per frame; after p50 16.7 ms, 24–32% dropped,Layerize1.6–1.7 ms (0.4.4: 1.5–1.8). Size:fizlet/slot1,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 acanvasbranch in its element helper). The harness now reportslayerizeMs, andtests/perf/budgets.jsonfails 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.)