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

Merge status message into top controls panel for better UI

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-21 18:19:46 +11:00
parent 481de45276
commit 3f9ca7e2f4
2 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@@ -72,6 +72,11 @@
<span class="player-marker" id="currentPlayer">X</span> <span class="player-marker" id="currentPlayer">X</span>
</div> </div>
</div> </div>
<div class="status-message" id="statusMessage">
Player X starts the game
</div>
<div class="score-display"> <div class="score-display">
<div class="score-item"> <div class="score-item">
<span class="score-label">Player X</span> <span class="score-label">Player X</span>
@@ -105,10 +110,6 @@
<div class="board" id="gameBoard"></div> <div class="board" id="gameBoard"></div>
</div> </div>
<div class="status-message" id="statusMessage">
Player X starts the game
</div>
<!-- Multiplayer Panel --> <!-- Multiplayer Panel -->
<div id="multiplayerPanel" class="multiplayer-panel" style="display: none;"> <div id="multiplayerPanel" class="multiplayer-panel" style="display: none;">
<div class="player-stats-card"> <div class="player-stats-card">
@@ -267,7 +268,7 @@
const gameControls = document.getElementById('gameControls'); const gameControls = document.getElementById('gameControls');
const multiplayerPanel = document.getElementById('multiplayerPanel'); const multiplayerPanel = document.getElementById('multiplayerPanel');
const boardWrapper = document.querySelector('.board-wrapper'); const boardWrapper = document.querySelector('.board-wrapper');
const statusMessage = document.getElementById('statusMessage'); // statusMessage is now inside gameControls, so we don't need to toggle it separately
if (mode === 'local') { if (mode === 'local') {
localBtn.classList.add('active'); localBtn.classList.add('active');
@@ -275,7 +276,6 @@
gameControls.style.display = 'grid'; gameControls.style.display = 'grid';
multiplayerPanel.style.display = 'none'; multiplayerPanel.style.display = 'none';
boardWrapper.style.display = 'flex'; boardWrapper.style.display = 'flex';
statusMessage.style.display = 'block';
// Reset to local mode // Reset to local mode
if (window.multiplayerClient) { if (window.multiplayerClient) {
@@ -293,7 +293,6 @@
gameControls.style.display = 'none'; gameControls.style.display = 'none';
multiplayerPanel.style.display = 'block'; multiplayerPanel.style.display = 'block';
boardWrapper.style.display = 'none'; boardWrapper.style.display = 'none';
statusMessage.style.display = 'none';
// Initialize multiplayer if not already // Initialize multiplayer if not already
if (!window.multiplayerClient) { if (!window.multiplayerClient) {

19
styles.css
View File

@@ -435,13 +435,26 @@ body {
/* Status Message */ /* Status Message */
.status-message { .status-message {
text-align: center; text-align: center;
padding: 1.5rem; padding: 1rem;
background: var(--bg-secondary); 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); color: var(--text-secondary);
font-weight: 600; font-weight: 600;
font-size: 1.1rem; font-size: 1rem;
width: 100%;
}
.status-message.success {
border-color: var(--success);
color: var(--success);
background: rgba(16, 185, 129, 0.1);
}
.status-message.info {
border-color: var(--accent-secondary);
color: var(--accent-secondary);
background: rgba(56, 189, 248, 0.1);
} }
/* Victory Overlay */ /* Victory Overlay */