README.md aktualisiert

README.md

@@ -1,3 +1,181 @@
-# edu-boardgame-generator
+# Spiel-Generator
+### PH Weingarten · Medien- und Bildungsmanagement & Informatik (Lehramt)
 
-Boardgame-Generator – Boys' Day PH Weingarten
+---
+
+## Was ist das?
+
+Ein browserbasierter **Brettspiel-Generator** für einen Workshop an der PH Weingarten, der sich an Schülerinnen und Schüler der ca. 8. Klasse richtet. Kinder erstellen ihr eigenes digitales Brettspiel mit Mini-Games – ganz ohne Programmierkenntnisse. Im Hintergrund wird dabei live gültiger **Python-Code** generiert, der das Spielkonzept als Quellcode abbildet und den Schülerinnen und Schülern das Gefühl gibt, wirklich zu programmieren.
+
+Das Projekt besteht aus zwei Dateien:
+
+| Datei | Funktion |
+|-------|----------|
+| `editor.html` | 5-Schritte-Editor-Wizard zur Spielerstellung |
+| `game.html` | Das fertige spielbare Brettspiel |
+
+---
+
+## Projektstruktur & Architektur
+
+- **Technologie:** Reines HTML + CSS + JavaScript (keine Abhängigkeiten, kein Build-Prozess)
+- **Hosting:** Gedacht für GitHub Pages
+- **Datenaustausch:** Spielkonfiguration wird via `localStorage.gameConfig` gespeichert; `game.html` liest daraus beim Start
+- **Keine Serverpflicht:** Alles läuft clientseitig
+
+---
+
+## Aktueller Stand
+
+### Vollständig funktionierend
+
+#### Editor (`editor.html`)
+
+- **Schritt 1 – Grundinfos:** Entwicklername, Spielname, Beschreibung, Namensvorschläge, Live-Vorschau-Karte
+- **Schritt 2 – Gestaltung:** 12 Spielfiguren, 12 Hintergründe/Welten, Live-Kombi-Vorschau
+- **Schritt 3 – Spielfeld & Regeln:**
+  - Würfeln vs. Einzel-Schritt
+  - Leben-System vs. Punkte-System
+  - Feldanzahl (6–20) mit +/- Steuerung
+  - Drag-&-Drop Palette → Spielfeld (funktioniert ✅)
+  - Klick-to-Place für Mini-Games
+  - Erzähltexte vor/nach Feldern mit Emoji-Picker
+  - Board-Builder mit visueller Felddarstellung
+- **Schritt 4 – Quiz:** Pro Quiz-Feld eine Karte mit Frage + 4 Antworten + richtiger Antwort; Autofill-Beispiele
+- **Schritt 5 – Testen:** Review-Timeline, Launch-Button zu `game.html`, 8-Fragen-Feedback-Auswertung
+
+#### Python-Live-Code (Split-Screen rechts)
+
+- Progressiver Aufbau: Code erscheint **Schritt für Schritt** wenn Felder angeklickt/befüllt werden
+- Beginn: Leerer Code mit Hinweiskommentar
+- Fokus-getriggert: Jedes Feld/Button enthüllt genau den zugehörigen Codeabschnitt
+- **Korrekte Python-Syntax** mit echtem Syntaxhighlighting (Keywords, Strings, Funktionen, Kommentare)
+- Dynamischer Dateiname: `spielname_von_entwicklername.py`
+- Resizer-Balken: Split-Breite per Maus verschiebbar
+- Zeilennummern, Statusanzeige (`● Live` / `● Bereit`)
+- Dateiname-Header mit macOS-Stoplight-Dots
+
+#### Allgemein
+
+- PH Weingarten Logo + Studiengänge im Header
+- Sticky Progress-Bar (volle Breite) mit 5 Schritt-Dots
+- Zusammenfassungs-Banner beim Vorwärtsnavigieren
+- `localStorage`-Persistenz (Zustand bleibt nach Reload)
+- **↺ Reset-Button** zum sauberen Neustart (löscht localStorage)
+- Responsiv: Code-Panel blendet sich unter 900px aus
+- Scrollbar-Styling einheitlich (lila, schlank)
+
+---
+
+#### Spiel (`game.html`)
+
+- Vollständiges animiertes Spielfeld mit Canvas-Rendering
+- Thema-abhängige Farben & Partikel (12 Hintergründe/Themen)
+- Spielfigur mit Bounce-Effekt und Glow
+- Farbkodierte Felder pro Mini-Game-Typ
+- Besuchter-Pfad leuchtet auf
+- HUD: Feld-Position, Leben oder Punkte
+- Würfel-Animation
+- Story-Overlay (Erzähltexte)
+- Mini-Game-Overlay mit Beschreibung und Steuerungshinweis
+- Win-Screen und Game-Over-Screen mit Statistiken
+
+---
+
+### 🎮 Mini-Games – Überblick
+
+#### Im Spiel (`game.html`) – vollständig spielbar
+
+| Mini-Game | Status |
+|-----------|--------|
+| 🐍 Snake | ✅ Vollständig |
+| 🐦 Flappy Bird | ✅ Vollständig |
+| 🃏 Memory | ✅ Vollständig |
+| ❓ Quiz | ✅ Vollständig (nutzt eigene Fragen aus Schritt 4) |
+| ⚡ Reaktionstest | ✅ Vollständig |
+| Alle anderen 7 | ⚠️ Platzhalter (zeigen Emoji + „bald verfügbar"-Button) |
+
+#### Im Editor (`editor.html`) – Test-Popup (▶ TEST)
+
+| Mini-Game | Status |
+|-----------|--------|
+| 🐍 Snake | ✅ Vollständig |
+| 🐦 Flappy Bird | ✅ Vollständig |
+| 🃏 Memory | ✅ Vollständig |
+| ⚡ Reaktionstest | ✅ Vollständig |
+| ❓ Quiz | ✅ Demo (nutzt eigene Fragen wenn vorhanden) |
+| 🏀 Basketball | ✅ Vollständig |
+| 🍎 Äpfel fangen | ✅ Vollständig |
+| 🌀 Labyrinth | ✅ Vollständig |
+| 🔴 Simon Says | ✅ Vollständig |
+| ⌨️ Tipp-Rennen | ✅ Vollständig |
+| 🧩 Rätsel | ⚠️ Stub (Platzhalter-Demo) |
+| 🔍 Fehler finden | ⚠️ Stub (Platzhalter-Demo) |
+
+---
+
+## 🔧 Bekannte offene Aufgaben
+
+### Hoch-Priorität
+
+| Aufgabe | Beschreibung |
+|---------|--------------|
+| 🎮 **7 Mini-Games im Spiel implementieren** | Basketball, Äpfel fangen, Labyrinth, Simon Says, Rätsel, Fehler finden, Tipp-Rennen sind im Editor testbar, aber in `game.html` noch Platzhalter |
+| 🔗 **URL-System / Veröffentlichung** | `doPublish()` zeigt nur Alert. Ziel: Config als Base64 in URL kodieren, QR-Code generieren, direkter GitHub-Pages-Link |
+
+### Mittel-Priorität
+
+| Aufgabe | Beschreibung |
+|---------|--------------|
+| 📱 **Mobile-Optimierung** | Drag-&-Drop auf Touch-Geräten (aktuell nur Maus) |
+| 🔄 **Zurück-Navigation** | `window.scrollTo` scrollt ggf. falsch beim Schritt-Zurückspringen |
+| 🧩 **Rätsel-Mini-Game** | Vollständiges Zahlen-Puzzle implementieren |
+| 🔍 **Fehler-finden-Mini-Game** | Vollständige Implementierung (zwei Bilder, Unterschiede suchen) |
+
+### Niedrige Priorität / Nice-to-have
+
+| Aufgabe | Beschreibung |
+|---------|--------------|
+| 📦 **GitHub Pages Setup** | Repository anlegen, Dateien hochladen, Pages aktivieren |
+| 🎨 **Mehr Figuren/Welten** | Aktuell 12+12; erweiterbar |
+| 🌍 **Sprachoptionen** | Aktuell nur Deutsch |
+| 🏆 **Highscore-System** | Optional für Mehrfach-Spielen |
+| 📊 **Feedback-Auswertung exportieren** | Schritt 5 wertet aus, aber kein Export |
+
+---
+
+## Workflow-Empfehlungen
+
+- Der Generator läuft vollständig **offline/lokal** – einfach `editor.html` im Browser öffnen
+- **Reset:** Button „↺ Reset" oben links im Header, oder in der Browser-Konsole:
+  ```javascript
+  localStorage.removeItem('gameConfig'); location.reload();
+  ```
+- **Cache leeren** in Vivaldi/Chrome: `Ctrl+Shift+R` (Hard Reload), oder DevTools öffnen → Network → „Disable cache"
+- Bei Entwicklung: Syntax-Checks via Node.js möglich
+
+---
+
+## Technische Hinweise
+
+- Der Python-Code im Split-Screen ist **didaktisch korrekt** aber nicht ausführbar (kein `boardgame_engine`-Modul existiert). Das ist bewusst – es geht ums Erleben des Programmierens.
+- Der State (`ST`-Objekt) wird bei jeder Eingabe in `localStorage` gesichert.
+- `game.html` wird via `window.open()` aus dem Editor geöffnet und liest aus `localStorage.gameConfig`.
+- Das `roundRect`-Canvas-API hat einen Polyfill für ältere Browser.
+
+---
+
+## Geschätzter Restaufwand
+
+| Bereich | Aufwand |
+|---------|---------|
+| 7 Mini-Games in game.html fertig implementieren | ~3–5 Tage |
+| URL/QR-Code Veröffentlichungs-System | ~1–2 Tage |
+| Mobile Touch-Drag | ~1 Tag |
+| GitHub Pages + Deployment | ~2–4 Stunden |
+| Testing & Bugfixing für Workshop | ~1–2 Tage |
+| **Gesamt** | **~6–10 Tage** |
+
+---
+
+*Stand: März 2026 · Entwicklung im Workshop mit Claude (Anthropic)*