44 lines
1.5 KiB
Markdown
44 lines
1.5 KiB
Markdown
# 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
|