- Added forest__intro paragraph between title and greeting area in index.html
- Added .forest__intro CSS block with Nunito font, centered, pastel-style styling
- Click any forest element or reward image to see it large
- Smooth zoom-in animation, click anywhere to close
- Hover effect on clickable images
- Works on both forest grid and reward screen
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add error overlay HTML element in index.html before script tag
- Add window error + unhandledrejection listeners in main.ts
- Add error overlay CSS styles (fixed, z-index 9999, tree icon, reload button)
- Error message: "Oh, der Wald braucht kurz eine Pause..."
- HTML section with export-btn, import-btn, reset-btn, hidden file input
- CSS styles for action buttons including danger variant for reset
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Create src/forest/reward.ts with startPreGeneration() and initRewardScreen()
- Image pre-generation starts at lesson begin, placeholder shows while loading
- Fallback to static SVGs when rate-limited or API unavailable
- Reward screen HTML with image area, companion comment, action buttons
- CSS for reward screen with animated leaves placeholder and image appear animation
- Discover phase: companion introduces new key, key pulses, child presses once
- Practice phase: existing letter exercise with cumulative stats
- Words phase: word display with active letter highlighting
- Review mode skips discover, mixes letters/words from recent levels
- Encouragement messages for repetition protection
- Phase indicator UI (Entdecken / Ueben / Woerter)
- CSS for word display, phase indicator, discover pulse animation
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add parent screen HTML with code gate, stats overview, and settings form
- Add parent area CSS styles for stats grid, calendar dots, error badges, settings
- Create src/ui/parent.ts with showParentCodePrompt, initParentScreen, loadParentData
- SVG woodland background with sky gradient, clouds, sun, trees, hills, ground
- 4x3 CSS grid overlay for forest element placement
- Fade-in + scale-up animation keyframes for new elements
- Add forest-greeting companion area in HTML with avatar + text
- Add lesson-companion area in HTML above letter area
- Wire getGreeting() call for returning users in app.ts
- Show companion avatar in lesson screen via getProgress lookup
- Fix pre-existing noUncheckedIndexedAccess errors in fallbacks.ts (Rule 3)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Back button in lesson screen to return to forest without completing
- "Alle Stufen geschafft!" message when all 6 levels are done
- Cap currentLevel at MAX_LEVEL to prevent out-of-bounds progression
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Lesson screen HTML with letter-area and keyboard containers
- initLessonScreen: renders keyboard, shows letters, handles keypress
- Correct key dissolves letter with animation, advances to next
- Wrong key does nothing (per D-03), correct key stays highlighted
- startLesson in app.ts: manages lesson lifecycle and cleanup
- onComplete: updates progress, unlocks next level, saves to IndexedDB
- CSS: floating letter animation, dissolve effect on correct press
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Vite 6 + TypeScript + Biome + Vitest configured
- All directories from spec section 13 created
- CSS custom properties for full color palette and finger colors
- index.html with 5 screen sections and Google Fonts
- Dev server binds to 0.0.0.0:5173 for VPS access
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
gurix
