Frank Meeuwsen
7b181a5f12
Browser-based interactief spel voor workshops waarbij deelnemers fysiek kiezen tussen twee stellingen die op een beamer worden getoond. Features: - Presentatie modus met visuele timer rondom scherm - Timer animatie loopt synchroon rond in opgegeven tijd - Geluidssignaal bij einde timer - Overlay met stellingen na timer (grayed out) - Keyboard shortcuts (spatiebalk voor volgende) - Direct eindscherm bij laatste stelling - Web-based stellingen editor - Flask backend voor config management - Real-time CRUD operaties op stellingen - Kleurenpicker voor achtergronden - Validatie en filtering van lege stellingen - Volledig offline werkend Tech stack: - Frontend: Pure HTML/CSS/JavaScript - Backend: Python Flask + flask-cors - Config driven via JSON 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
79 lines
2.5 KiB
Markdown
79 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
|