docs: update PLAN.md development log with completed Story Mode phase and mobile roadmap

PLAN.md

@@ -1,119 +1,49 @@
-# Chemie-Lernspiel Upgrade-Plan
+# Chemie-Lernspiel Entwicklungs-Log & Roadmap
 
-Dieses Dokument beschreibt die geplanten Erweiterungen für das Alchemie-Labor-Chemie-Lernspiel im Verzeichnis `chemie-spiel-dev`.
+Dieses Dokument dokumentiert die erfolgreich abgeschlossenen Entwicklungsphasen und legt die Roadmap für zukünftige Versionen fest.
 
 ---
 
-## 1. Ziele des Upgrades
-- **Lernwert steigern:** Spieler erhalten spannende und verständliche Fakten über die entdeckten Moleküle.
-- **Gamification:** Ein "Entdecker-Buch" (Lexikon/Bibliothek) im Sidebar motiviert dazu, alle Moleküle freizuschalten. Fortschritt wird im Browser (`localStorage`) gespeichert.
-- **Visuelles Feedback & Saftigkeit (Juiciness):** Reaktionen erzeugen Partikel-Explosionen, Atome sehen aus wie 3D-Kugeln, und das Interface fühlt sich dynamischer an.
-- **Mehr Inhalt:** Zusätzliche Elemente (Schwefel, Eisen) und 12 neue Reaktionen (insgesamt 18 Rezepte).
+## 🏆 Abgeschlossene Phasen
+
+### Phase 1: Der erste Prototyp (Sandbox-Kern)
+- **Drag & Drop System:** Atome können frei auf dem Labortisch gezogen und miteinander kollidiert werden.
+- **8 Grundelemente:** Wasserstoff (H), Helium (He), Kohlenstoff (C), Stickstoff (N), Sauerstoff (O), Natrium (Na), Chlor (Cl), Schwefel (S), Eisen (Fe).
+- **18 Rezepturenbuch:** Chemisch exakte Fusionsrezepte für Moleküle wie Wasser ($H_2O$), Salz ($NaCl$), Methan ($CH_4$), Salzsäure ($HCl$), Ammoniak ($NH_3$), etc.
+- **Entdecker-Buch (Lexikon):** Sidebar-Lexikon, das den Fortschritt anzeigt, unentdeckte Rezepte verschlüsselt (`🔒 ???`) und freigeschaltete mit Alltags-Fakten anzeigt. Der Spielfortschritt persistiert im `localStorage`.
+- **Partikel-Explosion:** Physikalisch animierte Farbfunken (Web Animations API) schießen bei erfolgreicher Synthese aus dem Fusionszentrum.
+- **3D-Scherenmodell:** Atome haben durch CSS-Radial-Gradients ein plastisches 3D-Kugel-Aussehen.
+
+### Phase 2: Das interaktive PSE-Cockpit (Option 1)
+- **Periodensystem-Overlay:** Ein Klick auf "📊 Periodensystem" öffnet ein vollflächiges, dunkles Periodensystem-Interfache (CSS Grid, 18 Spalten x 4 Zeilen).
+- **Wissenschaftliche Steckbriefe:** Detaillierte Karten für jedes Element mit Ordnungszahl, Atommasse, Gruppenbezeichnung und Alltagsvorkommen.
+- **Aktives Schalenmodell (Bohr-Modell):** Eine dynamische Schalen-Visualisierung berechnet die Kreisbahnen der Elektronen trigonometrisch und lässt sie in flüssiger Bewegung rotieren. Jedes Atom hat seine reale Elektronenkonfiguration (z. B. Natrium: 2, 8, 1 Schalen).
+- **Direktes Spawnen:** Elemente können direkt aus dem PSE-Steckbrief auf den Tisch gespawnt werden.
+
+### Phase 3: Der Story-Modus (Missions-Zentrale)
+- **Kampagnen-System:** Ein Umschalter zwischen "🧪 Sandbox" und "🏆 Story-Modus" in der Sidebar.
+- **Kapitelbasierte Level:**
+  1. *Level 1: Die salzige Suppe* (Ziel: $NaCl$ Kochsalz)
+  2. *Level 2: Das Lebenselixier* (Ziel: $H_2O$ Wasser)
+  3. *Level 3: Der Mülleimerbrand* (Ziel: $CO_2$ Kohlendioxid)
+  4. *Level 4: Dünger für die Ernte* (Ziel: $NH_3$ Ammoniak)
+  5. *Level 5: Die Verdauungshilfe* (Ziel: $HCl$ Salzsäure)
+- **Professor Atomus NPCs:** Ein stilisierter Avatar des Professors führt den Spieler mit Dialogen durch die Quests, gibt Hinweise und gratuliert zum Erfolg.
+- **Level-Beschränkungen (Constraints):** Jedes Level schaltet nur diejenigen Elemente frei, die chemisch sinnvoll sind. Andere Elemente sind gesperrt, um den Lernpfad zu kanalisieren.
+- **Erfolgs-Zertifikat:** Nach Abschluss des fünften Levels wird das Spiel offiziell mit einem Meistertitel gekrönt.
 
 ---
 
