Zauberwald/.planning/phases/04-polish-audio/04-04-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
04-polish-audio	04	execute	2	04-01 04-02 04-03	src/ui/screens.ts src/forest/reward.ts src/forest/scene.ts src/app.ts	false	PLSH-01 PLSH-02 PLSH-03 PLSH-04 PLSH-05 AUDI-01 AUDI-02 AUDI-03 AUDI-04 AUDI-05 PRNT-05 PRNT-06 PRNT-07	truths artifacts key_links Richtiger Tastendruck in lesson spielt kurzen Ton Belohnungs-Screen spielt aufsteigende Tonfolge Neues Waldelement in Forest spielt Glitzer-Sound Companion-Texte werden vorgelesen wenn speechEnabled=true Gesamte App funktioniert fehlerfrei als zusammenhaengendes Erlebnis path provides contains src/ui/screens.ts playCorrectSound() call on correct keypress playCorrectSound path provides contains src/forest/reward.ts playRewardSound() + speakText() calls playRewardSound path provides contains src/forest/scene.ts playForestElementSound() on new element playForestElementSound from to via pattern src/ui/screens.ts src/audio/sounds.ts import + call in correct keypress handler import.*playCorrectSound from to via pattern src/forest/reward.ts src/audio/sounds.ts import + call in reward init import.*playRewardSound from to via pattern src/forest/scene.ts src/audio/sounds.ts import + call on element appear import.*playForestElementSound from to via pattern src/forest/reward.ts src/audio/speech.ts import + speakText for companion comment import.*speakText

Wire audio into all touch points and verify the complete Phase 4 experience end-to-end.

Purpose: Connect the audio system (Plan 01), animations (Plan 02), and export/import (Plan 03) into a cohesive experience. Human verification confirms everything works together. Output: Fully wired audio in lesson/reward/forest, human-verified complete app.

<execution_context> @$HOME/.claude/get-shit-done/workflows/execute-plan.md @$HOME/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/phases/04-polish-audio/04-CONTEXT.md @.planning/phases/04-polish-audio/04-01-SUMMARY.md @.planning/phases/04-polish-audio/04-02-SUMMARY.md @.planning/phases/04-polish-audio/04-03-SUMMARY.md

@src/ui/screens.ts @src/forest/reward.ts @src/forest/scene.ts @src/app.ts @src/audio/sounds.ts @src/audio/speech.ts

Task 1: Wire audio + speech into lesson, reward, forest, and app src/ui/screens.ts, src/forest/reward.ts, src/forest/scene.ts, src/app.ts src/ui/screens.ts, src/forest/reward.ts, src/forest/scene.ts, src/app.ts, src/audio/sounds.ts, src/audio/speech.ts 1. In `src/ui/screens.ts` (per AUDI-01): - Import `playCorrectSound` from `../audio/sounds` - In the keydown handler where `result.correct` is true (two locations: letter mode ~line 214, word mode ~line 289), add `playCorrectSound()` call. Fire-and-forget (no await needed, sound functions handle errors internally).

2. In src/forest/reward.ts (per AUDI-02, AUDI-05):

   • Import playRewardSound from ../audio/sounds
   • Import speakText from ../audio/speech
   • In initRewardScreen (or wherever the reward is displayed), call playRewardSound() when the reward image/content appears.
   • After companion comment text is set, call speakText(commentText) to read it aloud.

3. In src/forest/scene.ts (per AUDI-03):

   • Import playForestElementSound from ../audio/sounds
   • When a new forest element is rendered/appears (the element with forest-element-appear animation), call playForestElementSound().

4. In src/app.ts (per AUDI-05):

   • Import speakText from ../audio/speech
   • Where the companion greeting text is displayed on the forest screen, call speakText(greetingText) to read it aloud.

All audio calls are fire-and-forget. The sound/speech modules internally check settings and handle errors. No try/catch needed at call sites. cd /home/dev/workspace/zauberwald && npx tsc --noEmit 2>&1 | head -20 && grep -c "playCorrectSound|playRewardSound|playForestElementSound|speakText" src/ui/screens.ts src/forest/reward.ts src/forest/scene.ts src/app.ts <acceptance_criteria> - screens.ts imports and calls playCorrectSound on correct keypress - reward.ts imports and calls playRewardSound when reward displays - reward.ts imports and calls speakText for companion comment - scene.ts imports and calls playForestElementSound on new element - app.ts imports and calls speakText for greeting - TypeScript compiles without errors </acceptance_criteria> All audio touch points wired: correct keystroke sound, reward melody, forest element glitter, speech for companion texts

Task 2: End-to-end verification of Phase 4 none Human verifies the complete Phase 4 experience by testing all audio, animation, responsive, error handling, and export/import/reset features in the browser. Complete Phase 4 polish: audio system (3 sounds + speech), enhanced animations (leaf-fall, stardust, companion float), responsive layout, error handler, export/import/reset. Start the dev server: `npm run dev`

Open http://<vps-ip>:5173 in browser.

1. Audio (AUDI-01..03):

• Start a lesson, type correct letters -- hear short tone on each correct press
• Complete a lesson -- hear ascending reward melody on reward screen
• Go back to forest -- hear glitter sound when new element appears
• If no sound: check mute button state

2. Mute Button (AUDI-04):

• Click mute button (bottom-right) -- icon changes to muted
• Type correct letters -- no sound
• Reload page -- mute state preserved
• Click again -- unmuted, sounds resume

3. Speech (AUDI-05):

• Enable speech in parent area settings (if toggle exists) or check if companion texts are read aloud
• Greeting on forest screen should be spoken in German

4. Animations (PLSH-01..03):

• Falling letters sway side-to-side like leaves (not just float up/down)
• Correct keypress shows sparkle/stardust particles
• Companion avatar gently bobs up and down

5. Responsive (PLSH-04):

• Resize browser to < 700px width -- keyboard shrinks, fonts scale, grid adjusts

6. Error Handler (PLSH-05):

• Open console, run: throw new Error('test') -- child-friendly overlay appears
• Click "Nochmal versuchen" -- page reloads

7. Export/Import/Reset (PRNT-05..07):

• Open parent area (Ctrl+Shift+E, code 1234)
• Click "Fortschritt exportieren" -- JSON file downloads
• Click "Fortschritt importieren" -- file picker opens, select the exported file, confirm
• Click "Alles zuruecksetzen" -- two confirmations, then app resets to welcome screen

8. No console errors:

• Play through a complete lesson cycle with console open -- no unhandled errors Human confirms all 8 verification areas pass All Phase 4 features verified: audio plays at correct moments, mute persists, animations smooth, responsive works, error handler catches exceptions, export/import/reset functional Type "approved" or describe issues to fix

- TypeScript compiles: `npx tsc --noEmit` - Linting passes: `npm run lint` - All audio imports present in screens.ts, reward.ts, scene.ts, app.ts - Human verifies complete flow

<success_criteria> App is visuell und auditiv angenehm, alle Phase 4 requirements met, bereit zum Testen mit dem Kind. </success_criteria>

After completion, create `.planning/phases/04-polish-audio/04-04-SUMMARY.md`