6.6 KiB
Tasks: Inline HP Delta Input
Input: Design documents from /specs/014-inline-hp-delta/
Prerequisites: plan.md, spec.md, research.md, data-model.md, quickstart.md
Tests: Tests are included because domain tests already exist and the spec has testable acceptance scenarios.
Organization: Tasks are grouped by user story. US1 and US2 share the same component refactor but have distinct acceptance criteria.
Format: [ID] [P?] [Story] Description
- [P]: Can run in parallel (different files, no dependencies)
- [Story]: Which user story this task belongs to (e.g., US1, US2, US3)
- Include exact file paths in descriptions
Phase 1: Setup
Purpose: No new project setup needed. This feature modifies a single existing component.
- T001 Verify existing
pnpm checkpasses before starting work (run from repo root)
Phase 2: Foundational
Purpose: No foundational changes needed. The existing adjustHp domain function, adjustHpUseCase, and useEncounter hook all support the new UI without modification.
Checkpoint: No blocking prerequisites -- proceed directly to user story implementation.
Phase 3: User Story 1 - Apply Damage via Enter Key (Priority: P1) MVP
Goal: Users type a number and press Enter to apply damage. Input clears after applying.
Independent Test: Set a combatant to 20/20 HP, type 7, press Enter, verify HP shows 13 and input is cleared.
Tests for User Story 1
- T002 [US1] Write acceptance tests for Enter-to-damage behavior in
packages/domain/src/__tests__/adjust-hp.test.ts-- verify existing domain tests cover: damage subtraction, clamp to 0, zero rejection. Add any missing scenarios from spec (US1 scenarios 1-4).
Implementation for User Story 1
- T003 [US1] Refactor
apps/web/src/components/quick-hp-input.tsx: removeModetype, removemodestate variable, remove mode toggle button, remove Tab key override for mode switching. Keep the numeric input and thevaluestate variable. - T004 [US1] Update Enter key handler in
apps/web/src/components/quick-hp-input.tsx: when user presses Enter with a valid positive integer, callonAdjustHp(combatantId, -n)(always damage), then clear input. Reject zero, empty, and non-numeric values. Checkpoint: At this point, Enter-to-damage works. No heal capability yet (added in US2). (Escape key verification merged into T009.)
Phase 4: User Story 2 - Apply Damage or Heal via Explicit Buttons (Priority: P1)
Goal: Small damage and heal buttons next to the input allow explicit action choice.
Independent Test: Set a combatant to 10/20 HP, type 5, click heal button, verify HP shows 15 and input clears.
Implementation for User Story 2
- T006 [US2] Add damage button (Sword icon, red styling) to
apps/web/src/components/quick-hp-input.tsxthat reads the current input value and callsonAdjustHp(combatantId, -n), then clears input. Button is disabled when input is empty or invalid. - T007 [US2] Add heal button (Heart icon, green styling) to
apps/web/src/components/quick-hp-input.tsxthat reads the current input value and callsonAdjustHp(combatantId, +n), then clears input. Button is disabled when input is empty or invalid. - T008 [US2] Ensure damage and heal buttons are visually distinct (red vs green, Sword vs Heart icons) and match existing Tailwind/shadcn styling conventions in
apps/web/src/components/quick-hp-input.tsx.
Checkpoint: Both Enter-to-damage and explicit damage/heal buttons work. Full feature is functional.
Phase 5: User Story 3 - Keyboard-Driven Workflow (Priority: P2)
Goal: Keyboard-only workflow for damage is seamless (type + Enter). Escape clears without applying.
Independent Test: Focus input, type number, press Enter -- damage applied. Focus input, type number, press Escape -- input cleared, no HP change.
Implementation for User Story 3
- T009 [US3] Verify that the refactored component in
apps/web/src/components/quick-hp-input.tsxsupports full keyboard workflow: focus input, type digits, Enter applies damage, Escape clears. Confirm Tab key is NOT overridden (default browser focus behavior). Also verify FR-008: delta input is not rendered for combatants without HP tracking (no max HP set). Fix any issues found.
Checkpoint: All user stories functional and keyboard workflow verified.
Phase 6: Polish & Cross-Cutting Concerns
Purpose: Final validation across all stories.
- T010 Run
pnpm check(knip + format + lint + typecheck + test) and fix any issues - T011 Run quickstart.md manual verification steps against the dev server (
pnpm --filter web dev). Also verify FR-010: direct editing of the current HP absolute value still works alongside the delta input.
Dependencies & Execution Order
Phase Dependencies
- Setup (Phase 1): No dependencies
- Foundational (Phase 2): N/A (no foundational tasks)
- US1 (Phase 3): Depends on Phase 1 passing
- US2 (Phase 4): Depends on T003 (component refactor from US1)
- US3 (Phase 5): Depends on T004 (Enter key handler from US1)
- Polish (Phase 6): Depends on all user stories complete
User Story Dependencies
- User Story 1 (P1): No dependencies on other stories. Core refactor.
- User Story 2 (P1): Depends on US1 component refactor (T003) since buttons are added to the refactored component.
- User Story 3 (P2): Depends on US1 (T004) since it validates the keyboard workflow established there.
Within Each User Story
- Tests/verification before or alongside implementation
- Core logic before visual polish
- Commit after each task or logical group
Parallel Opportunities
- T006 and T007 (damage button and heal button) can be implemented in parallel since they are independent click handlers in the same file -- but given they're both small additions to one component, sequential is equally efficient.
Implementation Strategy
MVP First (User Story 1 Only)
- T001: Verify clean state
- T002: Verify/add domain tests
- T003-T005: Refactor component, Enter-to-damage, verify Escape
- STOP and VALIDATE: Type number + Enter applies damage, input clears
Incremental Delivery
- US1: Enter-to-damage works (MVP)
- US2: Add damage/heal buttons (full feature)
- US3: Verify keyboard workflow (polish)
- T010-T011: Final quality gate
Notes
- This is a single-component refactor. All implementation tasks modify
apps/web/src/components/quick-hp-input.tsx. - No domain or application layer changes needed.
- The existing
adjustHpdomain function already handles positive (heal) and negative (damage) deltas with clamping. - Total: 10 tasks across 6 phases (T005 merged into T009).