Implement the 014-inline-hp-delta feature that replaces the damage/heal mode toggle with explicit action buttons and Enter-to-damage keyboard shortcut

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-05 23:52:03 +01:00
parent 97d3918cef
commit 56bced8481
8 changed files with 521 additions and 49 deletions

View File

@@ -0,0 +1,43 @@
# Quickstart: Inline HP Delta Input
## What changes
One file: `apps/web/src/components/quick-hp-input.tsx`
The QuickHpInput component is refactored from a mode-toggle design to an explicit-button design:
**Before** (011-quick-hp-input):
- Mode toggle button (Sword/Heart icon) + numeric input
- User switches mode, then types number, then presses Enter
- Mode state determines whether delta is positive or negative
**After** (014-inline-hp-delta):
- Numeric input + damage button (Sword) + heal button (Heart)
- Enter key always applies damage (negative delta)
- Damage button applies damage (negative delta)
- Heal button applies healing (positive delta)
- No mode state
## How to implement
1. Remove the `mode` state variable and the toggle button
2. Replace with two action buttons (damage + heal) alongside the input
3. Enter key handler calls `onAdjustHp(combatantId, -n)` (always damage)
4. Damage button calls `onAdjustHp(combatantId, -n)`
5. Heal button calls `onAdjustHp(combatantId, +n)`
6. Remove Tab key override (restore default browser behavior)
7. Clear input after any successful apply
## How to verify
```bash
pnpm check # Must pass (knip + format + lint + typecheck + test)
```
Manual verification:
1. Set a combatant's max HP to 20 (currentHp initializes to 20)
2. Type 7 in the delta input, press Enter → HP should show 13
3. Type 5 in the delta input, click heal button → HP should show 18
4. Type 3 in the delta input, click damage button → HP should show 15
5. Verify input clears after each action
6. Verify no mode toggle exists in the UI