diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index acdeeb7..ec04af6 100644 --- a/.planning/REQUIREMENTS.md +++ b/.planning/REQUIREMENTS.md @@ -24,11 +24,11 @@ Requirements for initial release (MVP). Each maps to roadmap phases. ### Keyboard -- [ ] **KYBD-01**: Bildschirmtastatur rendert vollständiges QWERTZ-Layout -- [ ] **KYBD-02**: Tasten zeigen Fingerfarben gemäss Farbpalette (8 Fingerfarben + Daumen) -- [ ] **KYBD-03**: Aktive Taste pulsiert sanft, gedrückte Taste zeigt Press-Animation -- [ ] **KYBD-04**: Noch nicht gelernte Tasten sind ausgegraut -- [ ] **KYBD-05**: Beide Layouts (DE/CH) als Daten hinterlegt und umschaltbar +- [x] **KYBD-01**: Bildschirmtastatur rendert vollständiges QWERTZ-Layout +- [x] **KYBD-02**: Tasten zeigen Fingerfarben gemäss Farbpalette (8 Fingerfarben + Daumen) +- [x] **KYBD-03**: Aktive Taste pulsiert sanft, gedrückte Taste zeigt Press-Animation +- [x] **KYBD-04**: Noch nicht gelernte Tasten sind ausgegraut +- [x] **KYBD-05**: Beide Layouts (DE/CH) als Daten hinterlegt und umschaltbar ### Typing @@ -42,7 +42,7 @@ Requirements for initial release (MVP). Each maps to roadmap phases. ### Levels -- [ ] **LEVL-01**: Stufen 1–6 definiert gemäss Progressionstabelle (F/J bis E/I) +- [x] **LEVL-01**: Stufen 1–6 definiert gemäss Progressionstabelle (F/J bis E/I) - [ ] **LEVL-02**: Stufe gilt als abgeschlossen nach einmaligem Durchspielen (nicht perfekt) - [ ] **LEVL-03**: Nächste Stufe sofort freigeschaltet, alle gespielten Stufen wiederholbar - [ ] **LEVL-04**: Wortlisten pro Stufe (nur mit bereits gelernten Buchstaben, max 5 Buchstaben) @@ -158,16 +158,16 @@ Which phases cover which requirements. Updated during roadmap creation. | ONBD-02 | Phase 1 | Complete | | ONBD-03 | Phase 1 | Complete | | ONBD-04 | Phase 1 | Complete | -| KYBD-01 | Phase 1 | Pending | -| KYBD-02 | Phase 1 | Pending | -| KYBD-03 | Phase 1 | Pending | -| KYBD-04 | Phase 1 | Pending | -| KYBD-05 | Phase 1 | Pending | +| KYBD-01 | Phase 1 | Complete | +| KYBD-02 | Phase 1 | Complete | +| KYBD-03 | Phase 1 | Complete | +| KYBD-04 | Phase 1 | Complete | +| KYBD-05 | Phase 1 | Complete | | TYPE-01 | Phase 1 | Pending | | TYPE-02 | Phase 1 | Pending | | TYPE-03 | Phase 1 | Pending | | TYPE-04 | Phase 1 | Pending | -| LEVL-01 | Phase 1 | Pending | +| LEVL-01 | Phase 1 | Complete | | LEVL-02 | Phase 1 | Pending | | LEVL-03 | Phase 1 | Pending | | FRST-04 | Phase 1 | Pending | diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index f6b2623..524245e 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -34,7 +34,7 @@ Decimal phases appear between their surrounding integers in numeric order. Plans: - [x] 01-01-PLAN.md — Vite scaffold, project structure, CSS palette, TypeScript interfaces, IndexedDB wrapper - [x] 01-02-PLAN.md — Screen management, welcome screen, companion/layout selection, onboarding persistence -- [ ] 01-03-PLAN.md — QWERTZ keyboard component with finger colors, level definitions 1-6 +- [x] 01-03-PLAN.md — QWERTZ keyboard component with finger colors, level definitions 1-6 - [ ] 01-04-PLAN.md — Typing exercise engine (TDD), adaptive tempo, lesson screen UI - [ ] 01-05-PLAN.md — Forest overview with level map, full app flow integration, human verification diff --git a/.planning/STATE.md b/.planning/STATE.md index 3756078..795ab30 100644 --- a/.planning/STATE.md +++ b/.planning/STATE.md @@ -3,14 +3,14 @@ gsd_state_version: 1.0 milestone: v1.0 milestone_name: milestone status: executing -stopped_at: Completed 01-02-PLAN.md -last_updated: "2026-03-29T09:07:53.267Z" +stopped_at: Completed 01-03-PLAN.md +last_updated: "2026-03-29T09:08:47.424Z" last_activity: 2026-03-29 progress: total_phases: 4 completed_phases: 0 total_plans: 5 - completed_plans: 2 + completed_plans: 3 percent: 0 --- @@ -26,7 +26,7 @@ See: .planning/PROJECT.md (updated 2026-03-29) ## Current Position Phase: 01 (grundger-st-tippmechanik) — EXECUTING -Plan: 3 of 5 +Plan: 4 of 5 Status: Ready to execute Last activity: 2026-03-29 @@ -54,6 +54,7 @@ Progress: [░░░░░░░░░░] 0% *Updated after each plan completion* | Phase 01 P01 | 4min | 2 tasks | 22 files | | Phase 01 P02 | 2min | 2 tasks | 6 files | +| Phase 01 P03 | 3min | 2 tasks | 4 files | ## Accumulated Context @@ -68,6 +69,7 @@ Recent decisions affecting current work: - [Phase 01]: openDB accepts optional name param for test isolation with fake-indexeddb - [Phase 01]: Screen transitions use CSS opacity+display toggle, no router library - [Phase 01]: Companion cards rendered dynamically from data array, not hardcoded HTML +- [Phase 01]: Finger color map duplicated in keyboard.ts for module independence ### Pending Todos @@ -79,6 +81,6 @@ None yet. ## Session Continuity -Last session: 2026-03-29T09:07:53.261Z -Stopped at: Completed 01-02-PLAN.md +Last session: 2026-03-29T09:08:47.417Z +Stopped at: Completed 01-03-PLAN.md Resume file: None diff --git a/.planning/phases/01-grundger-st-tippmechanik/01-03-SUMMARY.md b/.planning/phases/01-grundger-st-tippmechanik/01-03-SUMMARY.md new file mode 100644 index 0000000..a56f5d5 --- /dev/null +++ b/.planning/phases/01-grundger-st-tippmechanik/01-03-SUMMARY.md @@ -0,0 +1,117 @@ +--- +phase: 01-grundger-st-tippmechanik +plan: 03 +subsystem: game +tags: [qwertz, keyboard, levels, finger-mapping, css-animation, tdd] + +# Dependency graph +requires: + - phase: 01-01 + provides: "TypeScript interfaces (Level, KeyboardLayout), CSS design system with finger color variables" +provides: + - "Level definitions 1-6 with key sets and finger mappings" + - "QWERTZ keyboard renderer with finger colors, pulse/press animations" + - "DE and CH keyboard layout data" +affects: [01-04, 01-05] + +# Tech tracking +tech-stack: + added: [] + patterns: [tdd-red-green, shared-finger-map, css-animation-classes] + +key-files: + created: + - src/game/levels.ts + - src/game/levels.test.ts + - src/game/keyboard.ts + modified: + - src/styles/main.css + +key-decisions: + - "Shared fingerMap record used by both levels.ts and keyboard.ts (duplicated for independence)" + - "Keyboard uses CSS variable references for finger colors, resolved at render time" + +patterns-established: + - "Level data: shared fingerMap record, cumulative allKeys array per level" + - "Keyboard renderer: DOM-based with Map for key lookup" + - "Animation: CSS class toggle for highlight/press states, no JS animation" + +requirements-completed: [KYBD-01, KYBD-02, KYBD-03, KYBD-04, KYBD-05, LEVL-01] + +# Metrics +duration: 3min +completed: 2026-03-29 +--- + +# Phase 01 Plan 03: Keyboard & Levels Summary + +**QWERTZ keyboard renderer with finger-colored keys, pulse/press animations, and level definitions 1-6 per spec progression table** + +## Performance + +- **Duration:** 3 min +- **Started:** 2026-03-29T09:05:09Z +- **Completed:** 2026-03-29T09:07:56Z +- **Tasks:** 2 +- **Files modified:** 4 + +## Accomplishments +- Level definitions 1-6 with correct key progressions matching spec section 4.1 (F/J/Space through E/I) +- Finger-to-CSS-variable mapping for all QWERTZ keys per spec section 8.3 +- Full QWERTZ keyboard renderer with DE and CH layout support +- Pulse animation on target key and press animation on keydown via CSS classes +- 14 passing tests covering all level data and helper functions + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: Level definitions with key sets and finger mappings (TDD)** + - RED: `3462a67` (test) - 14 failing tests for levels array and helpers + - GREEN: `afae18d` (feat) - level definitions 1-6 with finger mappings +2. **Task 2: QWERTZ keyboard renderer with finger colors and animations** - `2f0784f` (feat) + +## Files Created/Modified +- `src/game/levels.ts` - Level definitions 1-6, getLevelByNumber, getKeysUpToLevel exports +- `src/game/levels.test.ts` - 14 tests covering levels, key progressions, finger mappings, helpers +- `src/game/keyboard.ts` - renderKeyboard, highlightKey, pressKey, updateKeyboardForLevel exports +- `src/styles/main.css` - Keyboard CSS: layout, finger colors, pulse/press animations, inactive styling + +## Decisions Made +- Finger color map duplicated in keyboard.ts (includes number row keys) rather than importing from levels.ts, keeping modules independent +- Keyboard uses CSS variable references (e.g., `var(--finger-l-index)`) set via inline style, resolved against design system variables + +## Deviations from Plan + +### Auto-fixed Issues + +**1. [Rule 1 - Bug] Fixed TypeScript strict null check errors** +- **Found during:** Task 2 (tsc --noEmit verification) +- **Issue:** Unused `keyboardContainer` variable and possible undefined array access in keyboard.ts; array index access in test file +- **Fix:** Removed unused variable, added non-null assertion on array access +- **Files modified:** src/game/keyboard.ts, src/game/levels.test.ts +- **Verification:** `npx tsc --noEmit` exits 0 +- **Committed in:** 2f0784f (Task 2 commit) + +--- + +**Total deviations:** 1 auto-fixed (1 bug) +**Impact on plan:** Minor TypeScript strictness fix. No scope creep. + +## Issues Encountered +None. + +## User Setup Required +None - no external service configuration required. + +## Known Stubs +None - no stubs or placeholder data that affect plan goals. + +## Next Phase Readiness +- Keyboard component ready for integration in typing exercise (Plan 04) +- Level data available for forest overview level grid (Plan 05) +- Both DE and CH layouts defined, identical for levels 1-6 + +--- +*Phase: 01-grundger-st-tippmechanik* +*Completed: 2026-03-29*