ohne dämliche Emojis

2026-03-15 13:25:47 +01:00 · 2026-03-15 13:25:47 +01:00 · 3ba191a490
commit 3ba191a490
parent 2db4a7cb79
1 changed files with 94 additions and 105 deletions
--- a/README.md
+++ b/README.md
@ -1,7 +1,7 @@
-# 🎲 Spiel-Generator
-### PH Weingarten · Medien- und Bildungsmanagement & Informatik (Lehramt)
+# Spiel-Generator
+### PH Weingarten — Medien- und Bildungsmanagement & Informatik (Lehramt)

-> Browserbasierter Brettspiel-Generator für den Workshop — Schülerinnen und Schüler der ca. 8. Klasse erstellen ihr eigenes digitales Brettspiel mit Mini-Games, ganz ohne Programmierkenntnisse. Dabei entsteht live valider **Python-Code**, der das Spielkonzept abbildet und das Gefühl echten Programmierens vermittelt.
+Browserbasierter Brettspiel-Generator für den Workshop an der PH Weingarten. Schülerinnen und Schüler der Jahrgangsstufe 8 erstellen ihr eigenes digitales Brettspiel mit Mini-Games, ohne Programmierkenntnisse vorauszusetzen. Im Hintergrund wird dabei live valider Python-Code generiert, der das Spielkonzept als Quellcode abbildet.

 ---

@ -15,60 +15,72 @@ edu-boardgame-generator/
 ├── logo.png             # PH Weingarten Logo
 └── minigames/
    ├── _api.js          # Gemeinsame API für alle Mini-Games
-    ├── snake.js         # 🐍 Snake
-    ├── flappy.js        # 🐦 Flappy Bird
-    ├── memory.js        # 🃏 Memory
-    ├── quiz.js          # ❓ Quiz
-    ├── reaction.js      # ⚡ Reaktionstest
-    ├── basketball.js    # 🏀 Basketball
-    ├── catch.js         # 🍎 Äpfel fangen
-    ├── maze.js          # 🌀 Labyrinth (generiertes Maze)
-    ├── simon.js         # 🔴 Simon Says
-    ├── typing.js        # ⌨️ Tipp-Rennen
-    ├── puzzle.js        # 🧩 15-Zahlen-Puzzle
-    └── spotdiff.js      # 🔍 Fehler finden
+    ├── snake.js
+    ├── flappy.js
+    ├── memory.js
+    ├── quiz.js
+    ├── reaction.js
+    ├── basketball.js
+    ├── catch.js
+    ├── maze.js
+    ├── simon.js
+    ├── typing.js
+    ├── puzzle.js
+    └── spotdiff.js
 ```

 ---

-## Technologie & Architektur
+## Technologie

- **Reines HTML + CSS + JavaScript** — keine Abhängigkeiten, kein Build-Prozess
- **Hosting:** GitHub Pages (oder beliebiger statischer Webserver)
- **Datenaustausch:** Spielkonfiguration via `localStorage.gameConfig`
- **Mini-Game API:** Jedes Modul exportiert `launch()` (Spiel) + `preview()` (Editor-Test)
- **⚠️ Wichtig:** Wegen `<script src="...">` muss die App über HTTP(S) laufen — nicht direkt per `file://`
+- Reines HTML, CSS und JavaScript — keine Abhängigkeiten, kein Build-Prozess
+- Hosting: Beliebiger statischer Webserver (nginx empfohlen)
+- Datenaustausch zwischen Editor und Spiel: `localStorage` (Testmodus) sowie URL-Hash (geteilter Link)
+- Mini-Game API: Jedes Modul exportiert `launch()` (Vollspiel) und `preview()` (Editor-Vorschau)

-### Lokalen Server starten
+**Wichtig:** Die Anwendung muss über HTTP(S) ausgeliefert werden. Der direkte Aufruf per `file://` wird wegen CORS-Beschränkungen bei `<script src>` nicht unterstützt.
+
+### Lokalen Entwicklungsserver starten

 ```bash
-# Python (empfohlen)
 python3 -m http.server 8000
-# → http://localhost:8000/editor.html
-
-# Node.js
-npx serve .
+# Aufruf: http://localhost:8000/editor.html
 ```

 ---

+## URL-Sharing
+
+Der Veröffentlichen-Button im Editor erzeugt einen selbsttragenden Link:
+
+```
+https://example.com/game.html#z:H4sIAAAAAAAAA6tWKkktLlGyUlIqS...
+```
+
+**Technisch:**
+- Konfiguration wird als JSON serialisiert, mit pako (DEFLATE) komprimiert und als Base64 in den URL-Hash kodiert
+- Typische Link-Länge: 800 bis 1100 Zeichen (QR-Code-tauglich, Limit ca. 4000 Zeichen)
+- `game.html` liest beim Start den Hash und rekonstruiert die Konfiguration
+- Fallback auf `localStorage` (Testmodus aus dem Editor), danach auf eine Demo-Konfiguration
+- Kein Backend erforderlich — der Server liefert ausschliesslich statische Dateien
+
+Das Share-Modal bietet: Link kopieren, QR-Code, E-Mail, WhatsApp sowie die Native Share API.
+
+---
+
 ## Mini-Game API

