components/game-hud

Type Aliases

GameAccent

GameAccent = "moss" | "ember" | "tide"

The accent a game tints the shared game theme with.

---

GameThemeProps

GameThemeProps = Readonly<{ data-theme: "field-guide" | "field-guide-night"; data-game-accent: GameAccent; }>

Theme attributes for any element that hosts game HUD pieces.

---

GameRegionName

GameRegionName = "top-left" | "top-right" | "right" | "bottom" | "bottom-left" | "center"

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

---

HudTone

HudTone = "success" | "warning" | "error" | "info"

Semantic bar tones; the theme supplies each colour.

---

HudBarProps

HudBarProps = Omit<HTMLAttributes<HTMLDivElement>>, "children"> > & object

Props accepted by HudBar.

Type Declaration

label

label: string

value

value: number

max

max: number

tone?

optional tone?: HudTone

glyph?

optional glyph?: ReactNode

---

HudPhase

HudPhase = "day" | "dusk" | "night" | "dawn"

The light of the day a clock shows.

---

PortraitMood

PortraitMood = "ok" | "warn" | "bad"

How a portrait’s subject is doing.

---

MinimapMarkKind

MinimapMarkKind = "self" | "ally" | "foe" | "place" | "goal"

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

---

MinimapMark

MinimapMark = Readonly<{ x: number; y: number; kind: MinimapMarkKind; label: string; }>

One mark on the minimap, in whole grid cells.

---

GameCardKind

GameCardKind = "goal" | "letter" | "dialogue" | "end" | "screen"

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

---

RecipePart

RecipePart = Readonly<{ label: string; glyph: string; have?: number; need?: number; quantity?: number; }>

One ingredient or product of a recipe.

Variables

GameLayer

const GameLayer: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & RefAttributes<HTMLDivElement>>>>

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

---

GameRegion

const GameRegion: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & object & RefAttributes<HTMLDivElement>>>>

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

---

GameScrim

const GameScrim: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & RefAttributes<HTMLDivElement>>>>

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

---

HudPlate

const HudPlate: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & object & RefAttributes<HTMLDivElement>>>>

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

---

HudBar

const HudBar: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>>, "children"> > & object & RefAttributes<HTMLDivElement>>>>

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

---

HudChip

const HudChip: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>>, "children"> > & object & RefAttributes<HTMLSpanElement>>>>

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

---

HudClock

const HudClock: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>>, "children"> > & object & RefAttributes<HTMLDivElement>>>>

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

---

Portrait

const Portrait: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>>, "children"> > & object & RefAttributes<HTMLDivElement>>>>

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

---

MinimapPlate

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.

---

GameCard

const GameCard: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>>, "title"> > & object & RefAttributes<HTMLElement>>>>

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

---

HudKeys

const HudKeys: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & object & RefAttributes<HTMLDivElement>>>>

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

---

OfferRow

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.

---

RecipeRow

const RecipeRow: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>>, "children"> > & object & RefAttributes<HTMLDivElement>>>>

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

Functions

gameThemeProps()

gameThemeProps(accent?, night?): GameThemeProps

The one game theme: field-guide paper, by day or by night.

Parameters

accent?

GameAccent = "moss"

night?

boolean = false

Returns

GameThemeProps

---

HudNumber()

HudNumber(__namedParameters): Element

A readable number in the theme’s numeric font.

Parameters

__namedParameters

value

string | number

size?

"sm" | "md" = "sm"

Returns

Element

---

GoalLine()

GoalLine(__namedParameters): Element

A ticked or open line on a goal card.

Parameters

__namedParameters

done

boolean

children

ReactNode

Returns

Element

---

MadeWith()

MadeWith(__namedParameters): Element

The quiet credit line on an end card.

Parameters

__namedParameters

Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children">

Returns

Element