adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,46 +1,21 @@
-// shared/js/door-open.js
-document.querySelectorAll(".door, .fluegel").forEach(elem => {
-  elem.addEventListener("click", () => {
-    const day = elem.dataset.day;
+// Bratonien Glitter Hover Effekt – final, voll bidirektional
+document.addEventListener("DOMContentLoaded", () => {
 
-    // === EINZELTÜR ===
-    if (elem.classList.contains("door")) {
-      if (elem.classList.contains("open")) return;
-      elem.classList.add("open");
-
-      const openfield = document.querySelector(`.openfield[data-day="${day}"]`);
-      if (openfield) openfield.classList.add("open");
-      return;
-    }
-
-    // === FLÜGEL ===
-    if (elem.classList.contains("fluegel")) {
-      const left = document.querySelector(`.fluegel.left[data-day="${day}"]`);
-      const right = document.querySelector(`.fluegel.right[data-day="${day}"]`);
-
-      // bereits geöffnet?
-      if (left.classList.contains("rota") && right.classList.contains("rota")) return;
-
-      if (left)  left.classList.add("rota");
-      if (right) right.classList.add("rota");
-    }
-  });
-});
-
-// === HOVER LOGIK FÜR DOOR, FLÜGEL UND OPENFIELD ===
-const hoverGroups = {};
+  // === 1. Elemente nach Tagen gruppieren ===
+  const groups = {};
   document.querySelectorAll(".door, .fluegel, .openfield").forEach(elem => {
     const day = elem.dataset.day;
-  if (!hoverGroups[day]) hoverGroups[day] = [];
-
-  hoverGroups[day].push(elem);
+    if (!groups[day]) groups[day] = [];
+    groups[day].push(elem);
   });
 
-Object.values(hoverGroups).forEach(group => {
-  group.forEach(elem => {
+  // === 2. Hoverlogik für jede Gruppe ===
+  Object.values(groups).forEach(elems => {
+    elems.forEach(elem => {
       let canvas, ctx, particles = [], anim, hovering = false;
       let cursorX = 0, cursorY = 0;
 
+      // Canvas für Glitzereffekt
       function setupCanvas() {
         if (canvas) return;
         canvas = document.createElement("canvas");
@@ -55,12 +30,14 @@ Object.values(hoverGroups).forEach(group => {
         ctx = canvas.getContext("2d");
       }
 
+      // Cursor verfolgen (für Partikel)
       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 hinzufügen
       function addParticles() {
         const cx = cursorX || canvas.width / 2;
         const cy = cursorY || canvas.height / 2;
@@ -80,6 +57,7 @@ Object.values(hoverGroups).forEach(group => {
         }
       }
 
+      // Zeichnen
       function draw() {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
         if (hovering) addParticles();
@@ -106,28 +84,30 @@ Object.values(hoverGroups).forEach(group => {
         anim = requestAnimationFrame(draw);
       }
 
-    // Hover start
+      // === HOVER START ===
       elem.addEventListener("mouseenter", () => {
         setupCanvas();
         hovering = true;
         cancelAnimationFrame(anim);
         draw();
 
-      group.forEach(p => p.classList.add("hover-proxy"));
+        // Alle Elemente des gleichen Tages gleichzeitig hervorheben
+        elems.forEach(el => el.classList.add("hover-proxy"));
       });
 
-    // Hover end
+      // === 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);
 
-      group.forEach(p => p.classList.remove("hover-proxy"));
+        elems.forEach(el => el.classList.remove("hover-proxy"));
+      });
     });
   });
 });