Hotfix/No way to pause on mobile (#19)

- Added pause button functionality to control game state (pause/resume).
- Updated sound status button visibility and styling for improved user experience.
- Adjusted button styles for better responsiveness and aesthetics on mobile devices.
- Implemented logic to show/hide buttons based on game state transitions.

This update improves gameplay interaction and visual feedback for users.

Reviewed-on: #19
Co-authored-by: Juan Sebastian Montoya <juansmm@outlook.com>
Co-committed-by: Juan Sebastian Montoya <juansmm@outlook.com>

index.html

@@ -118,18 +118,57 @@
             font-family: 'Courier New', monospace;
         }
         #soundStatus {
+            display: none;
             position: absolute;
             top: 20px;
-            right: 100px;
+            right: 90px;
-            font-size: 20px;
+            background: rgba(0,0,0,0.7);
+            border: 2px solid white;
+            color: white;
+            font-size: 24px;
+            padding: 10px 15px;
+            border-radius: 10px;
             cursor: pointer;
             z-index: 100;
+            font-family: Arial, sans-serif;
+            transition: all 0.2s;
             user-select: none;
-            opacity: 0.8;
-            transition: opacity 0.2s;
         }
         #soundStatus:hover {
-            opacity: 1;
+            background: rgba(0,0,0,0.9);
+            transform: scale(1.1);
+        }
+        #soundStatus:active {
+            transform: scale(0.95);
+        }
+        #pauseBtn {
+            display: none;
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: rgba(0,0,0,0.7);
+            border: 2px solid white;
+            color: white;
+            font-size: 24px;
+            padding: 10px 15px;
+            border-radius: 10px;
+            cursor: pointer;
+            z-index: 100;
+            font-family: Arial, sans-serif;
+            transition: all 0.2s;
+        }
+        #pauseBtn:hover {
+            background: rgba(0,0,0,0.9);
+            transform: scale(1.1);
+        }
+        #pauseBtn:active {
+            transform: scale(0.95);
+        }
+        /* Show buttons when game is active */
+        @media (max-width: 768px) {
+            #pauseBtn {
+                display: block;
+            }
         }
         #perfMonitor {
             position: absolute;
@@ -162,8 +201,15 @@
             }
             #soundStatus {
                 top: 10px;
-                right: 60px;
+                right: 80px;
-                font-size: 18px;
+                font-size: 20px;
+                padding: 8px 12px;
+            }
+            #pauseBtn {
+                top: 10px;
+                right: 10px;
+                font-size: 20px;
+                padding: 8px 12px;
             }
             #perfMonitor {
                 top: 40px;
@@ -186,6 +232,8 @@
     
     <div id="soundStatus" title="Sound ON (Press M to mute)">🔊</div>
     
+    <button id="pauseBtn" title="Pause Game">⏸️</button>
+    
     <div id="perfMonitor">
         <div><span class="label">FPS:</span> <span id="fps">60</span></div>
         <div><span class="label">Frame:</span> <span id="frameTime">16.7</span>ms</div>

src/game/Game.js

@@ -411,6 +411,16 @@ export class Game {
       document.getElementById('instructions').style.display = 'block';
     }
     
+    // Show pause and sound buttons when game starts
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.style.display = 'block';
+    }
+    const soundStatus = document.getElementById('soundStatus');
+    if (soundStatus) {
+      soundStatus.style.display = 'block';
+    }
+    
     // Reset UI
     this.updateUI();
     document.getElementById('combo').style.display = 'none';
@@ -436,6 +446,13 @@ export class Game {
       this.soundSystem.stopBackgroundMusic();
     }
     
+    // Update pause button text
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.textContent = '▶️';
+      pauseBtn.title = 'Resume Game';
+    }
+    
     if (this.uiSystem) {
       this.uiSystem.setState('paused');
     } else {
@@ -458,6 +475,13 @@ export class Game {
       });
     }
     
+    // Update pause button text
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.textContent = '⏸️';
+      pauseBtn.title = 'Pause Game';
+    }
+    
     if (this.uiSystem) {
       this.uiSystem.setState('playing');
     } else {
@@ -476,6 +500,16 @@ export class Game {
     this.isPaused = false;
     this.timeScale = 0; // Stop time in menu
     
+    // Hide pause and sound buttons when returning to menu
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.style.display = 'none';
+    }
+    const soundStatus = document.getElementById('soundStatus');
+    if (soundStatus) {
+      soundStatus.style.display = 'none';
+    }
+    
     // Update UI state
     if (this.uiSystem) {
       this.uiSystem.setState('menu');
@@ -516,6 +550,20 @@ export class Game {
       pauseMenuBtn.addEventListener('click', () => this.returnToMenu());
     }
     
+    // Pause button (for mobile)
+    const pauseBtn = document.getElementById('pauseBtn');
+    if (pauseBtn) {
+      pauseBtn.addEventListener('click', () => {
+        if (this.gameActive && !this.inMenu) {
+          if (this.isPaused) {
+            this.resumeGame();
+          } else {
+            this.pauseGame();
+          }
+        }
+      });
+    }
+    
     document.getElementById('restartBtn').addEventListener('click', () => this.restart());
 
     // Toggle performance monitor with 'T' key