Make invisible systems visible. If the player can't see it, it doesn't feel real.

Until now, game state has been invisible (console only). Today we add a HUD — a heads-up display that shows the player what's happening. No new mechanics. Just visibility.
Ami — Combat HUD

Display these values on screen at all times:

  • Unbanked XP — what you'll lose if you die
  • Banked XP — your safe progress
  • Risk Level — how dangerous the current area is
  • Current Tier — your progression stage

Color feedback: As risk increases, tint the screen slightly red. When in Camp, apply a slight green tint. The player should feel the difference without reading numbers.
Ida — Economy HUD

Display these values on screen at all times:

  • Karma — your total reputation
  • Debt — what you owe
  • Current Tier — your development stage
  • Active Job — what you're currently building

Color feedback: Negative karma applies a red tint. When a tier increase happens, show a brief gold flash. The player should feel progress and danger visually.

Add a simple HTML overlay for the HUD:

<div id="hud"></div>

Update the HUD every frame inside your animation loop:

function updateHUD() { const hud = document.getElementById('hud'); hud.innerHTML = ` Banked XP: ${gameState.bankedXP} Unbanked XP: ${gameState.unbankedXP} Risk: ${gameState.riskLevel.toFixed(2)} Tier: ${gameState.currentTier} `; }

Basic CSS positioning — pin the HUD to the top-left corner:

#hud { position: fixed; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.7); color: white; padding: 10px; font-family: monospace; font-size: 14px; white-space: pre-line; z-index: 100; }
  • Create HTML overlay div for HUD
  • Display 4–5 key state values
  • Update HUD every frame in animation loop
  • Add color tint feedback for state changes
  • Style HUD with basic CSS positioning
  • Test: when numbers change, player sees it immediately
    •
    Checkpoint

    State changes are immediately visible. The HUD makes the game feel real.

    No fancy UI framework. Plain HTML + CSS only. No health bars or complex UI widgets.

    HUD blocking the game view — keep it small and positioned in a corner. The game is the focus, not the HUD.

    Updating HUD too frequently (performance) — update once per frame in the animation loop, not on every state change.

    Not matching HUD values to actual state — if the HUD says one thing and the game does another, trust is broken.

    Overdesigning the HUD — plain text is fine. Clarity beats beauty at this stage.

    Ask: "Which number feels most important?" Their answer reveals what they think the core of their game is. If they say "XP" instead of "risk level," that's a design conversation worth having.