diff --git a/CLAUDE.md b/CLAUDE.md index 076db79..fc4b46f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -12,12 +12,18 @@ Browser-based interactief workshop spel waarbij deelnemers fysiek kiezen tussen 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 +- Startscherm met controle over startmoment +- Fullscreen modus voor presentaties zonder browser UI - Timer animatie die synchroon rond het scherm loopt - Geluidssignaal bij einde timer - Overlay met stellingen na timer -- Keyboard shortcuts (spatiebalk voor volgende) +- Stelling counter rechtsonder (toont voortgang) +- Keyboard shortcuts (spatiebalk voor volgende, ESC voor fullscreen uit) - Direct eindscherm bij laatste stelling - Web-based stellingen editor met Flask backend +- Workshop sets systeem (meerdere configuraties) +- Stellingkast met bibliotheek voor snelle import +- Drag & drop om stellingen te herordenen - Real-time CRUD operaties op stellingen - Kleurenpicker voor achtergronden - Volledig offline werkend @@ -51,12 +57,19 @@ Een presentatie tool voor workshops waar deelnemers tussen twee stellingen moete ### Presentatie Modus ```bash +# Start Flask server (nodig voor config.json laden) +source venv/bin/activate +python server.py + # Open in browser -open index.html +open http://localhost:8000/index.html ``` **Controls:** -- Spatiebalk: Volgende stelling +- Groene "Start IJsbreker" knop om te beginnen +- Fullscreen knop rechtsonder voor volledig scherm +- Spatiebalk: Start spel of ga naar volgende stelling +- ESC: Verlaat fullscreen modus - Automatische timer animatie - Geluidssignaal bij einde @@ -227,4 +240,33 @@ Facilitators kunnen nu meerdere workshop configuraties voorbereiden (bijv. versc - Automatische migratie van bestaande config.json getest - Sets kunnen worden aangemaakt, geladen, gewijzigd en opgeslagen - Backwards compatible met oude systeem -- Klaar voor productie gebruik \ No newline at end of file +- Klaar voor productie gebruik + +### 2025-12-17 - Fullscreen Modus +**Nieuwe feature:** +- **Fullscreen knop:** Semi-transparante knop rechtsonder (naast counter) om presentatie in volledig scherm te tonen +- **Toggle functionaliteit:** Klik op knop om fullscreen te activeren/deactiveren +- **Visuele feedback:** Icoon draait 180° wanneer in fullscreen modus +- **ESC toets support:** Browser standaard ESC werkt om fullscreen te verlaten +- **Glasmorphism styling:** Moderne semi-transparante knop met blur effect + +**Gewijzigde bestanden:** +- `index.html` - Fullscreen knop met SVG icoon toegevoegd +- `style.css` - Styling voor fullscreen button met hover states en is-fullscreen class +- `app.js` - toggleFullscreen() functie, event listeners voor knop en fullscreenchange +- `README.md` - Documentatie bijgewerkt met fullscreen instructies +- `CLAUDE.md` - Features lijst en Session History bijgewerkt + +**Waarom:** +Voor workshop presentaties is het belangrijk dat de browser UI (adresbalk, tabs, bookmarks) niet zichtbaar is op de beamer. De fullscreen knop maakt het eenvoudig om de presentatie volledig scherm te tonen zonder browser elementen. + +**Hoe het werkt:** +- Gebruikt Fullscreen API (`document.documentElement.requestFullscreen()`) +- Knop blijft zichtbaar in fullscreen modus voor gemakkelijke toggle +- Event listener voor `fullscreenchange` zorgt voor correcte state sync bij ESC toets +- Icoon rotatie geeft visuele feedback over huidige fullscreen state + +**Status:** +- Feature volledig werkend en getest +- Documentatie bijgewerkt (README.md en CLAUDE.md) +- Klaar voor gebruik bij workshop presentaties \ No newline at end of file diff --git a/README.md b/README.md index 037df6c..a1f8987 100644 --- a/README.md +++ b/README.md @@ -42,11 +42,13 @@ Hier kun je: Open in je browser: `http://localhost:8000` Sluit aan op beamer/groot scherm en: -1. Het spel toont automatisch de eerste stelling -2. Deelnemers lopen naar links of rechts -3. Na de timer: beep + overlay met knop -4. Druk op knop of **spatiebalk** voor volgende stelling -5. Laatste stelling toont direct eindscherm +1. Klik op groene "Start IJsbreker" knop om te beginnen +2. Klik op **fullscreen knop** rechtsonder voor volledig scherm (zonder browser UI) +3. Deelnemers lezen stellingen en lopen naar links of rechts +4. Na de timer: beep + overlay met knop +5. Druk op knop of **spatiebalk** voor volgende stelling +6. Laatste stelling toont direct eindscherm +7. Druk nogmaals op fullscreen knop of **ESC** om fullscreen te verlaten ## Configuratie @@ -83,23 +85,31 @@ Alle instellingen staan in `config.json`: ## Interactie +**Presentatie modus:** - **Klik op knop**: Ga naar volgende stelling -- **Spatiebalk**: Ga naar volgende stelling (sneller tijdens presentatie) +- **Spatiebalk**: Start spel (op startscherm) of ga naar volgende stelling +- **Fullscreen knop**: Toggle volledig scherm (rechtsonder, naast counter) +- **ESC toets**: Verlaat fullscreen modus ## Features **Presentatie:** +- ✅ Startscherm met controle over startmoment +- ✅ Fullscreen modus voor presentaties zonder browser UI - ✅ Visuele timer rondom scherm (loopt synchroon rond) - ✅ Geluidssignaal bij einde timer - ✅ Overlay met stellingen na timer (grayed out) -- ✅ Keyboard shortcut (spatiebalk) +- ✅ Stelling counter rechtsonder (toont bijv. "1/8", "2/8") +- ✅ Keyboard shortcuts (spatiebalk voor volgende, ESC voor fullscreen uit) - ✅ Direct eindscherm bij laatste stelling **Editor:** - ✅ Web-based stellingen beheer +- ✅ Workshop sets systeem (meerdere configuraties opslaan en laden) +- ✅ Stellingkast met bibliotheek voor snelle import +- ✅ Drag & drop om stellingen te herordenen - ✅ Real-time preview van aantal stellingen - ✅ Kleurenpicker voor achtergronden -- ✅ Drag-free toevoegen/verwijderen - ✅ Keyboard shortcut (Ctrl/Cmd+S) - ✅ Validatie van invoer diff --git a/app.js b/app.js index b93759c..4fe9133 100644 --- a/app.js +++ b/app.js @@ -17,6 +17,7 @@ const startButton = document.getElementById('startButton'); const nextButton = document.getElementById('nextButton'); const finishText = document.getElementById('finishText'); const counterDisplay = document.getElementById('counterDisplay'); +const fullscreenButton = document.getElementById('fullscreenButton'); // Laad configuratie bij start async function loadConfig() { @@ -169,6 +170,25 @@ function playBeep() { } } +// Toggle fullscreen modus +function toggleFullscreen() { + if (!document.fullscreenElement) { + // Ga naar fullscreen + document.documentElement.requestFullscreen().then(() => { + fullscreenButton.classList.add('is-fullscreen'); + }).catch((error) => { + console.error('Fout bij activeren fullscreen:', error); + }); + } else { + // Verlaat fullscreen + document.exitFullscreen().then(() => { + fullscreenButton.classList.remove('is-fullscreen'); + }).catch((error) => { + console.error('Fout bij verlaten fullscreen:', error); + }); + } +} + // Event listeners startButton.addEventListener('click', () => { startGame(); @@ -182,6 +202,19 @@ nextButton.addEventListener('click', () => { } }); +fullscreenButton.addEventListener('click', () => { + toggleFullscreen(); +}); + +// Luister naar fullscreen veranderingen (bijv. via ESC toets) +document.addEventListener('fullscreenchange', () => { + if (document.fullscreenElement) { + fullscreenButton.classList.add('is-fullscreen'); + } else { + fullscreenButton.classList.remove('is-fullscreen'); + } +}); + // Spatiebalk voor volgende stelling EN startscherm document.addEventListener('keydown', (e) => { if (e.code === 'Space') { diff --git a/config.json b/config.json index f9c6c9d..61854a0 100644 --- a/config.json +++ b/config.json @@ -1,36 +1,40 @@ { - "buttonText": "Volgende", + "buttonText": "Volgende stelling", "colors": { - "left": "#10b981", - "right": "#f59e0b" + "left": "#3b82f6", + "right": "#ef4444" }, - "finishText": "Bedankt!", - "fontSize": "2.5rem", + "finishText": "Dat was het! Having fun yet?", + "fontSize": "3rem", "stellingen": [ { - "links": "Inbox Zero held", - "rechts": "1000+ ongelezen mails" + "links": "Koffie", + "rechts": "Thee" }, { - "links": "Alles digitaal", - "rechts": "Mijn papieren notitieboek is heilig" + "links": "Structurele planner", + "rechts": "Creatieve chaoot" + }, + { + "links": "❤️ Mappenstructuur", + "rechts": "❤️ Zoekfunctie" }, { "links": "Samenwerken in één document", "rechts": "Concept_versie_3_def_final.docx mailen" }, { - "links": "Camera aan tijdens Teams", - "rechts": "Lekker onzichtbaar luisteren" + "links": "Ik gebruik tags en labels", + "rechts": "Ik stop alles in mapjes" }, { - "links": "Agenda blokken voor focus", - "rechts": "Mijn deur staat altijd open (digitaal)" + "links": "Kennis zit in mijn hoofd", + "rechts": "Kennis staat in het systeem" }, { - "links": "Ik weet wat de AVG van me vraagt", - "rechts": "Privacy is voor de juristen" + "links": "Ik kom vandaag vooral halen", + "rechts": "Ik kom vandaag ook brengen" } ], - "timer": 3 + "timer": 2 } \ No newline at end of file diff --git a/index.html b/index.html index 77f50a3..2270db0 100644 --- a/index.html +++ b/index.html @@ -18,6 +18,13 @@
+ + +