-Jede Mini-Game-Datei registriert sich als `window.MG_<id>`:
+Jede Mini-Game-Datei registriert sich als globale Variable `window.MG_<id>`:

 ```javascript
 window.MG_snake = {
  id:       'snake',
-  emoji:    '🐍',
  name:     'Snake',
  desc:     'Steuere die Schlange...',
  controls: 'Pfeiltasten / WASD',
-  multi:    1,          // 1=einmalig, 3=max 3x, 99=unbegrenzt
+  multi:    1,          // 1 = einmalig, 3 = max. 3x, 99 = unbegrenzt

-  // Vollständiges Spiel (game.html)
-  launch(wrap, W, H, cfg) { ... return { stop() {} }; },
-
-  // Kompakte Vorschau (Editor Test-Popup)
+  launch(wrap, W, H, cfg)  { ... return { stop() {} }; },
  preview(wrap, W, H, cfg) { ... return { stop() {} }; },
 };
 ```
@ -82,86 +94,63 @@ Gemeinsame Hilfsfunktionen stehen über `window.MGAPI` bereit:

 ## Neues Mini-Game hinzufügen

-1. Datei `minigames/meinspiel.js` anlegen (Vorlage: eine bestehende Datei kopieren)
+1. Datei `minigames/meinspiel.js` anlegen (Vorlage: bestehende Datei kopieren)
 2. `window.MG_meinspiel = { ... }` implementieren
-3. In `editor.html` und `game.html` eintragen:
-   - `<script src="minigames/meinspiel.js"></script>` vor `</body>`
-4. In der Editor-Logik (`MINIGAMES`-Array in `editor.html`) einen Eintrag hinzufügen
+3. In `editor.html` und `game.html` vor `</body>` eintragen:
+   ```html
+   <script src="minigames/meinspiel.js"></script>
+   ```
+4. Im `MINIGAMES`-Array in `editor.html` einen Eintrag hinzufügen

 ---

 ## Aktueller Stand

-### ✅ Vollständig implementiert
+### Vollständig implementiert

 **Editor (`editor.html`)**
 - Schritt 1: Entwicklername, Spielname, Beschreibung, Vorschau
- Schritt 2: 12 Spielfiguren, 12 Welten/Hintergründe
- Schritt 3: Würfeln/Schritte, Leben/Punkte, Feldanzahl, Drag&Drop, Erzähltexte
- Schritt 4: Quiz-Fragen mit 4 Antworten
- Schritt 5: Review, Spielstart, Feedback-Auswertung
- Python Live-Code Split-Screen (progressiv, fokusgetriggert)
- ↺ Reset-Button, localStorage-Persistenz, responsiv
+- Schritt 2: 12 Spielfiguren, 12 Welten und Hintergründe
+- Schritt 3: Spielregeln (Würfeln/Schritte, Leben/Punkte), Feldanzahl (6–20), Drag-and-Drop, Erzähltexte
+- Schritt 4: Quiz-Fragen mit je 4 Antwortoptionen
+- Schritt 5: Review-Zusammenfassung, Spielstart, Feedback-Auswertung
+- Python-Live-Code-Split-Screen (progressiv, fokusgetriggert, mit Syntaxhervorhebung)
+- Reset-Button, localStorage-Persistenz, responsives Layout

 **Spiel (`game.html`)**
- Animiertes Canvas-Spielfeld, themenabhängige Farben/Partikel
- Würfelanimation, Story-Overlays, HUD
- Win/GameOver-Screen mit Statistiken
+- Animiertes Canvas-Spielfeld mit themenabhängigen Farben und Partikeln
+- Würfelanimation, Story-Overlays, HUD (Leben/Punkte)
+- Win- und GameOver-Screen mit Statistiken

-### 🎮 Mini-Games
+### Mini-Games

-| Game | Status Editor-Vorschau | Status Vollspiel |
-|------|----------------------|-----------------|
-| 🐍 Snake | ✅ | ✅ |
-| 🐦 Flappy Bird | ✅ | ✅ |
-| 🃏 Memory | ✅ | ✅ |
-| ❓ Quiz | ✅ | ✅ |
-| ⚡ Reaktionstest | ✅ | ✅ |
-| 🏀 Basketball | ✅ | ✅ |
-| 🍎 Äpfel fangen | ✅ | ✅ |
-| 🌀 Labyrinth | ✅ (generiertes Maze) | ✅ |
-| 🔴 Simon Says | ✅ | ✅ |
-| ⌨️ Tipp-Rennen | ✅ | ✅ |
-| 🧩 Zahlen-Puzzle | ✅ (15-Puzzle) | ✅ |
-| 🔍 Fehler finden | ✅ (Bauernhof-Szene) | ✅ |
+| Mini-Game        | Editor-Vorschau | Vollspiel |
+|------------------|----------------|-----------|
+| Snake            | Ja             | Ja        |
+| Flappy Bird      | Ja             | Ja        |
+| Memory           | Ja             | Ja        |
+| Quiz             | Ja             | Ja        |
+| Reaktionstest    | Ja             | Ja        |
+| Basketball       | Ja             | Ja        |
+| Früchte fangen   | Ja             | Ja        |
+| Labyrinth        | Ja             | Ja        |
+| Simon Says       | Ja             | Ja        |
+| Tipp-Rennen      | Ja             | Ja        |
+| Zahlen-Puzzle    | Ja             | Ja        |
+| Fehler finden    | Ja             | Ja        |

