diff --git a/game.js b/game.js index 31e1509..c78a778 100644 --- a/game.js +++ b/game.js @@ -67,7 +67,7 @@ class Connect5Game { } this.updateStatus(); - + // Set initial board class this.boardElement.classList.add(`turn-${this.currentPlayer.toLowerCase()}`); } @@ -82,7 +82,7 @@ class Connect5Game { if (!multiplayerClient.myTurn) { return; // Not our turn in multiplayer } - + // Send move to server const moveSent = multiplayerClient.makeMove(row, col); if (!moveSent) return; @@ -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 @@ -252,13 +258,13 @@ class Connect5Game { this.currentPlayer = "X"; this.gameActive = true; 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(); } } @@ -267,11 +273,11 @@ class Connect5Game { window.game = null; 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"); } }); diff --git a/multiplayer.js b/multiplayer.js index 7649c48..2b760f9 100644 --- a/multiplayer.js +++ b/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); } }