Merge branch 'faq' of https://github.com/hars-21/Dot-Box into faq

README.md

@@ -94,7 +94,12 @@
 
 ## **Screenshots 📸**
 
-![Screenshot](https://github.com/GameSphere-MultiPlayer/GameSphere/assets/114330097/0dbdfbc6-7a84-48e4-ad34-2185f790a146)
+Before Starting Game
+![Screenshot](./assets/images/Screenshot-Before-Start.png)
+<br>
+
+After Winning Game
+![Screenshot](./assets/images/Screenshot-After-Win.png)
 
 <br>
 

index.html

@@ -11,8 +11,8 @@
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
 		/>
-		<script defer src="./js/validation.js"></script>
 		<!-- JavaScript files -->
+		<script defer src="./js/validation.js"></script>
 		<script defer src="./js/index.js"></script>
 		<!-- Logo of the game -->
 		<link rel="icon" href="./assets/favicon.ico" type="image/x-icon" />
@@ -41,16 +41,17 @@
 						<a href="#">Dots & Boxes ⚄</a>
 					</div>
 					<ul class="nav-links">
-						<li><a href="index.html">Home</a></li>
-						<li><a href="./pages/about.html">About Us</a></li>
-						<li><a href="./pages/FAQs.html">FAQs</a></li>
-						<li><a href="./pages/contributors.html">Contributors</a></li>
-						<li><a href="./pages/game.html">Let's Go</a></li>
+						<li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
+						<li><a href="./pages/about.html"><i class="fas fa-info-circle"></i> About Us</a></li>
+						<li><a href="./pages/FAQs.html"><i class="fas fa-question-circle"></i> FAQs</a></li>
+						<li><a href="./pages/contributors.html"><i class="fas fa-users"></i> Contributors</a></li>
+						<li><a href="./pages/game.html"><i class="fas fa-gamepad"></i> Let's Go</a></li>
 					</ul>
 					<div class="hamburger">
 						<i class="fas fa-bars"></i>
 					</div>
 				</nav>
+
 				<button class="sticky-button" onclick="openForm()">Feedback</button>
 				<div class="feed-bg">
 					<div id="formContainer" class="form-container">
@@ -164,67 +165,6 @@ <h3>Thank You!</h3>
 						<p>Your feedback has been submitted.</p>
 					</div>
 				</div>
-				<script>
-					const formContainer = document.querySelector(".form-container");
-					const formContent = document.querySelector(".form-content");
-
-					let isDragging = false;
-					let startX, startY, initialX, initialY;
-
-					formContent.addEventListener("mousedown", startDragging);
-					document.addEventListener("mousemove", drag);
-					document.addEventListener("mouseup", stopDragging);
-
-					function startDragging(e) {
-						if (e.target === formContent || e.target.closest(".sub")) {
-							isDragging = true;
-							formContainer.classList.add("dragging");
-
-							startX = e.clientX - formContainer.offsetLeft;
-							startY = e.clientY - formContainer.offsetTop;
-
-							initialX = formContainer.offsetLeft;
-							initialY = formContainer.offsetTop;
-						}
-					}
-
-					function drag(e) {
-						if (isDragging) {
-							e.preventDefault();
-
-							const currentX = e.clientX - startX;
-							const currentY = e.clientY - startY;
-
-							formContainer.style.left = currentX + "px";
-							formContainer.style.top = currentY + "px";
-						}
-					}
-
-					function stopDragging() {
-						isDragging = false;
-						formContainer.classList.remove("dragging");
-					}
-
-					// Prevent default drag behaviors
-					formContainer.addEventListener("dragstart", (e) =>
-						e.preventDefault()
-					);
-					document
-						.getElementById("feedbackForm")
-						.addEventListener("submit", function (event) {
-							event.preventDefault();
-							showThankYouPopup();
-							this.reset();
-						});
-
-					function showThankYouPopup() {
-						document.getElementById("thankYouPopup").classList.remove("hidden");
-					}
-
-					function closeThankYouPopup() {
-						document.getElementById("thankYouPopup").classList.add("hidden");
-					}
-				</script>
 
 				<div class="form">
 					<!-- <h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1> -->
@@ -299,17 +239,17 @@ <h3 class="instructions-heading" style="text-decoration: underline">
 			</div>
 			<div class="author">
 				<div class="fotbar">
-					<a href="./pages/howtoplay.html">HowToPlay?</a>
-					<a href="./pages/termsofservice.html">TermsOfService</a>
-					<a href="./pages/privacypolicy.html">PrivacyPolicy</a>
-					<a href="./pages/licensing.html">Licensing</a>
+					<a href="./pages/howtoplay.html"><i class="fas fa-gamepad"></i> HowToPlay?</a>
+					<a href="./pages/termsofservice.html"><i class="fas fa-file-contract"></i> TermsOfService</a>
+					<a href="./pages/privacypolicy.html"><i class="fas fa-user-shield"></i> PrivacyPolicy</a>
+					<a href="./pages/licensing.html"><i class="fas fa-copyright"></i> Licensing</a>
 				</div>
 				<div id="copyright">
 					&copy;
 					<script>
 						document.write(new Date().getFullYear());
 					</script>
-					Made by ❤️
+					Made with ❤️ by
 				</div>
 				<a href="https://github.com/ChromeGaming">Chrome Gaming</a>
 				<div class="social-icons">
@@ -319,6 +259,7 @@ <h3 class="instructions-heading" style="text-decoration: underline">
 					<a href="https://discord.gg/2HTCFrSvPB" target="_blank"
 						><i class="fab fa-discord"></i
 					></a>
+			</div>
 				</div>
 			</div>
 		</div>
@@ -338,38 +279,6 @@ <h3 class="instructions-heading" style="text-decoration: underline">
 				</div>
 			</div>
 		</div> -->
-		<script>
-			var isPlaying = true; // Start with the music playing by default
-			function toggleMusic() {
-				var audio = document.getElementById("background-music");
-				var button = document.getElementById("music-toggle");
-				if (isPlaying) {
-					audio.pause();
-					button.textContent = "Music On";
-				} else {
-					audio.play();
-					button.textContent = "Music Off";
-				}
-				isPlaying = !isPlaying;
-			}
-
-			window.onload = function () {
-				var audio = document.getElementById("background-music");
-				audio.play();
-				var button = document.getElementById("music-toggle");
-				button.textContent = "Music Off";
-			};
-		</script>
-
-		<script>
-			document
-				.getElementById("reset-btn")
-				.addEventListener("click", function () {
-					document.getElementById("rows").value = "";
-					document.getElementById("columns").value = "";
-					document.getElementById("players-count").value = "";
-				});
-		</script>
 
 		<script
 			src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js"

js/board.js

@@ -1,4 +1,4 @@
-sound = false
+sound = false;
 
 class Board {
 	static ROWS; //number of rows
@@ -52,11 +52,9 @@ class Board {
 	//
 	addEdgeClickEventListener() {
 		this.uiRoot.addEventListener("click", (e) => {
-
-			let click = new Audio('../assets/sounds/click.mp3');
-			if (sound)
+			let click = new Audio("../assets/sounds/click.mp3");
+			if (sound) {
 				//If sound is true, it means the sound is currently on
-			{
 				click.play();
 			}
 
@@ -214,13 +212,11 @@ class Board {
 	}
 
 	fillBoxes() {
-
-		let fill = new Audio('../assets/sounds/fill.mp3');
-		if (sound)
+		let fill = new Audio("../assets/sounds/fill.mp3");
+		if (sound) {
 			//If sound is true, it means the sound is currently on
-		{
 			fill.play();
-		}	
+		}
 
 		if (this.adjacentBoxesToFill.length != 0) {
 			setTimeout(() => {
@@ -237,16 +233,3 @@ class Board {
 		}
 	}
 }
-
-document.addEventListener("DOMContentLoaded", () => {
-	const soundToggleBtn = document.getElementById("sound-toggle");
-	soundToggleBtn.addEventListener("click", () => {
-		if (soundToggleBtn.innerText === "Sound Off") {
-			soundToggleBtn.innerText = "Sound On";
-			sound = true
-		} else {
-			soundToggleBtn.innerText = "Sound Off";
-			sound = false
-		}
-	});
-});

js/contributors.js

@@ -0,0 +1,29 @@
+document.addEventListener("DOMContentLoaded", function () {
+	const contributorsContainer = document.getElementById("contributors");
+
+	async function fetchContributors() {
+		try {
+			const response = await fetch(
+				"https://api.github.com/repos/ChromeGaming/Dot-Box/contributors"
+			);
+			const contributors = await response.json();
+
+			contributors.forEach((contributor) => {
+				const contributorCard = document.createElement("a");
+				contributorCard.href = contributor.html_url;
+				contributorCard.target = "_blank";
+				contributorCard.className = "contributor-card";
+				contributorCard.innerHTML = `
+  <img src="${contributor.avatar_url}" alt="${contributor.login}">
+  <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">${contributor.login}</h2>
+  <p class="text-gray-700 dark:text-gray-400">Contributions: ${contributor.contributions}</p>
+`;
+				contributorsContainer.appendChild(contributorCard);
+			});
+		} catch (error) {
+			console.error("Error fetching contributors:", error);
+		}
+	}
+
+	fetchContributors();
+});