feat: startscherm met controle over timer toegevoegd

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>
2025-11-07 10:01:22 +01:00 · 2025-11-07 10:01:22 +01:00 · da06d6bf00
commit da06d6bf00
parent bc81866dbf
7 changed files with 136 additions and 17 deletions
--- 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
--- 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
--- 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);
        }
    }
--- 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
 }
--- 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
--- a/index.html
+++ b/index.html
@ -17,8 +17,13 @@

    <!-- Hoofdcontainer -->
    <div id="app" class="container">
+        <!-- Start scherm -->
+        <div id="startScreen" class="start-screen">
+            <button id="startButton" class="start-button">Start IJsbreker</button>
+        </div>
+
        <!-- Stellingen scherm -->
-        <div id="statementScreen" class="statement-screen">
+        <div id="statementScreen" class="statement-screen hidden">
            <div id="leftStatement" class="statement left-statement">
                <p id="leftText"></p>
            </div>
--- a/style.css
+++ b/style.css
@ -156,6 +156,39 @@ body {
    transform: translateY(0);
 }

+/* Start scherm */
+.start-screen {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: #1a1a1a;
+}
+
+.start-button {
+    padding: 2rem 4rem;
+    font-size: 2rem;
+    font-weight: bold;
+    color: white;
+    background: #10b981;
+    border: none;
+    border-radius: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
+}
+
+.start-button:hover {
+    background: #059669;
+    transform: translateY(-3px);
+    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.6);
+}
+
+.start-button:active {
+    transform: translateY(0);
+}
+
 /* Eind scherm */
 .finish-screen {
    display: flex;