adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,46 +1,33 @@
-// shared/js/door-open.js
+// Bratonien Glitter Hover Effekt – für .door, .openfield und .fluegel
-document.querySelectorAll(".door, .fluegel").forEach(elem => {
+document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
-  elem.addEventListener("click", () => {
-    const day = elem.dataset.day;
-
-    // === 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 = {};
-document.querySelectorAll(".door, .fluegel, .openfield").forEach(elem => {
-  const day = elem.dataset.day;
-  if (!hoverGroups[day]) hoverGroups[day] = [];
-
-  hoverGroups[day].push(elem);
-});
-
-Object.values(hoverGroups).forEach(group => {
-  group.forEach(elem => {
   let canvas, ctx, particles = [], anim, hovering = false;
   let cursorX = 0, cursorY = 0;
 
+  const day = elem.dataset.day;
+  let partner = null;
+  let extraPartner = null; // neu: für das openfield bei flügeln
+
+  if (elem.classList.contains("door")) {
+    // door -> openfield
+    partner = document.querySelector(`.openfield[data-day="${day}"]`);
+  } else if (elem.classList.contains("openfield")) {
+    // openfield -> door
+    partner = document.querySelector(`.door[data-day="${day}"]`);
+  } else if (elem.classList.contains("fluegel")) {
+    const isLeft = elem.classList.contains("left");
+    const isRight = elem.classList.contains("right");
+
+    // fluegel -> 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}"]`);
+    }
+
+    // fluegel -> zugehöriges openfield (das hat vorher gefehlt!)
+    extraPartner = document.querySelector(`.openfield[data-day="${day}"]`);
+  }
+
   function setupCanvas() {
     if (canvas) return;
     canvas = document.createElement("canvas");
@@ -55,6 +42,7 @@ Object.values(hoverGroups).forEach(group => {
     ctx = canvas.getContext("2d");
   }
 
+  // Cursor in Element
   elem.addEventListener("mousemove", e => {
     const rect = elem.getBoundingClientRect();
     cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2);
@@ -87,6 +75,7 @@ Object.values(hoverGroups).forEach(group => {
     particles.forEach(p => {
       ctx.beginPath();
       const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3);
+      // Bratonien-Gold
       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");
@@ -106,17 +95,23 @@ 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"));
+    // wichtigsten Teil: bestehenden Hover-Style beim Partner auslösen
+    if (partner) {
+      partner.classList.add("hover-proxy");
+    }
+    if (extraPartner) {
+      extraPartner.classList.add("hover-proxy");
+    }
   });
 
-    // Hover end
+  // HOVER ENDE
   elem.addEventListener("mouseleave", () => {
     hovering = false;
     setTimeout(() => {
@@ -127,7 +122,11 @@ Object.values(hoverGroups).forEach(group => {
       }
     }, 300);
 
-      group.forEach(p => p.classList.remove("hover-proxy"));
+    if (partner) {
-    });
+      partner.classList.remove("hover-proxy");
+    }
+    if (extraPartner) {
+      extraPartner.classList.remove("hover-proxy");
+    }
   });
 });