hud
The screen is 1080 x 1440, portrait, and horizontal room is the scarce thing. So the HUD uses the corners and the tall axis, and the only element that reaches edge to edge is a line.
ui/hud — the fight instrumentation
The screen is 1080 x 1440, portrait, and horizontal room is the scarce thing. So the HUD uses the corners and the tall axis, and the only element that reaches edge to edge is a line.
┌──────────────────────────────┐
│ THE SLAG SAINT │ name, centred, between two bells
│ ──────────────────────────── │ the health line — with phase ticks
│ ◆◇◇ I BOUND 90% │ pips left, remainder right
│ POISE ───────── │ under it, narrower
│ │
│ E QUENCH │ centre, only while the core is open
│ │
│ ┌────────────────┐ │ the spoken line, lower third
│ │
│ EMBERWARD 120 │
│ ████████████░░░░ │ health, then stamina, stacked
│ ███████████████ MENU │ bottom-left vs bottom-right
└──────────────────────────────┘
Hud.build(view) takes a plain view table and returns a tree; it reads no
global state, which is what lets Screens.component drive it and a probe
render it with invented numbers.
Two things the HUD does beyond reporting numbers: the boss and player bars carry a chip — a ghost fill that chases the real value a beat later, so a big hit reads as a big hit — and the frame closes in with a blood vignette as the Emberward drops under 40%, which does more for tension than a number.
Hud.subtitle(line, lift) is its own screen, drawn above every card, so a
spoken line lands over an end card as readily as over the fight. lift raises
the band out of the lower third when a card with its own menu is up.
Legibility is not left to the scene: the HUD paints its own top and bottom gradients, because the fight is graded blue-and-steam at one end and ember-and-particulate at the other and half the readouts would otherwise disappear into it.
Scoped to this part · feeds back into the world's score.