# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Doel

Browser-based interactief workshop spel waarbij deelnemers fysiek kiezen tussen twee stellingen die op een beamer worden getoond. Volledig offline werkend, configureerbaar via JSON.

## Architectuur

**Simpel & Offline First:**
- Pure HTML/CSS/JavaScript (geen frameworks, geen build proces)
- Werkt door `index.html` direct te openen in browser
- Alle configuratie via `config.json` (inclusief kleuren, timing, stellingen)

**Kern Componenten:**

1. **config.json** - Single source of truth voor alle instellingen
   - Timer duur, font grootte, kleuren, stellingen, button tekst
   - Geladen via fetch API bij app start

2. **index.html** - Drie scherm states
   - Statement screen (50/50 split met twee stellingen)
   - Blank screen (met volgende knop)
   - Finish screen (eindscherm)

3. **style.css** - Timer animatie via CSS
   - 4 balkjes (top/right/bottom/left) animeren synchroon
   - CSS custom properties voor dynamische timer duur
   - Flexbox voor 50/50 split

4. **app.js** - State management en interactie
   - Config laden en toepassen op DOM
   - Screen state switching
   - Web Audio API voor beep geluid
   - Keyboard + click event handlers

## Flow

```
Start → Laad config → Toon stelling (timer start) →
Beep + blanco scherm → Knop/spatiebalk →
Volgende stelling → ... → Eindscherm
```

## Configuratie Aanpak

**Alles in config.json - niets hardcoded:**
- Kleuren: Hex codes voor links/rechts achtergrond
- Teksten: Button labels en finish tekst
- Timing: Timer duur in seconden
- Styling: Font grootte als CSS waarde
- Content: Array van stellingen (links/rechts paren)

CSS custom properties worden runtime gezet vanuit config via JavaScript.

## Interactie Pattern

Dual input voor "volgende":
- Click op button (beamer presentatie met muis)
- Spatiebalk (sneller tijdens presentatie)

Timer afloop triggert Web Audio API beep (800Hz sine wave, 300ms met fade out).

## Wijzigingen Maken

- Nieuwe features: Overweeg of het via config.json kan (behoud simpliciteit)
- Styling aanpassingen: Pas config opties aan waar mogelijk, geen hardcoded values
- Geluid wijzigen: Pas Web Audio parameters in `playBeep()` functie
- Extra scherm states: Volg bestaand pattern (hidden class toggles)

## Testing

Open `index.html` lokaal in browser. Test:
- Config wijzigingen worden direct toegepast
- Timer loopt correct af
- Beep speelt bij timer einde
- Spatiebalk werkt op blank screen
- Laatste stelling toont finish screen