---
instanz: staustufen
zuletzt_aktualisiert: 2026-04-26 (Runde 2 fertig — 4 Punkte umgesetzt)
session_id: 2026-04-26-runde-2
---

# Staustufen — aktueller Stand

## Rolle
Eigenständige Modul-Instanz für die Simulation
„Staustufen — Wasserkraft in der Kaskade".

## Auftrag
Genau ein Level (L1). Burst-Modus → Runde 2 abgeschlossen.

## Stand
- L1 spielbar unter `http://localhost/geograsim/App/staustufen`
- Atlas-Feedback-Runde 2 vollständig umgesetzt; **alle 4 Punkte live**:

### Punkt 1 — Netzbalance (Korridor-Bewertung)
- ±15 % grün / 15–30 % gelb / >30 % rot, Tick-basiert
- Variablen + UI-Labels + End-Screen + Assessment-Payload durchgezogen
- Live-Korridor-Indikator in Status-Spalte

### Punkt 2 — Querschnitt-Visualisierung
- Inline-SVG `viewBox 0 0 800 460` ersetzt die abstrakten Tank-Balken
- Berg-Silhouette mit Mulde (oben) + Tal (rechts), Schraffur, Schnee
- Oberer Speichersee + Druckrohr + Maschinenhaus + unterer See
- Wasserstand-Animation via `rect.y` + `rect.height` (CSS-transition 0.6 s)
- Druckrohr-Wasseranimation per `stroke-dasharray` + `stroke-dashoffset`,
  Geschwindigkeit ∝ Stufe (schwach 2.4 s / mittel 1.2 s / stark 0.6 s loop)
- Beschriftungen (Oberer Speicher %, Maschinenhaus, Druckrohr, +450 m, Tal)
- Status-Spalte links, Querschnitt mittig, Slider direkt darunter im Footer
- Steuerung von **Buttons → Schiebereglern** umgebaut (4-Stufen-Snap,
  Track-Highlight, Skala-Labels „aus / schwach / mittel / stark",
  Thumb 36 px iPad-Touch, Klick auf Skala-Label snapt zur Stufe)

### Punkt 3 — Bedarfsgraph mit Wellenform + Korridor
- Höhe 130 → 180 px, viewBox 1000×180
- Tageskurve mit 4 Stützpunkten (Smoothstep): Nacht-Tal 72 % →
  Morgenspitze 116 % → Mittagsdelle 94 % → Abendspitze 121 % → Nacht 72 %.
  Tagesmittel kalibriert auf 1.0, also `DEMAND_PER_DAY` bleibt
  unverändert in der Bedeutung.
- Korridor-Band ±15 % halbtransparent grünlich
- Bedarfslinie (rot) deterministisch über alle 60 Ticks vorberechnet
- Versorgungslinie (fjord-blau) live aufgebaut aus `state.history.supply`
  (= freie Einspeisung + Turbine − Pumpe)
- Außerhalb-Korridor-Marker (gelb 15-30 %, rot >30 %) auf Versorgungslinie
- Tag-Trenner, Tag-Beschriftung, Tick-Cursor mit Punkten auf beiden Linien

### Punkt 4 — InfoCards + Bilder + TTS
- Card-Image `App/assets/img/sim-16-staustufen.png` schon in Runde-1-Quittung
- InfoCard-Komponente `.st-infocard` mit Slide-in von rechts,
  9-Sekunden-Auto-Dismiss + manueller Close-Button, Border-Tone-Variants
- 5 Trigger eingebaut:
  - **anlage** (nach Welcome-Hint geschlossen)
  - **pumpe** (erste Pumpen-Aktion ≥ schwach)
  - **turbine** (erste Turbinen-Aktion ≥ schwach)
  - **korridor** (erstes Mal außerhalb grünem Korridor, ab Tick 2)
  - **spitze** (Beginn Tag 3)
- TTS-Audios via OpenAI `gpt-4o-mini-tts` (ElevenLabs-Quota war voll),
  5 mp3 in `App/sims/staustufen/sounds/` (~990 KB total, ~0.013 €).
  Stimme „nova", deutsch, ruhig-pädagogisch
- Mute-Toggle 🔇/🔊 im Header, Default stumm (klassenraum-tauglich)
- InfoCard spielt Audio nur wenn `state.audioEnabled === true`

