dennii/Connect-5
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Connect-5.git synced 2026-04-17 22:46:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge status and turn indicator into single UI bar

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-21 20:08:33 +11:00
parent 3f9ca7e2f4
commit 91535dc8fc
3 changed files with 55 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@@ -66,16 +66,18 @@
</div> </div>
<div class="game-info"> <div class="game-info">
<div class="status-container">
<div class="turn-indicator"> <div class="turn-indicator">
<span class="label" id="turnLabel">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>
</div> </div>
<div class="status-divider"></div>
<div class="status-message" id="statusMessage"> <div class="status-text" id="statusMessage">
Player X starts the game Player X starts the game
</div> </div>
</div>
<div class="score-display"> <div class="score-display">
<div class="score-item"> <div class="score-item">

19
multiplayer.js
View File

@@ -357,7 +357,7 @@ class MultiplayerClient {
document.getElementById('multiplayerPanel').style.display = 'none'; document.getElementById('multiplayerPanel').style.display = 'none';
document.getElementById('gameControls').style.display = 'grid'; document.getElementById('gameControls').style.display = 'grid';
document.querySelector('.board-wrapper').style.display = 'flex'; document.querySelector('.board-wrapper').style.display = 'flex';
document.getElementById('statusMessage').style.display = 'block'; // status container is part of gameControls now
// Set board size // Set board size
document.querySelectorAll('.size-btn').forEach(btn => { document.querySelectorAll('.size-btn').forEach(btn => {
@@ -387,13 +387,15 @@ class MultiplayerClient {
} }
// Update status // Update status
const status = document.getElementById('statusMessage'); const statusText = document.getElementById('statusMessage'); // This is the status-text element
const statusContainer = statusText.parentElement; // This is the status-container element
if (this.myTurn) { if (this.myTurn) {
status.textContent = `🎮 VS ${this.opponent} | YOUR TURN - You're playing as ${this.mySymbol}`; statusText.textContent = `🎮 VS ${this.opponent} | YOUR TURN - You're playing as ${this.mySymbol}`;
status.className = 'status-message success'; statusContainer.className = 'status-container success';
} else { } else {
status.textContent = `🎮 VS ${this.opponent} | Waiting for ${this.opponent} to move - You're playing as ${this.mySymbol}`; statusText.textContent = `🎮 VS ${this.opponent} | Waiting for ${this.opponent} to move - You're playing as ${this.mySymbol}`;
status.className = 'status-message info'; statusContainer.className = 'status-container info';
} }
console.log(`✅ Game started! You are ${this.mySymbol}, ${this.myTurn ? 'your turn' : 'waiting'}`); console.log(`✅ Game started! You are ${this.mySymbol}, ${this.myTurn ? 'your turn' : 'waiting'}`);
@@ -504,7 +506,10 @@ class MultiplayerClient {
const messageEl = document.getElementById('statusMessage'); const messageEl = document.getElementById('statusMessage');
if (messageEl) { if (messageEl) {
messageEl.textContent = text; messageEl.textContent = text;
messageEl.className = `status-message ${type}`; // Apply class to the container, not the text element
if (messageEl.parentElement.classList.contains('status-container')) {
messageEl.parentElement.className = `status-container ${type}`;
}
} }
} }
} }

44
styles.css
View File

@@ -433,28 +433,50 @@ body {
} }
/* Status Message */ /* Status Message */
.status-message { /* Merged Status Container */
text-align: center; .status-container {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 1rem; padding: 1rem;
background: var(--bg-tertiary); background: var(--bg-tertiary);
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
color: var(--text-secondary);
font-weight: 600;
font-size: 1rem;
width: 100%; width: 100%;
} }
.status-message.success { .status-divider {
border-color: var(--success); width: 1px;
color: var(--success); height: 24px;
background: rgba(16, 185, 129, 0.1); background: var(--border-light);
} }
.status-message.info { .status-text {
color: var(--text-secondary);
font-weight: 600;
font-size: 1rem;
flex: 1;
text-align: left;
}
/* Status variants applied to the container */
.status-container.success {
border-color: var(--success);
background: rgba(16, 185, 129, 0.05);
}
.status-container.success .status-text {
color: var(--success);
}
.status-container.info {
border-color: var(--accent-secondary); border-color: var(--accent-secondary);
background: rgba(56, 189, 248, 0.05);
}
.status-container.info .status-text {
color: var(--accent-secondary); color: var(--accent-secondary);
background: rgba(56, 189, 248, 0.1);
} }
/* Victory Overlay */ /* Victory Overlay */