76 lines
2.7 KiB
Markdown
76 lines
2.7 KiB
Markdown
# 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 |
|