Skip to content
Caps0.4.0
API reference

components/game-hud

Import

Section titled “Import”
Import
import * as api from "@fungi.computer/caps/components/game-hud";

Exports

Section titled “Exports”
Kind Export Description
type alias GameRegionName A region of the game layer, laid over a full-bleed world.
type alias HudTone Semantic bar tones; the theme supplies each colour.
type alias HudBarProps Props accepted by HudBar.
type alias HudPhase The light of the day a clock shows.
type alias PortraitMood How a portrait’s subject is doing.
type alias MinimapMarkKind What a minimap mark stands for; the theme colours each kind.
type alias MinimapMark One mark on the minimap, in whole grid cells.
type alias GameCardKind What a game card is for; each kind sets its size and voice.
type alias RecipePart One ingredient or product of a recipe.
constant GameLayer Positions HUD regions over the world; the world stays interactive between them.
constant GameRegion One named HUD region; only its children take pointer input.
constant GameScrim A dimmed stage for title, pause and end screens; it centres one card.
constant HudPlate A floating paper plate drawn in the sprites’ ink line.
constant HudBar A segmented resource bar: health, hunger, noise, hull.
constant HudChip A counted thing on the HUD: bandages, crowns, round shot.
constant HudClock The game clock: a phase mark, a label, an optional countdown and time.
constant Portrait A person in the portrait strip: their mark, name and what they are doing.
constant MinimapPlate A small chart of the world: a paper grid with named marks. Names are laid out so none overlap (layoutMinimapLabels); one with no room hides and shows on hover or focus.
constant GameCard A paper card: goals, letters, dialogue, pause and end screens.
constant HudKeys A row of keycaps: a dock across the bottom or a rail down the side.
constant OfferRow A shop or trade line: what, why, how much, and the act of buying it.
constant RecipeRow A workbench recipe: inputs (short ones marked) become the output.
function HudNumber() A readable number in the theme’s numeric font.
function GoalLine() A ticked or open line on a goal card.
function MadeWith() The quiet credit line on an end card.

GameRegionNametype alias

Section titled “GameRegionName”
Signature
type GameRegionName =
  "top-left" | "top-right" | "right" | "bottom" | "bottom-left" | "center";

A region of the game layer, laid over a full-bleed world.

HudTonetype alias

Section titled “HudTone”
Signature
type HudTone = "success" | "warning" | "error" | "info";

Semantic bar tones; the theme supplies each colour.

HudBarPropstype alias

Section titled “HudBarProps”
Signature
type HudBarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & object;

Props accepted by HudBar.

Type Declaration

Section titled “Type Declaration”
Name Type
label string
value number
max number
tone? HudTone
glyph? ReactNode

HudPhasetype alias

Section titled “HudPhase”
Signature
type HudPhase = "day" | "dusk" | "night" | "dawn";

The light of the day a clock shows.

PortraitMoodtype alias

Section titled “PortraitMood”
Signature
type PortraitMood = "ok" | "warn" | "bad";

How a portrait’s subject is doing.

MinimapMarkKindtype alias

Section titled “MinimapMarkKind”
Signature
type MinimapMarkKind = "self" | "ally" | "foe" | "place" | "goal";

What a minimap mark stands for; the theme colours each kind.

MinimapMarktype alias

Section titled “MinimapMark”
Signature
type MinimapMark = Readonly<{
  x: number;
  y: number;
  kind: MinimapMarkKind;
  label: string;
}>;

One mark on the minimap, in whole grid cells.

GameCardKindtype alias

Section titled “GameCardKind”
Signature
type GameCardKind = "goal" | "letter" | "dialogue" | "end" | "screen";

What a game card is for; each kind sets its size and voice.

RecipeParttype alias

Section titled “RecipePart”
Signature
type RecipePart = Readonly<{
  label: string;
  glyph: string;
  have?: number;
  need?: number;
  quantity?: number;
}>;

One ingredient or product of a recipe.

