docs(01-02): complete screen management + onboarding plan
- Add 01-02-SUMMARY.md with execution results - Update STATE.md: plan 3/5, 40% progress, decisions logged - Update ROADMAP.md with plan progress - Mark requirements FNDN-05, ONBD-01-04 complete Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.6
+10
-10
@@ -13,14 +13,14 @@ Requirements for initial release (MVP). Each maps to roadmap phases.
|
||||
- [x] **FNDN-02**: Projektstruktur gemäss Spec Abschnitt 13 (alle Verzeichnisse + Dateien)
|
||||
- [x] **FNDN-03**: Alle TypeScript-Interfaces definiert (Progress, ForestElement, CompanionAssets, Level, etc.)
|
||||
- [x] **FNDN-04**: IndexedDB-Wrapper mit allen Stores (progress, companionAssets, styleReference, forestElements, settings)
|
||||
- [ ] **FNDN-05**: Screen-Management: 5 Screens (welcome, forest, lesson, reward, parent), CSS fade Transitions
|
||||
- [x] **FNDN-05**: Screen-Management: 5 Screens (welcome, forest, lesson, reward, parent), CSS fade Transitions
|
||||
|
||||
### Onboarding
|
||||
|
||||
- [ ] **ONBD-01**: Willkommens-Screen mit Begleitfigur-Auswahl (4 Karten mit Avataren)
|
||||
- [ ] **ONBD-02**: Tastatur-Layout-Auswahl (DE/CH) im Willkommens-Screen
|
||||
- [ ] **ONBD-03**: Auswahl persistiert in IndexedDB, wird nach Reload wiederhergestellt
|
||||
- [ ] **ONBD-04**: "Los geht's" führt direkt zur Wald-Übersicht (kein Ladescreen)
|
||||
- [x] **ONBD-01**: Willkommens-Screen mit Begleitfigur-Auswahl (4 Karten mit Avataren)
|
||||
- [x] **ONBD-02**: Tastatur-Layout-Auswahl (DE/CH) im Willkommens-Screen
|
||||
- [x] **ONBD-03**: Auswahl persistiert in IndexedDB, wird nach Reload wiederhergestellt
|
||||
- [x] **ONBD-04**: "Los geht's" führt direkt zur Wald-Übersicht (kein Ladescreen)
|
||||
|
||||
### Keyboard
|
||||
|
||||
@@ -153,11 +153,11 @@ Which phases cover which requirements. Updated during roadmap creation.
|
||||
| FNDN-02 | Phase 1 | Complete |
|
||||
| FNDN-03 | Phase 1 | Complete |
|
||||
| FNDN-04 | Phase 1 | Complete |
|
||||
| FNDN-05 | Phase 1 | Pending |
|
||||
| ONBD-01 | Phase 1 | Pending |
|
||||
| ONBD-02 | Phase 1 | Pending |
|
||||
| ONBD-03 | Phase 1 | Pending |
|
||||
| ONBD-04 | Phase 1 | Pending |
|
||||
| FNDN-05 | Phase 1 | Complete |
|
||||
| ONBD-01 | Phase 1 | Complete |
|
||||
| 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 |
|
||||
|
||||
@@ -33,7 +33,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
|
||||
- [ ] 01-02-PLAN.md — Screen management, welcome screen, companion/layout selection, onboarding persistence
|
||||
- [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
|
||||
- [ ] 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
|
||||
|
||||
+9
-6
@@ -3,14 +3,14 @@ gsd_state_version: 1.0
|
||||
milestone: v1.0
|
||||
milestone_name: milestone
|
||||
status: executing
|
||||
stopped_at: Completed 01-01-PLAN.md
|
||||
last_updated: "2026-03-29T09:04:30.178Z"
|
||||
stopped_at: Completed 01-02-PLAN.md
|
||||
last_updated: "2026-03-29T09:07:53.267Z"
|
||||
last_activity: 2026-03-29
|
||||
progress:
|
||||
total_phases: 4
|
||||
completed_phases: 0
|
||||
total_plans: 5
|
||||
completed_plans: 1
|
||||
completed_plans: 2
|
||||
percent: 0
|
||||
---
|
||||
|
||||
@@ -26,7 +26,7 @@ See: .planning/PROJECT.md (updated 2026-03-29)
|
||||
## Current Position
|
||||
|
||||
Phase: 01 (grundger-st-tippmechanik) — EXECUTING
|
||||
Plan: 2 of 5
|
||||
Plan: 3 of 5
|
||||
Status: Ready to execute
|
||||
Last activity: 2026-03-29
|
||||
|
||||
@@ -53,6 +53,7 @@ Progress: [░░░░░░░░░░] 0%
|
||||
|
||||
*Updated after each plan completion*
|
||||
| Phase 01 P01 | 4min | 2 tasks | 22 files |
|
||||
| Phase 01 P02 | 2min | 2 tasks | 6 files |
|
||||
|
||||
## Accumulated Context
|
||||
|
||||
@@ -65,6 +66,8 @@ Recent decisions affecting current work:
|
||||
- All phases: Gemini REST via fetch(), key in public/config.json (private use acceptable)
|
||||
- Phase 2+: Vorab-generierte Character Assets per Build-Script (kein Onboarding-Warten)
|
||||
- [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
|
||||
|
||||
### Pending Todos
|
||||
|
||||
@@ -76,6 +79,6 @@ None yet.
|
||||
|
||||
## Session Continuity
|
||||
|
||||
Last session: 2026-03-29T09:04:30.171Z
|
||||
Stopped at: Completed 01-01-PLAN.md
|
||||
Last session: 2026-03-29T09:07:53.261Z
|
||||
Stopped at: Completed 01-02-PLAN.md
|
||||
Resume file: None
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
phase: 01-grundger-st-tippmechanik
|
||||
plan: 02
|
||||
subsystem: ui
|
||||
tags: [screen-management, onboarding, indexeddb, companion-selection, css-transitions]
|
||||
|
||||
requires:
|
||||
- phase: 01-01
|
||||
provides: "IndexedDB storage layer (openDB, getProgress, saveProgress), types, CSS design system"
|
||||
provides:
|
||||
- "Screen management (showScreen, initApp)"
|
||||
- "Welcome screen with companion selection and layout toggle"
|
||||
- "Companion definitions (fee/einhorn/fuchs/eule)"
|
||||
- "Onboarding flow with IndexedDB persistence"
|
||||
affects: [01-03, 01-04, 01-05]
|
||||
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- "Screen routing via CSS class toggle (.screen--active)"
|
||||
- "DOM-based UI generation from data arrays (companion cards)"
|
||||
- "Event delegation for toggle groups (layout buttons)"
|
||||
|
||||
key-files:
|
||||
created:
|
||||
- src/app.ts
|
||||
- src/companion/characters.ts
|
||||
- src/ui/screens.ts
|
||||
modified:
|
||||
- src/main.ts
|
||||
- index.html
|
||||
- src/styles/main.css
|
||||
|
||||
key-decisions:
|
||||
- "Screen transitions use CSS opacity + display toggle, no router library"
|
||||
- "Companion cards rendered dynamically from characters.ts array, not hardcoded in HTML"
|
||||
|
||||
patterns-established:
|
||||
- "showScreen(name) pattern: remove .screen--active from all, add to target by id"
|
||||
- "initApp checks IndexedDB progress to route returning users directly to forest"
|
||||
|
||||
requirements-completed: [FNDN-05, ONBD-01, ONBD-02, ONBD-03, ONBD-04]
|
||||
|
||||
duration: 2min
|
||||
completed: 2026-03-29
|
||||
---
|
||||
|
||||
# Phase 01 Plan 02: Screen Management + Onboarding Summary
|
||||
|
||||
**CSS screen management with companion selection (4 characters), DE/CH layout toggle, and IndexedDB-persisted onboarding flow**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 2 min
|
||||
- **Started:** 2026-03-29T09:05:08Z
|
||||
- **Completed:** 2026-03-29T09:07:06Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 6
|
||||
|
||||
## Accomplishments
|
||||
- Screen management system with CSS fade transitions between 5 app screens
|
||||
- Welcome screen with 4 companion cards (Lila/Stella/Finn/Elsa) showing emoji and name
|
||||
- DE/CH keyboard layout toggle with active state styling
|
||||
- Full onboarding persistence: companion + layout saved to IndexedDB, returning users skip to forest
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Screen management + companion definitions** - `4b5502f` (feat)
|
||||
2. **Task 2: Welcome screen UI + onboarding flow** - `20a7670` (feat)
|
||||
|
||||
## Files Created/Modified
|
||||
- `src/app.ts` - Screen management (showScreen, getDB, initApp), routes to welcome or forest
|
||||
- `src/companion/characters.ts` - 4 companion definitions with type, name, emoji, personality
|
||||
- `src/ui/screens.ts` - Welcome screen logic: card rendering, layout toggle, start button, save + navigate
|
||||
- `src/main.ts` - Updated to import and call initApp on DOMContentLoaded
|
||||
- `index.html` - Welcome screen HTML structure with companion-grid, layout-toggle, start-btn
|
||||
- `src/styles/main.css` - Welcome screen styles: companion cards, layout buttons, start button with states
|
||||
|
||||
## Decisions Made
|
||||
- Screen transitions use CSS opacity + display toggle (no router library needed for 5 screens)
|
||||
- Companion cards rendered dynamically from characters.ts data array rather than hardcoded in HTML
|
||||
- Layout defaults to 'de' (German), toggleable to 'ch' (Swiss)
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
None.
|
||||
|
||||
## User Setup Required
|
||||
None - no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
- Screen management ready for lesson, reward, and parent screens
|
||||
- Forest screen is empty placeholder, ready for 01-03 to populate
|
||||
- Companion data available for dialogue generation in later plans
|
||||
|
||||
---
|
||||
*Phase: 01-grundger-st-tippmechanik*
|
||||
*Completed: 2026-03-29*
|
||||
Reference in New Issue
Block a user