Frank Meeuwsen 7b181a5f12 feat: Sessie IJsbreker - interactief workshop spel

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>

2025-11-03 16:23:11 +01:00

2.5 KiB

Raw Blame History

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:

config.json - Single source of truth voor alle instellingen
- Timer duur, font grootte, kleuren, stellingen, button tekst
- Geladen via fetch API bij app start
index.html - Drie scherm states
- Statement screen (50/50 split met twee stellingen)
- Blank screen (met volgende knop)
- Finish screen (eindscherm)
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
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

2.5 KiB Raw Blame History