# 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. - [x] T001 Verify existing `pnpm check` passes 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 - [x] 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 - [x] T003 [US1] Refactor `apps/web/src/components/quick-hp-input.tsx`: remove `Mode` type, remove `mode` state variable, remove mode toggle button, remove Tab key override for mode switching. Keep the numeric input and the `value` state variable. - [x] T004 [US1] Update Enter key handler in `apps/web/src/components/quick-hp-input.tsx`: when user presses Enter with a valid positive integer, call `onAdjustHp(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 - [x] T006 [US2] Add damage button (Sword icon, red styling) to `apps/web/src/components/quick-hp-input.tsx` that reads the current input value and calls `onAdjustHp(combatantId, -n)`, then clears input. Button is disabled when input is empty or invalid. - [x] T007 [US2] Add heal button (Heart icon, green styling) to `apps/web/src/components/quick-hp-input.tsx` that reads the current input value and calls `onAdjustHp(combatantId, +n)`, then clears input. Button is disabled when input is empty or invalid. - [x] 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 - [x] T009 [US3] Verify that the refactored component in `apps/web/src/components/quick-hp-input.tsx` supports 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. - [x] 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) 1. T001: Verify clean state 2. T002: Verify/add domain tests 3. T003-T005: Refactor component, Enter-to-damage, verify Escape 4. **STOP and VALIDATE**: Type number + Enter applies damage, input clears ### Incremental Delivery 1. US1: Enter-to-damage works (MVP) 2. US2: Add damage/heal buttons (full feature) 3. US3: Verify keyboard workflow (polish) 4. 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 `adjustHp` domain function already handles positive (heal) and negative (damage) deltas with clamping. - Total: 10 tasks across 6 phases (T005 merged into T009).