adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,21 +1,17 @@
-// Bratonien Glitter Hover Effekt – strikt nach data-day gruppiert
+// Bratonien Glitter Hover Effekt – finale, symmetrische Version
 document.addEventListener("DOMContentLoaded", () => {
+  const allElements = document.querySelectorAll(".door, .fluegel, .openfield");
 
-  // Alle relevanten Elemente einsammeln
-  const elems = document.querySelectorAll(".door, .openfield, .fluegel");
-
-  // nach Tag gruppieren
-  const groupsByDay = {};
-  elems.forEach(el => {
+  // === Alle Elemente nach data-day gruppieren ===
+  const groups = {};
+  allElements.forEach(el => {
     const day = el.dataset.day;
-    if (!groupsByDay[day]) {
-      groupsByDay[day] = [];
-    }
-    groupsByDay[day].push(el);
+    if (!groups[day]) groups[day] = [];
+    groups[day].push(el);
   });
 
-  // für jede Tagesgruppe Hover + Glitzer setzen
-  Object.values(groupsByDay).forEach(group => {
+  // === Für jede Gruppe Hover-Effekt einrichten ===
+  Object.values(groups).forEach(group => {
     group.forEach(elem => {
       let canvas, ctx, particles = [], anim, hovering = false;
       let cursorX = 0, cursorY = 0;
@@ -85,18 +81,19 @@ document.addEventListener("DOMContentLoaded", () => {
         anim = requestAnimationFrame(draw);
       }
 
-      // HOVER START
+      // === Hover Start ===
       elem.addEventListener("mouseenter", () => {
         setupCanvas();
         hovering = true;
         cancelAnimationFrame(anim);
         draw();
 
-        // WICHTIG: alle Elemente dieses Tages bekommen hover-proxy
-        group.forEach(p => p.classList.add("hover-proxy"));
+        // Alle Elemente mit gleichem Tag (door, flügel, openfield)
+        // bekommen gleichzeitig hover-proxy
+        group.forEach(e => e.classList.add("hover-proxy"));
       });
 
-      // HOVER ENDE
+      // === Hover Ende ===
       elem.addEventListener("mouseleave", () => {
         hovering = false;
         setTimeout(() => {
@@ -107,7 +104,7 @@ document.addEventListener("DOMContentLoaded", () => {
           }
         }, 300);
 
-        group.forEach(p => p.classList.remove("hover-proxy"));
+        group.forEach(e => e.classList.remove("hover-proxy"));
       });
     });
   });