-## 2. Detaillierte Features
+## 🚀 Zukünftige Roadmap (Für die mobile App)
 
-### A. Element- & Rezept-Erweiterung
-Wir führen zwei neue Basiselemente ein:
-- **Schwefel (S)** (Gelb, `#f1c40f`)
-- **Eisen (Fe)** (Metallisch-Grau, `#95a5a6`)
+### Phase 4: Molekül-Reaktionen (Säure-Base-Interaktionen)
+- **Mehrstufige Reaktionen:** Ermöglichen von Kollisionen zwischen Atomen und Molekülen sowie Molekülen mit Molekülen.
+- **Beispiel:** Salzsäure ($HCl$) + Natronlauge ($NaOH$) $\rightarrow$ Kochsalz ($NaCl$) + Wasser ($H_2O$) (Klassische Neutralisation!).
 
-Damit erweitern wir das Rezeptbuch um folgende spannende Kombinationen:
-1. **H₂O (Wasser)**: 2x H + 1x O
-2. **NaCl (Kochsalz)**: 1x Na + 1x Cl
-3. **O₂ (Sauerstoff)**: 2x O
-4. **CO₂ (Kohlendioxid)**: 1x C + 2x O
-5. **CH₄ (Methan)**: 1x C + 4x H
-6. **NH₃ (Ammoniak)**: 1x N + 3x H
-7. **HCl (Salzsäure)**: 1x H + 1x Cl
-8. **NaOH (Natronlauge)**: 1x Na + 1x O + 1x H
-9. **H₂S (Schwefelwasserstoff)**: 2x H + 1x S
-10. **FeS (Eisensulfid)**: 1x Fe + 1x S
-11. **SO₂ (Schwefeldioxid)**: 1x S + 2x O
-12. **CO (Kohlenmonoxid)**: 1x C + 1x O
-13. **H₂O₂ (Wasserstoffperoxid)**: 2x H + 2x O
-14. **HCN (Blausäure)**: 1x H + 1x C + 1x N
-15. **N₂ (Stickstoff)**: 2x N
-16. **Cl₂ (Chlor)**: 2x Cl
-17. **H₂ (Wasserstoff)**: 2x H
-18. **C₂H₄ (Ethen)**: 2x C + 4x H
+### Phase 5: Multimedia & Grafik-Erweiterung
+- **Bilder & Animationen:** Ersatz der einfachen Kreise durch kunstvolle Texturen oder Element-Avatare.
+- **Soundeffekte (SFX):** Integrieren von Audio-Signalen bei Reaktionen ("Zisch!", "Plopp!", "Puff!").
 
