45 lines
1.5 KiB
Markdown
45 lines
1.5 KiB
Markdown
# Quickstart: Combatant Row Declutter
|
|
|
|
**Feature**: 019-combatant-row-declutter
|
|
**Date**: 2026-03-06
|
|
|
|
## What This Feature Does
|
|
|
|
Replaces always-visible HP adjustment controls and AC input with compact, on-demand interactions:
|
|
1. **HP**: Click the current HP number to open a small popover for damage/healing.
|
|
2. **AC**: Click the shield+number display to edit AC inline.
|
|
|
|
## Key Files
|
|
|
|
| File | Role |
|
|
|------|------|
|
|
| `apps/web/src/components/combatant-row.tsx` | Main combatant row — modified to use new patterns |
|
|
| `apps/web/src/components/hp-adjust-popover.tsx` | New popover component for HP adjustment |
|
|
| `apps/web/src/components/quick-hp-input.tsx` | Removed — replaced by HP popover |
|
|
|
|
## How It Works
|
|
|
|
### HP Adjustment Flow
|
|
1. Current HP displays as a clickable, color-coded number (amber=bloodied, red=unconscious)
|
|
2. Click opens a popover with auto-focused numeric input + Damage/Heal buttons
|
|
3. Enter = apply damage (negative delta), Shift+Enter = apply healing (positive delta)
|
|
4. Popover dismisses on action, Escape, or click-outside
|
|
|
|
### AC Edit Flow
|
|
1. AC displays as static text: shield icon + number (or just shield if unset)
|
|
2. Click opens inline input (same pattern as editable name)
|
|
3. Enter/blur commits, Escape cancels
|
|
|
|
## Development
|
|
|
|
```bash
|
|
pnpm --filter web dev # Start dev server
|
|
pnpm check # Run full quality gate before committing
|
|
```
|
|
|
|
## Constraints
|
|
|
|
- Domain and application layers are unchanged
|
|
- `onAdjustHp` and `onSetAc` callback signatures unchanged
|
|
- Max HP input remains always-visible
|