Add pause menu functionality and enhance loading screen; implement pause, resume, restart, and quit game options

1 week ago · ace8650fa8
parent 31684cbc02
commit ace8650fa8
1 changed files with 94 additions and 24 deletions
--- a/index.html
+++ b/index.html
@ -13,6 +13,7 @@
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
+            overflow: hidden;
        }
        
        #game {
@ -45,12 +46,17 @@
        #gameCanvas {
            border: 1px solid #333;
            background: #000;
+            width: 100vw;
+            height: 100vh;
+            position: fixed;
+            top: 0;
+            left: 0;
        }

        .loader {
            width: 48px;
            height: 48px;
-            border: 5px solid #fff;
+            border: 5px solid #ffffff;
            border-bottom-color: transparent;
            border-radius: 50%;
            display: inline-block;
@ -72,6 +78,50 @@
            font-size: 18px;
            color: #aaa;
        }
+
+        #pauseMenu {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.9);
+            padding: 30px;
+            border-radius: 10px;
+            border: 1px solid #333;
+            text-align: center;
+            z-index: 1000;
+        }
+
+        #pauseMenu h2 {
+            font-size: 32px;
+            margin-bottom: 20px;
+            color: #fff;
+        }
+
+        .menu-buttons {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .menu-buttons button {
+            background: #333;
+            color: #fff;
+            border: none;
+            padding: 15px 30px;
+            font-size: 18px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .menu-buttons button:hover {
+            background: #444;
+        }
+
+        .menu-buttons button:active {
+            background: #555;
+        }
    </style>
 </head>
 <body>
@ -85,6 +135,14 @@
            <div class="loader"></div>
            <p>Loading... <span id="progress">0%</span></p>
        </div>
+        <div id="pauseMenu" class="hidden">
+            <h2>Pauze</h2>
+            <div class="menu-buttons">
+                <button onclick="resumeGame()">Doorgaan</button>
+                <button onclick="restartGame()">Opnieuw</button>
+                <button onclick="quitGame()">Afsluiten</button>
+            </div>
+        </div>
    </div>
    
    <script>
@ -120,42 +178,54 @@
        
        // Start game
        function startGame() {
-            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();
+            // Start met een korte vertraging om de engine tijd te geven
+            setTimeout(() => {
+                document.getElementById('loading').classList.add('hidden');
+                document.getElementById('gameCanvas').classList.remove('hidden');
+                gameState = STATES.PLAYING;
+            }, 1000); // 1 seconde loading screen
        }

        function pauseGame() {
            gameState = STATES.PAUSED;
+            document.getElementById('pauseMenu').classList.remove('hidden');
            ipcRenderer.send('game:pause');
        }

+        function resumeGame() {
+            gameState = STATES.PLAYING;
+            document.getElementById('pauseMenu').classList.add('hidden');
+            ipcRenderer.send('game:resume');
+        }
+
+        function restartGame() {
+            gameState = STATES.PLAYING;
+            document.getElementById('pauseMenu').classList.add('hidden');
+            ipcRenderer.send('game:restart');
+        }
+
+        function quitGame() {
+            // Reset game state
+            gameState = STATES.WELCOME;
+            loadingProgress = 0;
+            
+            // Verberg game canvas en pauze menu
+            document.getElementById('gameCanvas').classList.add('hidden');
+            document.getElementById('pauseMenu').classList.add('hidden');
+            
+            // Toon welkomstscherm
+            document.getElementById('welcome').classList.remove('hidden');
+            
+            // Stuur event naar main process
+            ipcRenderer.send('game:return-to-welcome');
+        }
+        
        // 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', () => {