Counter

<Counter icon label value> is a HUD’s number with the icon that says what it is: coins, kills, a level, a wave. The number bumps when it changes, so a coin that lands is felt in the corner as well as heard. label is the accessible name, which a screen reader reads for the icon; it is not shown on screen, so the icon alone tells a sighted player what the number counts.

Its props are in Counter.

size sets the icon and the number together: sm, base, lg or xl, and base where it is left out. className goes on the row, the Counter’s outer element that holds the icon and the number, and classNames styles each of its parts apart: root, the row; icon; and value, the number, as the theme page describes; a color on the row reaches both.

value takes a number or a string, such as "3/10" for a score against its target, as the example’s round clock shows it. A count of the game’s own, such as the waves survived, lives where the step writes it: a trait, or a machine’s context. The game reads it there, with useTrait, and passes it to the Counter as value, so every page shows the room’s count. A count kept in a view’s state lives on one page alone.

packages/engine/test/outside/Purse.tsx

import { Hud, Panel, Counter, Slot, useWallet } from "@spawnite/engine";

export function Purse() {
    const coins = useWallet((state) => state.coins);

    return (
        <Hud>
            <Panel slot={Slot.TopRight}>
                <Counter icon="coins" label="Coins" value={coins} size="lg" />
            </Panel>
        </Hud>
    );
}