Game HUD

TS

import { … } from "@fungi.computer/caps/components/game-hud";

Status plate

TSX

import {
  HudPlate,
  HudClock,
  HudBar,
  HudChip,
} from "@fungi.computer/caps/components/game-hud";

export default function StatusPlate() {
  return (
    <div data-theme="field-guide">
      <div data-theme="paper" className="w-72">
        <HudPlate>
          <HudClock label="Night 1 of 5" phase="night" time="02:40" />
          <HudBar label="Health" value={72} max={100} tone="success" />
          <HudBar label="Hunger" value={22} max={100} tone="warning" />
          <div className="caps-hud-chips">
            <HudChip label="Bandages" value={2} />
            <HudChip label="Boards" value={4} />
          </div>
        </HudPlate>
      </div>
    </div>
  );
}

Goal card

TSX

import { GameCard, GoalLine } from "@fungi.computer/caps/components/game-hud";

export default function GoalCard() {
  return (
    <div data-theme="field-guide">
      <div data-theme="paper" className="w-72">
        <GameCard kind="goal" kicker="Goals" title="First evening">
          <GoalLine done>Fell the marked grove</GoalLine>
          <GoalLine done={false}>Build a brew station</GoalLine>
          <GoalLine done={false}>Brew herbal ale</GoalLine>
        </GameCard>
      </div>
    </div>
  );
}

Minimap and portraits

TSX

import {
  HudPlate,
  MinimapPlate,
  Portrait,
} from "@fungi.computer/caps/components/game-hud";

export default function MinimapAndPortraits() {
  return (
    <div data-theme="field-guide">
      <div data-theme="paper" className="flex flex-wrap gap-3">
        <MinimapPlate
          label="Sea chart"
          columns={12}
          rows={7}
          marks={[
            { x: 1, y: 3, kind: "place", label: "Saltwick" },
            { x: 10, y: 3, kind: "goal", label: "Merehaven" },
            { x: 4, y: 4, kind: "self", label: "Mosswake" },
          ]}
        />
        <HudPlate>
          <Portrait name="Rowan" status="Felling the oak" />
          <Portrait name="Sedge" status="Low on food" mood="warn" />
        </HudPlate>
      </div>
    </div>
  );
}

Props

HudBarProps

Prop	Type	Description
label	string
value	number
max	number
tone?	"success" | "warning" | "error" | "info"
glyph?	ReactNode

• labelstring
• valuenumber
• maxnumber
• tone?"success" | "warning" | "error" | "info"
• glyph?ReactNode

Full types: API reference.