ijsbreker/README.md

# 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. Klik op groene "Start IJsbreker" knop om te beginnen
2. Klik op **fullscreen knop** rechtsonder voor volledig scherm (zonder browser UI)
3. Deelnemers lezen stellingen en lopen naar links of rechts
4. Na de timer: beep + overlay met knop
5. Druk op knop of **spatiebalk** voor volgende stelling
6. Laatste stelling toont direct eindscherm
7. Druk nogmaals op fullscreen knop of **ESC** om fullscreen te verlaten

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

**Presentatie modus:**
- **Klik op knop**: Ga naar volgende stelling
- **Spatiebalk**: Start spel (op startscherm) of ga naar volgende stelling
- **Fullscreen knop**: Toggle volledig scherm (rechtsonder, naast counter)
- **ESC toets**: Verlaat fullscreen modus

## Features

**Presentatie:**
- ✅ Startscherm met controle over startmoment
- ✅ Fullscreen modus voor presentaties zonder browser UI
- ✅ Visuele timer rondom scherm (loopt synchroon rond)
- ✅ Geluidssignaal bij einde timer
- ✅ Overlay met stellingen na timer (grayed out)
- ✅ Stelling counter rechtsonder (toont bijv. "1/8", "2/8")
- ✅ Keyboard shortcuts (spatiebalk voor volgende, ESC voor fullscreen uit)
- ✅ Direct eindscherm bij laatste stelling

**Editor:**
- ✅ Web-based stellingen beheer
- ✅ Workshop sets systeem (meerdere configuraties opslaan en laden)
- ✅ Stellingkast met bibliotheek voor snelle import
- ✅ Drag & drop om stellingen te herordenen
- ✅ Real-time preview van aantal stellingen
- ✅ Kleurenpicker voor achtergronden
- ✅ 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