mirror of
https://github.com/DeNNiiInc/Connect-5.git
synced 2026-04-18 00:56:00 +00:00
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:
7
game.js
7
game.js
@@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
@@ -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');
|
||||||
|
|||||||
Reference in New Issue
Block a user