feat(03-04): add reward module with pre-generation and reward screen

- 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
This commit is contained in:
2026-03-29 13:52:05 +02:00
parent 4f1a2b55d6
commit e599050303
3 changed files with 356 additions and 1 deletions
+16 -1
View File
@@ -80,7 +80,22 @@
</div>
</div>
</section>
<section id="screen-reward" class="screen"></section>
<section id="screen-reward" class="screen">
<div class="reward">
<h2 class="reward__title">Schau mal!</h2>
<div class="reward__image-area" id="reward-image-area">
<!-- Placeholder or generated image -->
</div>
<div class="reward__companion" id="reward-companion">
<img id="reward-companion-avatar" class="companion-area__avatar" src="" alt="">
<p id="reward-companion-text" class="companion-area__text"></p>
</div>
<div class="reward__actions">
<button class="reward__btn reward__btn--continue" id="reward-continue-btn">Weiter ueben</button>
<button class="reward__btn reward__btn--back" id="reward-back-btn">Zurueck zum Wald</button>
</div>
</div>
</section>
<section id="screen-parent" class="screen">
<div class="parent">
<button class="parent__back-btn" id="parent-back-btn">&#x2190; Zurueck</button>