- Konzept/, didaktik_geografie/, didaktik_simulation/, v2-modules/, v2-platform/ - 12 code-workspace-Files - STATUS-*.md - viele M/D/R-Änderungen an bereits getrackten Files - .gitignore verstärkt: **/.humaninput/, **/secret_keys.txt Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
4.4 KiB
von, an, datum, status, betrifft
| von | an | datum | status | betrifft |
|---|---|---|---|---|
| staustufen | atlas | 2026-04-26 11:40 | neu | Runde 2 komplett — Slider + Querschnitt + Graph + InfoCards + TTS, bereit für Thomas-Test |
Runde 2 fertig
Thomas hat „leg los, wie geplant" gesagt + zusätzlich „Schieberegler statt Schalter mit grober Skala". Beides drin. Konzept-Review von dir war damit obsolet — ich habe Punkt 2/3/4 nach meiner Konzept-Skizze umgesetzt.
Was steht
| Punkt | Stand | Notizen |
|---|---|---|
| 1 — Netzbalance | live (vorherige Quittung) | unverändert |
| 2 — Querschnitt | live | SVG-Komposit, kein DALL-E-Hintergrund |
| 3 — Graph | live | Bezier-Wellenform + Korridor + Marker |
| 4a — Card-Image | live (vorherige Quittung) | unverändert |
| 4b — InfoCards | live | 5 Trigger, Slide-in von rechts |
| 4c — TTS | live | OpenAI statt ElevenLabs (Begründung unten) |
| Bonus — Slider | live | Thomas-Wunsch über Konzept-Skizze hinaus |
Schieberegler
Die alten 4-Buttons-Stufenschalter sind durch zwei Range-Slider ersetzt:
min=0 max=3 step=1(snappt zu 4 Positionen)- Track-Fill färbt sich progressiv mit Stufe (fjord blau für Pumpe, moss grün für Turbine)
- Tick-Skala unter dem Slider mit Klick-Snap auf Labels („aus / schwach / mittel / stark")
- Thumb 36 px für iPad-Touch, große Hit-Box
- Live-Readout neben Label aktualisiert sich beim Ziehen
Querschnitt (Punkt 2)
Inline-SVG ersetzt die Tank-Balken. Bergsilhouette mit Mulde (oben) + Tal (rechts), Schraffur-Pattern für Felsstruktur, Schnee auf Gipfeln. Oberer See in der Bergmulde mit Staumauer-Andeutung, Druckrohr durch den Berg zum Maschinenhaus im Tal, unterer See daneben. Beschriftungen direkt am Element. Wasserstand-Animation via rect.y/height (CSS-transition 0.6 s), Pipe-Flow via stroke-dasharray-Animation — Geschwindigkeit ∝ Stufe (2.4 s / 1.2 s / 0.6 s).
Layout: 3-Spalten → 2-Spalten (Status / Canvas), Steuerungs-Spalte ist weggefallen, Slider sitzen im Canvas-Footer direkt unterm Querschnitt.
Graph (Punkt 3)
Höhe 180 px, viewBox 1000×180. Tageskurve mit 4 Stützpunkten via Smoothstep:
- 00 h: 72 % (Nacht-Tal)
- 08 h: 116 % (Morgenspitze)
- 13 h: 94 % (Mittagsdelle)
- 19 h: 121 % (Abendspitze)
Tagesmittel kalibriert auf 1.0, deshalb bleiben die
DEMAND_PER_DAY- Konstanten in ihrer Bedeutung erhalten.
Korridor-Band ±15 % grünlich halbtransparent, Bedarfslinie rot
deterministisch, Versorgungslinie blau aufgebaut über state.history.supply,
Außerhalb-Marker gelb/rot je nach Schwellwert. Tag-Trenner, Cursor mit
Punkten auf beiden Linien.
InfoCards (Punkt 4b)
5 Stück, slide-in von rechts, 9 s Auto-Dismiss + manueller Close. Trigger:
- anlage: direkt nach Welcome-Hint-Schließen
- pumpe: erste Pumpe ≥ schwach
- turbine: erste Turbine ≥ schwach
- korridor: erstes Mal außerhalb grün, frühestens Tick 2
- spitze: Beginn Tag 3
Border-Tone color-matched (pump=fjord, turbine=moss, warn=ocker, spike=coral).
TTS (Punkt 4c) — OpenAI statt ElevenLabs
ElevenLabs-Quota war erschöpft (6 Credits übrig, je Snippet ~150-210
gebraucht, ergab 5/5 quota_exceeded-Fehler). Habe auf OpenAI
gpt-4o-mini-tts gewechselt — dafür gibt es ja
App/sims/heli/scripts/generate-audio-openai.sh als etabliertes Pattern.
Kosten: ~0.013 € für alle 5 Snippets.
- Stimme:
nova, Style-Instruktion „patient teacher addressing students aged 10–14, German pronunciation, unhurried" - 5 mp3 in
App/sims/staustufen/sounds/(124-267 KB, total ~990 KB) - Mute-Toggle 🔇/🔊 im Header, Default stumm
- Audio spielt nur wenn
state.audioEnabled === true
ElevenLabs-Quota wieder aufladen oder dauerhaft auf OpenAI bleiben?
Der Vorteil OpenAI: bei gpt-4o-mini-tts kann man Style-Instruktionen
mitschicken, was ElevenLabs nicht hat (nur Voice-Settings).
Klang-Qualität ist subjektiv — magst du mal reinhören und entscheiden?
Anti-Scope eingehalten
- Kein zweites Level
- Kein Wetter / Solar / Wind / Saison
- Keine eigenen API-Endpoints
- Keine Plattform-CSS-Änderungen (
.st-*-Prefix bleibt modul-lokal) - Keine SQL-Schema-Änderungen
- Keine Touch-Plattform-Code
Bereit für
- Thomas-Augenkontrolle im Browser — iPad bevorzugt
- Falls Layout zickt: Inline-SVG ist viewBox-flexibel, CSS-Media-Queries für 900-1199 (iPad) und <900 (mobile) sind drin
- Bei Bug-Reports: Konstanten in
engine.jsZ. 28-69 (PUMP_RATE, TURB_RATE, DEMAND_PER_DAY, DEMAND_ANCHORS, FREE_SUPPLY, INIT_TOP/BOT) zentral anpassbar
fertig.
— Staustufen