docs(05-01): complete pagination data model and navigation DOM plan
- 05-01-SUMMARY.md: paginated forest rendering with SLOTS_PER_PAGE=12 - STATE.md: advanced to plan 2 of 2, progress 95%, recorded decisions - ROADMAP.md: phase 5 progress updated (1/2 summaries) - REQUIREMENTS.md: MWLD-01..04 marked complete
This commit is contained in:
@@ -116,10 +116,10 @@ Requirements for initial release (MVP). Each maps to roadmap phases.
|
||||
|
||||
### Multi-Wald-System
|
||||
|
||||
- [ ] **MWLD-01**: Wald-Seite berechnet aus Element-Index (Math.floor(index / 12)), kein DB-Schema-Change
|
||||
- [ ] **MWLD-02**: renderForestScene zeigt nur 12 Elemente pro Seite (page-basiertes Slicing)
|
||||
- [ ] **MWLD-03**: Navigationspfeile (Links/Rechts) neben Waldszene, min 44px Touch-Targets, Pastellfarben
|
||||
- [ ] **MWLD-04**: "Wald X von Y" Textanzeige, Navigation bei nur einer Seite ausgeblendet
|
||||
- [x] **MWLD-01**: Wald-Seite berechnet aus Element-Index (Math.floor(index / 12)), kein DB-Schema-Change
|
||||
- [x] **MWLD-02**: renderForestScene zeigt nur 12 Elemente pro Seite (page-basiertes Slicing)
|
||||
- [x] **MWLD-03**: Navigationspfeile (Links/Rechts) neben Waldszene, min 44px Touch-Targets, Pastellfarben
|
||||
- [x] **MWLD-04**: "Wald X von Y" Textanzeige, Navigation bei nur einer Seite ausgeblendet
|
||||
- [ ] **MWLD-05**: currentForestPage in Progress gespeichert, nach Reload wiederhergestellt
|
||||
- [ ] **MWLD-06**: Nach Lesson-Abschluss automatisch zur Seite mit dem neuen Element navigieren
|
||||
- [ ] **MWLD-07**: Sanfte Fade-Animation beim Seitenwechsel
|
||||
|
||||
@@ -109,10 +109,10 @@ Plans:
|
||||
2. Pfeiltasten navigieren zwischen Waldseiten mit sanfter Fade-Animation
|
||||
3. Die aktuelle Waldseite wird in Progress gespeichert und nach Browser-Reload wiederhergestellt
|
||||
4. Nach Lesson-Abschluss zeigt der Wald automatisch die Seite mit dem neuen Element
|
||||
**Plans:** 2 plans
|
||||
**Plans:** 1/2 plans executed
|
||||
|
||||
Plans:
|
||||
- [ ] 05-01-PLAN.md — Progress type extension, paginated renderForestScene, navigation DOM and CSS
|
||||
- [x] 05-01-PLAN.md — Progress type extension, paginated renderForestScene, navigation DOM and CSS
|
||||
- [ ] 05-02-PLAN.md — Navigation handlers, page persistence, reward flow fix, human verification
|
||||
|
||||
## Progress
|
||||
@@ -126,4 +126,4 @@ Phases execute in numeric order: 1 → 2 → 3 → 4 → 5
|
||||
| 2. Gemini-Integration + Asset-Pipeline | 5/5 | Complete | - |
|
||||
| 3. Komplettes Spielerlebnis | 5/5 | Complete | - |
|
||||
| 4. Polish + Audio | 4/4 | Complete | - |
|
||||
| 5. Multi-Wald-System | 0/2 | Planning complete | - |
|
||||
| 5. Multi-Wald-System | 1/2 | In Progress| |
|
||||
|
||||
+17
-14
@@ -2,15 +2,15 @@
|
||||
gsd_state_version: 1.0
|
||||
milestone: v1.0
|
||||
milestone_name: milestone
|
||||
status: verifying
|
||||
stopped_at: Phase 5 context gathered (assumptions mode)
|
||||
last_updated: "2026-03-29T20:44:33.700Z"
|
||||
last_activity: "2026-03-29 - Completed quick task 260329-ten: Leertaste-Symbol in Entdecken-Phase erklären"
|
||||
status: executing
|
||||
stopped_at: Completed 05-01-PLAN.md
|
||||
last_updated: "2026-03-29T21:00:12.800Z"
|
||||
last_activity: 2026-03-29
|
||||
progress:
|
||||
total_phases: 5
|
||||
completed_phases: 4
|
||||
total_plans: 19
|
||||
completed_plans: 19
|
||||
total_plans: 21
|
||||
completed_plans: 20
|
||||
percent: 0
|
||||
---
|
||||
|
||||
@@ -21,14 +21,14 @@ progress:
|
||||
See: .planning/PROJECT.md (updated 2026-03-29)
|
||||
|
||||
**Core value:** Das Kind übt freiwillig weiter, weil es wissen will, was als Nächstes im Wald erscheint — nicht weil es Punkte sammelt.
|
||||
**Current focus:** Phase 04 — polish-audio
|
||||
**Current focus:** Phase 05 — multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern
|
||||
|
||||
## Current Position
|
||||
|
||||
Phase: 04
|
||||
Plan: Not started
|
||||
Status: Phase complete — ready for verification
|
||||
Last activity: 2026-03-29 - Completed quick task 260329-ten: Leertaste-Symbol in Entdecken-Phase erklären
|
||||
Phase: 05 (multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern) — EXECUTING
|
||||
Plan: 2 of 2
|
||||
Status: Ready to execute
|
||||
Last activity: 2026-03-29
|
||||
|
||||
Progress: [░░░░░░░░░░] 0%
|
||||
|
||||
@@ -71,6 +71,7 @@ Progress: [░░░░░░░░░░] 0%
|
||||
| Phase 04 P03 | 2min | 2 tasks | 3 files |
|
||||
| Phase 04 P01 | 4min | 2 tasks | 9 files |
|
||||
| Phase 04 P04 | 1min | 2 tasks | 4 files |
|
||||
| Phase 05 P01 | 2min | 2 tasks | 7 files |
|
||||
|
||||
## Accumulated Context
|
||||
|
||||
@@ -111,6 +112,8 @@ Recent decisions affecting current work:
|
||||
- [Phase 04]: speechEnabled defaults to false (opt-in), audioEnabled defaults to true (opt-out)
|
||||
- [Phase 04]: AudioContext lazy init on first user interaction for autoplay policy compliance
|
||||
- [Phase 04]: Audio calls are fire-and-forget at all touch points -- sound/speech modules handle settings checks and errors internally
|
||||
- [Phase 05]: renderForestScene owns nav UI update: called after element rendering with totalPages from full element array
|
||||
- [Phase 05]: SLOTS_PER_PAGE exported as named constant so Plan 02 can import without duplication
|
||||
|
||||
### Pending Todos
|
||||
|
||||
@@ -139,6 +142,6 @@ None yet.
|
||||
|
||||
## Session Continuity
|
||||
|
||||
Last session: 2026-03-29T20:44:33.693Z
|
||||
Stopped at: Phase 5 context gathered (assumptions mode)
|
||||
Resume file: .planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-CONTEXT.md
|
||||
Last session: 2026-03-29T21:00:12.792Z
|
||||
Stopped at: Completed 05-01-PLAN.md
|
||||
Resume file: None
|
||||
|
||||
+137
@@ -0,0 +1,137 @@
|
||||
---
|
||||
phase: 05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern
|
||||
plan: 01
|
||||
subsystem: ui
|
||||
tags: [pagination, forest, indexeddb, progress, typescript, css]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 04-polish-audio
|
||||
provides: forest scene rendering, Progress type, IndexedDB storage
|
||||
|
||||
provides:
|
||||
- Progress.currentForestPage field with migration support
|
||||
- SLOTS_PER_PAGE = 12 exported constant
|
||||
- renderForestScene with page parameter and element slicing
|
||||
- Forest navigation DOM (forest-nav, forest-nav-prev, forest-nav-next, forest-nav-text)
|
||||
- CSS styling for forest navigation buttons (44px touch targets, pastel BEM)
|
||||
|
||||
affects: [05-02-navigation-event-handlers, any plan reading renderForestScene signature]
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- "Pagination via page * SLOTS_PER_PAGE slice on IndexedDB array"
|
||||
- "Navigation UI updated from inside renderForestScene after element rendering"
|
||||
- "Progress migration pattern: check === undefined before setting default"
|
||||
|
||||
key-files:
|
||||
created: []
|
||||
modified:
|
||||
- src/types.ts
|
||||
- src/forest/scene.ts
|
||||
- src/app.ts
|
||||
- src/storage/db.test.ts
|
||||
- src/ui/screens.ts
|
||||
- index.html
|
||||
- src/styles/main.css
|
||||
|
||||
key-decisions:
|
||||
- "renderForestScene owns nav UI update: called after element rendering with totalPages from full element array"
|
||||
- "SLOTS_PER_PAGE exported as named constant so Plan 02 can import without duplication"
|
||||
- "Progress objects in db.test.ts and screens.ts updated to include currentForestPage: 0 to satisfy TypeScript strict interface checks"
|
||||
|
||||
patterns-established:
|
||||
- "Navigation visibility controlled via navContainer.style.display (none vs flex) from render function"
|
||||
|
||||
requirements-completed: [MWLD-01, MWLD-02, MWLD-03, MWLD-04]
|
||||
|
||||
# Metrics
|
||||
duration: 2min
|
||||
completed: 2026-03-29
|
||||
---
|
||||
|
||||
# Phase 05 Plan 01: Multi-Wald-System — Pagination Data Model and Rendering Summary
|
||||
|
||||
**Paginated forest rendering with SLOTS_PER_PAGE=12, currentForestPage in Progress type, and navigation DOM (prev/next buttons + page indicator) hidden by default until multiple pages exist.**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 2 min
|
||||
- **Started:** 2026-03-29T20:56:13Z
|
||||
- **Completed:** 2026-03-29T20:58:30Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 7
|
||||
|
||||
## Accomplishments
|
||||
|
||||
- Extended Progress interface with `currentForestPage: number` and migrateProgress entry for backward compatibility
|
||||
- Modified `renderForestScene` to accept a `page` parameter and slice `elements[start..end]` based on `page * SLOTS_PER_PAGE`
|
||||
- Added navigation DOM structure (forest-nav container, prev/next buttons with aria-labels in German, page indicator span) hidden by default
|
||||
- Added CSS for .forest__nav, .forest__nav-btn with 44px minimum touch targets and pastel BEM styling
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Extend Progress type and add paginated renderForestScene** - `559d57a` (feat)
|
||||
2. **Task 2: Add navigation DOM elements and CSS styling** - `348a71a` (feat)
|
||||
|
||||
**Plan metadata:** _(docs commit follows)_
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `src/types.ts` - Added `currentForestPage: number` field to Progress interface
|
||||
- `src/forest/scene.ts` - Added `SLOTS_PER_PAGE = 12` export, changed renderForestScene signature to `(db, page, newElementId?)`, added nav UI update block
|
||||
- `src/app.ts` - Added `if (progress.currentForestPage === undefined) progress.currentForestPage = 0` in migrateProgress; updated renderForestScene call with page param
|
||||
- `src/storage/db.test.ts` - Added `currentForestPage: 0` to test Progress literal (Rule 1 auto-fix)
|
||||
- `src/ui/screens.ts` - Added `currentForestPage: 0` to initial Progress creation (Rule 1 auto-fix)
|
||||
- `index.html` - Added `<div id="forest-nav">` with prev/next buttons and page text between forest scene and level map
|
||||
- `src/styles/main.css` - Added forest navigation CSS block after `@keyframes forest-element-appear`
|
||||
|
||||
## Decisions Made
|
||||
|
||||
- Navigation UI is managed entirely from within `renderForestScene`: after rendering elements, it reads `elements.length` to calculate `totalPages` and updates the nav DOM. This keeps nav state always in sync with rendered content.
|
||||
- `SLOTS_PER_PAGE` exported as a named constant so Plan 02 can import it without magic numbers.
|
||||
- Progress objects in `db.test.ts` and `screens.ts` were updated to satisfy TypeScript strict interface checks — these are correctness fixes, not scope creep.
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
### Auto-fixed Issues
|
||||
|
||||
**1. [Rule 1 - Bug] Added currentForestPage to Progress literals in db.test.ts and screens.ts**
|
||||
- **Found during:** Task 1 (TypeScript compile check)
|
||||
- **Issue:** Two files had inline `const progress: Progress = {...}` literals that were missing the new required field, causing `tsc --noEmit` to fail with TS2741 errors
|
||||
- **Fix:** Added `currentForestPage: 0` to both Progress object literals
|
||||
- **Files modified:** `src/storage/db.test.ts`, `src/ui/screens.ts`
|
||||
- **Verification:** `npx tsc --noEmit` exits 0 after fix
|
||||
- **Committed in:** `559d57a` (Task 1 commit)
|
||||
|
||||
---
|
||||
|
||||
**Total deviations:** 1 auto-fixed (Rule 1 - TypeScript type correctness)
|
||||
**Impact on plan:** Required fix for TypeScript compilation. No scope creep.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
None — plan executed cleanly after TypeScript type fix.
|
||||
|
||||
## Next Phase Readiness
|
||||
|
||||
- Plan 02 can import `SLOTS_PER_PAGE` from `src/forest/scene.ts` and wire click handlers for `forest-nav-prev` / `forest-nav-next`
|
||||
- `Progress.currentForestPage` is persisted via existing `saveProgress` flow, no db schema changes needed
|
||||
- Navigation DOM is in place and hidden; Plan 02 activates it by updating `currentForestPage` and calling `renderForestScene`
|
||||
|
||||
---
|
||||
*Phase: 05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern*
|
||||
*Completed: 2026-03-29*
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- FOUND: src/types.ts (contains currentForestPage)
|
||||
- FOUND: src/forest/scene.ts (contains SLOTS_PER_PAGE, page param)
|
||||
- FOUND: index.html (contains forest-nav elements)
|
||||
- FOUND: 05-01-SUMMARY.md
|
||||
- FOUND commit: 559d57a (Task 1)
|
||||
- FOUND commit: 348a71a (Task 2)
|
||||
Reference in New Issue
Block a user