Frank Meeuwsen 7b181a5f12 feat: Sessie IJsbreker - interactief workshop spel

Browser-based interactief spel voor workshops waarbij deelnemers fysiek
kiezen tussen twee stellingen die op een beamer worden getoond.

Features:
- Presentatie modus met visuele timer rondom scherm
- Timer animatie loopt synchroon rond in opgegeven tijd
- Geluidssignaal bij einde timer
- Overlay met stellingen na timer (grayed out)
- Keyboard shortcuts (spatiebalk voor volgende)
- Direct eindscherm bij laatste stelling

- Web-based stellingen editor
- Flask backend voor config management
- Real-time CRUD operaties op stellingen
- Kleurenpicker voor achtergronden
- Validatie en filtering van lege stellingen
- Volledig offline werkend

Tech stack:
- Frontend: Pure HTML/CSS/JavaScript
- Backend: Python Flask + flask-cors
- Config driven via JSON

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-03 16:23:11 +01:00

2.9 KiB

Raw Blame History

Sessie IJsbreker

Een browser-based interactief spel voor workshops waarbij deelnemers fysiek kiezen tussen twee stellingen.

Installatie

Eerste keer setup:

# Installeer Python dependencies
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

Gebruik

1. Start de Flask server

# Activeer virtual environment (indien nog niet actief)
source venv/bin/activate

# Start de server
python3 server.py

De server draait nu op http://localhost:8000

2. Beheer Stellingen

Open in je browser: http://localhost:8000/editor.html

Hier kun je:

⚙️ Instellingen aanpassen (timer, kleuren, teksten)
✏️ Stellingen toevoegen, bewerken, verwijderen
💾 Opslaan naar config.json
⌨️ Keyboard shortcut: Ctrl+S of Cmd+S om op te slaan

3. Spel Draaien (Presentatie)

Open in je browser: http://localhost:8000

Sluit aan op beamer/groot scherm en:

Het spel toont automatisch de eerste stelling
Deelnemers lopen naar links of rechts
Na de timer: beep + overlay met knop
Druk op knop of spatiebalk voor volgende stelling
Laatste stelling toont direct eindscherm

Configuratie

Alle instellingen staan in config.json:

{
  "timer": 30,               // Timer duur in seconden
  "fontSize": "3rem",        // Tekst grootte (CSS waarde)
  "buttonText": "Volgende Stelling",
  "finishText": "Sessie Afgelopen!",
  "colors": {
    "left": "#3B82F6",      // Achtergrondkleur links (hex)
    "right": "#EF4444"      // Achtergrondkleur rechts (hex)
  },
  "stellingen": [
    {
      "links": "Koffie",
      "rechts": "Thee"
    }
  ]
}

Configuratie Opties

timer: Aantal seconden per stelling (bijv. 30, 45, 60)
fontSize: CSS font grootte (bijv. "3rem", "48px", "4vw")
buttonText: Tekst op de 'volgende' knop
finishText: Tekst op het eindscherm
colors.left: Hex kleurcode voor linker stelling achtergrond
colors.right: Hex kleurcode voor rechter stelling achtergrond
stellingen: Array van stelling paren

Interactie

Klik op knop: Ga naar volgende stelling
Spatiebalk: Ga naar volgende stelling (sneller tijdens presentatie)

Features

Presentatie:

✅ Visuele timer rondom scherm (loopt synchroon rond)
✅ Geluidssignaal bij einde timer
✅ Overlay met stellingen na timer (grayed out)
✅ Keyboard shortcut (spatiebalk)
✅ Direct eindscherm bij laatste stelling

Editor:

✅ Web-based stellingen beheer
✅ Real-time preview van aantal stellingen
✅ Kleurenpicker voor achtergronden
✅ Drag-free toevoegen/verwijderen
✅ Keyboard shortcut (Ctrl/Cmd+S)
✅ Validatie van invoer

Algemeen:

✅ Volledig offline werkend
✅ Configureerbaar via JSON én webinterface
✅ Geen authenticatie nodig (lokaal gebruik)

Technisch

Frontend: Pure HTML/CSS/JavaScript
Backend: Python Flask voor config management
Dependencies: Flask, flask-cors

2.9 KiB Raw Blame History