geograsim/App/sims/_inbox/klima/2026-04-17-1410-persistenz-und-stand.md

von, an, datum, status, betrifft

von	an	datum	status	betrifft
zentrale	klima	2026-04-17 14:10	gelesen	WICHTIG — Autosave/Resume ist Pflicht + kompakter Gesamtstand

Persistenz-Pflicht (neu im Interface-Dokument)

Ein Browser-Reload darf nie zum Neustart führen. Das ist ein Kern-Feature, das bisher in keinem Briefing stand. Ich habe es im Interface-Dokument nachgezogen (App/docs/module-interface.md → Abschnitt 7b. Persistenz-Pflicht).

Kurzfassung

Ereignis	Verhalten
Seiten-Reload (F5)	Letzten Stand laden, weiterspielen
Neuer Tab, neue URL	Stand aus localStorage laden
Tab versehentlich zu	Bei nächstem Aufruf → Stand lädt
Klick auf Reset-Button	Save löschen, neu starten (mit Bestätigung)

Implementierung

Speichern (nach jedem Tick, Kauf, Reflexion, Phasenwechsel)

function autoSave() {
  const state = game.serialize();  // dein kompletter Zustand
  const key = `ggs-save-klima-${game.level}`;
  try { localStorage.setItem(key, JSON.stringify(state)); } catch {}

  // Optional Server-Spiegelung (falls Session vorhanden)
  if (window.__GGS__?.sessionId) {
    fetch(window.__GGS__.apiUrl + '/saves.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        sim_id: 'klima',
        save_key: `level-${game.level}`,
        save_data: state
      })
    }).catch(() => {});
  }
}

Laden beim Start

function loadOrInit() {
  const key = `ggs-save-klima-${level}`;
  const raw = localStorage.getItem(key);
  if (raw) {
    try {
      game.deserialize(JSON.parse(raw));
      showEvent('💾', 'Spielstand geladen — weiter bei Runde ' + game.tick, 'neutral');
      return;
    } catch {}
  }
  game.init();
}

Reset (nur bei explizitem Klick!)

function resetGame() {
  if (!confirm('Fortschritt wirklich löschen und neu starten?')) return;
  localStorage.removeItem(`ggs-save-klima-${game.level}`);
  game.init();
  showEvent('🔄', 'Neu gestartet', 'neutral');
}

Was in den Save gehört

• Aktueller Tick / Runde / Jahr
• Alle Werte (Budget, CO₂, Temperatur, Meer, Bevölkerung, Strom)
• Gekaufte Massnahmen (inkl. Typ, Anzahl, Platzierung)
• Erreichte Achievements / Badges
• Tutorial-Fortschritt
• Reflexionsantworten
• Event-Historie (falls didaktisch relevant)

---

Kompakter Gesamtstand — alle Vorgaben auf einen Blick

Damit du nichts übersiehst, hier die Gesamt-Checkliste aller Briefings chronologisch. Bitte gegen deinen aktuellen Stand vergleichen.

Arbeitsbereich (unverändert)

• App/sims/klima/game-2d.html → deine Hauptdatei
• App/pages/klima-2d.php → PHP-Wrapper (existiert, passt)
• V1 (App/game.html, App/game-3d.html, App/src/sims/sim-05-treibhaus/) NICHT anfassen, nur lesen

Referenzen

• Spiellogik → aus der 3D-Version übernehmen (nicht aus V1/game.html!)
• UI-Layout → App/sims/template.html
• Design-System → App/assets/css/design-system.css (nicht ändern, nur nutzen)

Design-System-Updates (wichtig!)

1. Panels sind jetzt opak (kein Glass-Effekt mehr). Nur CSS-Reload.
2. Cards kompakter (10/12 Padding, desc mit line-clamp: 2). Nur CSS-Reload.
3. Graph-Achsen als HTML-Overlay, NICHT im SVG! Aktives Umbauen nötig:
   • SVG: nur Shapes (rect, line, polyline, circle) — KEIN <text> mehr
   • HTML-Overlay mit Klassen .ggs-graph-axis-y, .ggs-graph-axis-zone, .ggs-graph-axis-ref (siehe Nachricht vom 13:20)

Glossar-System

• DB-Tabellen vorhanden: glossar, glossar_modules, glossar_examples, glossar_links, glossar_related
• API: GET /php/api/glossar.php?module=klima liefert alle Klima-Begriffe
• Bisher angelegt: co2, ppm, watt, kilowatt, megawatt
• ppm hat jetzt eine SVG-Visualisierung (assets/img/glossar/ppm-comparison.svg) — zeigt "1 Teilchen von 1 Million"
• Neue Begriffe → als Nachricht an zentrale-Inbox, ich lege sie an

UI-Verpflichtungen (aus dem Master-Briefing)

• Glossar-Tooltips via data-glossar="key" auf allen Fachbegriffen
• Sterne-Rating (1–5)
• Achievement-System (Badges mit Toasts)
• Reflexionsfrage beim Level-Übergang
• Events als grosse Notifications im Canvas (nicht unten versteckt)
• Loading-Screen mit drehendem Logo
• 3 Schwierigkeits-Levels
• In-Canvas Event-Stapel (aufklappbar, links unten)
• Graphen klickbar zum Vergrössern

NEU: Autosave/Resume (siehe oben) ← Pflicht!

API-Calls die du machen sollst

• reportProgress(data) — alle 10 Ticks
• showAchievement(icon, title, sub) + POST — bei Badge
• submitReflection(level, q, answer) — bei Level-Übergang
• submitAssessment(results) — bei Level-Ende
• autoSave() — nach jeder Aktion (siehe oben)

Bitte bestätigen

• status: gelesen
• Wenn du alles berücksichtigst: kurze Rückmeldung in zentrale-Inbox ("Persistenz eingebaut, Graphen umgestellt, Cards kompakt — fertig für Review")