chemie-spiel/PLAN.md

Chemie-Lernspiel Upgrade-Plan

Dieses Dokument beschreibt die geplanten Erweiterungen für das Alchemie-Labor-Chemie-Lernspiel im Verzeichnis chemie-spiel-dev.

---

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).

---

2. Detaillierte Features

A. Element- & Rezept-Erweiterung

Wir führen zwei neue Basiselemente ein:

• Schwefel (S) (Gelb, #f1c40f)
• Eisen (Fe) (Metallisch-Grau, #95a5a6)

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

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)

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
];