PokerHUD

The opponents and the pot have to live somewhere the player can read at a glance. PokerHUD paints them as a row of glass pills over the canvas — one per seat, one for the pot — and lights the seat whose turn it is.

What it does

PokerHUD is the opponent-and-pot overlay, drawn as plain positioned DOM over the game canvas — readable pixel-sized text, not 3D-scaled labels. It owns no game state: it reduces the poker event stream into a per-seat HUD model (PokerHUD.core) and writes each seat's name, stack-and-bet, last action, and state into its pill.

On pokerTable.strategies it creates one NPC pill per seat and adopts each name and color; the player pill always exists. From there it is a pure consumer. It follows the PACED poker.display.turn and poker.display.action — the TurnPacer's staggered playback, not the raw poker.currentTurn / poker.actionTaken burst — so the turn glow and last-action label track the opponents as they visibly act. poker.chips updates every stack, bet, and the pot pill. pokerTable.handStarted clears each seat's action / fold / winner / turn state; pokerTable.handEnded marks the winners green; pokerTable.gameOver dims everyone but the last seat standing.

The seat model and the pure functions that compute each pill's text and state class (statusLine, chipsLine, pillClassName, potText) live in PokerHUD.core — no bus, no DOM. The System owns the overlay elements, touches document only behind a typeof document guard (the same precedent as PokerInput touching window), and tears the overlay down on shutdown. It never reaches this.world.renderer — this is plain DOM chrome, and it is game UI, not the viz/debug panel.

State drives the styling, by precedence: the active seat gets a blue glow border, a winner tints green, a folded seat tints faint red, and an eliminated seat dims. Turn beats fold so the live prompt always reads as the live seat.

Use it in a scene

PokerHUD is a singleton per table. Seat it on a presentation entity alongside the other display systems; the director's events do the rest.

{
  "Presentation": {
    "components": {
      "TurnPacer": {},
      "PokerHUD": { "fontSize": 18 },
      "PokerTableCards": { "selectedBack": 1, "basePath": "/poker" }
    }
  }
}

The HUD needs no wiring of its own — PokerTableDirector + PokerBetting + TurnPacer already emit everything it reads. Drop it in and the pills appear.

Props

Events

PokerHUD emits nothing — it is a pure consumer (PokerHUDInputEvents):

Notes

• The seat models and pill nodes live on the System, never on the Component — so serialize() round-trips to just { fontSize }.
• Pills pin to fixed screen anchors that match the top-down seats: player bottom-center, npc0 left, npc1 top, npc2 right, pot near center-top. An extra seat id falls back near the top rather than stacking at the origin.
• It consumes the poker.display.* paced variants on purpose. Wire it to the raw poker.currentTurn and the glow flashes through instantly — you would never see the opponents act.
• Headless (no document), the seat model still tracks every event; only the pill creation is skipped, so the same System runs safely in a test or on the server.