loadingscreen improvements

index.html

@@ -179,14 +179,38 @@
         // Start game
         function startGame() {
             gameState = STATES.LOADING;
+            loadingProgress = 0;
             document.getElementById('welcome').classList.add('hidden');
             document.getElementById('loading').classList.remove('hidden');
-            // Start met een korte vertraging om de engine tijd te geven
+            startLoadingProgress();
+        }
+
+        function startLoadingProgress() {
+            const progressElement = document.getElementById('progress');
+            const updateProgress = () => {
+                if (loadingProgress < 100 && gameState === STATES.LOADING) {
+                    // Verhoog met een random getal tussen 1 en 5
+                    loadingProgress += Math.floor(Math.random() * 5) + 1;
+                    if (loadingProgress > 100) loadingProgress = 100;
+                    
+                    // Update de tekst
+                    progressElement.textContent = `${loadingProgress}%`;
+                    
+                    if (loadingProgress >= 100) {
+                        // Als we klaar zijn, wacht even en ga naar het game scherm
                         setTimeout(() => {
                             document.getElementById('loading').classList.add('hidden');
                             document.getElementById('gameCanvas').classList.remove('hidden');
                             gameState = STATES.PLAYING;
-            }, 1000); // 1 seconde loading screen
+                        }, 500);
+                    } else {
+                        // Random vertraging tussen updates (tussen 50 en 200ms)
+                        const delay = Math.floor(Math.random() * 150) + 50;
+                        setTimeout(updateProgress, delay);
+                    }
+                }
+            };
+            updateProgress();
         }
 
         function pauseGame() {