67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
import { SCRATCH_TYPE, ScratchCard } from "scratchcard-js";
|
|
import grattageUrl from "./../../assets/images/animations/grattage.png";
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
if (!document.querySelector("main.won-page")) {
|
|
return;
|
|
}
|
|
|
|
const scratchWrapper = document.getElementById("scratch-wrapper"),
|
|
scratchPicture = document.getElementById("scratch-picture") as HTMLPictureElement|null,
|
|
animationSection = document.getElementById("scratch-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#scratch-animation missing");
|
|
}
|
|
|
|
if (scratchWrapper && scratchPicture) {
|
|
scratchPicture.addEventListener("load", () => {
|
|
const sc = new ScratchCard(scratchWrapper, {
|
|
scratchType: SCRATCH_TYPE.LINE,
|
|
containerWidth: scratchWrapper.offsetWidth,
|
|
containerHeight: scratchWrapper.offsetHeight,
|
|
imageForwardSrc: grattageUrl,
|
|
imageBackgroundSrc: "",
|
|
htmlBackground: "",
|
|
clearZoneRadius: 50,
|
|
nPoints: 30,
|
|
pointSize: 8,
|
|
percentToFinish: 65,
|
|
callback: function () {
|
|
toggleAnimationPhase();
|
|
},
|
|
brushSrc: "",
|
|
enabledPercentUpdate: true
|
|
});
|
|
sc.init().catch((e) => {
|
|
console.error(e);
|
|
toggleAnimationPhase();
|
|
});
|
|
});
|
|
scratchPicture.setAttribute("src", String(scratchPicture.dataset["src"]));
|
|
} else {
|
|
toggleAnimationPhase();
|
|
}
|
|
|
|
});
|
|
|