80 lines
2.5 KiB
Markdown
80 lines
2.5 KiB
Markdown
|
# 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
|