Merge turn indicator with player indicator at top

- Added ID to turn label for easier updates
- Updated multiplayer.js to use turnLabel ID
- Reset turn label when switching modes or resetting game
- Improved UX by keeping player/turn info together
This commit is contained in:
2025-12-21 17:52:12 +11:00
parent 5a3315ed9d
commit 481de45276
3 changed files with 16 additions and 2 deletions

View File

@@ -243,6 +243,13 @@ class Connect5Game {
this.currentPlayer = "X"; this.currentPlayer = "X";
this.gameActive = true; this.gameActive = true;
this.hideVictoryOverlay(); this.hideVictoryOverlay();
// Reset turn label to default
const turnLabel = document.getElementById('turnLabel');
if (turnLabel) {
turnLabel.textContent = 'Current Turn:';
}
this.initializeBoard(); this.initializeBoard();
} }
} }

View File

@@ -67,7 +67,7 @@
<div class="game-info"> <div class="game-info">
<div class="turn-indicator"> <div class="turn-indicator">
<span class="label">Current Turn:</span> <span class="label" id="turnLabel">Current Turn:</span>
<div class="player-display"> <div class="player-display">
<span class="player-marker" id="currentPlayer">X</span> <span class="player-marker" id="currentPlayer">X</span>
</div> </div>
@@ -281,6 +281,12 @@
if (window.multiplayerClient) { if (window.multiplayerClient) {
window.multiplayerClient.isMultiplayer = false; window.multiplayerClient.isMultiplayer = false;
} }
// Reset turn label to default
const turnLabel = document.getElementById('turnLabel');
if (turnLabel) {
turnLabel.textContent = 'Current Turn:';
}
} else { } else {
localBtn.classList.remove('active'); localBtn.classList.remove('active');
multiplayerBtn.classList.add('active'); multiplayerBtn.classList.add('active');

View File

@@ -372,8 +372,9 @@ class MultiplayerClient {
// Update current player display to show "YOU ARE X/O" // Update current player display to show "YOU ARE X/O"
const currentPlayerDisplay = document.getElementById('currentPlayer'); const currentPlayerDisplay = document.getElementById('currentPlayer');
const turnLabel = document.getElementById('turnLabel');
currentPlayerDisplay.textContent = this.mySymbol; currentPlayerDisplay.textContent = this.mySymbol;
currentPlayerDisplay.parentElement.previousElementSibling.textContent = `You are:`; turnLabel.textContent = `You are:`;
// Update player display colors based on symbol // Update player display colors based on symbol
const playerDisplay = document.querySelector('.player-display'); const playerDisplay = document.querySelector('.player-display');