adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,38 +1,25 @@
-// Bratonien Glitter Hover Effekt – für .door, .openfield und .fluegel
-document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
+// Bratonien Glitter Hover Effekt – strikt nach data-day gruppiert
+document.addEventListener("DOMContentLoaded", () => {
+
+  // Alle relevanten Elemente einsammeln
+  const elems = document.querySelectorAll(".door, .openfield, .fluegel");
+
+  // nach Tag gruppieren
+  const groupsByDay = {};
+  elems.forEach(el => {
+    const day = el.dataset.day;
+    if (!groupsByDay[day]) {
+      groupsByDay[day] = [];
+    }
+    groupsByDay[day].push(el);
+  });
+
+  // für jede Tagesgruppe Hover + Glitzer setzen
+  Object.values(groupsByDay).forEach(group => {
+    group.forEach(elem => {
       let canvas, ctx, particles = [], anim, hovering = false;
       let cursorX = 0, cursorY = 0;
 
-  const day = elem.dataset.day;
-  let partners = [];
-
-  // === Beziehungstabelle ===
-  if (elem.classList.contains("door")) {
-    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");
-
-    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}"]`));
-  }
-
-  partners = partners.filter(Boolean); // ungültige raus
-
-  // === Canvas für Glitzer ===
       function setupCanvas() {
         if (canvas) return;
         canvas = document.createElement("canvas");
@@ -79,8 +66,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);
@@ -98,27 +85,30 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
         anim = requestAnimationFrame(draw);
       }
 
-  // === Hover Start ===
+      // HOVER START
       elem.addEventListener("mouseenter", () => {
         setupCanvas();
         hovering = true;
         cancelAnimationFrame(anim);
         draw();
 
-    partners.forEach(p => p.classList.add("hover-proxy"));
+        // WICHTIG: alle Elemente dieses Tages bekommen hover-proxy
+        group.forEach(p => p.classList.add("hover-proxy"));
       });
 
-  // === Hover Ende ===
+      // HOVER ENDE
       elem.addEventListener("mouseleave", () => {
         hovering = false;
         setTimeout(() => {
           if (!hovering) {
             cancelAnimationFrame(anim);
             particles = [];
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+            if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
           }
         }, 300);
 
-    partners.forEach(p => p.classList.remove("hover-proxy"));
+        group.forEach(p => p.classList.remove("hover-proxy"));
+      });
+    });
   });
 });