Skip to content

Commit

Permalink
Merge pull request #2 from hars-21/files
Browse files Browse the repository at this point in the history 
Files
  • Loading branch information
@hars-21
hars-21 authored Aug 5, 2024
2 parents efd3828 + 621b6ac commit f8f07e5
Show file tree
Hide file tree
Showing 13 changed files with 408 additions and 1,387 deletions.
95 changes: 1 addition & 94 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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> -->
Expand Down Expand Up @@ -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"
Expand Down
29 changes: 29 additions & 0 deletions js/contributors.js
View file
Original file line number Diff line number Diff line change
@@ -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();
});
116 changes: 116 additions & 0 deletions js/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "";
Expand Down Expand Up @@ -375,6 +376,7 @@ function renderPlayerInputs(count) {
}
}

// Validate the selected color
function validateColor(selectedRadio) {
const selectedColors = document.querySelectorAll(
'input[type="radio"]:checked'
Expand Down Expand Up @@ -405,6 +407,7 @@ function validateColor(selectedRadio) {
}
}

// Save player data to local storage
function savePlayers() {
const playersCount = calculate(playersInput, 2, 6);
const playerData = [];
Expand All @@ -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 = {
Expand All @@ -442,6 +449,7 @@ const difficultyCalc = () => {
return result;
};

// Avatar selection -->
function editAvatar() {
const editButton = document.querySelectorAll(".edit-avatar");
const avatarWindow = document.querySelector("#avatarWindow");
Expand All @@ -453,6 +461,7 @@ function editAvatar() {
});
}

// Save the selected avatar
function saveAvatar(id, tab) {
const selectAvatar = document.querySelectorAll(".selectAvatar");
selectAvatar.forEach((choice) => {
Expand All @@ -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);
}
Loading

0 comments on commit f8f07e5

Please sign in to comment.