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.gameActive = true;
this.hideVictoryOverlay();
// Reset turn label to default
const turnLabel = document.getElementById('turnLabel');
if (turnLabel) {
turnLabel.textContent = 'Current Turn:';
}
this.initializeBoard();
}
}

View File

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

View File

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