From 08f621b0f739f88859ee36c9b1770e0b9d5dc44e Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 21:24:26 +0000 Subject: [PATCH] adventskalender/shared/js/glitter.js aktualisiert --- adventskalender/shared/js/glitter.js | 44 +++++++++++++++++++--------- 1 file changed, 30 insertions(+), 14 deletions(-) diff --git a/adventskalender/shared/js/glitter.js b/adventskalender/shared/js/glitter.js index 660fbaf..af9966f 100644 --- a/adventskalender/shared/js/glitter.js +++ b/adventskalender/shared/js/glitter.js @@ -4,20 +4,33 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => { let cursorX = 0, cursorY = 0; const day = elem.dataset.day; - const partnerElems = new Set(); + const partners = new Set(); - // Partner zuweisen + // === PARTNERLOGIK === if (elem.classList.contains("door")) { - document.querySelectorAll(`.openfield[data-day="${day}"]`).forEach(e => partnerElems.add(e)); - } - if (elem.classList.contains("openfield")) { - document.querySelectorAll(`.door[data-day="${day}"], .fluegel[data-day="${day}"]`).forEach(e => partnerElems.add(e)); - } - if (elem.classList.contains("fluegel")) { - document.querySelectorAll(`.fluegel[data-day="${day}"]:not(.${elem.classList.contains("left") ? "left" : "right"})`).forEach(e => partnerElems.add(e)); - document.querySelectorAll(`.openfield[data-day="${day}"]`).forEach(e => partnerElems.add(e)); + const of = document.querySelector(`.openfield[data-day="${day}"]`); + if (of) partners.add(of); } + else if (elem.classList.contains("openfield")) { + const door = document.querySelector(`.door[data-day="${day}"]`); + if (door) partners.add(door); + + const left = document.querySelector(`.fluegel.left[data-day="${day}"]`); + const right = document.querySelector(`.fluegel.right[data-day="${day}"]`); + if (left) partners.add(left); + if (right) partners.add(right); + } + + else if (elem.classList.contains("fluegel")) { + const opposite = document.querySelector(`.fluegel.${elem.classList.contains("left") ? "right" : "left"}[data-day="${day}"]`); + if (opposite) partners.add(opposite); + + const of = document.querySelector(`.openfield[data-day="${day}"]`); + if (of) partners.add(of); + } + + // === CANVAS SETUP === function setupCanvas() { if (canvas) return; canvas = document.createElement("canvas"); @@ -32,12 +45,14 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => { ctx = canvas.getContext("2d"); } + // === MAUSPOSITION FÜR EFFEKT === elem.addEventListener("mousemove", e => { const rect = elem.getBoundingClientRect(); cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2); cursorY = (e.clientY - rect.top) * 1.4 - (elem.offsetHeight * 0.2); }); + // === PARTIKEL ERZEUGEN === function addParticles() { const cx = cursorX || canvas.width / 2; const cy = cursorY || canvas.height / 2; @@ -57,6 +72,7 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => { } } + // === ZEICHNEN === function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); if (hovering) addParticles(); @@ -83,17 +99,17 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => { anim = requestAnimationFrame(draw); } - // HOVER START + // === HOVER START === elem.addEventListener("mouseenter", () => { setupCanvas(); hovering = true; cancelAnimationFrame(anim); draw(); - partnerElems.forEach(p => p.classList.add("hover-proxy")); + partners.forEach(p => p.classList.add("hover-proxy")); }); - // HOVER ENDE + // === HOVER ENDE === elem.addEventListener("mouseleave", () => { hovering = false; setTimeout(() => { @@ -104,6 +120,6 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => { } }, 300); - partnerElems.forEach(p => p.classList.remove("hover-proxy")); + partners.forEach(p => p.classList.remove("hover-proxy")); }); }); \ No newline at end of file