2.7 KiB
Data Model: UI Baseline
Feature: 010-ui-baseline | Date: 2026-03-05
Domain Entities (UNCHANGED)
This feature makes no domain changes. The existing domain types are consumed as-is by the UI layer.
Combatant (read-only from UI perspective)
| Field | Type | Notes |
|---|---|---|
| id | CombatantId (branded string) | Unique identifier |
| name | string | Display name, editable inline |
| initiative | number | undefined | Sort order, editable inline |
| maxHp | number | undefined | Maximum hit points |
| currentHp | number | undefined | Current hit points (present when maxHp is set) |
Encounter (read-only from UI perspective)
| Field | Type | Notes |
|---|---|---|
| combatants | readonly Combatant[] | Sorted by initiative descending |
| activeIndex | number | Index of current turn's combatant |
| roundNumber | number | Current round counter |
UI Component Model (NEW)
These are adapter-layer visual components — not domain entities.
CombatantRow
Renders a single combatant as a structured row with consistent column alignment.
| Column | Content | Behavior |
|---|---|---|
| Initiative | Number or placeholder | Text input with inputmode="numeric", no spinners, direct typing only |
| Name | Combatant name | Inline editable, click-to-edit. Truncates with ellipsis |
| HP | currentHp / maxHp | Text inputs with inputmode="numeric", no spinners, direct entry for both values |
| Actions | Remove icon button | Compact icon (X or trash), tooltip on hover |
Numeric field styling: All numeric inputs use type="text" with inputmode="numeric" to suppress browser spinners while showing the numeric keyboard on mobile. Initiative uses 6ch width (1–2 digit values typical). HP fields use 7ch width (supports up to 4-digit values like 1000). All use tabular numerals (font-variant-numeric: tabular-nums) for column alignment and centered text.
Visual states:
- Default row
- Active row (highlighted background/border for current turn)
- Editing state (inline input replaces display text)
ActionBar
Groups primary encounter controls.
| Element | Type | Behavior |
|---|---|---|
| Name input | Text input | Enter combatant name |
| Add button | Primary button | Adds combatant to encounter |
| Next Turn button | Secondary/outline button | Advances to next combatant |
EncounterHeader
Displays encounter status.
| Element | Content |
|---|---|
| Title | "Initiative Tracker" |
| Status | Round number and active combatant name |
EmptyState
Displayed when combatants list is empty.
| Element | Content |
|---|---|
| Message | "No combatants yet" or similar |
| Hint | Prompt to add first combatant |