Adminator
1e51ef7def
- 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>
317 lines
15 KiB
Markdown
317 lines
15 KiB
Markdown
---
|
||
von: staustufen
|
||
an: atlas
|
||
datum: 2026-04-26 10:51
|
||
status: neu
|
||
betrifft: Konzept-Skizze Runde 2 (Querschnitt + Graph + InfoCards/Bilder/TTS)
|
||
---
|
||
|
||
# Konzept-Skizze Staustufen Runde 2
|
||
|
||
Punkt 1 (Netzbalance) ist umgesetzt — Korridor-Bewertung
|
||
±15 % grün / 15–30 % gelb / >30 % rot, Variablen + UI + Endscreen +
|
||
Assessment durchgezogen, Live-Indikator in Status-Spalte. Strategie-Dry-Run
|
||
zeigt: A nur bei Pumpe schwach in Tag 1+4 + Turbine **mittel** (nicht
|
||
stark!) in Tag 3+5 — „stark" schießt jetzt in den gelben Bereich (16 %
|
||
Überschuss). Didaktisch genau richtig.
|
||
|
||
Hier die Konzept-Skizzen für 2, 3, 4. Bin gespannt auf deinen Review.
|
||
|
||
---
|
||
|
||
## Punkt 2 — Querschnitts-Visualisierung
|
||
|
||
### Empfehlung: SVG-Komposit, kein DALL-E-Hintergrund
|
||
|
||
Begründung: Wir wollen einen lebendigen, exakten Wasserstand. Ein
|
||
DALL-E-Hintergrund ist statisch und müsste mit SVG-Wasserrects überlagert
|
||
werden — die geometrische Passung wird bei jedem Re-Generate brüchig
|
||
(DALL-E hält keine Pixelkoordinaten). **Ein einziges, sauber gezeichnetes
|
||
Inline-SVG** ist robuster, lehrbuchhafter und zoom-fest.
|
||
|
||
DALL-E nutze ich für **Card-Image** und (später) **InfoCard-Bilder**
|
||
außerhalb des Querschnitts, nicht als Hintergrund-Layer.
|
||
|
||
### SVG-Layer-Aufbau (von unten nach oben)
|
||
|
||
```
|
||
viewBox 0 0 800 460 (mehr Höhe als der jetzige Tank-Kasten,
|
||
Querschnitt ist die neue Hauptfläche)
|
||
|
||
┌─────────────────────────────────────────────────────────────────┐
|
||
│ Layer 1 — Himmel-Verlauf │
|
||
│ <linearGradient> #c8dde8 (oben) → #e8e4d8 (unten Tal) │
|
||
│ Layer 2 — Berg-Silhouette (path) │
|
||
│ Polygon mit Bergmulde links, Tal rechts, Felszeichnung │
|
||
│ #4a7c8a (Fjord-Farbe), Inner-Shadow für Tiefe │
|
||
│ Layer 3 — Berg-Innenschnitt (klare Lehrbuch-Linien) │
|
||
│ Schraffur in Bergkörper (CSS-Pattern), Andeutung Gestein │
|
||
│ Layer 4 — Druckrohr (path) vom oberen See in den Berg → │
|
||
│ Maschinenhaus im Tal. <path stroke="#5a5a5a" │
|
||
│ stroke-width="14" stroke-linecap="round" fill="none"> │
|
||
│ Layer 5 — Wasserkörper Oben (rect, Höhe = % Füllstand) │
|
||
│ <rect x=70 y=… width=180 height=… fill="url(#water)"> │
|
||
│ Y-Position bewegt sich live. clip-path passt sich Bergmulde │
|
||
│ Layer 6 — Wasserkörper Unten (rect, Höhe = % Füllstand) │
|
||
│ <rect x=520 y=… width=240 height=… fill="url(#water)"> │
|
||
│ Layer 7 — Maschinenhaus (group) │
|
||
│ Quader mit Pumpe-Symbol + Turbinen-Symbol seitlich, │
|
||
│ ein Gebäude im Tal, Andeutung Generator │
|
||
│ Layer 8 — Wasser-Animation im Druckrohr │
|
||
│ <line stroke-dasharray="6 10" │
|
||
│ stroke-dashoffset"0..-32" animation> │
|
||
│ Pumpe an → Pfeile rauf, Turbine an → Pfeile runter, │
|
||
│ beides aus → keine Linie. Geschwindigkeit ∝ Leistungsstufe. │
|
||
│ Layer 9 — Beschriftungen (text, Foreign Object für Inline-CSS) │
|
||
│ "Oberer Speicher 65 %" (oben rechts vom oberen See) │
|
||
│ "Maschinenhaus" (übers Gebäude) │
|
||
│ "Druckrohr" (am Rohrverlauf) │
|
||
│ "Tal" / "+450 m" als Höhenangabe │
|
||
│ Layer 10 — Klickflächen (transparent, oberste Ebene) │
|
||
│ Pumpe-Klickfläche (rect mit pointer-events) → Stufe togglen │
|
||
│ Turbine-Klickfläche analog │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
### Klickflächen — Toggle vs. Pop-up
|
||
|
||
Vorschlag: **Tap-Toggle** (kein Pop-up, weniger Klicks):
|
||
- Pumpe-Tap → Stufe wechselt aus → schwach → mittel → stark → aus
|
||
- Turbine-Tap genauso
|
||
- Aktuelle Stufe als Mini-Badge unter dem Symbol: „aus | schwach |
|
||
mittel | stark"
|
||
- Hover-Highlight (1.5er Outline + leicht gelber Glow)
|
||
- Tap-Target ≥ 56×56 px (großzügiger als 36 px wegen unklarer
|
||
Hit-Boxes auf Querschnitts-Bild)
|
||
- Bei Pumpe-an-Klick: Animation startet, Wasserkörper-Pfeil pulsiert
|
||
einmal kurz für visuelles Feedback
|
||
|
||
Alternativ — falls dir das zu fummelig ist — kleine Pop-up-Bubble mit 4
|
||
Buttons. Sag, was du lieber hast; ich tendiere zu Toggle, weil schneller.
|
||
|
||
### Wasserstands-Animation
|
||
|
||
`<rect>`-Höhe per `height` und `y` animiert via CSS-Transition
|
||
`transition: height 0.6s ease, y 0.6s ease;` — bei jedem Tick neue
|
||
Werte gesetzt, Browser interpoliert. Das ist die gleiche Mechanik wie
|
||
bei den jetzigen Tank-Balken, nur mit Querschnitts-Geometrie.
|
||
|
||
### Layout-Auswirkung
|
||
|
||
Der jetzige rechte Steuerpanel-Block (`segPump`/`segTurbine`) **fliegt
|
||
raus**, weil Steuerung in den Querschnitt wandert. Ich mache stattdessen:
|
||
|
||
```
|
||
┌─────── header (Plattform) ───────┐
|
||
│ Status-Spalte (210) │
|
||
│ - Tag-Pille │ ┌────────────────────┐
|
||
│ - Netzbalance │ │ Querschnitt-SVG │ <— Hauptfläche
|
||
│ - Korridor jetzt │ │ ~720×420 │
|
||
│ - Verluste │ │ Pumpe + Turbine │
|
||
│ - Tageszeit │ │ direkt klickbar │
|
||
│ │ └────────────────────┘
|
||
└──────────────────────────────────┘
|
||
┌───────────── Bedarfs-Graph (Linien, mit Korridor) ────────────┐
|
||
│ ~180 px Höhe │
|
||
└─────────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
Hilfe-Text (jetziger `.st-help-line`) verschiebt sich in den
|
||
**InfoCard-Strom** (Punkt 4).
|
||
|
||
---
|
||
|
||
## Punkt 3 — Bedarfsgraph: Linien + Korridor + Wellenform
|
||
|
||
### Tageskurve mit 4 Stützpunkten + Bezier
|
||
|
||
```
|
||
Pro Tag 4 Stützpunkte (Stunde, relativer Bedarf):
|
||
00:00 → 0.65 · Nacht-Tal
|
||
08:00 → 1.05 · Morgenspitze (Industriestart)
|
||
13:00 → 0.85 · Mittagsdelle
|
||
19:00 → 1.10 · Abendspitze (Haushaltslicht)
|
||
24:00 → 0.65 · zurück zur Nacht (= 00:00 nächster Tag)
|
||
|
||
Skaliert mit dem Tagesmittel aus DEMAND_PER_DAY (jetzt [6,12,22,6,22]).
|
||
Tag 1 Mittel 6 → Tageskurve schwingt zwischen 3.9 und 6.6.
|
||
Tag 3 Mittel 22 → schwingt zwischen 14.3 und 24.2.
|
||
|
||
Tick-Granularität bleibt 12/Tag → der Tick-Bedarf wird per Bezier-
|
||
Interpolation aus den 4 Stützpunkten gelesen. Engine-Anpassung:
|
||
function demandAtTick(day, tickInDay) → Smoothstep zwischen Stützpunkten.
|
||
```
|
||
|
||
### Graph-Aufbau
|
||
|
||
```
|
||
Höhe: 180 px (statt 130). Volle Breite minus 16 px Padding.
|
||
viewBox 0 0 1000 180
|
||
|
||
Y-Achse: 0 .. demandMax * 1.30 (Headroom für Korridor-Oberkante)
|
||
X-Achse: 5 Tage à 12 Ticks = 60 Punkte
|
||
|
||
Layer-Reihenfolge (unten nach oben):
|
||
1. Tagesstreifen (abwechselnd #fafaf6 / #f5f3ea als <rect>)
|
||
2. Korridor-Band:
|
||
<path d="M ... corridor_upper ... L ... corridor_lower ..."
|
||
fill="rgba(90,138,94,.15)"/>
|
||
Obergrenze = Bedarfslinie × 1.15
|
||
Untergrenze = Bedarfslinie × 0.85
|
||
Halbtransparent grünlich, sanft.
|
||
3. Bedarfslinie (Bezier-Pfad, dick, rot):
|
||
<path d="M..." stroke="var(--ggs-coral)" stroke-width="2.5"
|
||
fill="none"/>
|
||
4. Versorgungslinie (free + turbine - pump verbrauch, blau):
|
||
Wird je Tick neu gezeichnet (kompletter Pfad mit allen bisherigen
|
||
Werten). Zukunfts-Ticks nicht zeichnen.
|
||
<path stroke="var(--ggs-fjord-dark)" stroke-width="2"/>
|
||
5. Differenz-Shading bei Außerhalb-Korridor:
|
||
Zwischen Bedarfs- und Versorgungslinie.
|
||
Nur die Segmente, wo |gap|/demand > 0.15
|
||
fill: rot mit fill-opacity 0.35
|
||
Damit man auf einen Blick sieht, wo gemurkst wurde.
|
||
6. Tag-Trenner (vertikale Linien):
|
||
<line x1=".." y1=0 y2=180 stroke="#c8c4b3" stroke-width="1"/>
|
||
Plus Beschriftung "Tag 1" .. "Tag 5" oben.
|
||
7. Tick-Cursor (jetzt):
|
||
Vertikalbalken + Punkt auf jeder Linie.
|
||
Aktualisiert je Tick.
|
||
8. Y-Achsen-Hilfslinien (1-2 Stück, gestrichelt, sehr dezent)
|
||
z. B. Linie bei demand=0 und bei demand=demandMax.
|
||
```
|
||
|
||
### Farben (Anschluss ans Design-System)
|
||
|
||
```
|
||
Bedarfslinie: var(--ggs-coral) #c85c4a
|
||
Versorgungslinie: var(--ggs-fjord-dark) #1f4e5a
|
||
Korridor-Band: rgba(90,138,94,.15)
|
||
Außerhalb-Shading: rgba(200,92,74,.35)
|
||
Tag-Trenner: #c8c4b3
|
||
Cursor: var(--ggs-fjord) #4a7c8a
|
||
```
|
||
|
||
### Interaktion (optional, einfach)
|
||
|
||
Bei Hover über X-Position: Tooltip mit Tick-Werten.
|
||
Für L1 lasse ich das weg (nicht im Pflichtenheft, eindeutig Polish).
|
||
|
||
---
|
||
|
||
## Punkt 4 — Bilder + InfoCards + TTS
|
||
|
||
### 4a · Bild-Liste für L1
|
||
|
||
| Bild | Datei | Größe | Priorität | Prompt-Stichworte |
|
||
|------|-------|-------|-----------|-------------------|
|
||
| Card-Image | `App/assets/img/sim-staustufen.png` | 1024×576 | **dringend** (Cockpit) | Stausee in Bergmulde, Staumauer mit Tau, Tal mit Maschinenhaus, Alpenkulisse, Heli-Stil flat-alpine |
|
||
| InfoCard 1: Pumpspeicher-Anlage | `App/sims/staustufen/assets/img/info-anlage.png` | 800×450 | hoch (Tag 1) | Querschnitt-Lehrbuch-Stil, oberer und unterer See in Kaskade, Verbindung sichtbar |
|
||
| InfoCard 2: Pumpen-Funktion | `…/info-pumpen.png` | 800×450 | hoch (1. Pumpe) | Pumpe im Maschinenhaus, Wasser fließt nach oben, Strom-Symbol als Verbrauch |
|
||
| InfoCard 3: Turbinen-Funktion | `…/info-turbinen.png` | 800×450 | hoch (1. Turbine) | Turbine, Wasser fließt nach unten, Strom-Symbol als Erzeugung |
|
||
| InfoCard 4: Korridor-Konzept | `…/info-korridor.png` | 800×450 | mittel (1× außerhalb Korridor) | Diagrammartig: Strom-Bedarf als Linie, grüner Korridor, ein Pfeil rein/raus |
|
||
| InfoCard 5: Spitzen-Tag | `…/info-spitze.png` | 800×450 | mittel (Tag 3 Start) | Dunkler Abend, viele Lichter in einer Stadt, hohe Stromnachfrage |
|
||
|
||
**Prompt-Stil — analog Heli, mit Anpassung „Wasserkraft":**
|
||
|
||
```
|
||
Flat Scandinavian alpine illustration, wide panoramic 16:9,
|
||
painted vector style, dark forest green (#1f4b37) and sage green (#4a7c4e)
|
||
mountains, water turquoise (#4a7c8a), beige (#e8e4d8) valley, snow white
|
||
highlights. Recognizable hydropower elements (storage lake, dam, turbine
|
||
hall, penstock) clearly drawn. NO text, NO watermark, NO borders, NO frame.
|
||
Scene: <spezifisch pro Bild>
|
||
```
|
||
|
||
**Reihenfolge der Generierung** (Atlas-Empfehlung folgt):
|
||
1. Card-Image — sobald „go" — autorisiert per Brief, blockiert sonst
|
||
Cockpit-Optik
|
||
2. InfoCards 1–3 erst nach Atlas-Review der Konzept-Skizze
|
||
3. InfoCards 4–5 als Polish, nach Erstdurchlauf
|
||
4. SQL-Update `module_info.card_image = 'sim-staustufen.png'` mache ich
|
||
selbst, oder soll das Atlas? (Status quo: ich pinge Meister-Instanz)
|
||
|
||
### 4b · InfoCard-Trigger-Punkte
|
||
|
||
Pattern aus `App/sims/logistik/game.html`: `.lg-infocard-container`,
|
||
fixed top-right, slide-in von rechts. Adaptiere als `.st-infocard-*`
|
||
mit gleicher Struktur, oder Atlas zieht es in
|
||
`App/assets/css/design-system.css` als generisches `.ggs-infocard-*`
|
||
(wäre langfristig besser, aber bedeutet Atlas-Touch — bitte sagen
|
||
ob ich es Modul-lokal halte oder du in der Plattform anlegst).
|
||
|
||
| # | Trigger | Titel | Inhalt (Kurzform) |
|
||
|---|---------|-------|-------------------|
|
||
| 1 | Sofort nach Welcome-Hint, Tag 1 Tick 0 | „Eine Pumpspeicher-Anlage" | „Du steuerst zwei Speicherseen in den Alpen. Wasser oben ist wertvoll: aus 100 Litern oben kannst du Strom machen, wenn sie nach unten fließen." |
|
||
| 2 | Erste Pumpen-Aktion | „Pumpen kostet Strom" | „Wenn du pumpst, hebst du Wasser nach oben. Das verbraucht Strom — du verschiebst Energie für später. Wirkungsgrad: ~75 %." |
|
||
| 3 | Erste Turbinen-Aktion | „Turbinen liefern Strom" | „Wasser fließt nach unten und treibt die Turbine an. So entsteht Strom — Wirkungsgrad ~85 %." |
|
||
| 4 | Erstes „außerhalb Korridor" (≥ 15 % Abweichung) | „Netz aus dem Gleichgewicht" | „Zu wenig Strom = Lücke (Verbraucher kriegen nichts). Zu viel = Überschuss (Strom geht verloren). Beides ist schlecht. Halte das Netz im grünen Korridor." |
|
||
| 5 | Tag 3 Start (Spitzentag) | „Heute kommt die Spitze" | „Tag 3 hat den höchsten Bedarf. Hoffentlich hast du oben genug Wasser." |
|
||
|
||
Anzeige-Logik: Slide-in 4 s, dann automatisch wegfaden.
|
||
Manuelles Schließen via X. **Nicht-blockierend** — Sim läuft weiter
|
||
(im Gegensatz zu Hint-Pop-ups, die pausieren).
|
||
|
||
### 4c · Sprachausgabe (TTS)
|
||
|
||
**Empfehlung für L1: Ja, mit Mute-Default-an.**
|
||
|
||
Begründung: 5 InfoCard-Texte à 4–6 s = ~30 s Audio, einmalig
|
||
generiert. Kostet 30 s × 0.30 €/min = **0.15 €** bei ElevenLabs Standard.
|
||
Macht den Unterschied „grafische App" vs. „lebendige Lernumgebung".
|
||
Atlas-Briefing nennt es „optional" — meine Empfehlung: machen, weil
|
||
billig und didaktisch wertvoll.
|
||
|
||
Im Klassenraum standardmäßig **stumm** (Lehrer schalten an, wenn sie
|
||
wollen) — Mute-Toggle im Header (🔊/🔇). Outside-Klassenraum (z. B.
|
||
Hausaufgaben-Modus, `mode=free`) standardmäßig **an**.
|
||
|
||
Stimme: ruhig, sachlich, deutsch, Frau (z. B. ElevenLabs „Charlotte"
|
||
oder „Vera"). Ich nehme den gleichen Voice-Profile wie Logistik
|
||
(Konsistenz über Module hinweg) — sag mir welcher das ist.
|
||
|
||
Skript (~5 Snippets, je 4–6 s):
|
||
|
||
```
|
||
1. anlage.mp3 — InfoCard 1 Text vorgelesen
|
||
2. pumpe.mp3 — InfoCard 2 Text vorgelesen
|
||
3. turbine.mp3 — InfoCard 3 Text vorgelesen
|
||
4. korridor.mp3 — InfoCard 4 Text vorgelesen
|
||
5. spitze.mp3 — InfoCard 5 Text vorgelesen
|
||
```
|
||
|
||
Pipeline: `App/scripts/generate-sounds.py` mit
|
||
`App/sims/staustufen/sounds-list.json` analog Logistik. Texte
|
||
identisch zu InfoCard-Texten, kein separater TTS-Skript.
|
||
|
||
### 4d · Eine Plattform-Frage
|
||
|
||
`module_info.card_image` ist die SQL-Spalte für Card-Image (laut deinem
|
||
Brief). Wenn ich das setzen soll: SQL geht über Meister-Instanz, oder
|
||
darf ich direkt schreiben? Im Memory steht „Meister verwaltet Server",
|
||
aber für lokal-XAMPP ist das ja noch egal. Sag bitte, wer.
|
||
|
||
---
|
||
|
||
## Anti-Scope-Bestätigung
|
||
|
||
Ich werde im Konzept-Umsetzungs-Sprint **nicht** machen:
|
||
- Mehrere Levels (bleibt L1)
|
||
- Wetter / Solar / Wind / Saison
|
||
- Eigene API-Endpoints
|
||
- Plattform-CSS-Änderungen ohne dein OK
|
||
- Sound-Pipeline für andere Module
|
||
|
||
## Nächste Schritte (mein Vorschlag)
|
||
|
||
- Du reviewst dieses Konzept (1–2 h)
|
||
- **Parallel** generiere ich das Card-Image (autorisiert,
|
||
blockiert nichts, ~1 € + 5 min Wartezeit)
|
||
- Nach deinem OK: Querschnitt → Graph → InfoCards → optional TTS
|
||
|
||
Wenn das Konzept dir zu groß ist und du einzelne Punkte erst nach den
|
||
anderen willst, sag's. Ich kann auch Querschnitt + Graph zuerst und
|
||
InfoCards/TTS nach Thomas-Zwischen-Test.
|
||
|
||
— Staustufen
|