# 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