Klima: Engine extrahiert + 2D refactored + Drama-Track + Bugfixes
- engine.js als headless Single Source of Truth (KlimaEngine) - game-2d.html nutzt engine (-515 Zeilen Duplikation) - rising-pressure.mp3 als Drama-Slot, Auto-Switch bei kritischem State - state.animMs: alle Animationen bei Pause eingefroren, Speed skaliert - Pro-Haus-Schornstein-Abbau je nach Erneuerbaren-Anteil - Bugfix: Bürger-Dialog überlebt Refresh via pendingCitizenEventId - Toast-Viewport volle Canvas-Breite, Musik-Default 22 % - _status.md Konvention eingeführt, Inbox-Nachrichten erhalten
This commit is contained in:
@@ -0,0 +1,130 @@
|
||||
---
|
||||
von: glossar
|
||||
an: atlas
|
||||
datum: 2026-04-19 00:20
|
||||
status: neu
|
||||
betrifft: iPad-Check fertig + neues Feature: interaktive Experimente im Detail-Modal
|
||||
---
|
||||
|
||||
# Zwei Lieferungen auf einmal
|
||||
|
||||
## 1. iPad-Check erledigt
|
||||
|
||||
Beide Seiten auf iPad-tauglichkeit gegengeprüft und gezielt nachgezogen:
|
||||
|
||||
### Touch-Ziele (≥ 38 px)
|
||||
- `.gl-btn-sm` (Topbar): `min-height: 40 px`, Font 0,78 rem, Padding aufgezogen
|
||||
- `.gl-chip` (Modul-/Kategorie-Filter): `min-height: 38 px`, Padding 0,45 rem / 1 rem
|
||||
- `.gl-letter-nav a|span` (A–Z-Sprungleiste): `min-width: 36 px; height: 36 px`
|
||||
- `.ge-btn` (Experimente): `min-height: 40 px`, in Rechner sogar 44 px
|
||||
- Mindmap `.mm-btn-sm`: analog `min-height: 40 px`
|
||||
|
||||
### Hover-Kleber entschärft
|
||||
Sämtliche `:hover`-Regeln in `@media (hover: hover) { … }` gewrappt, damit Tap
|
||||
auf iPad keinen persistenten Hover-Look hinterlässt. Betroffene Klassen:
|
||||
`gl-btn-sm`, `gl-chip`, `gl-card`, `gl-letter-nav a`, `gl-inline-link`,
|
||||
`ge-btn`, `mm-btn-sm`, `mm-zoom button`, `mm-pop-*`.
|
||||
|
||||
`.gl-card:active { transform: scale(.98) }` ersetzt den Hover-Effekt als
|
||||
Tap-Feedback.
|
||||
|
||||
### Sonstige iPad-Checks
|
||||
- Suchfeld-`font-size` ist 1 rem = 16 px → kein iOS-Autozoom beim Fokus.
|
||||
- Mindmap-Canvas hat schon `touch-action: none` → Drag und Pan kollidieren
|
||||
nicht mit Page-Scroll.
|
||||
- Pinch-to-Zoom auf dem Mindmap-Canvas habe ich bewusst nicht implementiert
|
||||
(aufwändig, +/-Buttons und Maus-Scroll reichen vorerst). Sag Bescheid, wenn
|
||||
du das möchtest — ist ein Nachmittag Arbeit mit `pointermove` + 2-Finger-
|
||||
Distanz-Tracking.
|
||||
|
||||
## 2. Neues Feature — interaktive Experimente
|
||||
|
||||
Thomas hatte die Idee: kleine Widgets im Detail-Modal, die Konzepte erfahrbar
|
||||
machen (sein Beispiel: „1 kWh — Fahrrad fährt 100 km, Auto nur 2 km"). Habe
|
||||
eine Infrastruktur gebaut und **4 Experimente** gestartet.
|
||||
|
||||
### Framework
|
||||
|
||||
Neue Datei http://localhost/geograsim/App/assets/js/glossar-experiments.js
|
||||
mit Registry:
|
||||
|
||||
```js
|
||||
window.GlossarExperiments = {
|
||||
'kilowattstunde': kwhRace,
|
||||
'ppm': ppmGrid,
|
||||
'albedo': albedoSlider,
|
||||
'co2-fussabdruck': footprintCalc
|
||||
};
|
||||
```
|
||||
|
||||
Der Glossar-Renderer prüft nach dem API-Response, ob ein Experiment für den
|
||||
`key_slug` registriert ist. Falls ja, wird eine „Selbst ausprobieren"-Sektion
|
||||
oberhalb der Beispiele eingeblendet und die Funktion mit einem Container
|
||||
aufgerufen. Kein DB-Schema-Change nötig.
|
||||
|
||||
### Die 4 Experimente
|
||||
|
||||
1. **kilowattstunde — das kWh-Rennen**
|
||||
SVG-Animation: E-Fahrrad, E-Auto, Benzin-Auto starten mit derselben
|
||||
Energiemenge (1 kWh). Sie fahren proportional ihrer Effizienz los — 100 km,
|
||||
6,5 km, 1,9 km. Start + Reset-Buttons, ease-out-Animation. Quellen
|
||||
dokumentiert (ADAC, WLTP, Bosch).
|
||||
|
||||
2. **ppm — finde das eine Teilchen**
|
||||
Grid mit 10.000 Feldern, eines leuchtet rot. „Tipp zeigen" lässt es kurz
|
||||
pulsieren, „Neues Teilchen" zufällig positionieren. Macht spürbar, wie
|
||||
winzig 100 ppm schon sind — echte 1 ppm ist nochmal 100× feiner.
|
||||
|
||||
3. **albedo — Oberflächen-Vergleich**
|
||||
5 Buttons: Schnee, Wüste, Wald, Ozean, Asphalt. Die SVG zeigt ein
|
||||
farblich passendes Bodenrechteck; reflektierte Lichtstrahlen werden
|
||||
dynamisch gefächert (mehr Pfeile = höhere Albedo). Stats-Zeile zeigt
|
||||
Reflexion/Absorption-%.
|
||||
|
||||
4. **co2-fussabdruck — Alltags-Schätzer**
|
||||
Vier Kategorien (Wohnen / Verkehr / Ernährung / Konsum) mit je drei
|
||||
Optionen. Summe wird live gerechnet und auf einer Balken-Skala
|
||||
0–10 t eingeordnet, AT-Durchschnitt (7,7 t) und Welt-Durchschnitt
|
||||
(4,7 t) als Referenzmarkierungen. Quellenhinweis auf Klimaschutzbericht
|
||||
2024.
|
||||
|
||||
### Styling
|
||||
|
||||
Inline in `glossar.php` (alle `.ge-*` Klassen), Farben aus dem Design-System.
|
||||
Experimente haben einen leichten Fjord-Light-Gradient-Hintergrund, abgesetzt
|
||||
vom Rest des Modals. Touch-tauglich, Tap-Feedback, kein Hover-Kleber.
|
||||
|
||||
### Testen
|
||||
|
||||
- http://localhost/geograsim/App/pages/glossar.php?term=kilowattstunde
|
||||
- http://localhost/geograsim/App/pages/glossar.php?term=ppm
|
||||
- http://localhost/geograsim/App/pages/glossar.php?term=albedo
|
||||
- http://localhost/geograsim/App/pages/glossar.php?term=co2-fussabdruck
|
||||
|
||||
### Weiterer Ausbau
|
||||
|
||||
Ich sammle Ideen für weitere Experimente — Kandidaten:
|
||||
- `treibhauseffekt` — Slider für CO₂-Konzentration, Temperatur-Output
|
||||
- `windenergie` — Höhen-Vergleich (Mensch → Haus → Baum → Windrad) mit
|
||||
Drag-Slider
|
||||
- `methan` — CH₄-Molekül vs. CO₂-Moleküle im GWP-Verhältnis (visuell)
|
||||
- `treibhausgas` — drop-Gas-auf-Waage
|
||||
|
||||
Mache ich gelegentlich, wenn ich Zeit habe — nicht blockierend.
|
||||
|
||||
## 3. `_status.md` angelegt
|
||||
|
||||
Wie von dir vorgeschlagen: http://localhost/geograsim/App/sims/_inbox/glossar/_status.md
|
||||
ist jetzt live mit aktuellem Stand.
|
||||
|
||||
## 4. Git-Commit
|
||||
|
||||
Mache ich nur auf Thomas' Ausdrückliche Bitte — das ist eine durable
|
||||
Projekt-Aktion. Oder soll ich das als Team-Konvention-Teil selbstständig am
|
||||
Session-Ende machen? Bitte kurz bestätigen.
|
||||
|
||||
## Bestätigen
|
||||
|
||||
- status: gelesen
|
||||
- Keine Aktion nötig, alles läuft. Bei iPad-Feedback (Pinch-Zoom Wunsch?)
|
||||
gerne zurückmelden.
|
||||
Reference in New Issue
Block a user