-### B. Das Entdecker-Buch (Lexikon)
-- Befindet sich in der Sidebar unter der Elementen-Auswahl.
-- Zeigt den aktuellen Fortschritt an (z. B. "Entdeckt: 2 / 18").
-- Ungelöste Rezepte werden als ausgegraute Fragezeichen dargestellt (z. B. `??? (H₂O)` oder komplett anonymisiert).
-- Entdeckte Moleküle leuchten auf, zeigen ihren vollen Namen und können angeklickt werden, um die Info-Karte erneut zu öffnen.
-- Speicherung des Fortschritts in `localStorage`.
-
-### C. Info-Modal (Pop-up)
-- Sobald eine Reaktion stattfindet, öffnet sich ein wunderschönes Modal (verdunkelter, weichgezeichneter Hintergrund).
-- Inhalt:
-  - Großer Titel mit der chemischen Formel (z. B. **H₂O (Wasser)**).
-  - Ein kurzes, interessantes "Wusstest du schon?"-Faktum (z. B. über die Giftigkeit von Natrium und Chlor einzeln vs. die Harmlosigkeit von Kochsalz).
-  - Ein "Schließen"-Button, der das Modal schließt und den Spielfluss fortsetzt.
-
-### D. Visuelle Effekte & Animationen
-- **Partikel-Explosion:** Bei einer erfolgreichen Reaktion fliegen 10-15 kleine, farbige Funken vom Reaktionszentrum in alle Richtungen weg und verblassen.
-- **3D-Atome:** Atome erhalten einen radialen Farbverlauf, der ihnen ein plastisches, rundes Aussehen verleiht.
-- **Tisch-Statistiken:** Ein kleiner Counter zeigt an, wie viele Atome und Moleküle sich gerade auf dem Tisch befinden.
-- **Tisch leeren:** Ein Papierkorb-Button löscht alle Elemente vom Tisch, um Platz für neue Experimente zu schaffen.
-
----
-
-## 3. Schritt-für-Schritt-Implementierung
-
-### Schritt 1: HTML-Struktur aktualisieren (`index.html`)
-- Neue Buttons für Schwefel (S) und Eisen (Fe) hinzufügen.
-- Eine Sektion `#discovery-book` in der Sidebar einbauen.
-- Den "Tisch leeren"-Button und die Statistik-Zähler im Labor-Tisch ergänzen.
-- Das `#info-modal` Container-Skelett am Ende des Bodys hinzufügen.
-
-### Schritt 2: CSS-Styling verfeinern (`style.css`)
-- Sidebar-Scrollbarkeit verbessern, falls das Lexikon lang wird.
-- Modernes Styling für das Modal (`position: fixed`, Flexbox-Zentrierung, `backdrop-filter: blur(5px)`).
-- 3D-Look für Atome via Radial-Gradient (`background: radial-gradient(circle at 30% 30%, color 0%, darkcolor 100%)`).
-- Schönes Design für das Entdecker-Buch (Grid oder List-Layout, Transitionen beim Freischalten).
-- Partikel-CSS-Klasse für die Reaktionsexplosion.
-
-### Schritt 3: JavaScript-Logik überarbeiten (`app.js`)
-- Rezepte-Array mit allen 18 Rezepten, Farben und detaillierten Texten anlegen.
-- Speicherlogik via `localStorage` einrichten (`discoveredMolecules` Set).
-- Funktion `updateDiscoveryBook()` schreiben, die das Lexikon-UI aktualisiert.
-- Funktion `triggerExplosion(x, y, color)` entwickeln, die DOM-basierte Partikel erzeugt und animiert.
-- Modal-Logik integrieren (`showModal(recipe)`), die bei einer Reaktion aufgerufen wird und bei Klick auf das Lexikon.
-- Event-Listener für "Tisch leeren" und die Positions-Zähler aktualisieren.
-
----
-
-## 4. Validierung & Tests
-- **Webserver:** Läuft im Hintergrund auf Port 8080.
-- **Funktionalität:**
-  1. Spawnen von Atomen klappt.
-  2. Drag & Drop funktioniert flüssig.
-  3. Zusammenführen von 2x H + 1x O öffnet das Wasser-Modal und erzeugt eine Partikel-Explosion.
-  4. Wasser wird im Entdecker-Buch freigeschaltet und persistiert bei Seiten-Reload.
-  5. "Tisch leeren" entfernt alle Atome und Moleküle.
-
----
-
-## 5. Rezept-Daten (Vorschau für `app.js`)
-```javascript
-const recipes = [
-    {
-        id: "h2o",
-        ingredients: ['H', 'H', 'O'],
-        result: 'H₂O (Wasser)',
-        color: '#3498db',
-        desc: "Wasser ist die Grundlage allen Lebens auf der Erde. Unser Körper besteht zu über 60% daraus, und es bedeckt mehr als 70% unseres Planeten!"
-    },
-    {
-        id: "nacl",
-        ingredients: ['Cl', 'Na'],
-        result: 'NaCl (Kochsalz)',
-        color: '#f5f6fa',
-        desc: "Natriumchlorid kennen wir alle als Speisesalz. Faszinierend: Natrium ist ein explosives Metall und Chlor ein giftiges Gas – zusammen ergeben sie ein lebenswichtiges Gewürz!"
-    },
-    // ...weitere 16 Rezepte
-];
-```
+### Phase 6: Mobile Plattform-Portierung (iOS / Android)
+- **Entwicklungs-Framework:** Portierung in die **Godot Engine** (Open Source, extrem leichtgewichtig, perfekt für 2D-Physik und mobile UI-Skalierung).
+- **Backend & Logins:** Cloud-Saves mit Firebase, damit Benutzer sich registrieren und ihren Spielstand geräteübergreifend synchronisieren können.