feat: overlay optimalisaties en stelling counter toegevoegd

- Knop "Volgende stelling" verplaatst naar bovenkant (15vh) voor betere leesbaarheid
- Overlay transparantie verhoogd (opacity 0.4) zodat stellingen beter zichtbaar blijven
- Laatste stelling flow gefixed: toont nu overlay voor eindscherm
- Stelling counter rechtsonder toegevoegd (bijv. 1/8, 2/8, etc.)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.js

@@ -16,6 +16,7 @@ const rightText = document.getElementById('rightText');
 const startButton = document.getElementById('startButton');
 const nextButton = document.getElementById('nextButton');
 const finishText = document.getElementById('finishText');
+const counterDisplay = document.getElementById('counterDisplay');
 
 // Laad configuratie bij start
 async function loadConfig() {
@@ -58,6 +59,7 @@ function showStartScreen() {
     statementScreen.classList.add('hidden');
     overlay.classList.add('hidden');
     finishScreen.classList.add('hidden');
+    counterDisplay.classList.add('hidden');
 }
 
 // Start het spel
@@ -82,6 +84,10 @@ function showStatement(index) {
     leftText.textContent = stelling.links;
     rightText.textContent = stelling.rechts;
 
+    // Update counter (1-based index)
+    counterDisplay.textContent = `${index + 1}/${config.stellingen.length}`;
+    counterDisplay.classList.remove('hidden');
+
     // Toon stellingen scherm, verberg overlay en finish
     statementScreen.classList.remove('hidden');
     overlay.classList.add('hidden');
@@ -103,12 +109,7 @@ function startTimer() {
     // Wacht tot timer klaar is
     setTimeout(() => {
         playBeep();
-        // Bij laatste stelling: toon direct finish scherm
-        if (currentIndex === config.stellingen.length - 1) {
-            showFinish();
-        } else {
-            showOverlay();
-        }
+        showOverlay();
     }, config.timer * 1000);
 }
 
@@ -123,6 +124,7 @@ function showFinish() {
     statementScreen.classList.add('hidden');
     overlay.classList.add('hidden');
     finishScreen.classList.remove('hidden');
+    counterDisplay.classList.add('hidden');
     timerBorder.classList.remove('timer-active');
 }
 
@@ -173,7 +175,11 @@ startButton.addEventListener('click', () => {
 });
 
 nextButton.addEventListener('click', () => {
-    showStatement(currentIndex + 1);
+    if (currentIndex === config.stellingen.length - 1) {
+        showFinish();
+    } else {
+        showStatement(currentIndex + 1);
+    }
 });
 
 // Spatiebalk voor volgende stelling EN startscherm
@@ -186,7 +192,11 @@ document.addEventListener('keydown', (e) => {
         }
         // Volgende stelling als overlay zichtbaar is
         else if (!overlay.classList.contains('hidden')) {
-            showStatement(currentIndex + 1);
+            if (currentIndex === config.stellingen.length - 1) {
+                showFinish();
+            } else {
+                showStatement(currentIndex + 1);
+            }
         }
     }
 });

config.json

@@ -16,23 +16,23 @@
       "rechts": "Patat"
     },
     {
-      "links": "❤️ Sneltoetsen",
-      "rechts": "❤️ Muisgebruik"
+      "links": "Ik gebruik meer sneltoetsen",
+      "rechts": "Ik ben van team muisgebruik"
     },
     {
-      "links": "Ik vind eenvoudig de juiste informatie terug",
+      "links": "Ik vind eenvoudig mijn eigen informatie terug",
       "rechts": "Ik ben constant alles kwijt"
     },
     {
-      "links": "Naamgeving van bestanden is een breinbreker",
-      "rechts": "Naamgeving is volslagen logisch"
+      "links": "We hebben duidelijke afspraken over naamgeving van bestanden",
+      "rechts": "Mijn naamgeving van bestanden is veel logischer"
     },
     {
       "links": "Ik maak eigen notities op één plek",
-      "rechts": "Overal post-its en losse bestanden"
+      "rechts": "Ik maak overal notities en zoek me suf"
     },
     {
-      "links": "❤️ ❤️ ❤️  Meetingverslagen template ",
+      "links": "❤️ ❤️ ❤️  Notitie en memo templates ",
       "rechts": "☠️☠️☠️ Wie bedenkt die templates?"
     },
     {
@@ -40,5 +40,5 @@
       "rechts": "Wat gaan we doen?"
     }
   ],
-  "timer": 10
+  "timer": 2
 }

index.html

@@ -15,6 +15,9 @@
         <div class="timer-bar timer-left"></div>
     </div>
 
+    <!-- Stelling counter rechtsonder -->
+    <div id="counterDisplay" class="counter-display hidden"></div>
+
     <!-- Hoofdcontainer -->
     <div id="app" class="container">
         <!-- Start scherm -->

style.css

@@ -127,9 +127,10 @@ body {
     width: 100vw;
     height: 100vh;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
-    background: rgba(0, 0, 0, 0.7);
+    padding-top: 15vh;
+    background: rgba(0, 0, 0, 0.4);
     z-index: 500;
 }
 
@@ -206,6 +207,18 @@ body {
     padding: 2rem;
 }
 
+/* Stelling counter rechtsonder */
+.counter-display {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    color: white;
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+    z-index: 1500;
+}
+
 /* Helper classes */
 .hidden {
     display: none !important;