Client Side Systems
This page starts at the live top-level browser container (#hexmap-container) and drills down through the game shell regions used for map, chat, view, portraits, merchant, and character workflows.
Top-Level Container Hierarchy
| Level | Container / Selector | Role | Key Responsibility |
|---|---|---|---|
| 0 | div#hexmap-container.hexmap-container[data-hexmap-v2] | Top-level browser gameplay container mounted by the HexMap page. | Owns the full game shell instance and panel state. |
| 1 | div.game-shell[data-game-shell] | Primary shell for tab navigation and workspace layout. | Splits UI into tab strip and workspace regions. |
| 2 | div.game-shell__tabs | Top navigation tabs that switch active gameplay panels. | Map, Chat, View, NPC Portraits, Merchant, Character. |
| 2 | div.game-shell__workspace | Main runtime workspace for interaction rails and panel content. | Contains action rail and active panel surface. |
| 3 | aside#hexmap-action-rail.game-shell__action-rail | Always-available actor action rail (turn/actions/time/party). | Action categories, quick actions, clocks, party rail. |
| 3 | div.game-shell__content | Tabpanel host that renders the active gameplay surface. | Holds map/chat/view/portraits/merchant/character panels. |
Tabbed Client Panels
| Tab | Panel | Primary Container | Purpose |
|---|---|---|---|
| game-tab-map | game-panel-map | div#hexmap-canvas-container + HUD overlays + turn/combat controls | Hex rendering and map interaction runtime. |
| game-tab-chat | game-panel-chat | div#hexmap-chat (room/party/gm/system sessions, channel tabs, log, input) | Primary gameplay chat interface and channel switching surface. |
| game-tab-view | game-panel-view | div#room-view-panel (scene gallery and generated room imagery) | Visual scene review and generated room view media. |
| game-tab-portraits | game-panel-portraits | div#npc-portraits-panel (room cast portraits grid) | NPC portrait browser for current room cast. |
| game-tab-merchant | game-panel-merchant | div#merchant-trade-panel (merchant identity, stock, sell inventory) | Merchant trading workflow and transaction interface. |
| game-tab-character | game-panel-character | div.game-shell__character-panel (character/spells/inventory/quests sidebar) | Character management and sheet-driven player tooling. |
One Level Deeper: Container Child Selectors
| Parent Container | Immediate Child Selectors | What This Layer Owns |
|---|---|---|
| div#hexmap-container.hexmap-container[data-hexmap-v2] | div.game-shell[data-game-shell] | HexMap behavior mounts one shell root and attaches launch context. |
| div.game-shell[data-game-shell] | div.game-shell__tabs + div.game-shell__workspace | Shell splits navigation strip from active runtime workspace. |
| div.game-shell__tabs | #game-tab-map, #game-tab-chat, #game-tab-view, #game-tab-portraits, #game-tab-merchant, #game-tab-character, #fullscreen-toggle | Tab buttons and fullscreen control govern panel activation. |
| div.game-shell__workspace | aside#hexmap-action-rail + div.game-shell__content | Workspace keeps action rail persistent while content panels switch. |
| aside#hexmap-action-rail.game-shell__action-rail | .action-rail__header, .action-rail__clocks, #action-rail-categories, .action-rail__panel, .game-shell__party-rail | Actor context, quick actions, clocks, and party rail are grouped in one control rail. |
| div.game-shell__content | #game-panel-map, #game-panel-chat, #game-panel-view, #game-panel-portraits, #game-panel-merchant, #game-panel-character | Tabpanel host keeps all feature surfaces mounted and toggles active state. |
One Level Deeper: Tab Panel Internals
| Panel | First Child Container Path | Key Internal Selectors | Functional Slice |
|---|---|---|---|
| #game-panel-map | div.game-shell__map-panel > div.hexmap-stage > #hexmap-canvas-container | .hexmap-hud-overlays, #narration-overlay, #game-phase-indicator, #turn-hud | Map canvas runtime, overlays, and combat/turn HUD controls. |
| #game-panel-chat | div.game-shell__chat-panel > #hexmap-chat | .hexmap-chat__header, #hexmap-chat-body, #chat-session-tabs, #chat-channel-tabs, #chat-log, #chat-form | Room/party/GM/system chat sessions, transcript, and message input surface. |
| #game-panel-view | div.game-shell__view-panel > #room-view-panel | .room-view-panel__header, #room-view-gallery, #room-view-placeholder, #room-view-card-template | Generated scene gallery and room visual artifacts. |
| #game-panel-portraits | div.game-shell__view-panel > #npc-portraits-panel | .room-view-panel__header, #npc-portraits-grid, #npc-portraits-placeholder | Room cast portrait cards and portrait-state placeholders. |
| #game-panel-merchant | div.game-shell__view-panel > #merchant-trade-panel | .merchant-trade-panel__header, #merchant-panel-status, #merchant-panel-grid, #merchant-stock-list, #merchant-sell-list, #merchant-panel-empty | Merchant identity, inventory buy/sell lists, and transaction status. |
| #game-panel-character | div.game-shell__character-panel > div.game-layout__sidebar | #sidebar-tabs, #sidebar-panel-character, #sidebar-panel-spells-feats, #sidebar-panel-inventory, #sidebar-panel-quests | Character tab stack for sheet, spells/feats, inventory, and quest management. |