Files

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" />
@@ -164,67 +164,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> -->
@@ -338,38 +277,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/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();
+});

js/game.js

@@ -336,6 +336,7 @@ function calculate(value, min, max) {
 	return Math.min(Math.max(value, min), max);
 }
 
+// Render player inputs based on the number of players
 function renderPlayerInputs(count) {
 	const playerInputsDiv = document.getElementById("playerInputs");
 	playerInputsDiv.innerHTML = "";
@@ -375,6 +376,7 @@ function renderPlayerInputs(count) {
 	}
 }
 
+// Validate the selected color
 function validateColor(selectedRadio) {
 	const selectedColors = document.querySelectorAll(
 		'input[type="radio"]:checked'
@@ -405,6 +407,7 @@ function validateColor(selectedRadio) {
 	}
 }
 
+// Save player data to local storage
 function savePlayers() {
 	const playersCount = calculate(playersInput, 2, 6);
 	const playerData = [];
@@ -421,15 +424,19 @@ function savePlayers() {
 }
 
 // Start the game
+const playBtn = document.getElementById("play-btn");
+
 playBtn.addEventListener("click", () => {
 	savePlayers();
+	tourGuide();
 	document.getElementById("playerSetup").style.display = "none";
 	const playersInfo = JSON.parse(localStorage.getItem("playerData"));
 	const size = difficultyCalc();
 	game = new Game(playersInfo);
 	game.makeBoard(size[0], size[1]);
 });
 
+// Calculate the dimensions based on the selected difficulty
 const difficultyCalc = () => {
 	const difficulty = localStorage.getItem("selectedDifficulty");
 	const dimensions = {
@@ -442,6 +449,7 @@ const difficultyCalc = () => {
 	return result;
 };
 
+// Avatar selection -->
 function editAvatar() {
 	const editButton = document.querySelectorAll(".edit-avatar");
 	const avatarWindow = document.querySelector("#avatarWindow");
@@ -453,6 +461,7 @@ function editAvatar() {
 	});
 }
 
+// Save the selected avatar
 function saveAvatar(id, tab) {
 	const selectAvatar = document.querySelectorAll(".selectAvatar");
 	selectAvatar.forEach((choice) => {
@@ -469,3 +478,110 @@ function saveAvatar(id, tab) {
 		tab.style.display = "none";
 	});
 }
+
+// Cursor -->
+document.addEventListener("DOMContentLoaded", function () {
+	const coords = { x: 0, y: 0 };
+	const circles = document.querySelectorAll(".circle");
+
+	circles.forEach(function (circle) {
+		circle.x = 0;
+		circle.y = 0;
+	});
+
+	window.addEventListener("mousemove", function (e) {
+		coords.x = e.pageX;
+		coords.y = e.pageY - window.scrollY; // Adjust for vertical scroll position
+	});
+
+	function animateCircles() {
+		let x = coords.x;
+		let y = coords.y;
+
+		circles.forEach(function (circle, index) {
+			circle.style.left = `${x - 12}px`;
+			circle.style.top = `${y - 12}px`;
+			circle.style.transform = `scale(${
+				(circles.length - index) / circles.length
+			})`;
+
+			const nextCircle = circles[index + 1] || circles[0];
+			circle.x = x;
+			circle.y = y;
+
+			x += (nextCircle.x - x) * 0.3;
+			y += (nextCircle.y - y) * 0.3;
+		});
+
+		requestAnimationFrame(animateCircles);
+	}
+
+	animateCircles();
+});
+
+// Avatar selection -->
+const options = document.getElementById("choices");
+for (let i = 1; i <= 20; i++) {
+	const profile = document.createElement("button");
+	profile.classList.add("selectAvatar");
+	profile.innerHTML = `
+	<img src="/assets/avatars/${i}.png" alt="Avatar${i}" class="player-avatar" />
+	`;
+	options.appendChild(profile);
+}
+
+// tour steps -->
+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) => {
+			step.style.display = i === index ? "block" : "none";
+		});
+	};
+
+	const nextStep = () => {
+		if (currentStep < tourSteps.length - 1) {
+			currentStep++;
+			showStep(currentStep);
+		}
+	};
+
+	const prevStep = () => {
+		if (currentStep > 0) {
+			currentStep--;
+			showStep(currentStep);
+		}
+	};
+
+	const skipTour = () => {
+		document.getElementById("tour-overlay").style.display = "none";
+	};
+
+	const closeTour = () => {
+		document.getElementById("tour-overlay").style.display = "none";
+	};
+
+	document.querySelectorAll("#next-step").forEach((button) => {
+		button.addEventListener("click", nextStep);
+	});
+
+	document.querySelectorAll("#prev-step").forEach((button) => {
+		button.addEventListener("click", prevStep);
+	});
+
+	document.querySelectorAll("#skip-tour").forEach((button) => {
+		button.addEventListener("click", skipTour);
+	});
+
+	document.querySelectorAll("#close-tour").forEach((button) => {
+		button.addEventListener("click", closeTour);
+	});
+
+	document.getElementById("tour-overlay").style.display = "flex";
+	showStep(currentStep);
+}