Adminator
fecd8bb9c9
562 Ersetzungen in 50 Dateien: Halbgeviertstrich zwischen zwei Ziffern (= "bis"-Bereich) bekommt Leerzeichen davor/danach (3–4 -> 3 – 4). Regex /([0-9])\s*–\s*(?=[0-9])/ auf Rohtext (format-erhaltend, CRLF/Einrueckung unveraendert), Bindestriche in Woertern und Minuszeichen unangetastet, alle JSON weiter gueltig. Energiemanager-Zeitbloecke sind Display-Labels (kein Logik-Key) -> safe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
486 lines
26 KiB
HTML
486 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Klimawächter — Entwicklungs-Log</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
|
||
<style>
|
||
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
||
:root {
|
||
--bg: #f7f6f3; --bg2: #efeee9; --white: #fff;
|
||
--text: #1a1a1a; --text2: #4a4a4a; --text3: #8a8a8a;
|
||
--fjord: #4a7c8a; --fjord-l: #dae8ec; --fjord-d: #3a6470;
|
||
--moss: #5a8a5e; --moss-l: #dceadd;
|
||
--sand: #c4a35a; --sand-l: #f2eacc;
|
||
--coral: #c07a6b; --coral-l: #f2ddd8;
|
||
--danger: #b04a3a;
|
||
}
|
||
body {
|
||
font-family:'Inter',system-ui,sans-serif; background:var(--bg);
|
||
color:var(--text); line-height:1.6; padding:2rem 1rem;
|
||
}
|
||
.w { max-width: 880px; margin: 0 auto; }
|
||
header {
|
||
border-bottom: 3px solid var(--fjord); padding-bottom: 1.2rem; margin-bottom: 2rem;
|
||
}
|
||
h1 { font-size: 2rem; font-weight: 900; color: var(--fjord); margin-bottom: .3rem; }
|
||
header .sub { font-size: .9rem; color: var(--text3); font-weight: 500; }
|
||
h2 {
|
||
font-size: 1.4rem; font-weight: 800; color: var(--fjord-d);
|
||
margin: 2.2rem 0 .8rem; padding-top: 1rem;
|
||
border-top: 1px solid rgba(0,0,0,.08);
|
||
}
|
||
h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 1.2rem 0 .5rem; }
|
||
p { font-size: .95rem; color: var(--text2); margin-bottom: .8rem; }
|
||
ul, ol { margin: .5rem 0 1rem 1.4rem; }
|
||
li { font-size: .93rem; color: var(--text2); margin-bottom: .35rem; }
|
||
code {
|
||
background: var(--bg2); padding: 1px 6px; border-radius: 4px;
|
||
font-size: .85em; font-family: "SF Mono", Menlo, monospace;
|
||
color: var(--fjord-d);
|
||
}
|
||
pre {
|
||
background: #1a1a1a; color: #e8e6de; padding: 1rem 1.2rem;
|
||
border-radius: 10px; font-size: .82rem; overflow-x: auto;
|
||
font-family: "SF Mono", Menlo, monospace; margin: .8rem 0 1.2rem;
|
||
}
|
||
.card {
|
||
background: var(--white); border: 1px solid rgba(0,0,0,.06);
|
||
border-radius: 12px; padding: 1.1rem 1.3rem; margin: .8rem 0;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,.03);
|
||
}
|
||
.card.green { border-left: 4px solid var(--moss); }
|
||
.card.sand { border-left: 4px solid var(--sand); }
|
||
.card.coral { border-left: 4px solid var(--coral); }
|
||
.card.fjord { border-left: 4px solid var(--fjord); }
|
||
.card h3 { margin-top: 0; }
|
||
.tag {
|
||
display: inline-block; font-size: .68rem; font-weight: 700;
|
||
padding: 2px 8px; border-radius: 6px;
|
||
background: var(--fjord-l); color: var(--fjord-d);
|
||
text-transform: uppercase; letter-spacing: .05em;
|
||
margin-right: .3rem;
|
||
}
|
||
.tag.done { background: var(--moss-l); color: var(--moss); }
|
||
.tag.todo { background: var(--sand-l); color: var(--sand); }
|
||
.tag.idea { background: var(--coral-l); color: var(--danger); }
|
||
table {
|
||
width: 100%; border-collapse: collapse; margin: .8rem 0 1.2rem;
|
||
font-size: .85rem;
|
||
}
|
||
th, td {
|
||
text-align: left; padding: .55rem .7rem;
|
||
border-bottom: 1px solid rgba(0,0,0,.08);
|
||
}
|
||
th { background: var(--bg2); font-weight: 700; color: var(--text); }
|
||
.quote {
|
||
border-left: 3px solid var(--fjord);
|
||
background: var(--fjord-l);
|
||
padding: .6rem .9rem;
|
||
border-radius: 0 8px 8px 0;
|
||
font-style: italic;
|
||
color: var(--fjord-d);
|
||
margin: .5rem 0 1rem;
|
||
font-size: .9rem;
|
||
}
|
||
nav.toc {
|
||
background: var(--bg2); border-radius: 10px; padding: 1rem 1.3rem; margin-bottom: 2rem;
|
||
}
|
||
nav.toc h4 {
|
||
font-size: .7rem; font-weight: 800; color: var(--fjord); text-transform: uppercase;
|
||
letter-spacing: .06em; margin-bottom: .5rem;
|
||
}
|
||
nav.toc ol { margin-left: 1.2rem; }
|
||
nav.toc a {
|
||
color: var(--text2); text-decoration: none; font-size: .88rem;
|
||
}
|
||
nav.toc a:hover { color: var(--fjord); }
|
||
footer {
|
||
margin-top: 3rem; padding-top: 1.5rem;
|
||
border-top: 1px solid rgba(0,0,0,.08);
|
||
font-size: .8rem; color: var(--text3); text-align: center;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="w">
|
||
|
||
<header>
|
||
<h1>Klimawächter — Entwicklungs-Log</h1>
|
||
<div class="sub">Erkenntnisse, offene Punkte und nächste Schritte · Stand 2026-04-11 (3 Schwierigkeitsgrade + Bilanz + Steg-Rampe)</div>
|
||
</header>
|
||
|
||
<nav class="toc">
|
||
<h4>Inhalt</h4>
|
||
<ol>
|
||
<li><a href="#ziel">Didaktisches Ziel und Zielgruppe</a></li>
|
||
<li><a href="#architektur">Architektur-Überblick</a></li>
|
||
<li><a href="#mechanik">Mechanik-Erkenntnisse aus Trace-Tests</a></li>
|
||
<li><a href="#ui">UI / Interaktion</a></li>
|
||
<li><a href="#visual">Visualisierung (2D / 3D)</a></li>
|
||
<li><a href="#erklaerungen">Erklärungen für Kinder 10 – 14</a></li>
|
||
<li><a href="#folgen">Weitere Folgen des Klimawandels</a></li>
|
||
<li><a href="#offen">Offene Punkte & nächste Schritte</a></li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<!-- ====================================================== -->
|
||
<section id="ziel">
|
||
<h2>1. Didaktisches Ziel und Zielgruppe</h2>
|
||
|
||
<p>Der <strong>Klimawächter</strong> ist kein Spiel um einen high score. Er soll Schülerinnen und Schülern der 1.–4. Klasse Sekundarstufe I (ca. <strong>10 – 14 Jahre</strong>) vermitteln, dass:</p>
|
||
<ul>
|
||
<li>der Klimawandel träge ist — Folgen kommen verzögert, Entscheidungen wirken erst in Jahren</li>
|
||
<li>es keine Wunderlösung gibt — man muss mehrere Strategien kombinieren</li>
|
||
<li>reine Anpassung (Deiche, Strandaufschüttung) die Ursache nicht löst</li>
|
||
<li>Klimaschutz kein isoliertes Naturthema ist — gesellschaftliche Konflikte gehören dazu</li>
|
||
<li>eine Insel stellvertretend für den Planeten stehen kann</li>
|
||
</ul>
|
||
|
||
<div class="quote">
|
||
Kinder haben typischerweise Fehlkonzepte wie „Ozonloch = Klimawandel" oder „Wenn ich hier einen Baum pflanze, ist alles gut". Das Spiel arbeitet dezent dagegen an.
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====================================================== -->
|
||
<section id="architektur">
|
||
<h2>2. Architektur-Überblick</h2>
|
||
|
||
<div class="card fjord">
|
||
<h3>Frontend-Stack</h3>
|
||
<ul>
|
||
<li><code>TypeScript + Vite</code> (keine Framework-Schicht)</li>
|
||
<li><code>Three.js</code> für die 3D-Version</li>
|
||
<li>2D-Version nutzt Canvas-API direkt</li>
|
||
<li>Multi-Page HTML (<code>game.html</code>, <code>game-3d.html</code>, <code>erdbeben.html</code>, <code>energiemix.html</code>)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card fjord">
|
||
<h3>Kernklassen</h3>
|
||
<table>
|
||
<tr><th>Datei</th><th>Rolle</th></tr>
|
||
<tr><td><code>src/core/game-engine.ts</code></td><td>Abstract base: Ticks, Resources, Goals, Save/Load, Subscribe-Pattern, Citizen-Events</td></tr>
|
||
<tr><td><code>src/ui/game-ui.ts</code></td><td>Wiederverwendbare UI-Komponente mit Panels, Graphen, Auto-Save, End-Screen</td></tr>
|
||
<tr><td><code>src/ui/info-overlay.ts</code></td><td>Kindgerechte Begriffserklärungen (Info-Buttons öffnen Overlay)</td></tr>
|
||
<tr><td><code>src/sims/sim-05-treibhaus/game.ts</code></td><td>Klimawächter-Spiellogik</td></tr>
|
||
<tr><td><code>src/sims/sim-05-treibhaus/game-renderer.ts</code></td><td>2D-Canvas-Renderer</td></tr>
|
||
<tr><td><code>src/sims/sim-05-treibhaus-3d/game-renderer-3d.ts</code></td><td>Three.js 3D-Renderer</td></tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="card fjord">
|
||
<h3>Save-System</h3>
|
||
<p>Alle Spielstände werden pro Spiel-ID in <code>localStorage</code> persistiert. Version-Bump (v2) verhindert, dass alte inkonsistente Saves geladen werden. Ein <code>resetting</code>-Flag verhindert, dass der <code>beforeunload</code>-Handler beim Reset sofort wieder speichert.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====================================================== -->
|
||
<section id="mechanik">
|
||
<h2>3. Mechanik-Erkenntnisse aus Trace-Tests</h2>
|
||
|
||
<p>Es existiert ein automatischer Test unter <code>tests/unit/sim-05-trace.test.ts</code>, der das Spiel rein rechnerisch über 75 Jahre für verschiedene Strategien durchspielt und die Werte tabellarisch ausdruckt. Starten mit:</p>
|
||
<pre>npx vitest run sim-05-trace --reporter=verbose</pre>
|
||
|
||
<h3>Balance-Status (aktuell kalibriert)</h3>
|
||
<table>
|
||
<tr><th>Strategie</th><th>Ergebnis 2100</th><th>Status</th></tr>
|
||
<tr><td>Nichts tun</td><td>Temp 17.9°C, Flut 52%</td><td>❌</td></tr>
|
||
<tr><td>Nur Wälder</td><td>Temp 17.1°C</td><td>❌ (knapp)</td></tr>
|
||
<tr><td>Nur Solar</td><td>Temp 15.5°C, Budget knapp</td><td>✅</td></tr>
|
||
<tr><td>Nur Wind</td><td>Temp 15.5°C, Budget ok</td><td>✅</td></tr>
|
||
<tr><td>Nur Deiche</td><td>Temp 17.9°C — Klima läuft durch</td><td>❌</td></tr>
|
||
<tr><td>Wälder + Solar</td><td>grenzwertig — meist verloren</td><td>⚠️</td></tr>
|
||
<tr><td>Solar + Wind + 1 Deich</td><td>alle Goals ✅</td><td>✅</td></tr>
|
||
</table>
|
||
|
||
<div class="card sand">
|
||
<h3>Didaktische Aussagen, die aus dem Trace sichtbar werden</h3>
|
||
<ul>
|
||
<li>Einzelmaßnahme = zu wenig. Man muss kombinieren.</li>
|
||
<li>Deiche allein retten kurzfristig Häuser, aber nicht das Klima.</li>
|
||
<li>Aufforsten ist wichtig, aber als Einzelmaßnahme zu langsam.</li>
|
||
<li>Wind ist stärker als Solar, aber wegen Wartungskosten nicht immer die beste Wahl.</li>
|
||
<li>Das Klima hat eine Trägheit von ca. 8 %/Jahr für Temperatur und 6 – 8 %/Jahr für Meeresspiegel.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Bug-Historie (chronologisch)</h3>
|
||
<ol>
|
||
<li><strong>Subclass-Felder nicht im Save</strong> → Werte driften zwischen UI und Rechnung. <em>Fix: <code>serializeSubclass()</code> Hook.</em></li>
|
||
<li><strong>Wasser stand still im 3D-Renderer</strong> → Protection wurde von waterY abgezogen. <em>Fix: Wasser steigt jetzt absolut, Protection wirkt nur auf Submerge-Check der Häuser.</em></li>
|
||
<li><strong>Solar überpowered</strong> → CO₂ fiel unter vorindustriell. <em>Fix: Maßnahmen-Reduktion halbiert, CO₂-Floor 350 ppm.</em></li>
|
||
<li><strong>Reset-Button ohne Wirkung</strong> → beforeunload schrieb Stand wieder ins localStorage. <em>Fix: <code>resetting</code>-Flag.</em></li>
|
||
</ol>
|
||
</section>
|
||
|
||
<!-- ====================================================== -->
|
||
<section id="ui">
|
||
<h2>4. UI / Interaktion</h2>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Auto-Save</h3>
|
||
<p>Jede Aktion → debounced Save nach 1.5 s. Sofortiges Save bei Tab-Wechsel oder Page-Verlassen. Auto-Load beim erneuten Öffnen.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Bürger-Beschwerden mit Choices</h3>
|
||
<p>Modaler Dialog mit Avatar, Message und 2 – 3 Choice-Karten. Jede Wahl hat echte Konsequenzen. Spiel pausiert automatisch bis der Spieler entscheidet. Bibliothek: 7 Events über die 75 Jahre verteilt (Fischerin, Forscherin, Bauer, Hotel, Jugend-Streik, Industrie, Bergdorf).</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Reset-Button</h3>
|
||
<p>Im Header oben rechts (🔄). Löscht den Save-Slot und lädt die Seite neu.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Header-Refactor</h3>
|
||
<p>Save/Load/Finish/Reset/Home sind jetzt reine Symbole mit Tooltips. Speed-Buttons mit Zahlen (×1, ×2, ×4) und Kamera-Controls (＋, −, ⊙) sind in den Header gewandert. Das spart Platz unten und macht die Graphen größer.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Guided / Free Mode</h3>
|
||
<p>GameUI unterstützt <code>mode: 'guided'</code> mit <code>totalDurationSec</code>. Im Guided-Mode wird <code>msPerTick</code> automatisch so gesetzt, dass das Spiel genau die vorgegebene Zeit dauert, und Speed-Buttons > 1 sind unsichtbar. Bereit für späteres Lehrer-Backend.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Strom-System (Phase A der SimCity-Erweiterung)</h3>
|
||
<p>Neue Ressource <code>⚡ Strom</code>, Anzeige als „Bedarf/Kapazität MW" in der Status-Box. Bedarf = 1 MW pro 1.000 Einwohner. Kapazität ergibt sich aus den gebauten Kraftwerken:</p>
|
||
<ul>
|
||
<li><strong>☀️ Solar</strong> = +1 MW (klein, sauber)</li>
|
||
<li><strong>🌬️ Wind</strong> = +3 MW (mittel, sauber, teuer)</li>
|
||
<li><strong>🏭 Kohle</strong> = +8 MW (sofort viel Strom — aber +1.5 ppm CO₂/Jahr)</li>
|
||
</ul>
|
||
<p>Bei Stromausfall (Bedarf > Kapazität): siehe nächste Karte.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> „Bäume verheizen" bei Stromausfall</h3>
|
||
<p>Wenn der Strom ausfällt, fällen die Bewohner pro Jahr 2 Bäume und verheizen das Holz. Konsequenzen:</p>
|
||
<ul>
|
||
<li>+0.6 ppm CO₂ pro Jahr (Holzfeuer)</li>
|
||
<li>Bäume gehen sichtbar ins „dead"-Stadium über (schwarzer Strunk, Totenkopf-Sprite)</li>
|
||
<li>Tote Bäume binden kein CO₂ mehr → langfristig schlimmer</li>
|
||
<li>Ab 3. Stromausfall-Jahr in Folge: Bevölkerung wandert ab</li>
|
||
</ul>
|
||
<p>Game führt einen Counter <code>treesChoppedForHeat</code>; Renderer liest ihn pro Frame und tötet die Differenz an lebendigen Bäumen.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Maßnahme abreißen (50 % Rückzahlung)</h3>
|
||
<p>Neue Methode <code>game.demolishMeasure(id)</code>. UI: 🗑-Button auf jeder Karte mit count>0. Renderer entfernt das zuletzt platzierte Mesh, gibt Geometrie/Material frei. Erlaubt Reparatur falscher Frühentscheidungen (z.B. Kohlekraftwerk wieder loswerden, sobald Wind genug liefert).</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Lina Fischerin nach hinten verschoben</h3>
|
||
<p>Citizen-Event „Lina, die Fischerin" war auf Tick 4 — viel zu früh. Ist jetzt auf Tick 15 (≈ 1 Minute Spielzeit). Spieler kann zuerst seine Strom-Versorgung in den Griff bekommen, bevor das erste Bürger-Dilemma kommt.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Drei Schwierigkeitsgrade (Lernen / Üben / Profi)</h3>
|
||
<p>Ein <code>DifficultyConfig</code>-System mit 3 Levels (🟢/🟡/🔴) bestimmt Startbudget, Steuern, Stromausfall-Schonfrist und die Härte der Klima-Folgen. Spieler wählt beim ersten Start in einem Selector-Overlay; danach klickt er das Level-Badge oben in der Topbar, um zu wechseln (mit Bestätigung, weil das Spiel neu startet).</p>
|
||
<ul>
|
||
<li><strong>🟢 Lernen:</strong> 750 Mio € Start, 220 €/10k, 3 Jahre Schonfrist, halbe Klima-Folgen — sehr viel Puffer</li>
|
||
<li><strong>🟡 Üben:</strong> 550 Mio €, 175 €/10k, 1 Jahr Schonfrist — Standard, Strategie nötig</li>
|
||
<li><strong>🔴 Profi:</strong> 400 Mio €, 145 €/10k, 0 Schonfrist, 1.5× Klima-Folgen — kein Spielraum</li>
|
||
</ul>
|
||
<p>URL-Parameter <code>?level=N</code> erzwingt ein Level (für späteren Lehrer-Override). Save-File enthält das Level für Resume.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Maßnahmen halbiert (zweite Runde) + Wald-Wartung-Fix</h3>
|
||
<p>Alle Maßnahmen-Werte (Cost, Upkeep, CO₂-Wirkung, Schutz) erneut halbiert — gleicher Effekt pro Mio €, aber doppelt so viele individuelle Bauschritte. Mehr Streuung, mehr Spielmöglichkeiten.</p>
|
||
<p>Wald-Upkeep zusätzlich auf <strong>0.5 Mio €/Jahr</strong> reduziert (statt 1) — damit ist Wald jetzt die <strong>günstigste Option pro CO₂-Reduktion</strong> (12.5 Mio €/ppm vs Wind 15, Solar 17.9). Das passt zur didaktischen Erwartung „Bäume sind die Naturlösung".</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Jahres-Bilanz unter Budget</h3>
|
||
<p>Kleine Tabelle direkt unter dem Budget-Wert in der Status-Box zeigt: + Steuern, (+ Tourismus), − Wartung, (− Klima-Schaden), = Netto pro Jahr. Tourism- und Klima-Zeilen sind dynamisch sichtbar. Netto wird grün/rot gefärbt. Lebt mit der gedämpften Display-Animation.</p>
|
||
<p>Hat in der ersten Spielanalyse sofort sichtbar gemacht, dass eine Bilanz von −9 Mio €/Jahr auf Dauer nicht überleben kann.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Steg mit Rampe ans Land</h3>
|
||
<p>Der Holzsteg am vorderen Strand hat jetzt eine schräge <strong>Holz-Rampe</strong>, die vom Inland-Niveau (auf der Insel selbst) hochsteigt zur Plankenkante (Y=0.85). Damit bleibt der Steg auch bei steigendem Meeresspiegel über die Rampe erreichbar. Die Rampe sitzt physisch auf dem Inselhang und wird vom Wasser nicht überspült.</p>
|
||
</div>
|
||
|
||
<div class="card sand">
|
||
<h3><span class="tag idea">idee</span> Mitigation vs. Adaptation — didaktische Diskussion</h3>
|
||
<p>Aktuell könnte ein Spieler theoretisch nur Deiche/Hochwasserschutz bauen und ignorieren, dass CO₂ die Ursache ist — solange Temperatur knapp unter 17 °C bleibt. Das vermittelt die falsche Lektion „Mauern reichen". Ideen zum Adressieren:</p>
|
||
<ul>
|
||
<li><strong>Kipppunkt:</strong> Ab Sealevel > 80 cm sind Deiche nicht mehr genug — sie reißen bei Sturmflut</li>
|
||
<li><strong>Wartung steigt mit Sealevel:</strong> Erosion macht Deiche teurer im Unterhalt</li>
|
||
<li><strong>Trace-Test:</strong> „Nur-Deich-Strategie" muss langfristig verlieren</li>
|
||
</ul>
|
||
<p>Wichtig für die nächste Iteration — adressiert die Kernfrage „Sind Deiche wirklich eine gute Lösung?" (Antwort: nur als Pflaster, nicht als Heilung).</p>
|
||
</div>
|
||
|
||
<div class="card sand">
|
||
<h3><span class="tag todo">todo</span> Drag-and-Drop Platzierung — Phase B (kurzfristig!)</h3>
|
||
<p>Option A aus dem ursprünglichen Interaktions-Konzept. Maßnahmen werden aus dem Shop auf die 3D-Insel gezogen, statt automatisch platziert. Standortabhängige Wirkung: Solar im Vulkan-Schatten = −20% Effizienz, Wind am Hang = +20% etc.</p>
|
||
<p><strong>Voraussetzung für Phase C (Wohnungsbau):</strong> Sobald Schüler Häuser kauft, muss er sie auch SETZEN können — sonst frustrierend.</p>
|
||
</div>
|
||
|
||
<div class="card sand">
|
||
<h3><span class="tag todo">todo</span> Wohnungsbau + Neuankömmlinge — Phase C</h3>
|
||
<p>SimCity-artige Bevölkerungsdynamik:</p>
|
||
<ul>
|
||
<li>Start mit ~10 Häusern statt 18 (heute schon 6.000 Einwohner statt 10.000)</li>
|
||
<li>Neue Maßnahme <strong>🏘 Wohnhäuser</strong> (cost 120, +1.000 Kapazität, +1 MW Bedarf)</li>
|
||
<li>Neuankömmlinge-Queue: pro Tick wollen X Familien zuziehen — kommen nur, wenn freie Wohnungen UND Strom da sind</li>
|
||
<li>Visuell: 2-3 wandernde Sprite-Figuren am Strand (Billboards wie das Boot)</li>
|
||
<li>Tutorial gestaffelt: erst Strom (Phase A), dann Bauen (Phase B), dann Wohnen (Phase C)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card sand">
|
||
<h3><span class="tag todo">todo</span> Krisen-Mini-Spiele</h3>
|
||
<p>Bei Sturmflut, Hitzewelle, Murenabgang ein kurzes (10 – 20 s) Klick-Mini-Spiel. Erfolg mildert den Schaden.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====================================================== -->
|
||
<section id="visual">
|
||
<h2>5. Visualisierung (2D / 3D)</h2>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Insel als Keil (schrägansteigend)</h3>
|
||
<p>Beide Renderer (2D und 3D) bilden die Insel nicht mehr als Pfannkuchen ab, sondern als geneigtes Plateau. Die vordere (niedrige) Seite taucht absichtlich ins Wasser — so ist schon am Start sichtbar, dass man nicht die ganze Insel retten kann.</p>
|
||
<ul>
|
||
<li><strong>3D:</strong> Ellipse, per PlaneGeometry aus 80×96 Segmenten, mit Noise-Verformung und Keil-Interpolation von 1.3 (hinten) nach −0.15 (vorne).</li>
|
||
<li><strong>2D:</strong> horizontaler Side-View, linke Seite hoch (Vulkan), rechts niedrig ins Meer. <code>landSurface(x)</code>-Helper interpoliert Y-Koordinate für Platzierung von Häusern, Bäumen, Solaranlagen.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Vulkan mit Gletscher-Deckel</h3>
|
||
<p>Im 3D-Renderer steht ein erloschener Vulkan am hohen Ende der Insel. Sein oberes Drittel ist von einem opaken Gletscher-Deckel bedeckt. Der Deckel schrumpft mit steigender Temperatur:</p>
|
||
<ul>
|
||
<li>15.0 °C → 100 % Eis</li>
|
||
<li>16.5 °C → 50 % Eis</li>
|
||
<li>18.0 °C → 0 % Eis (kahler Fels)</li>
|
||
</ul>
|
||
<p>Im 2D-Renderer wird derselbe Gletscher-Deckel als Trapez mit Alpha-loser Farbverschiebung dargestellt.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Heizwolken über Häusern ohne Solar</h3>
|
||
<p>Jedes Starthaus im 3D hat eine kleine graue Sphere-Wolke über dem Dach. Sobald der Spieler Solar oder Gründächer baut, verschwindet pro Anlage eine Wolke. Direkte visuelle Verbindung zwischen Maßnahme und Effekt.</p>
|
||
</div>
|
||
|
||
<div class="card green">
|
||
<h3><span class="tag done">done</span> Graphen mit Zonen und Referenzlinien</h3>
|
||
<p>Die neue <code>GraphConfig</code> unterstützt:</p>
|
||
<ul>
|
||
<li><strong>Farbbänder</strong> (z. B. "Klimaziel", "Kritisch", "Gefahr" bei Temperatur)</li>
|
||
<li><strong>Horizontale Referenzlinien</strong> (z. B. "Klimaziel 17°C", "Strand", "Häuser")</li>
|
||
<li><strong>Sinnvolle Y-Range</strong> pro Graph — ausreizen der Höhe statt Standard 0..1</li>
|
||
<li><strong>Live-Wert</strong> als farbiger Badge rechts oben</li>
|
||
</ul>
|
||
<p>Graphen sind jetzt etwa doppelt so groß wie vorher (90 px statt ca. 36 px Höhe).</p>
|
||
</div>
|
||
|
||
<div class="card sand">
|
||
<h3><span class="tag idea">idee</span> Weitere Visualisierungs-Ideen</h3>
|
||
<ul>
|
||
<li>Strand schrumpft mit steigendem Meer sichtbar</li>
|
||
<li>Mangroven-Streifen am Rand, die bei Sealevel>20 cm verfärben/sterben</li>
|
||
<li>Verstreute Tote-Pflanzen-Sprites auf überschwemmtem Gebiet</li>
|
||
<li>Vulkan kann bei >18°C tatsächlich „Lava" aus dem Krater drücken (Kipppunkt)</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====================================================== -->
|
||
<section id="erklaerungen">
|
||
<h2>6. Erklärungen für Kinder 10 – 14</h2>
|
||
|
||
<p>Das neue <code>info-overlay.ts</code>-Modul bietet eine Bibliothek kindgerechter Erklärtexte. Jeder Graph und jedes wichtige Event hat einen (i)-Button, der ein Overlay öffnet. Zielgruppe: 10 – 14 Jahre, einfache Sätze, max. 3 Absätze plus "Merksatz".</p>
|
||
|
||
<h3>Bisher erklärte Begriffe</h3>
|
||
<ul>
|
||
<li><strong>CO₂</strong> — Was es ist, wie es wirkt, warum 420 ppm gefährlich sind</li>
|
||
<li><strong>Temperatur</strong> — Durchschnittstemperatur, Pariser Ziel, was 2°C bedeuten</li>
|
||
<li><strong>Meeresspiegel</strong> — Warum er steigt (Wärmeausdehnung + Eis), Inselstaaten</li>
|
||
<li><strong>Budget</strong> — Wie Einnahmen/Wartung funktionieren</li>
|
||
<li><strong>Gletscher</strong> — Was sie sind, wie sie schmelzen, warum das Trinkwasser fehlt</li>
|
||
<li><strong>Insel-Keilform</strong> — Warum echte Inseln nicht flach sind</li>
|
||
<li><strong>Deich</strong> — Wie er funktioniert, Niederlande, "Anpassung" vs. Ursachenbekämpfung</li>
|
||
<li><strong>Solar / Wind / Wald</strong> — Jeweils wie sie wirken und warum alleine nicht reichen</li>
|
||
<li><strong>Vegetation stirbt durch Salzwasser</strong> — Versalzung, konkretes Beispiel Kenia</li>
|
||
<li><strong>Trinkwasser</strong> — Süßwasser-Brunnen auf Inseln, salzige Vermischung</li>
|
||
</ul>
|
||
|
||
<div class="quote">
|
||
Alle Texte sind in <code>src/ui/info-overlay.ts</code> als <code>INFO_TOPICS</code>-Objekt zentralisiert und können leicht ergänzt werden. Aufruf: <code>openInfoOverlay(INFO_TOPICS.co2)</code>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====================================================== -->
|
||
<section id="folgen">
|
||
<h2>7. Weitere Folgen des Klimawandels</h2>
|
||
|
||
<p>Bisher hat das Spiel folgende Folgen von Temperatur- und Meeresspiegelanstieg modelliert:</p>
|
||
|
||
<table>
|
||
<tr><th>Folge</th><th>Auslöser</th><th>Wirkung</th></tr>
|
||
<tr><td>Häuser werden überflutet</td><td>Sealevel > 35 cm (nach Protection)</td><td>Bevölkerungsrückgang</td></tr>
|
||
<tr><td>Vegetation stirbt (Mangroven, Felder)</td><td>Sealevel > 20 cm</td><td>Warn-Event mit Info-Overlay</td></tr>
|
||
<tr><td>Trinkwasser versalzt</td><td>Sealevel > 35 cm</td><td>Budget-Abzug pro Jahr + Bevölkerungsrückgang</td></tr>
|
||
<tr><td>Gletscher schmilzt</td><td>Temp > 16.8 °C</td><td>Warn-Event, visueller Schrumpf</td></tr>
|
||
<tr><td>Bergdorf gefährdet</td><td>Temp > 16.5 °C (Tick 50)</td><td>Citizen-Event (Anna vom Bergdorf)</td></tr>
|
||
</table>
|
||
|
||
<div class="card sand">
|
||
<h3><span class="tag idea">idee</span> Noch fehlende Folgen</h3>
|
||
<ul>
|
||
<li><strong>Korallenbleiche</strong> — Meereswärme > +1.5°C → Fisch-Ertrag sinkt → Budget</li>
|
||
<li><strong>Tropenstürme häufiger</strong> — Kleine Schadensereignisse mit kurzem Mini-Spiel</li>
|
||
<li><strong>Waldbrände</strong> — Wenn zu viele Wälder + zu hohe Temperatur → ein Wald brennt ab</li>
|
||
<li><strong>Klima-Migration</strong> — Bevölkerung wandert zur nächsten Insel ab (negativer Trend)</li>
|
||
<li><strong>Kipppunkte</strong> — Ab bestimmten Schwellwerten unumkehrbare Verschlechterung</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====================================================== -->
|
||
<section id="offen">
|
||
<h2>8. Offene Punkte & nächste Schritte</h2>
|
||
|
||
<h3>Kurzfristig</h3>
|
||
<ul>
|
||
<li><strong>Phase B: Drag-and-Drop-Platzierung (Baueditor)</strong> — Voraussetzung für Phase C</li>
|
||
<li>2D-Renderer: Zeitleiste und Housing-Logik auf <code>landSurface(x)</code> prüfen (Häuser auf dem Keil, nicht auf dem alten groundY)</li>
|
||
<li>2D-Renderer: Strom-System aus 3D-Version übernehmen</li>
|
||
<li>Graph-Info-Buttons auch in die anderen HTML-Pages (<code>game.html</code>, <code>erdbeben.html</code>, <code>energiemix.html</code>) einbauen</li>
|
||
<li>Citizen-Events mit <code>infoKey</code> versehen (mehr Kontext für Kinder)</li>
|
||
</ul>
|
||
|
||
<h3>Mittelfristig</h3>
|
||
<ul>
|
||
<li><strong>Phase C: Wohnungsbau + Neuankömmlinge</strong> (siehe Karte oben)</li>
|
||
<li>Krisen-Mini-Spiele (Option D)</li>
|
||
<li>Trace-Test um Citizen-Events und Stromausfall erweitern</li>
|
||
<li>Strom-Tooltip ausführlich machen + Bilder/Diagramm</li>
|
||
</ul>
|
||
|
||
<h3>Langfristig</h3>
|
||
<ul>
|
||
<li>Login/Account-System mit Node + Express + SQLite (pausiert)</li>
|
||
<li>Lehrer-Dashboard mit Klassenverwaltung</li>
|
||
<li>Forschungs-Export von <code>game_runs</code> als CSV</li>
|
||
<li>Weitere Simulationen im selben Framework (Bevölkerungsdynamik, Raumplanung, Planetary Boundaries)</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<footer>
|
||
GeoGraSim · Klimawächter Entwicklungs-Log ·
|
||
automatisch generiert aus Chat-Dialog mit Claude ·
|
||
letzte Aktualisierung: 2026-04-11
|
||
</footer>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|