From 1e4f942d3232846f488e73563e32701ca189c84a Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Thu, 1 Aug 2024 17:55:21 +0530
Subject: [PATCH 1/5] Timer Fixed

---
 js/game.js      |  6 +++++-
 pages/game.html | 51 ++++++++++++++++++++-----------------------------
 2 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/js/game.js b/js/game.js
index 11ece3c..2fbdb57 100644
--- a/js/game.js
+++ b/js/game.js
@@ -48,12 +48,13 @@ class Game {
 	// Create timer UI
 	createTimerUI() {
 		const timerContainer = document.createElement("div");
+		const misc = document.querySelector(".button-container");
 		timerContainer.id = "timer-container";
 		timerContainer.innerHTML = `
             <div id="timer">30</div>
             <div id="timer-label">seconds left</div>
         `;
-		document.body.appendChild(timerContainer);
+		misc.appendChild(timerContainer);
 		this.timerDisplay = document.getElementById("timer");
 	}
 
@@ -149,6 +150,9 @@ 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
 
diff --git a/pages/game.html b/pages/game.html
index 65bb555..b280dab 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -30,10 +30,8 @@
 			.button-container {
 				display: flex;
 				justify-content: center;
-				gap: 8px;
-				margin-top: -13px;
-				left: 20%;
-				margin-right: 122px;
+				align-items: center;
+				gap: 1.5rem;
 			}
 
 			.button-container button,
@@ -56,7 +54,7 @@
 			.button-container #sound-toggle {
 				background-color: rgb(12, 1, 1);
 				border-radius: 4px;
-				padding: 10px 20px;
+				padding: 1rem 1.2rem;
 			}
 
 			.button-container svg {
@@ -104,19 +102,13 @@
 
 			/* Timer */
 			#timer-container {
-				position: fixed;
-				right: 208px;
-				top: 93%;
 				height: 77px;
 				width: 96px;
-				transform: translateY(-50%);
 				background-color: rgba(255, 255, 255, 0.9);
 				border-radius: 15px;
 				padding: 20px;
 				box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
 				text-align: center;
-				z-index: 1000;
-				margin-right: 26vw;
 			}
 
 			#timer {
@@ -148,18 +140,18 @@
 				width: 100%;
 			}
 
-			.scoreboard-container {
+			/* .scoreboard-container {
 				position: absolute;
-				left: -65%;
-				top: 39%;
+				right: -65%;
+				top: 25%;
 				background-color: rgba(255, 255, 255, 0.9);
 				border-radius: 15px;
 				padding: 20px;
 				box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
 				width: 250px;
 				cursor: move;
-				z-index: 1000;
-			}
+				visibility: hidden;
+			} */
 
 			.scoreboard-container h2 {
 				text-align: center;
@@ -1186,19 +1178,18 @@ <h3>Step 7</h3>
 				showStep(currentStep);
 			});
 		</script>
-        <!-- Loader.js -->
-	<script>
-		document.addEventListener("DOMContentLoaded", () => {
-    setTimeout(() => {
-        const loader = document.getElementById("loader");
-        if (loader) {
-            loader.style.display = "none";
-        } else {
-            console.error("Element with ID 'loader' not found.");
-        }
-    }, 500);
-});
-
-	</script>
+		<!-- Loader.js -->
+		<script>
+			document.addEventListener("DOMContentLoaded", () => {
+				setTimeout(() => {
+					const loader = document.getElementById("loader");
+					if (loader) {
+						loader.style.display = "none";
+					} else {
+						console.error("Element with ID 'loader' not found.");
+					}
+				}, 500);
+			});
+		</script>
 	</body>
 </html>

From 0716fa65fa970aa8f2d954169badf997da9d8d38 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Thu, 1 Aug 2024 17:55:49 +0530
Subject: [PATCH 2/5] Scoreboard Fixed

---
 js/game.js      | 4 ++--
 pages/game.html | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/game.js b/js/game.js
