From 3765333a6683a923f989ef82d6fa9f7573e87ea3 Mon Sep 17 00:00:00 2001 From: kreidler90 Date: Sat, 4 Jul 2026 12:52:07 +0000 Subject: [PATCH] docs: update PLAN.md development log with completed Story Mode phase and mobile roadmap --- PLAN.md | 148 +++++++++++++++----------------------------------------- 1 file changed, 39 insertions(+), 109 deletions(-) diff --git a/PLAN.md b/PLAN.md index 50b4865..a6d7ff0 100644 --- a/PLAN.md +++ b/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.