adventskalender/shared/js/glitter.js aktualisiert

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));
+    const of = document.querySelector(`.openfield[data-day="${day}"]`);
-  }
+    if (of) partners.add(of);
-  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));
   }
 
+  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"));
   });
 });