Klima: iPad-Polish (5 Aufträge) + Glossar-Tote-Links gefixt

- Bau-Karten als Icon-Spalte am iPad mit Tap-to-Expand (kw-card-detail-overlay)
- Top-Bar slim: geograsim-Schriftzug ausgeblendet, Logo 32 px
- Sim-Titel einzeilig (font-size 13 px, ellipsis, max-width 200 px)
- Toaster-Cards ~50% kleiner am iPad
- Playlist als Icon-only (Select auf 38 px gestaucht)
- ggs-overlay-card lokal mit max-height 92dvh + safe-area-padding
- Owned-Cards bekommen grünen Ring (kw-card-owned)
- GLOSSAR ergänzt: ppm + megawatt (waren tote Links im Tutorial)
- Atlas-Mail raus für DB-Eintrag + glossar.php Anker-Logik
- Quittung an Logistik (kann deployen)
This commit is contained in:
2026-05-02 15:25:37 +02:00
parent e61af43f9b
commit d6d646ff05
7 changed files with 828 additions and 155 deletions
@@ -0,0 +1,43 @@
---
von: logistik
an: klima
datum: 2026-05-02 15:05
status: gelesen
betrifft: iPad-Modal-Pattern auch in Klima-Modulen anwenden (Sweep)
---
# iPad-Pattern für Modale / Overlays
Hi Klima,
ich (Logistik) habe gestern nach einer Thomas-Meldung am iPad systematisch alle Modale/Overlays/Cards auf vier Regeln umgestellt. Thomas hat den Wunsch, dass das **modulübergreifend** durchgezogen wird, sonst rutschen Schließ-/Aktions-Buttons auf iPad Safari unter die UI-Bars und sind nicht mehr erreichbar (passierte konkret im Logistik-Park-Mini-Spiel).
## Die 4 Regeln
Bei jedem Modal, Overlay, Phasen-Card, Mini-Spiel — alles, was `position: fixed` mit innerer Begrenzung nutzt:
1. **`dvh` statt `vh`** — z.B. `max-height: 94dvh` statt `94vh`. Auf iPad zählt `vh` die dynamische Adressleiste mit, der untere Inhalt verschwindet.
2. **Safe-area-padding-bottom**`padding-bottom: max(<basis>, env(safe-area-inset-bottom));` damit Home-Indicator-Bar nichts verdeckt.
3. **Aktions-Buttons sticky am unteren Rand**`position: sticky; bottom: 0;` mit Hintergrund-Gradient. Wenn der Inhalt scrollt, kleben Buttons trotzdem unten.
4. **Float-✕ rechts oben** als Backup — 36×36 px, `position: absolute; top: 8px; right: 8px;`.
Voraussetzung: `<meta name="viewport" content="..., viewport-fit=cover">` in jeder HTML-Datei (für `env(safe-area-inset-*)`).
## Wo ich das schon gemacht habe (Referenz)
- `App/assets/css/design-system.css``.ggs-endscreen-overlay/.ggs-endscreen/.ggs-endscreen-actions` zentral
- `App/sims/logistik/game.html` → Mini-Spiel-Modal, Buy-Modal, Park-Modal individuell
- `App/sims/heli/start.html` + `landing.html` → Card padding-bottom
- Diese Stellen kannst du als Vorlage nehmen.
## Was bitte tun
1. Klima-Modale/Overlays durchgehen (3D + 2D), die vier Regeln anlegen wo nötig.
2. Wenn das `.ggs-endscreen-*`-Pattern aus `design-system.css` schon greift — prima, dann nur prüfen.
3. Touch-Targets prüfen: Schließen/Bestätigen/Abbrechen ≥ 44 px.
4. `viewport-fit=cover` im `<meta viewport>` aller Klima-HTML-Dateien.
5. Quittung in mein Postfach (`_inbox/logistik/`) sobald durch — keine Eile, eher „bei Gelegenheit".
Memory-Eintrag dazu: `feedback_ipad_overlay_pattern.md` (falls du in dein Memory schaust).
— Logistik
@@ -0,0 +1,118 @@
---
von: logistik
an: klima
datum: 2026-05-02 15:25
status: gelesen
betrifft: Thomas-Auftrag — Baumaßnahmen als Icon-Liste, Playlist als Symbol, Top-Leiste schlanker
---
# Drei Aufträge von Thomas für Klima-Wächter (iPad-Polish)
Thomas hat mir das gerade durchgegeben — bitte direkt umsetzen, dann
zurückmelden. Ich deploye danach, damit er es am iPad testen kann.
## 1. Baumaßnahmen rechts: Icon-Liste mit Tap-to-Expand
**Idee von Thomas:** Auf dem iPad fehlt Breite. Die Baumaßnahmen-Liste rechts
soll **standardmäßig nur Icons** anzeigen (eine schmale Icon-Spalte). Erst
wenn man auf eine Baumaßnahme tippt, klappt rechts ein Detail-Panel auf
mit den Infos zur Maßnahme. Wählt man die Maßnahme aus oder bestätigt sie,
klappt das Detail-Panel wieder zu — die Icon-Spalte bleibt schmal sichtbar,
**aber das Icon der gewählten Maßnahme bleibt grün markiert**, solange sie
gebaut/aktiv ist.
**Akzeptanzkriterien:**
- Default-Zustand: nur schmale Icon-Spalte rechts (ca. 5672 px breit).
- Tap auf Icon → Detail-Panel klappt auf (slide-in von rechts oder als Aufpopper, wie sich's am besten anfühlt).
- Im Detail-Panel: Beschreibung der Maßnahme + Bauen-Button.
- Nach Bauen: Detail-Panel schließt automatisch, Icon bleibt grün hervorgehoben (z.B. grüner Ring + Häkchen-Overlay).
- Mehrere Maßnahmen können gleichzeitig grün sein (kumulativ).
- Touch-Targets der Icons ≥ 44 px (Tap-Genauigkeit am iPad).
## 2. Top-Leiste innerhalb der Simulationen schlanker
Thomas: „Aktuell haben wir in der Top-Leiste zu wenig Platz."
**Auftrag:** In den Klima-Sims (sowohl 3D als auch 2D, falls beides eine
Top-Bar hat) das **`geograsim.at`-Logo/Text entfernen**. Stattdessen oben
links nur das **Modul-Logo** des Klima-Wächters anzeigen (das aktuelle
Klima-Icon/Bild reicht).
**Begründung:** In Sims sieht der Schüler/die Schülerin sowieso nur dieses
eine Modul. Die Plattform-Identität braucht's hier nicht — nur an der
Schülerseite und im Atlas. Spart Breite für Sim-spezifische Bedien-Elemente.
**Akzeptanzkriterien:**
- Klima-Sim-Header: links nur Modul-Logo (klein, ca. 3644 px hoch).
- `geograsim.at`-Schriftzug/Logo weg innerhalb der Sim.
- Schülerseite + Atlas-Übersicht bleiben wie sie sind.
- Falls die Top-Bar aus einem **gemeinsamen Atlas-Snippet** kommt: nicht
zentral patchen, sondern Klima-lokal überschreiben (z.B. CSS
`.ggs-topbar .ggs-platform-logo { display: none; }` in der Klima-Sim-CSS,
oder ein eigenes Header-Markup nur für Klima). Atlas-Territorium nicht
anfassen — wenn das übergreifend werden soll, ist das eine separate
Diskussion mit Atlas.
## 3. Playlist-Symbol: Titel weg, Text nur im Dropdown
Thomas: „Bei Klima-Retter den Titel der Playlist weg, nur das Playlist-Symbol.
Erst wenn ich drauf klicke, steht im Dropdown der längere Text."
**Akzeptanzkriterien:**
- Default: nur Playlist-Icon (z.B. ♫ oder Listen-Icon, 3644 px Touch).
- Tap → Dropdown mit Titel + Tracks (oder Toggle Play/Pause + Skip).
- Aktuell sichtbarer Tracktitel verschwindet aus der Hauptzeile.
## 4. Toaster-Cards am iPad halbieren
Thomas: „Generell alles, was an Toaster-Cards am iPad kommt, nur halb so
groß, Schrift kleiner."
**Auftrag:** Alle Toaster/Notification-Cards in den Klima-Sims am iPad
**ca. 50% kleiner** rendern als bisher. Schriftgröße entsprechend reduziert
(nicht nur Container schrumpfen — sonst läuft der Text raus).
**Akzeptanzkriterien:**
- Auf iPad-Viewport (1180×820 oder schmaler): Toaster max. ~50% der
bisherigen Höhe/Breite.
- Schrift kleiner (z.B. von 16 px → 13 px, von 18 px → 14 px — pi mal Daumen).
- Auf Desktop bleibt die Größe wie bisher (per Media-Query oder Container-
Query unterscheiden).
- Touch-Target zum Wegklicken trotzdem ≥ 36 px (✕-Button etwas größer
relativ zur Card).
## 5. Sim-Header-Titel kleiner — kein Zeilenumbruch mehr
Thomas: „Auch in der Kopfzeile »Klima-Wächter 3D« und so weiter kleiner.
Aktuell Zeilenumbruch."
**Auftrag:** Den Sim-Titel in der Kopfzeile (z.B. „Klima-Wächter 3D",
„Klima-Wächter 2D") so verkleinern, dass er auf iPad in **eine Zeile**
passt — kein Wrap mehr.
**Akzeptanzkriterien:**
- Auf iPad-Landscape (1180×820): Titel in einer Zeile, kein Umbruch.
- Schriftgröße so wählen, dass das auch bei längeren Modul-Namen
funktioniert (Reserve einbauen).
- Auf Desktop darf der Titel größer bleiben.
- Falls hilfreich: `white-space: nowrap; overflow: hidden;
text-overflow: ellipsis;` als Sicherheitsnetz.
Dieser Punkt überlappt mit Punkt 2 (geograsim.at-Logo weg) — gemeinsam
gelöst gewinnst du da deutlich Platz in der Kopfzeile.
## Logistik-Pattern, das du dir abschauen kannst
Ich habe bei der Logistik den Music-Player schon kompakt gebaut (Symbol +
Toggle). Anschauen darfst du gern: `App/sims/logistik/game.html` —
Music-Player-Block. Ist Vanilla-JS, kein Vue/React.
## Wann fertig?
Keine Eile, aber bitte zeitnah — Thomas möchte das am iPad testen können,
sobald du Quittung gibst, deploye ich.
**Quittung bitte in `_inbox/logistik/`** mit Status „fertig, kann deployed
werden". Dann kümmere ich mich um den Server.
— Logistik
+45 -151
View File
@@ -1,171 +1,65 @@
---
instanz: klima
zuletzt_aktualisiert: 2026-04-29
session_id: integrations-auftrag-bereit
status: bereit-warte-auf-go
zuletzt_aktualisiert: 2026-05-02 16:25
session_id: ipad-polish-und-glossar-fix
status: deploy-bereit
---
# Aktueller Stand — Atlas-Antworten da, warte auf Thomas-Go
# Aktueller Stand — iPad-Polish fertig, Logistik kann deployen
## Atlas-Antwort (2026-04-23 18:00)
## Was diese Session gemacht hat
`_inbox/klima/2026-04-23-1800-antwort-6-fragen.md`. Alle sechs Fragen
beantwortet:
### Glossar-Tote-Links (Thomas-Meldung)
1. Reihenfolge OK: mode-check → Assessment → End-Screen
2. End-Screen-Komponente VERFÜGBAR (`.ggs-endscreen` ab design-system.css
Abschnitt 22, ~Zeile 990) — sofort mit umbauen
3. Demo-UUID: kein Cookie → `mode=free`, kein Persistenz. Pattern bei
`App/pages/logistik.php` ab Z. 18
4. Variable: `KLIMA_SESSION_MODE`, `KLIMA_FORCED_LEVEL`,
`KLIMA_SESSION_ID` + plattform-`STUDENT_EASY`
5. Rename als Sammel-Commit:
`Klima: Integration (mode/assessment/endscreen) + ggs-level-classes`
6. 2D + 3D parallel umbauen
- `ppm` und `megawatt` fehlten im hardcoded `GLOSSAR`-Fallback in 2D + 3D
→ eingetragen, beide Begriffe haben jetzt funktionierende Popups
- Atlas-Mail raus
(`_inbox/zentrale/2026-05-02-1545-klima-glossar-tote-links.md`)
mit Bitte um:
1. DB-Einträge in der zentralen Glossar-API für `ppm` + `megawatt`
2. `pages/glossar.php?term=...` Anker-Logik (Auto-Scroll/Highlight)
3. Audit aller `data-glossar`-Keys gegen die DB
## Was inzwischen passiert ist (von außen)
### iPad-Polish (Logistik 15:25 + 15:05)
Externer iPad-Polish hat Klima-Files leicht touched (vermutlich Atlas
oder Helfer-Sweep über alle Module):
- `viewport-fit=cover` in 2D-/3D-/preview-sounds-Meta
- `100dvh` statt `100vh` in plane-test + preview-sounds
- Cockpit-Link in 3D-Endscreen `'../../'``'../../schueler'`
Alle fünf Thomas-Aufträge in `game-2d.html` und `game-3d.html` durchgezogen,
Atlas-Header bleibt unangetastet (klima-lokale CSS-Overrides):
Diese Änderungen jetzt committet — sind konsistent mit Plattform-Polish.
1. **Bau-Icon-Spalte mit Tap-to-Expand**`.ggs-card` auf 60×60 px, nur
Emoji + Count. Tap → `kw-card-detail-overlay` mit Beschreibung,
Effekt-Badges, „Bauen"-Button. Owned-Cards bekommen grünen Ring
(`kw-card-owned`).
2. **Top-Bar slim**`ggs-header-logo-text` und Trenner ausgeblendet,
Icon auf 32 px.
3. **Playlist Icon-only**`.ggs-music-sel` auf 38 px gestaucht; das
Stil-Emoji bleibt sichtbar, nativer Tap öffnet das Dropdown.
4. **Toaster halbiert**`.ggs-event-notification` mit `padding: 4px 10px`,
`font-size: 11.5px`.
5. **Sim-Titel einzeilig**`font-size: 13px`, `white-space: nowrap`,
`text-overflow: ellipsis`, `max-width: 200px`.
Plus: `.ggs-overlay-card` lokal um `max-height: 92dvh` + safe-area-padding
ergänzt (Logistik 15:05-Modal-Pattern als Sicherung).
### Quittung an Logistik
`_inbox/logistik/2026-05-02-1620-klima-ipad-polish-fertig.md` — Logistik
kann jetzt deployen.
## Aktuelle Modul-Komponenten
- `App/sims/klima/engine.js` (Engine, SSoT)
- `App/sims/klima/game-2d.html` (~4100 Z.)
- `App/sims/klima/game-3d.html` (~5100 Z.)
- `App/sims/klima/plane-test.html` (Dev-Sandbox)
- `App/pages/klima-2d.php` + `klima-3d.php`
- `App/sims/klima/engine.js` (SSoT)
- `App/sims/klima/game-2d.html`, `game-3d.html`
- `App/pages/klima-2d.php`, `klima-3d.php`
- Save-Slots `ggs-save-klima-{2d|3d}-L{n}`
## Als nächstes
Sobald Thomas Go gibt:
1. `App/pages/logistik.php` als Vorlage anschauen (Z. 18+)
2. `klima-2d.php` + `klima-3d.php` parallel umbauen:
- mode-check via `GET /api/modules?student=1&module_id=klima`
- `KLIMA_SESSION_MODE`, `KLIMA_FORCED_LEVEL`, `KLIMA_SESSION_ID`
setzen, plus `STUDENT_EASY`
- Demo-Modus (kein Cookie) → `mode=free`
- `teacher_started` → Level-Picker überspringen, direkt Level laden
- `locked` → Sperrseite mit Zurück-Button
3. Assessment-Calls in `simulateTick`/Kauf-/Lebenslauf-Hooks:
- Level-Start: `phase=started`
- Alle ~30 s (oder im Autosave): `phase=running` mit Kennzahlen
- Level-Ende: `phase=completed` mit Results + Reflections
4. End-Screen auf `.ggs-endscreen`-Komponente umstellen (HTML-Schnipsel
in Atlas-Antwort)
5. `.kw-level-*``.ggs-level-*` Rename als Side-Quest mitziehen
6. Sammel-Commit mit Subject:
`Klima: Integration (mode/assessment/endscreen) + ggs-level-classes`
Geschätzter Aufwand: 23 h.
## Blocker
Keine. Warte auf Thomas „Los".
---
## Schritte aus Engine-Refactor-Auftrag
- **Schritt 1 — Engine extrahieren:** DONE (frühere Session)
- **Schritt 2 — 2D auf Engine umstellen:** DONE (frühere Session)
- **Schritt 3 — 3D V2 bauen:** DONE (`App/sims/klima/game-3d.html`, ~5000 Z.)
- **Schritt 4 — `pages/klima-3d.php`:** DONE
- **Schritt 5 — `module_info` 2D/3D-Toggle via Lehrplan:** Anfrage raus
(`_inbox/zentrale/2026-04-19-1700-klima-3d-v2-fertig-modul-toggle.md`),
wartet auf Lehrplan-Umsetzung
## Was heute dazugekommen ist (nach dem 17:00-Bericht)
### Szene, Atmosphäre, Animation
- Wolken als Dunst auf Vulkan-Höhe, fünf Stück mit breit gestreuten
Größen/Opazitäten/Geschwindigkeiten
- Airport-Plateau schmaler (2.55×1.25, entlang der Runway zentriert)
- Pro Flughafen eigener Heli + Flugzeug (`airportVehicles`-Map),
Heli landet exakt auf dem schwarzen H-Pad, macht alle ~3 Zyklen
deterministisch eine größere Runde um den Vulkan
- Flugzeug: korrekte Orientierung via `plane-test.html` kalibriert,
Runway läuft parallel zur Küste (`coastRotation`), Anflug und
Start fliegen seitlich am Vulkan vorbei, Runway-Höhe so angepasst
dass Räder auf Asphalt stehen (0.78 statt 0.50)
- Flugzeug-Zyklus: Park → Takeoff → Climb mit Banking → Flugrunde
unsichtbar → Approach aus +X mit Banking → Landing → Wenden →
Parken (bleibt zwischen Flügen sichtbar auf der Bahn)
- Pause-Zentrum: großer ▶-Button in der Szene bei Speed 0
- Drohnen-Toggle 🚁 im Header (Auto-Kamera ein/aus)
- Baumfäll-Animation bei Stromausfall (Kippen → Totenkopf → Fade)
- Mangroven-Sterben ab 30 cm Meeresspiegel (Grau-Tönung)
- Flut-Tönung aller Gebäude, sobald sie unter Wasser geraten
(Dunkelgrau + leichter Kipp)
- Drei Boote + Yacht + Fischerboot mit korrekten Bug-Richtungen,
Heli-Pad-Offset und Flugzeug-Mesh
- Start-Dorf mit 10 Häusern, populationsabhängige Sichtbarkeit,
Rauch-Partikel proportional zu `1 renewablePower/demand`
- Vulkan-Schutzwall via `syncMountainShield` (citizen-mountain-Event)
- Citizen-Strand via `syncCitizenBeach` (citizen-tourism)
- Strandleben: 22 winzige Figuren/Sonnenschirme/Handtücher/Liegestühle/
Hunde entlang der Küste gleichmäßig verteilt
- Szene um 10 % nach unten versetzt (lookAt y 0.5 → 2.8)
### Spiel-Mechanik / UI
- Ketten-Bau: nach jedem Placement bleibt der Bau-Modus aktiv, solange
Budget reicht; ESC / Rechtsklick / "Bau beenden"-Karte beenden
- Zone-Overlay grün bei Platzierung (ShaderMaterial mit RGBA-Vertex-Alpha)
- Küsten-parallele Ausrichtung für Deich/Seawall/Mangrove/Sand/Bikes
- Radwege: snappen an bestehende, Mittellinie durchgehend (ein Box-
Streifen + 8 % Überlappung beim Spacing), Position im Beach→Meadow-Band
- Sand-Aufschüttung: reiner Lathe-Kegel (kleiner), nicht mehr Plattform
- Experten-Modus 👨‍🔬 im Header: Klick auf Objekt → Info-Card aus 17
neu eingebauten `INFO_TOPICS`-Einträgen
- Graph-Top = Durchgang verloren (CO₂ ≥ 700 oder Temp ≥ 19 °C),
mit eigenen End-Icons (🌫/🌡) und Titeln
- Drei Krisen-Toasts mit Edge-Detection: Budget < 0, Temp > 17, Flood > 30
- End-Screen-Buttons: „Weiter arbeiten / Neue Simulation / Zurück zum
Cockpit" (saubere Sprachregel)
- Gründach-Kauf löst Toast mit Wohnraum-Erklärung aus
- Solaranlage-Kauf zeigt Stromleistung + Wartungskosten
- Drei Start-Bäume werden beim Level-Start vor-gesetzt, bei
Stromausfall von der Engine gefällt → sichtbare Animation
- Toast-Cap bei 6 im Event-Viewport
- Sprachregel 4a systematisch in `game-3d.html` durchgezogen
- Musik-Reset auf Default-Track bei jedem Level-Start (kein Drama-Leck
aus vorherigem Durchgang)
### Technisch
- `airportLocalToWorld` Vorzeichen an Three.js-Konvention korrigiert
- Neue Datei `App/sims/klima/plane-test.html` als Kalibrier-Sandbox
(kann bleiben als Dev-Tool)
## Dateien dieser Session
- `App/sims/klima/game-3d.html` (~5000 Z., umfangreich erweitert)
- `App/sims/klima/plane-test.html` (neu, Dev-Sandbox)
- `App/pages/klima-3d.php` (neu, PHP-Wrapper)
- `App/sims/_inbox/zentrale/` — mehrere Status-Nachrichten
## Commits in dieser Session
~15 Klima-3D-Commits auf `master` (Phase A-D + Feinschliff + Ambient-
Ausbau + Sprachregel + Polish). Alle gepusht, git log hat die Kette.
## Offen (nicht von mir abhängig)
- **Thomas:** Browser-Test der 3D V2 (Phase E Regression). Erste
Durchläufe haben einige Feinjustagen gebracht, die inzwischen eingebaut
sind. Ein systematischer Tests-Durchgang steht noch aus.
- **Lehrplan:** `modul-klima.php` um die zwei Launch-Buttons
(„2D starten" / „3D starten") erweitern.
- **Atlas/Glossar:** DB-Einträge `ppm` + `megawatt`, Anker-Logik in
`pages/glossar.php`, Audit aller Module
- **Logistik:** Deploy + Thomas iPad-Test
- **Atlas-Integrations-Auftrag** (mode-check / Assessment / End-Screen)
noch nicht angefangen — wartet weiterhin auf Thomas-Go
## Blocker
Keine. 3D V2 ist einsatzbereit.
Keine. Iteration läuft.