# agents.md
> Deze file wordt automatisch gesynchroniseerd met CLAUDE.md
> Laatste sync: 2025-12-12 08:35
# IJsbreker Workshop Spel

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

## Project Overzicht

**Type:** Hobby project / Workshop tool
**Status:** Volledig functioneel v1.0
**Gemaakt:** 2025-11-03

### Wat doet het?
Een presentatie tool voor workshops waar deelnemers tussen twee stellingen moeten kiezen. De facilitator toont stellingen op een beamer, een timer loopt visueel rond het scherm, en daarna zie je de stellingen grayed out terwijl mensen fysiek naar links/rechts bewegen.

### Features
- Timer animatie die synchroon rond het scherm loopt
- Geluidssignaal bij einde timer
- Overlay met stellingen na timer
- Keyboard shortcuts (spatiebalk voor volgende)
- Direct eindscherm bij laatste stelling
- Web-based stellingen editor met Flask backend
- Real-time CRUD operaties op stellingen
- Kleurenpicker voor achtergronden
- Volledig offline werkend

### Tech Stack
- Frontend: Pure HTML/CSS/JavaScript
- Backend: Python Flask + flask-cors
- Config driven via JSON
- Geen externe dependencies voor presentatie modus

## Bestandsstructuur

```
/ijsbreker
├── index.html          # Presentatie modus (hoofdspel)
├── app.js              # Game logic en timer animatie
├── style.css           # Presentatie styling
├── config.json         # Stellingen database (JSON)
├── editor.html         # Web-based config editor
├── editor.js           # Editor functionaliteit
├── editor.css          # Editor styling
├── server.py           # Flask backend voor editor
├── requirements.txt    # Python dependencies
├── .gitignore          # Exclude venv, .DS_Store, etc
└── README.md           # Uitgebreide documentatie
```

## Gebruik

### Presentatie Modus
```bash
# Open in browser
open index.html
```

**Controls:**
- Spatiebalk: Volgende stelling
- Automatische timer animatie
- Geluidssignaal bij einde

### Stellingen Bewerken
```bash
# Start Flask server
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python server.py

# Open editor
open http://localhost:5000/editor.html
```

**Editor features:**
- Toevoegen/verwijderen stellingen
- Timer aanpassen per stelling
- Kleuren aanpassen
- Preview kleuren
- Auto-save naar config.json

## Session History

### 2025-11-03 - Initiële Ontwikkeling
**Nieuwe features:**
- Browser-based interactief workshop spel gebouwd
- Timer animatie met visuele rand rond scherm
- Geluidssignaal implementatie bij timer einde
- Overlay systeem voor stellingen na timer
- Keyboard shortcuts voor presentatie flow
- Web-based stellingen editor met Flask backend
- Real-time CRUD operaties op config.json
- Kleurenpicker voor achtergrond customization
- Validatie en filtering van lege stellingen
- Volledig offline werkend systeem

**Tech beslissingen:**
- Pure HTML/CSS/JavaScript voor maximale portabiliteit
- Flask backend voor eenvoudige config management
- JSON als database voor simpele deployment
- Geen build process nodig voor presentatie modus
- flask-cors voor lokale development

**Deployment:**
- Eerste commit en push naar Forgejo
- Repository: git.dutchstack.nl:frankmeeuwsen/ijsbreker.git
- Volledig functionele v1.0 klaar voor gebruik

**Status:**
- Presentatie modus volledig werkend
- Editor volledig functioneel
- Documentatie compleet in README.md
- Klaar voor workshop gebruik

### 2025-11-07 - Startscherm Toegevoegd
**Nieuwe feature:**
- Startscherm met groene "Start IJsbreker" knop toegevoegd
- Timer begint nu pas na klik op startknop (voorheen automatisch)
- Gebruiker heeft volledige controle over startmoment presentatie
- Spatiebalk werkt op startscherm voor snelle start

**Gewijzigde bestanden:**
- `index.html` - Startscherm HTML toegevoegd, statementScreen krijgt .hidden class bij laden
- `style.css` - Styling voor start-screen en start-button (groene knop met hover effecten)
- `app.js` - Flow aangepast: nieuwe functies `showStartScreen()` en `startGame()`, event listeners voor startButton, spatiebalk werkt nu op startscherm EN overlay
- `config.json` - Kleine config aanpassingen

**Waarom:**
Voorheen begon de timer meteen bij het laden van de pagina, wat onhandig is bij voorbereiding van een workshop presentatie. Nu kan de facilitator in alle rust de browser op de beamer zetten voordat het spel daadwerkelijk start.

**Status:**
- Feature volledig werkend en getest
- Klaar voor workshop gebruik met betere controle over presentatie flow

### 2025-11-14 - UI Verbeteringen en Flow Fixes
**Nieuwe features:**
- Stelling counter rechtsonder toegevoegd (toont bijv. "1/8", "2/8" tijdens presentatie)
- Overlay transparantie verhoogd naar 0.4 voor betere leesbaarheid stellingen
- "Volgende stelling" knop verplaatst naar bovenkant (15vh) voor betere zichtbaarheid

**Bug fixes:**
- Laatste stelling flow gefixed: toont nu correct overlay voordat eindscherm verschijnt
- Voorheen ging laatste stelling direct naar finish screen zonder overlay tonen

**Gewijzigde bestanden:**
- `style.css` - Overlay opacity aangepast, knop positie gewijzigd, counter styling toegevoegd
- `app.js` - Statement counter logica toegevoegd, laatste stelling flow aangepast
- `index.html` - Statement counter div toegevoegd

**Waarom:**
Tijdens gebruik bleek de knop onderaan moeilijk leesbaar door de overlay, en de laatste stelling miste de overlay fase waardoor deelnemers geen tijd hadden om te kiezen. Counter helpt facilitator bij het bijhouden van voortgang.

**Status:**
- Alle wijzigingen getest en werkend
- Gecommit en gepusht naar remote (commit e1f1659)
- UX verbeterd voor workshop gebruik

### 2025-12-12 - Stellingkast en Drag & Drop
**Nieuwe features:**
- **Stellingkast:** Nieuw inschuif-paneel in de editor om direct stellingen uit een bibliotheek (`stellingkast.json`) te importeren.
- **Drag & Drop:** Stellingen kunnen nu in de editor versleept worden om de volgorde aan te passen.
- **Cache Busting:** Toegevoegd aan fetch calls om laadproblemen met verouderde JSON bestanden te voorkomen.
- **Validatie:** `stellingkast.json` is opgeschoond en bevat nu valide JSON.

**Gewijzigde bestanden:**
- `editor.html` - HTML structuur voor Stellingkast panel en nieuwe header knop
- `editor.css` - Styling voor slide-in panel, sleep-handvatten en responsive design
- `editor.js` - Logica voor drag & drop, stellingkast import, verbeterde foutafhandeling en loading states
- `stellingkast.json` - Opgeschoond (regelnummers verwijderd)

**Status:**
- Features volledig werkend en getest in browser
- Editor robuuster gemaakt tegen laadfouten