diff --git a/README.md b/README.md index 2217e90..59e4370 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,181 @@ -# edu-boardgame-generator +# Spiel-Generator +### PH Weingarten · Medien- und Bildungsmanagement & Informatik (Lehramt) -Boardgame-Generator – Boys' Day PH Weingarten \ No newline at end of file +--- + +## 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)* \ No newline at end of file