## Definition of Done
1. ✅ HTTP 200 unter Wrapper-URL, Engine + 5 mp3 alle 200 OK
2. ✅ Mode-Check via Wrapper unverändert
3. ✅ Pumpe/Turbine bedienbar als Slider (snap auf 4 Stufen)
4. ✅ 5-Tage-Bilanz läuft, Tag wechselt, Wasserstand animiert auf SVG
5. ✅ End-Screen Netzbalance + Verluste + Abweichung + Note A–E
6. ✅ Assessment-Calls mit Korridor-Daten
7. ✅ Sprachregel 4a: kein „Spiel/Spieler/spielen"
8. ✅ iPad ≥ 36 px Touch-Targets (Slider-Thumb 36, Buttons 36/40)

## Hotfix 2026-04-26 später Nachmittag (Thomas-Vorlage stausvg.html)
- **Querschnitt komplett neu** — Geometrie aus
  `.humanInput/StaustufenSimulator/stausvg.html` übernommen:
  Sky-Gradient + Sonne, Bergsilhouetten in 3 Tiefen-Layern, Erd-Gradient,
  Schnee, Schraffur, Bäume/Vögel/Fische/Wanderer als
  wiederverwendbare `<symbol>`s, Strommast + Stromleitungen,
  Staumauern und Wiesenränder, Kavernenkraftwerk-Optik.
- viewBox 1000×650, Becken bei y=140..200 (Ober) und y=420..480 (Unter),
  zwei separate Druckrohre vom Oberbecken zum Maschinenhaus rechts
  und vom Maschinenhaus links zum Unterbecken.
- **Schieberegler bidirektional + stufenlos** — statt 2 separate
  Slider (Pumpe/Turbine je 4 Stufen) gibt es jetzt **EINEN** Regler
  am Maschinenhaus, Range -100..+100 step=1:
  - Negativ → Pumpe (grün highlightet, Symbol grün glowt)
  - Positiv → Turbine (blau highlightet, Symbol blau glowt)
  - 0 → alles aus
  - Stufenlos: Engine multipliziert direkt `state.control × MAX_RATE`
- Slider sitzt **im SVG via `<foreignObject>`** direkt unter dem
  Maschinenhaus, kein separater Bedien-Footer mehr
- Pipe-Flow auf zwei Pfade verteilt, Richtung an `state.control` gebunden
  (`mode-turbine` → forward, `mode-pump` → reverse), Geschwindigkeit
  invers zur Magnitude (Volllast 0.6 s, schwach ≈3 s)
- Bewertung + Bilanz unverändert (Wasser-/Strom-Einheiten,
  Korridor ±15 %, Verlust-Quote)
- Engine: `state.pumpLevel`/`turbineLevel` weg, durch `state.control`
  (−1..+1) ersetzt; `setControl(value)` ist die einzige Eingangs-Funktion
- Assessment-Payload sendet jetzt `control: -100..+100` statt zwei
  diskrete Stufen-Felder

## Hotfix 2026-04-26 nachmittags (Thomas-Wunsch)
- Graph-Höhe verdoppelt: 180 → **360 px**, viewBox 1000×180 → **1200×360**
- Y-Achse: 5 Markierungen (0, ¼, ½, ¾, max) mit dezenten Hilfslinien
- **Pixelweise Cursor-Bewegung**: Tick-Loop von `setInterval`-getrieben
  auf RAF-Loop umgebaut. State hält `simProgress` als float in
  Tick-Einheiten, pro `requestAnimationFrame` wird er um
  `dt / SPEED_MS[speed]` erhöht. Cursor-X liest direkt simProgress —
  bewegt sich smooth pixelweise von links nach rechts.
- Tick-Trigger: wenn simProgress eine ganze Zahl überschreitet,
  wird der Tick verarbeitet. Pause stoppt simProgress, Speed-Wechsel
  ändert nur die Wachstumsrate (kein Sprung).
- drawGraph wird aus render() entfernt (RAF zeichnet jeden Frame)

## Was bleibt offen
- Browser-Augenkontrolle durch Thomas (Layout, Animation, Lesbarkeit)
- Optional: zweite/dritte Bilder-Generierung (Querschnitt-Hintergrund
  als Polish, InfoCard-Bilder). Atlas-Konzept-Skizze hatte das als
  „nach Atlas-Review" markiert
- ElevenLabs-Quota-Erschöpfung (siehe Quittung)
- Atlas-Review der Konzept-Skizze ist obsolet — Thomas hat „leg los"
  gegeben, ich bin durch

## Blocker
Keine.
