From da06d6bf00214c103f5baf1ca981a6ebd61a15be Mon Sep 17 00:00:00 2001 From: Frank Meeuwsen Date: Fri, 7 Nov 2025 10:01:22 +0100 Subject: [PATCH] feat: startscherm met controle over timer toegevoegd MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- CLAUDE.md | 20 ++++++++++++++++++++ agents.md | 22 +++++++++++++++++++++- app.js | 31 ++++++++++++++++++++++++++++--- config.json | 18 +++++++----------- gemini.md | 22 +++++++++++++++++++++- index.html | 7 ++++++- style.css | 33 +++++++++++++++++++++++++++++++++ 7 files changed, 136 insertions(+), 17 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index b6f0db8..3230666 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -109,3 +109,23 @@ open http://localhost:5000/editor.html - 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 diff --git a/agents.md b/agents.md index e09d06e..6e7fd6b 100644 --- a/agents.md +++ b/agents.md @@ -1,6 +1,6 @@ # agents.md > Deze file wordt automatisch gesynchroniseerd met CLAUDE.md -> Laatste sync: 2025-11-03 16:35 +> Laatste sync: 2025-11-07 20:45 # IJsbreker Workshop Spel @@ -113,3 +113,23 @@ open http://localhost:5000/editor.html - 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 diff --git a/app.js b/app.js index c5d2073..41c68b2 100644 --- a/app.js +++ b/app.js @@ -5,6 +5,7 @@ let audioContext = null; // DOM elementen const timerBorder = document.querySelector('.timer-border'); +const startScreen = document.getElementById('startScreen'); const statementScreen = document.getElementById('statementScreen'); const overlay = document.getElementById('overlay'); const finishScreen = document.getElementById('finishScreen'); @@ -12,6 +13,7 @@ const leftStatement = document.getElementById('leftStatement'); const rightStatement = document.getElementById('rightStatement'); const leftText = document.getElementById('leftText'); const rightText = document.getElementById('rightText'); +const startButton = document.getElementById('startButton'); const nextButton = document.getElementById('nextButton'); const finishText = document.getElementById('finishText'); @@ -46,7 +48,21 @@ function initializeApp() { nextButton.textContent = config.buttonText; finishText.textContent = config.finishText; - // Start met eerste stelling + // Toon startscherm (niet direct beginnen) + showStartScreen(); +} + +// Toon startscherm +function showStartScreen() { + startScreen.classList.remove('hidden'); + statementScreen.classList.add('hidden'); + overlay.classList.add('hidden'); + finishScreen.classList.add('hidden'); +} + +// Start het spel +function startGame() { + startScreen.classList.add('hidden'); showStatement(0); } @@ -152,15 +168,24 @@ function playBeep() { } // Event listeners +startButton.addEventListener('click', () => { + startGame(); +}); + nextButton.addEventListener('click', () => { showStatement(currentIndex + 1); }); -// Spatiebalk voor volgende stelling +// Spatiebalk voor volgende stelling EN startscherm document.addEventListener('keydown', (e) => { if (e.code === 'Space') { e.preventDefault(); - if (!overlay.classList.contains('hidden')) { + // Start spel als we op startscherm zijn + if (!startScreen.classList.contains('hidden')) { + startGame(); + } + // Volgende stelling als overlay zichtbaar is + else if (!overlay.classList.contains('hidden')) { showStatement(currentIndex + 1); } } diff --git a/config.json b/config.json index 027005c..114afe5 100644 --- a/config.json +++ b/config.json @@ -16,16 +16,8 @@ "rechts": "Patat" }, { - "links": "Liever email", - "rechts": "Liever telefoon" - }, - { - "links": "Sneltoetsen", - "rechts": "Muisgebruik" - }, - { - "links": "Overzichtelijke mappen", - "rechts": "Zoeken werkt sneller" + "links": "❤️ Sneltoetsen", + "rechts": "❤️ Muisgebruik" }, { "links": "Ik vind eenvoudig de juiste informatie terug", @@ -42,7 +34,11 @@ { "links": "❤️ ❤️ ❤️ Meetingverslagen template ", "rechts": "☠️☠️☠️ Wie bedenkt die templates?" + }, + { + "links": "Zin in de dag!", + "rechts": "Wat gaan we doen?" } ], - "timer": 2 + "timer": 10 } \ No newline at end of file diff --git a/gemini.md b/gemini.md index 9313478..05bb467 100644 --- a/gemini.md +++ b/gemini.md @@ -1,6 +1,6 @@ # gemini.md > Deze file wordt automatisch gesynchroniseerd met CLAUDE.md -> Laatste sync: 2025-11-03 16:35 +> Laatste sync: 2025-11-07 20:45 # IJsbreker Workshop Spel @@ -113,3 +113,23 @@ open http://localhost:5000/editor.html - 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 diff --git a/index.html b/index.html index e54296a..5c879eb 100644 --- a/index.html +++ b/index.html @@ -17,8 +17,13 @@
+ +
+ +
+ -
+