📐 Plattform-Standards

UI-Patterns, die in allen Sims gleich aussehen + funktionieren sollen. Pflegt Atlas, hier dokumentiert.

🏷️ Glossar-Tooltip-Pattern

Bei Fachbegriffen in Sim-Texten: kleines Popup mit Kurzerklärung + Link zum vollen Glossar-Eintrag. Erprobt seit Heli + Klima 2D/3D.

So sieht's aus

Das ist ein Beispieltext mit einem Welthandel-Begriff drin und auch Klimazone ist klickbar. Beim Klick öffnet sich rechts unter dem Begriff ein kleiner Popup mit Definition.

Markup-Standard

<span class="ggs-g" data-glossar="welthandel">Welthandel</span>

Regel: data-glossar-Attribut hält den key_slug des Glossar-Eintrags. Die CSS-Klasse ggs-g sorgt für die gestrichelte Unterlinie + Hover-Effekt + ist der Trigger für den JS-Handler.

Einbindung im Sim-Wrapper (PHP)

// in App/pages/<sim>.php nach dem Live-Heartbeat-Script:
$glossarScript = '<script src="' . BASE_PATH . '/assets/js/glossar-tooltip.js" defer></script>'
               . '<script>window.addEventListener("DOMContentLoaded",function(){'
               . 'if(window.GlossarTooltip)GlossarTooltip.init({apiBase:' . json_encode(BASE_PATH . '/api') . ',moduleId:"<sim-slug>"});'
               . '});</script>';
$html = str_replace('</body>', $glossarScript . "\n</body>", $html);

API der Lib

FunktionZweck
GlossarTooltip.init({apiBase, moduleId, fallback})Aktiviert das Pattern auf der Seite. Lädt die Glossar-Snippets pro Modul via API-Call /api/glossar.php?module=<moduleId>.
GlossarTooltip.addFallback(key, {title, text})Für Begriffe ohne DB-Eintrag (oder bei Offline-Demo): lokales Snippet hinzufügen.
GlossarTooltip.markup(label, slug)Hilfsfunktion für dynamisch generierte HTML-Strings: liefert das fertige <span>-Markup.

Wo schon im Einsatz

SimStatusPattern-Variante
Heli✓ aktiveigene heli-glossar-term-Klasse + lokale JS-Implementierung (Vorbild für das Pattern)
Klima 2D/3D✓ aktiveigene Klima-Variante
Weltküche✓ seit 2026-06-08Plattform-Standard via /assets/js/glossar-tooltip.js
Andere Sims⏳ ausstehendMigration auf Plattform-Lib empfohlen (siehe „Migrations-Plan" unten)
Plattform-Lib: App/assets/js/glossar-tooltip.js (Stand 2026-06-08). Pure Vanilla-JS, kein Framework, mobile-/iPad-tauglich. CSS wird automatisch injiziert.

Migrations-Plan für andere Sims

  1. Im jeweiligen Wrapper (App/pages/<sim>.php) das Script einbinden (Snippet oben).
  2. Eigene Glossar-CSS-Klassen (.heli-glossar-term, .klima-glossar-term usw.) durch ggs-g ersetzen.
  3. Eigene JS-Click-Handler entfernen — die Plattform-Lib übernimmt.
  4. Optional: lokale Fallback-Snippets via GlossarTooltip.addFallback() nachreichen.
Wichtig: Beim Migrieren NICHTS löschen, bevor das neue Pattern getestet ist. Erst neuen Code dazu, beide laufen lassen, dann altes raus.

🎵 Audio-Signal „Atlas fertig"

Atlas spielt das MP3 App/sims/heli/sounds/dev/atlas-fertig.mp3 ab — IMMER wenn der Ball bei Thomas liegt (Aufgabe fertig ODER warten auf Genehmigung). Details: memory/feedback_atlas_fertig_audio.md.

📦 Sim-Wrapper-Standard

Jede Sim hat einen App/pages/<slug>.php-Wrapper:

🌍 GGS_LIVE_STATE-Hook

Jede Sim definiert window.GGS_LIVE_STATE = function(){…} → liefert State-Snapshot für Lehrer-Live-Cockpit. Mindestens:

{
  phase: 'browsing' | 'recipe' | 'researching' | …,
  score: 0,
  completed: 0,            // erledigte Aufgaben/Gerichte
  completedTotal: 30,      // max
  badgesEarned: 0,
  badgesTotal: 10,
  levelWon: false
}

Der Live-Heartbeat schickt das alle 4 s an /api/live.php.