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

Enhance UI with ghost piece and board glow effects

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-21 20:41:19 +11:00
parent acf32d0418
commit 79ffb771a8
2 changed files with 52 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
game.js
View File

@@ -67,6 +67,9 @@ class Connect5Game {
}
this.updateStatus();
// Set initial board class
this.boardElement.classList.add(`turn-${this.currentPlayer.toLowerCase()}`);
}
handleCellClick(row, col) {
@@ -213,6 +216,12 @@ class Connect5Game {
this.statusMessage.textContent = `Player ${this.currentPlayer}'s turn`;
this.currentPlayerDisplay.textContent = this.currentPlayer;
// Update board class for ghost piece
if (this.boardElement) {
this.boardElement.classList.remove('turn-x', 'turn-o');
this.boardElement.classList.add(`turn-${this.currentPlayer.toLowerCase()}`);
}
// Update the player display style
const playerDisplay = document.querySelector(".player-display");
if (this.currentPlayer === "O") {

43
styles.css
View File

@@ -742,6 +742,49 @@ body {
border-top: 1px solid var(--border-light);
}
/* Ghost Piece Effect */
.game-board.turn-x .cell:not(.occupied):hover::after {
content: "X";
color: hsla(270, 70%, 60%, 0.4);
font-size: 1.5rem;
font-weight: 800;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.game-board.turn-o .cell:not(.occupied):hover::after {
content: "O";
color: hsla(195, 70%, 55%, 0.4);
font-size: 1.5rem;
font-weight: 800;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* Board Glow aligned with turn */
.game-board.turn-x {
border-color: hsla(270, 70%, 60%, 0.3);
box-shadow: 0 0 30px hsla(270, 70%, 60%, 0.1);
}
.game-board.turn-o {
border-color: hsla(195, 70%, 55%, 0.3);
box-shadow: 0 0 30px hsla(195, 70%, 55%, 0.1);
}
/* Responsive Cell Sizes */
.game-board[data-size="15"] .cell { width: 30px; height: 30px; font-size: 1.5rem; }
.game-board[data-size="20"] .cell { width: 25px; height: 25px; font-size: 1.2rem; }
.game-board[data-size="25"] .cell { width: 20px; height: 20px; font-size: 0.9rem; }
.game-board[data-size="50"] .cell { width: 12px; height: 12px; font-size: 0.6rem; }
.game-board[data-size="50"] .cell::after { font-size: 0.6rem !important; } /* Adjust ghost size for tiny cells */
/* Responsive Design */
@media (max-width: 1200px) {
.board[data-size="25"] {