---
von: atlas
an: klima
datum: 2026-04-18 21:45
status: gelesen
betrifft: Nächster grosser Arbeitsblock — Engine extrahieren + 3D V2 bauen
---

# Nächster Block: Spiellogik zentralisieren, 3D V2 aufbauen

Thomas und ich haben beschlossen: Klimawächter 2D und 3D sollen **dieselbe
Spiellogik** nutzen. Aktuell gibt es eine Divergenz-Gefahr (V2-2D ist frisch,
V1-3D ist online produktiv). Beide auseinanderdriften zu lassen wäre
gefährlich — gleiche Maßnahmen, gleiche Balance, gleiche Events sollen
überall wirken.

Du bist die richtige Instanz für diesen Block, weil du 2D V2 selbst gebaut
hast und V1-3D als Referenz bereits durchgeschaut hast.

## Ziel

- **Single Source of Truth** für die Klima-Spiellogik
- **2D und 3D teilen sich Engine, Events, Balance, Admin-Level-Config**
- **3D V2** bekommt das komplette Plattform-Drumherum (Design-System, Audio,
  Glossar, Easy-Sprache, Autosave, Achievements)
- **V1 bleibt live** unangetastet — wie bei 2D der Wechsel passiert später

## Arbeitsschritte

### Schritt 1 — Engine extrahieren (Foundation)

Neue Datei: **`App/sims/klima/engine.js`** (reines JS-Modul, kein Build-Tool).

Inhalt:
- Tick-System (Runden-Logik, Jahr-Progression)
- State-Management (Budget, Bevölkerung, CO₂, Temperatur, Meer, Strom)
- Maßnahmen-Definitionen (Windpark, Solar, Deich, etc. — Kosten, Wirkung, Upkeep)
- Event-System (Sturmflut, Bürger-Dialoge, Lob/Warnungen)
- Ziel-Erkennung (win/loss-Conditions)
- Serialize/Deserialize (für Autosave)

Keine UI-Abhängigkeit. Keine DOM-Queries. Die Engine sollte "headless"
testbar sein.

Export-Pattern (ESM-frei, damit wir keinen Bundler brauchen):

```javascript
// engine.js
window.KlimaEngine = (function() {
  function createGame(levelConfig) { ... }
  function tick(game) { ... }
  function buyMeasure(game, measureId) { ... }
  function triggerEvent(game, eventKey) { ... }
  function serialize(game) { ... }
  function deserialize(data) { ... }
  return { createGame, tick, buyMeasure, triggerEvent, serialize, deserialize, MEASURES, EVENTS };
})();
```

### Schritt 2 — 2D auf Engine umstellen

`game-2d.html` behält UI, Events-Overlay, Graphen, Achievements etc.
Anstatt interne Funktionen nutzt sie:

```javascript
var game = KlimaEngine.createGame(levelConfig);
// bei Tick:
KlimaEngine.tick(game);
renderUI(game);
// bei Kauf:
KlimaEngine.buyMeasure(game, 'windpark');
```

Funktional kein Unterschied für den Spieler. Nur Code-Struktur sauberer.

### Schritt 3 — 3D V2 bauen

Neue Datei: **`App/sims/klima/game-3d.html`** (V2).

Gleiches Pattern wie V2-2D:
- Design-System (`<link rel="stylesheet" href="../../assets/css/design-system.css">`)
- `ggsMusicSetup()` mit den gleichen Tracks wie 2D
- Gleicher Header inkl. Speed-Control, 📚-Button, 🔄 Reset
- Gleiche Status-Panels, Action-Cards, Graphen, Event-Stapel
- Glossar-Tooltips via `data-glossar`
- Easy-Sprache via Helper
- Autosave (`localStorage`-Key: `ggs-save-klima-3d-L{n}`)

Aus V1-3D übernehmen:
- Three.js-Setup (Scene, Camera, Lights)
- Insel-Geometrie
- 3D-Modelle der Maßnahmen (Windrad, Solar, Deich, etc.)
- Kamera-Steuerung (Drag-Orbit, Scroll-Zoom, Auto-Drohnen-Flug)
- Raycaster für Platzierung, Placement-Ghost (grün/rot)
- Arrow-Keys für Rotation

**Wichtig:** Three.js per CDN laden, nicht über Vite. Kein TypeScript,
kein Build-Schritt. Direkt HTML/JS wie 2D V2.

```html
<script src="https://unpkg.com/three@0.155.0/build/three.min.js"></script>
```

Die Szenen-Objekte aus `App/src/sims/sim-05-treibhaus-3d/*.ts` sind als
Vorlage zu verstehen — in Vanilla JS portieren, nicht importieren.

### Schritt 4 — PHP-Wrapper

**Neue Datei: `App/pages/klima-3d.php`**

Analog zu `klima-2d.php`, aber lädt `App/sims/klima/game-3d.html`. Die
Level-Config kommt aus der gleichen Quelle (`game_levels` mit
`game_id='klima'`) — 2D und 3D teilen sich die Admin-Einstellungen.

### Schritt 5 — Modul-Info aktualisieren

`module_info`-Tabelle hat einen Eintrag `klima`. Wir ergänzen (bitte
Nachricht an lehrplan-Inbox, damit sie es in `module_info` erweitert):
- 2D- und 3D-Variante sollen als **ein Modul** erscheinen, nicht zwei.
- Auf der Modul-Detailseite (`modul-klima.php`) ein Toggle "2D / 3D" oder
  zwei Buttons "▶ 2D spielen" / "▶ 3D spielen".

## V1 unangetastet lassen

- `App/game.html` (V1 2D) — nicht anfassen
- `App/game-3d.html` (V1 3D) — nicht anfassen
- `App/src/sims/sim-05-treibhaus*/` — nur lesen (als Vorlage)
- `App/dist/` — nicht anfassen (V1-Build)

V1-3D bleibt produktiv online bis V2-3D stabil ist und Thomas den Wechsel
freigibt.

## Aufwands-Einschätzung

Vermutung 1–2 Tage Arbeit insgesamt:
- Schritt 1 (Engine): 2–3 h
- Schritt 2 (2D umstellen): 1–2 h
- Schritt 3 (3D V2): 4–6 h  ← der grösste Block
- Schritt 4 (PHP-Wrapper): 30 min
- Schritt 5 (Modul-Info): 15 min + Koordination mit Lehrplan

## Kontext-Management

Du hast schon viel im Kontext (2D V2 komplett, Audio-Stack, Easy-Sprache).
Falls du merkst, dass der Kontext knapp wird:

1. **Pausiere beim aktuellen Stand**, egal an welchem Schritt
2. Schreibe in deine **eigene** Inbox (`_inbox/klima/`) eine
   Übergabe-Notiz mit:
   - Wo du stehst
   - Welche Dateien schon geändert wurden
   - Was als nächstes kommen muss
   - Welche Entscheidungen offen sind
3. Melde in zentrale-Inbox: "Kontext zu voll — neue Session übernimmt,
   siehe Übergabe-Notiz"
4. Thomas startet dann eine neue "Klima"-Session mit der Übergabe-Notiz
   als Kontext

Keine Panik, wenn das passiert — das System ist dafür gemacht.

## Konventions-Check

Vor der Fertig-Meldung: Inbox prüfen (`ls App/sims/_inbox/klima/`),
neue `status: neu` einarbeiten.

## Start

Wann du magst. Kein Zeitdruck. Melde kurz in zentrale-Inbox, wenn du
loslegst ("Start Engine-Extraktion"), damit ich weiss dass es läuft.

## Bestätigen

- status: gelesen