GameLayerconstant

Section titled “GameLayer”
Signature
const GameLayer: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & object & RefAttributes<HTMLDivElement>
>;

Positions HUD regions over the world; the world stays interactive between them.

GameRegionconstant

Section titled “GameRegion”
Signature
const GameRegion: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & object & RefAttributes<HTMLDivElement>
>;

One named HUD region; only its children take pointer input.

GameScrimconstant

Section titled “GameScrim”
Signature
const GameScrim: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>
>;

A dimmed stage for title, pause and end screens; it centres one card.

HudPlateconstant

Section titled “HudPlate”
Signature
const HudPlate: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & object & RefAttributes<HTMLDivElement>
>;

A floating paper plate drawn in the sprites’ ink line.

HudBarconstant

Section titled “HudBar”
Signature
const HudBar: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLDivElement>, "children"> &
    object &
    RefAttributes<HTMLDivElement>
>;

A segmented resource bar: health, hunger, noise, hull.

HudChipconstant

Section titled “HudChip”
Signature
const HudChip: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLSpanElement>, "children"> &
    object &
    RefAttributes<HTMLSpanElement>
>;

A counted thing on the HUD: bandages, crowns, round shot.

HudClockconstant

Section titled “HudClock”
Signature
const HudClock: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLDivElement>, "children"> &
    object &
    RefAttributes<HTMLDivElement>
>;

The game clock: a phase mark, a label, an optional countdown and time.

Portraitconstant

Section titled “Portrait”
Signature
const Portrait: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLDivElement>, "children"> &
    object &
    RefAttributes<HTMLDivElement>
>;

A person in the portrait strip: their mark, name and what they are doing.

MinimapPlateconstant

Section titled “MinimapPlate”
Signature
const MinimapPlate: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLElement>, "children"> &
    object &
    RefAttributes<HTMLElement>
>;

A small chart of the world: a paper grid with named marks. Names are laid out so none overlap (layoutMinimapLabels); one with no room hides and shows on hover or focus.

GameCardconstant

Section titled “GameCard”
Signature
const GameCard: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLElement>, "title"> &
    object &
    RefAttributes<HTMLElement>
>;

A paper card: goals, letters, dialogue, pause and end screens.

HudKeysconstant

Section titled “HudKeys”
Signature
const HudKeys: ForwardRefExoticComponent<
  HTMLAttributes<HTMLDivElement> & object & RefAttributes<HTMLDivElement>
>;

A row of keycaps: a dock across the bottom or a rail down the side.

OfferRowconstant

Section titled “OfferRow”
Signature
const OfferRow: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLDivElement>, "children"> &
    object &
    RefAttributes<HTMLDivElement>
>;

A shop or trade line: what, why, how much, and the act of buying it.

RecipeRowconstant

Section titled “RecipeRow”
Signature
const RecipeRow: ForwardRefExoticComponent<
  Omit<HTMLAttributes<HTMLDivElement>, "children"> &
    object &
    RefAttributes<HTMLDivElement>
>;

A workbench recipe: inputs (short ones marked) become the output.

HudNumber()function

Section titled “HudNumber()”
Signature
function HudNumber(__namedParameters): Element;

A readable number in the theme’s numeric font.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters { value: string | number; size?: "sm" | "md"; }
__namedParameters.value string | number
__namedParameters.size? "sm" | "md"

Returns

Section titled “Returns”

Element

GoalLine()function

Section titled “GoalLine()”
Signature
function GoalLine(__namedParameters): Element;

A ticked or open line on a goal card.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters { done: boolean; children: ReactNode; }
__namedParameters.done boolean
__namedParameters.children ReactNode

Returns

Section titled “Returns”

Element

MadeWith()function

Section titled “MadeWith()”
Signature
function MadeWith(__namedParameters): Element;

The quiet credit line on an end card.

Parameters

Section titled “Parameters”
Parameter Type
__namedParameters Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">

Returns

Section titled “Returns”

Element