-### 🔧 Offene Aufgaben
+### Offene Punkte

 | Aufgabe | Priorität |
 |---------|-----------|
-| **Veröffentlichungs-System**: ✅ Implementiert (URL-Hash, QR-Code, Share-Buttons) | ✅ Fertig |
-| **Mehr Szenen für Fehler finden** (spotdiff): 3–5 verschiedene Bilder | 🟡 Mittel |
-| **Schwierigkeitsgrade** in Mini-Games (leicht/mittel/schwer) | 🟡 Mittel |
-| **Touch/Mobile** Drag&Drop im Editor | 🟡 Mittel |
-| **Highscore-System** optional | 🟢 Niedrig |
-| **Mehrsprachigkeit** | 🟢 Niedrig |
+| Weitere Szenarien für "Fehler finden" (aktuell: Bauernhof) | Mittel |
+| Schwierigkeitsgrade in Mini-Games | Mittel |
+| Touch/Mobile Drag-and-Drop im Editor | Mittel |
+| Nginx-Konfiguration mit HTTP Basic Auth | Hoch |

 ---

-## URL-Sharing System
-
-Der "🚀 Veröffentlichen"-Button im Editor erzeugt einen **selbsttragenden Link**:
-
-```
-https://deinserver.de/game.html#z:H4sIAAAAAAAAA6tWKkktLlGyUlIqS...
-```
-
-**Technisch:**
- Config → `JSON.stringify` → `pako.deflate` (gzip) → `Base64` → `#URL-Hash`
- Typische Länge: ~800–1100 Zeichen ✅ QR-Code-tauglich (< 4000 Zeichen)
- `game.html` liest beim Start den Hash und dekomprimiert ihn
- Fallback auf `localStorage` (Editor-Testmodus), dann auf Demo-Config
-
-**Share-Modal** bietet:
- 📋 Link kopieren
- 📱 QR-Code (direkt scannen mit Handy-Kamera)
- 📧 Per E-Mail teilen
- 💬 WhatsApp
- 📲 Native Share API (auf Mobil)
-
-**Kein Backend nötig** – der Server liefert nur statische Dateien.
-
-## Deployment (GitHub Pages)
+## Deployment

 ```bash
 git clone git@git.md-phw.de:mbm/edu-boardgame-generator.git
@ -170,13 +159,13 @@ cd edu-boardgame-generator
 # Dateien bearbeiten ...

 git add .
-git commit -m "feat: ..."
+git commit -m "..."
 git push origin main
 ```

-GitHub Pages → Settings → Pages → Branch: `main` / Root
+Der Webserver muss lediglich statische Dateien ausliefern. Eine Beispiel-nginx-Konfiguration mit HTTPS und optionaler Zugangsbeschränkung ist in Vorbereitung.

-**Wichtig:** Der Generator muss über `https://` aufgerufen werden (nicht `file://`), damit `<script src>` funktioniert.
+**Wichtig:** Der Generator muss über `https://` aufgerufen werden, damit `<script src>` funktioniert.

 ---

@ -187,7 +176,7 @@ GitHub Pages → Settings → Pages → Branch: `main` / Root
 localStorage.removeItem('gameConfig'); location.reload();
 ```

-Vivaldi/Chrome: `Ctrl+Shift+R` (Hard Reload)
+Hard Reload im Browser: `Ctrl+Shift+R`

 ---

@ -195,13 +184,13 @@ Vivaldi/Chrome: `Ctrl+Shift+R` (Hard Reload)

 | Datei | Größe |
 |-------|-------|
-| `editor.html` | ~102 KB |
-| `game.html` | ~43 KB |
-| `codegen.js` | ~14 KB |
-| `logo.png` | ~89 KB |
-| `minigames/` (13 Dateien) | ~77 KB |
-| **Gesamt** | **~325 KB** |
+| `editor.html` | ca. 330 KB |
+| `game.html` | ca. 57 KB |
+| `codegen.js` | ca. 14 KB |
+| `logo.png` | ca. 89 KB |
+| `minigames/` (13 Dateien) | ca. 77 KB |
+| Gesamt | ca. 567 KB |

 ---

-*Entwickelt im Workshop mit Claude (Anthropic) · Stand März 2026*
+*Entwickelt im Rahmen eines Workshops an der PH Weingarten, März 2026*