index 2fbdb57..19d5180 100644
--- a/js/game.js
+++ b/js/game.js
@@ -150,8 +150,8 @@ class Game {
 
 	// Add players to UI
 	addPlayersUI() {
-		// const scoreboardContainer = document.querySelector(".scoreboard-container");
-		// scoreboardContainer.style.visibility = "visible";
+		const scoreboardContainer = document.querySelector(".scoreboard-container");
+		scoreboardContainer.style.visibility = "visible";
 
 		const scoreboard = document.querySelector(".scoreboard");
 		scoreboard.innerHTML = ""; // Clear existing content
diff --git a/pages/game.html b/pages/game.html
index b280dab..2863552 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -140,7 +140,7 @@
 				width: 100%;
 			}
 
-			/* .scoreboard-container {
+			.scoreboard-container {
 				position: absolute;
 				right: -65%;
 				top: 25%;
@@ -151,7 +151,7 @@
 				width: 250px;
 				cursor: move;
 				visibility: hidden;
-			} */
+			}
 
 			.scoreboard-container h2 {
 				text-align: center;

From 71b85b3755c401b13cf171dc4e624ba4bc5405e6 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Thu, 1 Aug 2024 18:21:13 +0530
Subject: [PATCH 3/5] timer responsive

---
 pages/game.html | 175 +++---------------------------------------------
 1 file changed, 11 insertions(+), 164 deletions(-)

diff --git a/pages/game.html b/pages/game.html
index 2863552..d5a7aeb 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -296,6 +296,10 @@
 
 			/* Responsive styles for tablets and mobile devices */
 			@media screen and (max-width: 768px) {
+				.players {
+					margin-top: 1.5rem;
+				}
+
 				.tour-step {
 					width: 80%;
 					padding: 15px;
@@ -305,14 +309,6 @@
 					display: none;
 				}
 
-				.button-container {
-					display: flex;
-					justify-content: center;
-					gap: 10px;
-					margin-top: 20px;
-					margin-left: 34px;
-				}
-
 				.button-container button,
 				.button-container a {
 					background-color: rgb(0, 166, 255);
@@ -385,19 +381,9 @@
 
 				/* Timer */
 				#timer-container {
-					position: fixed;
-					right: 171px;
-					top: 92%;
 					height: 90px;
 					width: 103px;
-					transform: translateY(-50%);
-					background-color: rgba(255, 255, 255, 0.9);
-					border-radius: 15px;
-					padding: 20px;
-					box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-					text-align: center;
-					z-index: 1000;
-					margin-right: 26vw;
+					padding: 15px;
 				}
 
 				#timer {
@@ -415,11 +401,7 @@
 
 				/* Score board */
 				.game-wrapper {
-					position: relative;
-					display: flex;
-					justify-content: center;
-					align-items: flex-start;
-					padding: 20px;
+					margin-top: 7.5rem;
 				}
 
 				.game-container {
@@ -585,32 +567,6 @@
 				}
 			}
 
-			/* Responsive styles for tablets and mobile devices */
-			@media screen and (max-width: 768px) {
-				.tour-step {
-					width: 80%;
-					padding: 15px;
-				}
-
-				.tour-step h3 {
-					font-size: 1.2em;
-				}
-
-				.tour-step p {
-					font-size: 0.9em;
-				}
-
-				.tour-controls .button {
-					padding: 5px 10px;
-					font-size: 0.9em;
-				}
-
-				.tour-controls {
-					flex-direction: column;
-					gap: 5px;
-				}
-			}
-
 			@media screen and (max-width: 1200px) {
 				.circle-container {
 					display: none;
@@ -618,20 +574,14 @@
 			}
 
 			@media screen and (max-width: 480px) {
+				.button-container {
+					gap: 0.5rem;
+				}
+
 				#timer-container {
-					position: fixed;
-					right: 146px;
-					top: 91%;
 					height: 70px;
 					width: 72px;
-					transform: translateY(-50%);
-					background-color: rgba(255, 255, 255, 0.9);
-					border-radius: 15px;
-					padding: 20px;
-					box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-					text-align: center;
-					z-index: 1000;
-					margin-right: -36vw;
+					padding: 15px;
 				}
 
 				#timer {
@@ -674,14 +624,6 @@
 					margin-top: -392px;
 				}
 
-				.tour-step.step-7 {
-					width: 83%;
-					padding: 10px;
-					left: 41%;
-					margin-left: -32%;
-					margin-top: -339px;
-				}
-
 				.tour-step.step-4 {
 					width: 83%;
 					padding: 10px;
@@ -706,77 +648,6 @@
 					margin-top: -193px;
 				}
 
-				.tour-step h3 {
-					font-size: 1em;
-				}
-
-				.tour-step p {
-					font-size: 0.8em;
-				}
-
-				.tour-controls .button {
-					padding: 5px 10px;
-					font-size: 0.8em;
-				}
-
-				.tour-controls {
-					flex-direction: column;
-					gap: 3px;
-					margin-bottom: -15%;
-					margin-left: 8px;
-				}
-			}
-
-			/* Responsive styles for tablets and mobile devices */
-			@media screen and (max-width: 768px) {
-				.tour-step {
-					width: 80%;
-					padding: 15px;
-				}
-
-				.tour-step h3 {
-					font-size: 1.2em;
-				}
-
-				.tour-step p {
-					font-size: 0.9em;
-				}
-
-				.tour-controls .button {
-					padding: 5px 10px;
-					font-size: 0.9em;
-				}
-
-				.tour-controls {
-					flex-direction: column;
-					gap: 5px;
-				}
-			}
-
-			@media screen and (max-width: 480px) {
-				.tour-step.step-1 {
-					width: 83%;
-					padding: 10px;
-					left: 41%;
-					margin-left: -32%;
-				}
-
-				.tour-step.step-2 {
-					width: 83%;
-					padding: 10px;
-					left: 41%;
-					margin-left: -32%;
-					margin-top: -39px;
-				}
-
-				.tour-step.step-3 {
-					width: 83%;
-					padding: 10px;
-					left: 41%;
-					margin-left: -32%;
-					margin-top: -392px;
-				}
-
 				.tour-step.step-7 {
 					width: 83%;
 					padding: 10px;
@@ -785,30 +656,6 @@
 					margin-top: -339px;
 				}
 
-				.tour-step.step-4 {
-					width: 83%;
-					padding: 10px;
-					left: 41%;
-					margin-left: -32%;
-					margin-bottom: 53px;
-				}
-
-				.tour-step.step-5 {
-					width: 83%;
-					padding: 10px;
-					left: 41%;
-					margin-left: -32%;
-					margin-top: -119px;
-				}
-
-				.tour-step.step-6 {
-					width: 83%;
-					padding: 10px;
-					left: 41%;
-					margin-left: -32%;
-					margin-top: -193px;
-				}
-
 				.tour-step .step-8 {
 					top: 20%;
 					right: 59%;

From 06531787634bcba0ae6300a129cc74aacf2f69d8 Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Thu, 1 Aug 2024 19:26:30 +0530
Subject: [PATCH 4/5] Scoreboard responsive

---
 pages/game.html | 56 ++++++++++++++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/pages/game.html b/pages/game.html
index d5a7aeb..634ef43 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -300,6 +300,10 @@
 					margin-top: 1.5rem;
 				}
 
+				.player-turn {
+					top: 30px;
+				}
+
 				.tour-step {
 					width: 80%;
 					padding: 15px;
@@ -314,7 +318,7 @@
 					background-color: rgb(0, 166, 255);
 					color: white;
 					border: none;
-					padding: 13px 13px;
+					padding: 13px;
 					font-size: 14px;
 					cursor: pointer;
 					border-radius: 50%;
@@ -401,7 +405,7 @@
 
 				/* Score board */
 				.game-wrapper {
-					margin-top: 7.5rem;
+					margin-top: 7rem;
 				}
 
 				.game-container {
@@ -413,17 +417,9 @@
 				}
 
 				.scoreboard-container {
-					position: absolute;
-					left: 20px;
-					top: 20px;
-					background-color: rgba(255, 255, 255, 0.9);
-					border-radius: 15px;
-					padding: 20px;
-					box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-					width: 250px;
-					cursor: move;
-					z-index: 1000;
-					display: none;
+					position: static;
+					z-index: 500;
+					margin: 3rem;
 				}
 
 				.scoreboard-container h2 {
@@ -574,10 +570,27 @@
 			}
 
 			@media screen and (max-width: 480px) {
+				.player-turn {
+					top: 20px;
+				}
+
 				.button-container {
 					gap: 0.5rem;
 				}
 
+				.button-container svg {
+					width: 15px;
+					height: 15px;
+				}
+
+				.button-container a {
+					padding: 0.5rem;
+				}
+
+				#game-wrapper {
+					margin-top: 5rem;
+				}
+
 				#timer-container {
 					height: 70px;
 					width: 72px;
@@ -597,8 +610,8 @@
 					margin-top: -5px;
 				}
 
-				.game-wrapper {
-					margin-top: 150px !important;
+				.scoreboard-container {
+					margin-top: 1rem;
 				}
 
 				.tour-step.step-1 {
@@ -822,12 +835,6 @@
 
 		<!-- Game Page -->
 		<div class="game-wrapper">
-			<div class="scoreboard-container">
-				<h2>Scoreboard</h2>
-				<div class="scoreboard">
-					<!-- Scoreboard content will be dynamically added here -->
-				</div>
-			</div>
 			<div class="game-container">
 				<div class="board"></div>
 			</div>
@@ -854,6 +861,13 @@ <h2>Scoreboard</h2>
 			</a>
 		</div>
 
+		<div class="scoreboard-container">
+			<h2>Scoreboard</h2>
+			<div class="scoreboard">
+				<!-- Scoreboard content will be dynamically added here -->
+			</div>
+		</div>
+
 		<!-- Winner Overlay -->
 		<div id="win-overlay" class="overlay">
 			<!-- Overlay content -->

From 7c9499a4e6429dd71da1c74caf68dff0b33717ec Mon Sep 17 00:00:00 2001
From: Harshil Gupta <harshilgupta.2005@gmail.com>
Date: Thu, 1 Aug 2024 21:11:40 +0530
Subject: [PATCH 5/5] Minor fix

---
 pages/game.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/pages/game.html b/pages/game.html
index 634ef43..e8ab8c2 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -13,7 +13,6 @@
 		<script defer src="../js/box.js"></script>
 		<script defer src="../js/board.js"></script>
 		<script defer src="../js/game.js"></script>
-		<script src="/js/loader.js"></script>
 
 		<!-- Logo of the game -->
 		<link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
@@ -142,8 +141,8 @@
 
 			.scoreboard-container {
 				position: absolute;
-				right: -65%;
-				top: 25%;
+				right: 5%;
+				top: 20%;
 				background-color: rgba(255, 255, 255, 0.9);
 				border-radius: 15px;
 				padding: 20px;
@@ -419,7 +418,7 @@
 				.scoreboard-container {
 					position: static;
 					z-index: 500;
-					margin: 3rem;
+					margin: 2rem;
 				}
 
 				.scoreboard-container h2 {