Issue resolved

ChromeGaming · Aug 7, 2024 · 5dbf1b0 · 5dbf1b0
1 parent f5aecb1
commit 5dbf1b0
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 165 deletions.
diff --git a/js/game.js b/js/game.js
@@ -159,9 +159,6 @@ class Game {
 
 	// Add players to UI
 	addPlayersUI() {
-		const scoreboardContainer = document.querySelector(".scoreboard-container");
-		scoreboardContainer.style.visibility = "visible";
-
 		const scoreboard = document.querySelector(".scoreboard");
 		scoreboard.innerHTML = ""; // Clear existing content
 
@@ -292,6 +289,10 @@ class Game {
 		if (confirm("Are you sure you want to surrender?")) {
 			this.players.splice(this.currentPlayerIndex, 1);
 
+			document
+				.querySelector(`.player${this.currentPlayerIndex + 1}-score`)
+				.classList.add("defeated");
+
 			if (this.currentPlayerIndex >= this.players.length) {
 				this.currentPlayerIndex = 0;
 			}
@@ -510,7 +511,6 @@ const scoreboard = document.querySelector(".scoreboard-container");
 function tourGuide() {
 	const tourSteps = document.querySelectorAll(".tour-step");
 	let currentStep = 0;
-	scoreboard.style.display = "block";
 
 	const showStep = (index) => {
 		tourSteps.forEach((step, i) => {
@@ -564,7 +564,11 @@ function tourGuide() {
 
 // Settings Button
 document.getElementById("setting-btn").addEventListener("click", () => {
-	menu.classList.toggle("menu-open");
+	menu.style.display = "block";
+});
+
+document.getElementById("close-menu").addEventListener("click", () => {
+	menu.style.display = "none";
 });
 
 // Surrender Button
@@ -578,6 +582,9 @@ const help = document.getElementById("help");
 help.addEventListener("click", () => {
 	tourGuide();
 	stateChange("pause");
+	if (window.innerWidth < 768) {
+		menu.style.display = "none";
+	}
 });
 
 // Restart Game

diff --git a/pages/game.html b/pages/game.html
@@ -78,59 +78,62 @@ <h2>Select Avatar</h2>
 			</div>
 		</div>
 
-		<!-- Players Turn-->
-		<div class="player-turn">
-			<div class="bg" style="margin-top: 40px">
-				<span class="name">PlayerX</span>'s turn
-			</div>
-		</div>
-
-		<!-- Game Page -->
-		<div class="game-wrapper">
-			<div class="game-container">
-				<div class="board"></div>
-			</div>
-		</div>
-
-		<!-- Menu -->
-		<div id="menu">
-			<div class="menu-header">
-				<h2>Settings</h2>
-			</div>
-			<div class="menu-body">
-				<div class="menu-links">
-					<a href="../index.html" id="home" class="link-btn">
-						<i class="fa-solid fa-house"></i> Home
-					</a>
-					<a href="../pages/404.html" id="leaderboard" class="link-btn">
-						<i class="fa-solid fa-people-group"></i> Leaderboard
-					</a>
-					<button id="help" class="link-btn">
-						Help <i class="fa-solid fa-circle-question"></i>
-					</button>
-					<button id="surrender" class="link-btn">
-						Surrender <i class="fa-solid fa-flag"></i>
-					</button>
+		<div id="layout">
+			<!-- Menu -->
+			<div id="menu">
+				<div class="menu-header">
+					<h2>Settings</h2>
 				</div>
-				<div class="menu-buttons">
-					<div id="restart" class="icon-btn">
-						<i class="fa-solid fa-arrow-rotate-right"></i>
+				<div class="menu-body">
+					<div class="menu-links">
+						<a href="../index.html" id="home" class="link-btn">
+							<i class="fa-solid fa-house"></i> Home
+						</a>
+						<a href="../pages/404.html" id="leaderboard" class="link-btn">
+							<i class="fa-solid fa-people-group"></i> Leaderboard
+						</a>
+						<button id="help" class="link-btn">
+							Help <i class="fa-solid fa-circle-question"></i>
+						</button>
+						<button id="surrender" class="link-btn">
+							Surrender <i class="fa-solid fa-flag"></i>
+						</button>
 					</div>
-					<div id="state" class="icon-btn">
-						<i class="fa-solid fa-play"></i>
-					</div>
-					<div id="music-toggle" class="icon-btn">
-						<i class="fa-solid fa-volume-high"></i>
+					<div class="menu-buttons">
+						<div id="restart" class="icon-btn">
+							<i class="fa-solid fa-arrow-rotate-right"></i>
+						</div>
+						<div id="state" class="icon-btn">
+							<i class="fa-solid fa-play"></i>
+						</div>
+						<div id="music-toggle" class="icon-btn">
+							<i class="fa-solid fa-volume-high"></i>
+						</div>
 					</div>
 				</div>
+				<i class="fas fa-xmark" id="close-menu"></i>
 			</div>
-			<div id="setting-btn"><i class="fa-solid fa-gear"></i></div>
-		</div>
 
-		<div class="scoreboard-container">
-			<h2>Scoreboard</h2>
-			<div class="scoreboard">
-				<!-- Scoreboard content will be dynamically added here -->
+			<!-- Game  -->
+			<div class="game-wrapper">
+				<!-- Players Turn-->
+				<div class="player-turn">
+					<div class="bg"><span class="name">PlayerX</span>'s turn</div>
+				</div>
+
+				<!-- Game Board -->
+				<div class="game-container">
+					<div class="board"></div>
+					<div id="setting-btn">Settings</div>
+				</div>
+			</div>
+
+			<!-- Scoreboard -->
+			<div class="scoreboard-container">
+				<h2>Scoreboard</h2>
+				<div class="scoreboard">
+					<!-- Scoreboard content will be dynamically added here -->
+				</div>
 			</div>
 		</div>