From 7840bd5fdc65f2fb14561b0ba99b58bfb1b2e143 Mon Sep 17 00:00:00 2001 From: Markus Graf Date: Sun, 29 Mar 2026 22:52:52 +0200 Subject: [PATCH] docs(05): create phase plan for multi-wald pagination --- .planning/REQUIREMENTS.md | 26 +- .planning/ROADMAP.md | 31 +- .../05-01-PLAN.md | 273 ++++++++++++++++ .../05-02-PLAN.md | 306 ++++++++++++++++++ 4 files changed, 620 insertions(+), 16 deletions(-) create mode 100644 .planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-01-PLAN.md create mode 100644 .planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-02-PLAN.md diff --git a/.planning/REQUIREMENTS.md b/.planning/REQUIREMENTS.md index e024e9f..0c77dd2 100644 --- a/.planning/REQUIREMENTS.md +++ b/.planning/REQUIREMENTS.md @@ -114,6 +114,16 @@ Requirements for initial release (MVP). Each maps to roadmap phases. - [x] **PLSH-05**: Globaler Error-Handler: Kindgerechte Fehlermeldung, kein Crash - [x] **PLSH-06**: CSS-Palette + Typografie vollständig gemäss Spec (Custom Properties, Quicksand, Nunito) +### 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 +- [ ] **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 + ## v2 Requirements Deferred to future release. Tracked but not in current roadmap. @@ -217,12 +227,20 @@ Which phases cover which requirements. Updated during roadmap creation. | PRNT-05 | Phase 4 | Complete | | PRNT-06 | Phase 4 | Complete | | PRNT-07 | Phase 4 | Complete | +| MWLD-01 | Phase 5 | Planned | +| MWLD-02 | Phase 5 | Planned | +| MWLD-03 | Phase 5 | Planned | +| MWLD-04 | Phase 5 | Planned | +| MWLD-05 | Phase 5 | Planned | +| MWLD-06 | Phase 5 | Planned | +| MWLD-07 | Phase 5 | Planned | **Coverage:** -- v1 requirements: 68 total -- Mapped to phases: 68 -- Unmapped: 0 ✓ +- v1 requirements: 68 total (complete) +- Phase 5 requirements: 7 total (new) +- Mapped to phases: 75 +- Unmapped: 0 --- *Requirements defined: 2026-03-29* -*Last updated: 2026-03-29 after roadmap creation (coverage confirmed: 68/68)* +*Last updated: 2026-03-29 after Phase 5 planning (75 total requirements)* diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 7b70ed0..9bcd03d 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -99,24 +99,31 @@ Plans: **UI hint**: yes +### Phase 5: Multi-Wald-System: Wald-Pagination und Navigation zwischen Wäldern + +**Goal:** Mehrere Waldseiten mit Pagination, damit der Wald unbegrenzt wachsen kann +**Depends on:** Phase 4 +**Requirements**: MWLD-01, MWLD-02, MWLD-03, MWLD-04, MWLD-05, MWLD-06, MWLD-07 +**Success Criteria** (what must be TRUE): + 1. Bei mehr als 12 Waldelementen erscheinen Navigationspfeile und "Wald X von Y" Anzeige + 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: +- [ ] 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 **Execution Order:** -Phases execute in numeric order: 1 → 2 → 3 → 4 +Phases execute in numeric order: 1 → 2 → 3 → 4 → 5 | Phase | Plans Complete | Status | Completed | |-------|----------------|--------|-----------| | 1. Grundgerüst + Tippmechanik | 5/5 | Complete | - | | 2. Gemini-Integration + Asset-Pipeline | 5/5 | Complete | - | | 3. Komplettes Spielerlebnis | 5/5 | Complete | - | -| 4. Polish + Audio | 0/4 | Planning complete | - | - -### Phase 5: Multi-Wald-System: Wald-Pagination und Navigation zwischen Wäldern - -**Goal:** [To be planned] -**Requirements**: TBD -**Depends on:** Phase 4 -**Plans:** 0 plans - -Plans: -- [ ] TBD (run /gsd:plan-phase 5 to break down) +| 4. Polish + Audio | 4/4 | Complete | - | +| 5. Multi-Wald-System | 0/2 | Planning complete | - | diff --git a/.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-01-PLAN.md b/.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-01-PLAN.md new file mode 100644 index 0000000..9073006 --- /dev/null +++ b/.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-01-PLAN.md @@ -0,0 +1,273 @@ +--- +phase: 05-multi-wald-system +plan: 01 +type: execute +wave: 1 +depends_on: [] +files_modified: + - src/types.ts + - src/forest/scene.ts + - src/storage/db.ts + - src/styles/main.css + - index.html +autonomous: true +requirements: + - MWLD-01 + - MWLD-02 + - MWLD-03 + - MWLD-04 + +must_haves: + truths: + - "renderForestScene zeigt nur 12 Elemente pro Seite (Elemente 0-11 auf Seite 0, 12-23 auf Seite 1, etc.)" + - "Progress enthält currentForestPage Feld das nach Reload erhalten bleibt" + - "Navigationspfeile und Seitenanzeige sind im DOM vorhanden" + - "Bei nur einer Waldseite sind die Pfeile nicht sichtbar" + artifacts: + - path: "src/types.ts" + provides: "Progress interface with currentForestPage" + contains: "currentForestPage" + - path: "src/forest/scene.ts" + provides: "Paginated forest rendering" + contains: "page" + - path: "index.html" + provides: "Navigation arrows and page indicator DOM elements" + contains: "forest-nav" + key_links: + - from: "src/forest/scene.ts" + to: "src/types.ts" + via: "Progress.currentForestPage" + pattern: "currentForestPage" +--- + + +Add pagination data model and paginated rendering to the forest scene. + +Purpose: The 4x3 grid (12 slots) fills up as the child completes levels. With 16+ levels, elements overflow. This plan adds the data model and rendering logic to show elements page-by-page. + +Output: Progress type with currentForestPage, renderForestScene accepting page parameter and slicing elements, navigation DOM structure in HTML, navigation CSS styling. + + + +@$HOME/.claude/get-shit-done/workflows/execute-plan.md +@$HOME/.claude/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md +@.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-CONTEXT.md + + + + +From src/types.ts: +```typescript +export interface Progress { + id: 1; // singleton row + currentLevel: number; + completedLevels: number[]; + totalSessions: number; + sessionDates: string[]; + selectedCharacter: CompanionType; + selectedLayout: KeyboardLayout; + totalCorrect: number; + totalErrors: number; + errorKeyCounts: Record; + lastPlayedLevels: number[]; +} +``` + +From src/forest/scene.ts: +```typescript +export async function renderForestScene(db: IDBDatabase, newElementId?: number): Promise; +export async function initForestScreen(db: IDBDatabase, onStartLesson: (level: number) => void): Promise; +``` + +From src/storage/db.ts: +```typescript +export function getProgress(db: IDBDatabase): Promise; +export function saveProgress(db: IDBDatabase, progress: Progress): Promise; +export function getForestElements(db: IDBDatabase): Promise; +``` + + + + + + + Task 1: Extend Progress type and add paginated renderForestScene + src/types.ts, src/forest/scene.ts, src/storage/db.ts + + - src/types.ts (current Progress interface — must add field without breaking existing fields) + - src/forest/scene.ts (current renderForestScene — must modify signature and slicing logic) + - src/storage/db.ts (getProgress, saveProgress — no changes needed but understand pattern) + - src/app.ts (calls migrateProgress — must add migration for new field) + + +**src/types.ts** — Add `currentForestPage: number` to the `Progress` interface, after `lastPlayedLevels`: +```typescript +currentForestPage: number; // 0-indexed, default 0 +``` + +**src/app.ts** — In the `migrateProgress` function, add migration line: +```typescript +if (progress.currentForestPage === undefined) progress.currentForestPage = 0; +``` + +**src/forest/scene.ts** — Modify `renderForestScene` signature and implementation per D-01, D-02, D-07, D-08: + +1. Change signature to: `renderForestScene(db: IDBDatabase, page: number, newElementId?: number): Promise` + +2. Replace the current slicing logic: +```typescript +// OLD: const toRender = elements.slice(0, maxSlots); +// NEW per D-01: page index determines slice +const SLOTS_PER_PAGE = 12; +const start = page * SLOTS_PER_PAGE; +const end = start + SLOTS_PER_PAGE; +const toRender = elements.slice(start, end); +``` + +3. Keep the rest of the rendering loop unchanged (object URL management, random offset, newElementId animation). + +4. After rendering elements, update the navigation UI: +```typescript +const totalPages = Math.max(1, Math.ceil(elements.length / SLOTS_PER_PAGE)); +const navContainer = document.getElementById('forest-nav'); +if (navContainer) { + const prevBtn = document.getElementById('forest-nav-prev') as HTMLButtonElement; + const nextBtn = document.getElementById('forest-nav-next') as HTMLButtonElement; + const pageText = document.getElementById('forest-nav-text'); + + if (totalPages <= 1) { + navContainer.style.display = 'none'; + } else { + navContainer.style.display = 'flex'; + prevBtn.disabled = page <= 0; + nextBtn.disabled = page >= totalPages - 1; + if (pageText) pageText.textContent = `Wald ${page + 1} von ${totalPages}`; + } +} +``` + +Export the constant `SLOTS_PER_PAGE = 12` so Plan 02 can import it. + + + cd /home/dev/workspace/zauberwald && npx tsc --noEmit 2>&1 | head -30 + + + - src/types.ts contains `currentForestPage: number` + - src/forest/scene.ts contains `export const SLOTS_PER_PAGE = 12` + - src/forest/scene.ts function signature contains `page: number` + - src/forest/scene.ts contains `page * SLOTS_PER_PAGE` + - src/forest/scene.ts contains `forest-nav` + - src/app.ts contains `currentForestPage === undefined` + - TypeScript compiles without errors (tsc --noEmit exits 0) + + Progress type extended with currentForestPage, renderForestScene accepts page parameter and slices elements accordingly, navigation UI updated from render function, migrateProgress handles missing field + + + + Task 2: Add navigation DOM elements and CSS styling + index.html, src/styles/main.css + + - index.html (forest screen section — must add nav elements inside .forest, between scene and level-map) + - src/styles/main.css (forest styles — must add nav styles following BEM pattern) + + +**index.html** — Inside `
`, between the closing `` of `.forest__scene` (line 63) and the `
` (line 64), add per D-03, D-04: + +```html + +``` + +**src/styles/main.css** — Add forest navigation styles after the `.forest__element--new` animation block (after the `@keyframes forest-element-appear` block). Per D-04, buttons must be min 44px and pastel-styled: + +```css +/* Forest navigation (multi-wald pagination) */ +.forest__nav { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + margin: 1rem 0; +} + +.forest__nav-btn { + min-width: 44px; + min-height: 44px; + border: 2px solid var(--accent-green); + border-radius: 50%; + background: var(--bg-cream); + color: var(--accent-green); + font-size: 1.4rem; + font-family: "Quicksand", sans-serif; + font-weight: 700; + cursor: pointer; + transition: background 0.2s, transform 0.2s; + display: flex; + align-items: center; + justify-content: center; +} + +.forest__nav-btn:hover:not(:disabled) { + background: var(--bg-forest); + transform: scale(1.1); +} + +.forest__nav-btn:disabled { + opacity: 0.3; + cursor: default; +} + +.forest__nav-text { + font-family: "Quicksand", sans-serif; + font-size: 1.1rem; + font-weight: 600; + color: var(--text-warm); +} +``` + + + cd /home/dev/workspace/zauberwald && grep -c "forest-nav" index.html && grep -c "forest__nav" src/styles/main.css + + + - index.html contains `id="forest-nav"` + - index.html contains `id="forest-nav-prev"` + - index.html contains `id="forest-nav-next"` + - index.html contains `id="forest-nav-text"` + - index.html contains `aria-label="Vorheriger Wald"` + - src/styles/main.css contains `.forest__nav-btn` + - src/styles/main.css contains `min-width: 44px` + - src/styles/main.css contains `min-height: 44px` + + Navigation arrows and page indicator are in the DOM between forest scene and level map, styled with pastel colors and 44px minimum touch targets, hidden by default (shown by renderForestScene when multiple pages exist) + + + + + +- `npx tsc --noEmit` passes (no type errors) +- `grep "currentForestPage" src/types.ts` finds the new field +- `grep "SLOTS_PER_PAGE" src/forest/scene.ts` finds the exported constant +- `grep "forest-nav" index.html` finds navigation elements +- `npm run dev` starts without errors + + + +- Progress type has currentForestPage field +- renderForestScene accepts page parameter and renders only 12 elements for that page +- Navigation DOM exists with prev/next buttons and page text +- Navigation hidden when only 1 page of elements +- CSS styling follows existing pastel/BEM conventions with 44px touch targets + + + +After completion, create `.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-01-SUMMARY.md` + diff --git a/.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-02-PLAN.md b/.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-02-PLAN.md new file mode 100644 index 0000000..3a95529 --- /dev/null +++ b/.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-02-PLAN.md @@ -0,0 +1,306 @@ +--- +phase: 05-multi-wald-system +plan: 02 +type: execute +wave: 2 +depends_on: + - 05-01 +files_modified: + - src/forest/scene.ts + - src/forest/reward.ts + - src/app.ts +autonomous: false +requirements: + - MWLD-05 + - MWLD-06 + - MWLD-07 + +must_haves: + truths: + - "Kind kann mit Pfeiltasten zwischen Waldseiten navigieren" + - "Aktuelle Waldseite wird in Progress gespeichert und nach Reload wiederhergestellt" + - "Nach Lesson-Abschluss zeigt der Wald automatisch die Seite mit dem neuen Element" + - "Seitenwechsel hat sanfte Fade-Animation" + artifacts: + - path: "src/forest/scene.ts" + provides: "Navigation event handlers, page persistence" + contains: "forest-nav-prev" + - path: "src/forest/reward.ts" + provides: "Correct slot index for paginated forest" + contains: "SLOTS_PER_PAGE" + - path: "src/app.ts" + provides: "Forest init with correct page, post-reward navigation" + contains: "currentForestPage" + key_links: + - from: "src/forest/scene.ts" + to: "src/storage/db.ts" + via: "saveProgress for page persistence" + pattern: "saveProgress" + - from: "src/forest/reward.ts" + to: "src/forest/scene.ts" + via: "SLOTS_PER_PAGE import for slot calculation" + pattern: "SLOTS_PER_PAGE" + - from: "src/app.ts" + to: "src/forest/scene.ts" + via: "renderForestScene with page parameter" + pattern: "renderForestScene.*db.*page" +--- + + +Wire navigation interactions, persist current page, and fix reward flow for paginated forest. + +Purpose: Plan 01 added the data model and rendering. This plan makes it interactive: clicking arrows changes pages, the page persists across sessions, and completing a lesson navigates to the correct page. + +Output: Working multi-forest navigation, persisted page state, correct reward-to-forest flow. + + + +@$HOME/.claude/get-shit-done/workflows/execute-plan.md +@$HOME/.claude/get-shit-done/templates/summary.md + + + +@.planning/PROJECT.md +@.planning/ROADMAP.md +@.planning/STATE.md +@.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-CONTEXT.md +@.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-01-SUMMARY.md + + + + +From src/types.ts (after Plan 01): +```typescript +export interface Progress { + // ... existing fields ... + currentForestPage: number; // 0-indexed, default 0 +} +``` + +From src/forest/scene.ts (after Plan 01): +```typescript +export const SLOTS_PER_PAGE = 12; +export async function renderForestScene(db: IDBDatabase, page: number, newElementId?: number): Promise; +export async function initForestScreen(db: IDBDatabase, onStartLesson: (level: number) => void): Promise; +``` + +From src/storage/db.ts (unchanged): +```typescript +export function getProgress(db: IDBDatabase): Promise; +export function saveProgress(db: IDBDatabase, progress: Progress): Promise; +export function getForestElements(db: IDBDatabase): Promise; +``` + +From src/app.ts: +```typescript +function migrateProgress(progress): void; // adds currentForestPage if missing +async function handleLessonComplete(completedLevel, stats): Promise; +// calls initRewardScreen which returns elementId +// "Zurueck zum Wald" callback: initForestScreen + renderForestScene + showScreen +``` + + + + + + + Task 1: Wire navigation handlers and page persistence in initForestScreen + src/forest/scene.ts + + - src/forest/scene.ts (current initForestScreen — must add nav button handlers) + - src/storage/db.ts (saveProgress pattern) + - src/types.ts (Progress with currentForestPage) + + +**src/forest/scene.ts** — Modify `initForestScreen` to: + +1. Import `saveProgress` from `../storage/db` (add to existing import). + +2. Read `progress.currentForestPage` (with fallback to 0) and use it as the initial page for rendering: +```typescript +const page = progress.currentForestPage ?? 0; +await renderForestScene(db, page); +``` + +3. After the `renderLevelMap` call, wire up navigation buttons per D-05: +```typescript +const prevBtn = document.getElementById('forest-nav-prev') as HTMLButtonElement; +const nextBtn = document.getElementById('forest-nav-next') as HTMLButtonElement; + +let currentPage = progress.currentForestPage ?? 0; + +const navigateToPage = async (newPage: number) => { + currentPage = newPage; + await renderForestScene(db, currentPage); + // Persist page in progress per D-05 + const freshProgress = await getProgress(db); + if (freshProgress) { + freshProgress.currentForestPage = currentPage; + await saveProgress(db, freshProgress); + } +}; + +if (prevBtn) { + prevBtn.onclick = () => { + if (currentPage > 0) navigateToPage(currentPage - 1); + }; +} + +if (nextBtn) { + nextBtn.onclick = async () => { + const elements = await getForestElements(db); + const totalPages = Math.max(1, Math.ceil(elements.length / SLOTS_PER_PAGE)); + if (currentPage < totalPages - 1) navigateToPage(currentPage + 1); + }; +} +``` + +4. Update all existing calls to `renderForestScene` within this file to pass the page parameter. The `initForestScreen` call becomes `renderForestScene(db, page)` (already done above). + +5. Add a CSS transition for the grid on page change. In `renderForestScene`, before clearing `grid.innerHTML`, add: +```typescript +grid.style.opacity = '0'; +grid.style.transition = 'opacity 0.3s ease'; +``` +And after the rendering loop completes: +```typescript +// Trigger fade-in after a frame +requestAnimationFrame(() => { + grid.style.opacity = '1'; +}); +``` + + + cd /home/dev/workspace/zauberwald && npx tsc --noEmit 2>&1 | head -20 + + + - src/forest/scene.ts contains `saveProgress` in import statement + - src/forest/scene.ts contains `currentForestPage` + - src/forest/scene.ts contains `prevBtn.onclick` + - src/forest/scene.ts contains `nextBtn.onclick` + - src/forest/scene.ts contains `navigateToPage` + - src/forest/scene.ts contains `grid.style.opacity` + - TypeScript compiles without errors + + Arrow buttons navigate between forest pages, current page saved to Progress on every navigation, fade animation on page transitions + + + + Task 2: Fix reward flow and all renderForestScene call sites for pagination + src/forest/reward.ts, src/app.ts + + - src/forest/reward.ts (slotIndex calculation at line 179 — must account for pagination) + - src/app.ts (all renderForestScene calls — must pass page parameter; handleLessonComplete "Zurueck zum Wald" callback) + - src/forest/scene.ts (new renderForestScene signature with page parameter) + + +**src/forest/reward.ts** — Per D-01, fix the slotIndex calculation to work with pagination: + +1. Import `SLOTS_PER_PAGE` from `./scene`: +```typescript +import { SLOTS_PER_PAGE } from "./scene"; +``` + +2. Replace the slotIndex calculation (currently `const slotIndex = existing.length % 12`): +```typescript +const slotIndex = existing.length % SLOTS_PER_PAGE; +``` +This ensures the element is placed in the correct grid position on its page. + +**src/app.ts** — Update ALL `renderForestScene` and `initForestScreen` call sites per D-06: + +1. In `handleLessonComplete`, the "Zurueck zum Wald" callback (the `onBackToForest` lambda around line 122-125): +```typescript +async () => { + // Per D-06: navigate to page containing the new element + const elements = await getForestElements(db); + const newPage = Math.max(0, Math.ceil(elements.length / SLOTS_PER_PAGE) - 1); + + // Update progress with new page + const latestProgress = await getProgress(db); + if (latestProgress) { + latestProgress.currentForestPage = newPage; + await saveProgress(db, latestProgress); + } + + await initForestScreen(db, startLessonFromForest); + await renderForestScene(db, newPage, elementId); + showScreen("forest"); +} +``` + +2. Import `SLOTS_PER_PAGE` from `./forest/scene` and `getForestElements` from `./storage/db` (add to existing imports if not already there). + +3. In the "Weiter ueben" callback from reward (the `onContinue` lambda), no forest rendering happens so no change needed. + +4. In `handleLessonCancel` (line 129-132), `initForestScreen` already reads `currentForestPage` from progress internally, so no change needed here. + +5. In `initApp` returning user flow (line 208), `initForestScreen` already handles page from progress, but the subsequent `renderForestScene` call does not exist separately — `initForestScreen` calls it. No change needed. + +6. In the "Zurueck zum Wald" from parent area (line 182-183), same — `initForestScreen` handles it. + +7. BUT: There is an explicit `renderForestScene(db, elementId)` call on line 123. This must become `renderForestScene(db, newPage, elementId)` as described in step 1 above. + + + cd /home/dev/workspace/zauberwald && npx tsc --noEmit 2>&1 | head -20 && grep -n "SLOTS_PER_PAGE" src/forest/reward.ts src/app.ts + + + - src/forest/reward.ts contains `import { SLOTS_PER_PAGE } from "./scene"` + - src/forest/reward.ts contains `existing.length % SLOTS_PER_PAGE` + - src/app.ts contains `SLOTS_PER_PAGE` import + - src/app.ts contains `currentForestPage = newPage` + - src/app.ts does NOT contain `renderForestScene(db, elementId)` (old 2-arg call with elementId) + - TypeScript compiles without errors + + Reward flow correctly calculates slot position for paginated grid, "Zurueck zum Wald" navigates to the page containing the new element, all renderForestScene calls pass page parameter + + + + Task 3: Verify multi-forest navigation works end-to-end + n/a + +Human verification checkpoint for the multi-forest pagination system. + +What was built: Arrow navigation between forest pages, page persistence in Progress, correct page navigation after lesson completion, fade animation on page transitions. + +How to verify: +1. Open http://localhost:5173 in browser +2. If fresh install: complete onboarding, play through at least 1 lesson to get forest elements +3. On the forest screen: if you have fewer than 13 elements, the navigation arrows should be HIDDEN +4. To test pagination with many elements: Use browser DevTools console to add fake elements to IndexedDB, OR play through enough lessons to fill 12+ slots +5. With 13+ elements: navigation arrows ("Wald 1 von 2") should appear between the forest scene and level map +6. Click right arrow — should fade to page 2 showing element 13+ +7. Click left arrow — should fade back to page 1 +8. Left arrow should be disabled on page 1, right arrow disabled on last page +9. Reload browser — same page should be shown (persistence) +10. Complete a lesson — after clicking "Zurueck zum Wald", should show the page with the new element (last page) + +Resume signal: Type "approved" or describe issues. + + User confirms visual and functional correctness of multi-forest navigation + User approves that forest pagination, navigation arrows, page persistence, and post-lesson page selection all work correctly + + + + + +- `npx tsc --noEmit` passes +- `npm run dev` starts without errors +- Navigation arrows hidden when <= 12 elements +- Navigation arrows visible when > 12 elements +- Page persists in IndexedDB across reloads +- New element after lesson appears on correct page + + + +- Clicking prev/next arrows changes forest page with fade animation +- "Wald X von Y" text updates correctly +- Arrows disabled at boundaries (prev on page 1, next on last page) +- currentForestPage persisted in Progress and restored on reload +- After lesson completion, forest shows the page containing the new element +- No console errors during normal navigation + + + +After completion, create `.planning/phases/05-multi-wald-system-wald-pagination-und-navigation-zwischen-w-ldern/05-02-SUMMARY.md` +