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