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.

showValue reads the value out beside the bar, 12 / 40, tabular and small, as a target frame does; a fraction reads as the point above it, so a bar alive at 0.4 reads 1. color fills it in any CSS colour in place of the health tone, as a resource’s bar does. reserved draws an amount past value as a lighter band of the fill, such as the mana a cast holds back. The hit follows value plus reserved, so moving an amount into the band shows no hit, and spending the band flashes where it stood:

import { Bar } from "@spawnite/engine";

export function ManaReadout({ mana }: { mana: number }) {
    return (
        <Bar
            label="Mana"
            value={mana}
            maximum={100}
            reserved={20}
            color="#4aa3ff"
        />
    );
}

size sets how large it draws, height and width together, from the closed set BarSize: Small, Base by default, Large, and ExtraLarge for a boss’s bar across the top of the screen, each inside a phone’s width. It takes the enum’s text too, such as size="xl". A ResourceBar takes the same size, so a big health bar is <ResourceBar entity={boss} resource={healthResource} size={BarSize.ExtraLarge} />. A class in className goes over the size, such as w-full for a bar as wide as its panel. Roblox, Unity, Unreal and Godot size a bar in pixels; a step from a closed set keeps every bar on the same scale as the text beside it.

classNames names the bar’s parts, root, track, fill, reserved and value, as the theme page describes, for a bar whose fill should not follow the health token.

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 "@spawnite/engine";

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