# Spiel-Generator
### PH Weingarten · Medien- und Bildungsmanagement & Informatik (Lehramt)

---

## 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)*