Bar

<Bar> fills a track to value out of maximum. When the value drops, the bar squashes and the lost piece flashes white before it drains, so the player sees both that a hit landed and how much it took. A rise shows no hit.

Its props are in Bar.

A screen reader reads the bar as a meter, because health moves both ways; a progress bar only moves forward.

import { Bar, Hud, Panel, Slot } from "@daniel-zarinski/engine";

export function HealthReadout({ health }: { health: number }) {
    return (
        <Hud>
            <Panel slot={Slot.TopLeft}>
                <Bar label="Health" value={health} maximum={100} />
            </Panel>
        </Hud>
    );
}