103 lines
3.9 KiB
Text
103 lines
3.9 KiB
Text
document.addEventListener("DOMContentLoaded", function () {
|
|
if (!document.querySelector("main.won-page")) {
|
|
return;
|
|
}
|
|
|
|
const wheelWrapper = document.getElementById("wheel-wrapper"),
|
|
spinWheelInner = wheelWrapper?.querySelector(".wheel-inner") as HTMLElement | null | undefined,
|
|
spinWheelBtnList = wheelWrapper?.querySelectorAll(".wheel-spin") as NodeListOf<HTMLElement> | undefined,
|
|
animationSection = document.getElementById("spin-animation"),
|
|
prizeSection = document.getElementById("prize-section"),
|
|
discountSection = document.getElementById("discount-section"),
|
|
winningProofSection = document.getElementById("winning-proof-section");
|
|
|
|
/** Hide animation and show win sections */
|
|
const toggleAnimationPhase = () => {
|
|
if (animationSection) {
|
|
animationSection.classList.add("d-none");
|
|
}
|
|
if (prizeSection) {
|
|
prizeSection.classList.remove("d-none");
|
|
}else if (discountSection) {
|
|
discountSection.classList.remove("d-none");
|
|
} else {
|
|
throw new Error("No section to toggle");
|
|
}
|
|
if (winningProofSection) {
|
|
winningProofSection.classList.remove("d-none");
|
|
}
|
|
};
|
|
|
|
if (!animationSection) {
|
|
throw Error("section#spin-animation missing");
|
|
}
|
|
|
|
if (wheelWrapper && spinWheelInner && spinWheelBtnList && spinWheelBtnList.length) {
|
|
let clicks: number = 0;
|
|
// * Set default degree (360*5) soit 5 tours
|
|
const degree: number = (360 * 5),
|
|
wheelPartsDeg: number = 360 / spinWheelInner.children.length,
|
|
thisWinAngle: number = (Number.parseInt(
|
|
String(wheelWrapper.dataset["winChild"])
|
|
// On s'aligne sur la tranche on on ajoute entre 10% et 90% d'une part
|
|
)) * wheelPartsDeg - 45 + (wheelPartsDeg * (Math.random() * (0.9 - 0.1) + 0.1));
|
|
let timeout: NodeJS.Timeout | null = null;
|
|
|
|
const spinTheWheel = () => {
|
|
// * Add 1 every click
|
|
|
|
/**
|
|
* Multiply the degree by number of clicks
|
|
* generate random number between 1 - 85,
|
|
* then add to the new degree
|
|
*/
|
|
const newDegree = degree * ++clicks;
|
|
const totalDegree = newDegree + thisWinAngle;
|
|
|
|
/**
|
|
* Let's make the spin btn to tilt every
|
|
* time the edge of the section hits
|
|
* the indicator
|
|
*/
|
|
spinWheelInner.style["transform"] = `rotate(${totalDegree}deg)`;
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(toggleAnimationPhase, 7000);
|
|
};
|
|
/** ! Même Algo que sur GGW legacy */
|
|
spinWheelBtnList.forEach((spinBtn) => {
|
|
spinBtn.addEventListener("click", spinTheWheel);
|
|
spinBtn.addEventListener("keydown", (kbdEvt: KeyboardEvent) => {
|
|
if (
|
|
kbdEvt.key == " " ||
|
|
kbdEvt.code == "Space" ||
|
|
kbdEvt.keyCode == 32 ||
|
|
kbdEvt.key == "Enter" ||
|
|
kbdEvt.code == "Enter" ||
|
|
kbdEvt.keyCode == 13
|
|
) {
|
|
spinBtn.classList.add("active");
|
|
spinTheWheel();
|
|
kbdEvt.preventDefault();
|
|
}
|
|
});
|
|
spinBtn.addEventListener("keyup", (kbdEvt: KeyboardEvent) => {
|
|
if (
|
|
kbdEvt.key == " " ||
|
|
kbdEvt.code == "Space" ||
|
|
kbdEvt.keyCode == 32 ||
|
|
kbdEvt.key == "Enter" ||
|
|
kbdEvt.code == "Enter" ||
|
|
kbdEvt.keyCode == 13
|
|
) {
|
|
spinBtn.classList.remove("active");
|
|
kbdEvt.preventDefault();
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
toggleAnimationPhase();
|
|
}
|
|
});
|
|
|