Enhance loading screen and game state management; add loading progress indicator and error handling

1 week ago · 31684cbc02
parent 7ed68c79c8
commit 31684cbc02
1 changed files with 92 additions and 5 deletions
--- a/index.html
+++ b/index.html
@ -41,6 +41,37 @@
        .hidden {
            display: none;
        }
+
+        #gameCanvas {
+            border: 1px solid #333;
+            background: #000;
+        }
+
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 5px solid #fff;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
+            margin-bottom: 15px;
+        }
+
+        @keyframes rotation {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        #loading {
+            text-align: center;
+        }
+
+        #loading p {
+            font-size: 18px;
+            color: #aaa;
+        }
    </style>
 </head>
 <body>
@ -49,31 +80,82 @@
            <h1>Welkom bij I love X!</h1>
            <p class="start-message">Druk op SPATIE om te beginnen</p>
        </div>
+        <canvas id="gameCanvas" class="hidden"></canvas>
+        <div id="loading" class="hidden">
+            <div class="loader"></div>
+            <p>Loading... <span id="progress">0%</span></p>
+        </div>
    </div>
    
    <script>
        const { ipcRenderer } = require('electron');
        
-        // Game state
-        let gameState = 'welcome';
+        // Game states
+        const STATES = {
+            WELCOME: 'welcome',
+            LOADING: 'loading',
+            PLAYING: 'playing',
+            PAUSED: 'paused',
+            ERROR: 'error'
+        };
+        
+        let gameState = STATES.WELCOME;
+        let loadingProgress = 0;
+        
+        // Error handling
+        window.onerror = function(msg, url, line) {
+            console.error(`Error: ${msg}\nAt: ${url}:${line}`);
+            gameState = STATES.ERROR;
+            ipcRenderer.send('error:occurred', { msg, url, line });
+        };
        
        // Handle keyboard input
        document.addEventListener('keydown', (event) => {
-            if (event.code === 'Space' && gameState === 'welcome') {
+            if (event.code === 'Space' && gameState === STATES.WELCOME) {
                startGame();
+            } else if (event.code === 'Escape' && gameState === STATES.PLAYING) {
+                pauseGame();
            }
        });
        
        // Start game
        function startGame() {
-            gameState = 'playing';
-            document.getElementById('welcome').classList.add('hidden');
+            showLoading();
+            gameState = STATES.LOADING;
            ipcRenderer.send('game:start');
        }
+
+        function showLoading() {
+            document.getElementById('welcome').classList.add('hidden');
+            document.getElementById('loading').classList.remove('hidden');
+            startLoadingProgress();
+        }
+
+        function startLoadingProgress() {
+            const progressElement = document.getElementById('progress');
+            const updateProgress = () => {
+                if (loadingProgress < 100 && gameState === STATES.LOADING) {
+                    loadingProgress += 1;
+                    progressElement.textContent = `${loadingProgress}%`;
+                    setTimeout(updateProgress, 50);
+                }
+            };
+            updateProgress();
+        }
+
+        function pauseGame() {
+            gameState = STATES.PAUSED;
+            ipcRenderer.send('game:pause');
+        }
        
        // Listen for engine events
        ipcRenderer.on('engine:ready', (event, data) => {
            console.log('Engine ready:', data);
+            if (gameState === STATES.LOADING) {
+                document.getElementById('loading').classList.add('hidden');
+                document.getElementById('gameCanvas').classList.remove('hidden');
+                gameState = STATES.PLAYING;
+            }
        });
        
        ipcRenderer.on('game:started', () => {
@ -83,6 +165,11 @@
        ipcRenderer.on('game:paused', () => {
            console.log('Game paused');
        });
+
+        ipcRenderer.on('error:engine', (event, error) => {
+            console.error('Engine error:', error);
+            gameState = STATES.ERROR;
+        });
    </script>
 </body>
 </html>