Feat: Add 5-second delay and winning move highlight for game over

game.js

@@ -103,7 +103,11 @@ class Connect5Game {
         this.gameActive = false;
         this.scores[this.currentPlayer]++;
         this.updateScores();
-        this.showVictoryOverlay();
+
+        // Delay showing visual overlay for 5 seconds to show winning lights
+        setTimeout(() => {
+          this.showVictoryOverlay();
+        }, 5000);
         return;
       }
 
@@ -218,8 +222,10 @@ class Connect5Game {
 
     // Update board class for ghost piece
     if (this.boardElement) {
-        this.boardElement.classList.remove('turn-x', 'turn-o');
-        this.boardElement.classList.add(`turn-${this.currentPlayer.toLowerCase()}`);
+      this.boardElement.classList.remove("turn-x", "turn-o");
+      this.boardElement.classList.add(
+        `turn-${this.currentPlayer.toLowerCase()}`
+      );
     }
 
     // Update the player display style
@@ -254,9 +260,9 @@ class Connect5Game {
     this.hideVictoryOverlay();
 
     // Reset turn label to default
-    const turnLabel = document.getElementById('turnLabel');
+    const turnLabel = document.getElementById("turnLabel");
     if (turnLabel) {
-      turnLabel.textContent = 'Current Turn:';
+      turnLabel.textContent = "Current Turn:";
     }
 
     this.initializeBoard();
@@ -269,9 +275,9 @@ document.addEventListener("DOMContentLoaded", () => {
   window.game = new Connect5Game();
 
   // Enable multiplayer button now that game is ready
-  const multiplayerBtn = document.getElementById('multiplayerModeBtn');
+  const multiplayerBtn = document.getElementById("multiplayerModeBtn");
   if (multiplayerBtn) {
     multiplayerBtn.disabled = false;
-    console.log('✅ Game initialized, multiplayer button enabled');
+    console.log("✅ Game initialized, multiplayer button enabled");
   }
 });

multiplayer.js

@@ -482,6 +482,7 @@ class MultiplayerClient {
             col: col
         });
         
+        this.lastMyMove = { row, col };
         return true;
     }
     
@@ -504,6 +505,7 @@ class MultiplayerClient {
     
     // Handle opponent move
     handleOpponentMove(data) {
+        this.lastOpponentMove = { row: data.row, col: data.col };
         // Place opponent's piece on board
         this.game.currentPlayer = data.symbol;
         
@@ -568,7 +570,25 @@ class MultiplayerClient {
         const subtitle = document.getElementById('gameOverMessage');
         
         if (modal && icon && title && subtitle) {
-            // Set icon and title based on result
+            
+            // Highlight winning move if applicable
+            if (this.game && (data.reason === 'win' || data.reason === 'loss')) {
+                try {
+                   const move = data.reason === 'win' ? this.lastMyMove : this.lastOpponentMove;
+                   if (move) {
+                       // We temporarily set gameActive to true to allow checkWin to run purely for highlighting
+                       // (checkWin doesn't check gameActive, but just in case)
+                       // Actually checkWin calculates and calls highlightWinningCells
+                       this.game.checkWin(move.row, move.col);
+                   }
+                } catch (e) {
+                    console.error("Error highlighting winning move:", e);
+                }
+            }
+
+            // Delay showing the modal for 5 seconds
+            setTimeout(() => {
+                // Set icon and title based on result
             if (data.reason === 'win' || data.reason === 'opponent_abandoned') {
                 icon.textContent = '🏆';
                 title.textContent = 'Victory!';
@@ -592,6 +612,7 @@ class MultiplayerClient {
             
             // Show modal
             modal.classList.add('active');
+            }, 5000);
         }
     }