116 lines
2.9 KiB
Markdown
116 lines
2.9 KiB
Markdown
|
# Sessie IJsbreker
|
||
|
|
|
||
|
|
Een browser-based interactief spel voor workshops waarbij deelnemers fysiek kiezen tussen twee stellingen.
|
||
|
|
|
||
|
|
## Installatie
|
||
|
|
|
||
|
|
**Eerste keer setup:**
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# Installeer Python dependencies
|
||
|
|
python3 -m venv venv
|
||
|
|
source venv/bin/activate
|
||
|
|
pip install -r requirements.txt
|
||
|
|
```
|
||
|
|
|
||
|
|
## Gebruik
|
||
|
|
|
||
|
|
### 1. Start de Flask server
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 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:
|
||
|
|
1. Het spel toont automatisch de eerste stelling
|
||
|
|
2. Deelnemers lopen naar links of rechts
|
||
|
|
3. Na de timer: beep + overlay met knop
|
||
|
|
4. Druk op knop of **spatiebalk** voor volgende stelling
|
||
|
|
5. Laatste stelling toont direct eindscherm
|
||
|
|
|
||
|
|
## Configuratie
|
||
|
|
|
||
|
|
Alle instellingen staan in `config.json`:
|
||
|
|
|
||
|
|
```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
|