Frank Meeuwsen
da06d6bf00
Startscherm met groene "Start IJsbreker" knop geïmplementeerd. Timer begint nu pas na klik op startknop in plaats van automatisch bij laden. Facilitator heeft volledige controle over startmoment van de presentatie. Wijzigingen: - index.html: Startscherm HTML toegevoegd - style.css: Styling voor start-screen en start-button - app.js: Flow aangepast met showStartScreen() en startGame() - Spatiebalk werkt op startscherm voor snelle start - Documentatie geüpdatet in CLAUDE.md, gemini.md en agents.md 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
135 lines
4.5 KiB
Markdown
135 lines
4.5 KiB
Markdown
# gemini.md
|
|
> Deze file wordt automatisch gesynchroniseerd met CLAUDE.md
|
|
> Laatste sync: 2025-11-07 20:45
|
|
|
|
# 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
|