You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

58 lines
1.5 KiB
JavaScript

const informations = document.getElementById("information-list");
const stickerContainer = document.getElementById("sticker-container");
infoList = Array.from(informations.children);
loopIndex = 0;
let windowWidth;
let windowHeight;
let palette = ["#9EDAE2", "#9FD3A8", "#F7D8E8", "#F9F5B0", "#FFC496"];
window.addEventListener("load", () => {
getSize();
let color = palette[(palette.length * Math.random()) | 0];
document.documentElement.style.setProperty("--background", color);
});
window.addEventListener("resize", (e) => {
getSize();
});
function getSize() {
windowWidth = stickerContainer.clientWidth;
windowHeight = stickerContainer.clientHeight;
}
function percentagePosition(e, target) {
let targetRect = target.getBoundingClientRect();
let x = e.clientX - targetRect.left;
let y = e.clientY - targetRect.top;
return { x: ((x / windowWidth) * 100).toFixed(2), y: ((y / windowHeight) * 100).toFixed(2) };
}
window.addEventListener("click", (e) => {
placeSticker(percentagePosition(e, stickerContainer), infoList[loopIndex]);
// Cringe sorry
if (loopIndex < infoList.length - 1) {
loopIndex++;
} else {
loopIndex = 0;
}
});
function placeSticker(position, element) {
let sticker = element.cloneNode(true);
sticker.classList.add("sticker");
sticker.style.left = position.x + "%";
sticker.style.top = position.y + "%";
sticker.style.transform = `
translate(-50%, -50%)
rotate(${Math.random() * 40 - 20}deg)
`;
stickerContainer.appendChild(sticker);
}