diff --git a/adventskalender/shared/js/glitter.js b/adventskalender/shared/js/glitter.js index a77871f..19e4ba9 100644 --- a/adventskalender/shared/js/glitter.js +++ b/adventskalender/shared/js/glitter.js @@ -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}"]`)); - // plus openfield - const openfield = document.querySelector(`.openfield[data-day="${day}"]`); - if (openfield) extraPartners.push(openfield); + // jeder Flügel verbindet sich zusätzlich mit dem openfield + partners.push(document.querySelector(`.openfield[data-day="${day}"]`)); } + partners = partners.filter(Boolean); // ungültige raus + + // === Canvas für Glitzer === function setupCanvas() { if (canvas) return; canvas = document.createElement("canvas"); @@ -78,8 +79,8 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => { particles.forEach(p => { ctx.beginPath(); const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3); - grad.addColorStop(0, `rgba(200, 170, 73, ${p.alpha})`); - grad.addColorStop(0.3, `rgba(255, 240, 200, ${p.alpha * 0.8})`); + grad.addColorStop(0, `rgba(200,170,73,${p.alpha})`); + grad.addColorStop(0.3, `rgba(255,240,200,${p.alpha * 0.8})`); grad.addColorStop(1, "transparent"); ctx.fillStyle = grad; ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2); @@ -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")); }); }); \ No newline at end of file