adventskalender/shared/js/glitter.js aktualisiert

This commit is contained in:
2025-11-04 21:50:23 +00:00
parent d60e1b7e4c
commit 7946ba106d

View File

@@ -4,34 +4,35 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
let cursorX = 0, cursorY = 0;
const day = elem.dataset.day;
let partner = null;
let extraPartners = [];
let partners = [];
// === Beziehungstabelle ===
if (elem.classList.contains("door")) {
partner = document.querySelector(`.openfield[data-day="${day}"]`);
} else if (elem.classList.contains("openfield")) {
partner = document.querySelector(`.door[data-day="${day}"]`);
// neu: openfield soll auch beide Flügel als Partner erkennen
extraPartners = [
document.querySelector(`.fluegel.left[data-day="${day}"]`),
document.querySelector(`.fluegel.right[data-day="${day}"]`)
].filter(Boolean);
} else if (elem.classList.contains("fluegel")) {
partners.push(document.querySelector(`.openfield[data-day="${day}"]`));
}
if (elem.classList.contains("openfield")) {
partners.push(document.querySelector(`.door[data-day="${day}"]`));
partners.push(document.querySelector(`.fluegel.left[data-day="${day}"]`));
partners.push(document.querySelector(`.fluegel.right[data-day="${day}"]`));
}
if (elem.classList.contains("fluegel")) {
const isLeft = elem.classList.contains("left");
const isRight = elem.classList.contains("right");
// gegenüberliegender Flügel
if (isLeft) {
partner = document.querySelector(`.fluegel.right[data-day="${day}"]`);
} else if (isRight) {
partner = document.querySelector(`.fluegel.left[data-day="${day}"]`);
if (isLeft)
partners.push(document.querySelector(`.fluegel.right[data-day="${day}"]`));
if (isRight)
partners.push(document.querySelector(`.fluegel.left[data-day="${day}"]`));
// jeder Flügel verbindet sich zusätzlich mit dem openfield
partners.push(document.querySelector(`.openfield[data-day="${day}"]`));
}
// plus openfield
const openfield = document.querySelector(`.openfield[data-day="${day}"]`);
if (openfield) extraPartners.push(openfield);
}
partners = partners.filter(Boolean); // ungültige raus
// === Canvas für Glitzer ===
function setupCanvas() {
if (canvas) return;
canvas = document.createElement("canvas");
@@ -97,16 +98,17 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
anim = requestAnimationFrame(draw);
}
// === Hover Start ===
elem.addEventListener("mouseenter", () => {
setupCanvas();
hovering = true;
cancelAnimationFrame(anim);
draw();
if (partner) partner.classList.add("hover-proxy");
extraPartners.forEach(p => p.classList.add("hover-proxy"));
partners.forEach(p => p.classList.add("hover-proxy"));
});
// === Hover Ende ===
elem.addEventListener("mouseleave", () => {
hovering = false;
setTimeout(() => {
@@ -117,7 +119,6 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
}
}, 300);
if (partner) partner.classList.remove("hover-proxy");
extraPartners.forEach(p => p.classList.remove("hover-proxy"));
partners.forEach(p => p.classList.remove("hover-proxy"));
});
});