dennii/Connect-5
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Connect-5.git synced 2026-04-17 20:36: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

18
index.html
View File

@@ -66,15 +66,17 @@
</div>
<div class="game-info">
<div class="turn-indicator">
<span class="label" id="turnLabel">Current Turn:</span>
<div class="player-display">
<span class="player-marker" id="currentPlayer">X</span>
<div class="status-container">
<div class="turn-indicator">
<span class="label" id="turnLabel">Current Turn:</span>
<div class="player-display">
<span class="player-marker" id="currentPlayer">X</span>
</div>
</div>
<div class="status-divider"></div>
<div class="status-text" id="statusMessage">
Player X starts the game
</div>
</div>
<div class="status-message" id="statusMessage">
Player X starts the game
</div>
<div class="score-display">

19
multiplayer.js
View File

@@ -357,7 +357,7 @@ class MultiplayerClient {
document.getElementById('multiplayerPanel').style.display = 'none';
document.getElementById('gameControls').style.display = 'grid';
document.querySelector('.board-wrapper').style.display = 'flex';
document.getElementById('statusMessage').style.display = 'block';
// status container is part of gameControls now
// Set board size
document.querySelectorAll('.size-btn').forEach(btn => {
@@ -387,13 +387,15 @@ class MultiplayerClient {
}
// 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) {
status.textContent = `🎮 VS ${this.opponent} | YOUR TURN - You're playing as ${this.mySymbol}`;
status.className = 'status-message success';
statusText.textContent = `🎮 VS ${this.opponent} | YOUR TURN - You're playing as ${this.mySymbol}`;
statusContainer.className = 'status-container success';
} else {
status.textContent = `🎮 VS ${this.opponent} | Waiting for ${this.opponent} to move - You're playing as ${this.mySymbol}`;
status.className = 'status-message info';
statusText.textContent = `🎮 VS ${this.opponent} | Waiting for ${this.opponent} to move - You're playing as ${this.mySymbol}`;
statusContainer.className = 'status-container info';
}
console.log(`✅ Game started! You are ${this.mySymbol}, ${this.myTurn ? 'your turn' : 'waiting'}`);
@@ -504,7 +506,10 @@ class MultiplayerClient {
const messageEl = document.getElementById('statusMessage');
if (messageEl) {
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 {
text-align: center;
/* Merged Status Container */
.status-container {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding: 1rem;
background: var(--bg-tertiary);
border-radius: 12px;
border: 1px solid var(--border-light);
color: var(--text-secondary);
font-weight: 600;
font-size: 1rem;
width: 100%;
}
.status-message.success {
border-color: var(--success);
color: var(--success);
background: rgba(16, 185, 129, 0.1);
.status-divider {
width: 1px;
height: 24px;
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);
background: rgba(56, 189, 248, 0.05);
}
.status-container.info .status-text {
color: var(--accent-secondary);
background: rgba(56, 189, 248, 0.1);
}
/* Victory Overlay */