adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,36 +1,46 @@
-// Bratonien Glitter Hover Effekt – für .door, .openfield und .fluegel
-document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
+// shared/js/door-open.js
+document.querySelectorAll(".door, .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;
-  const partners = new Set();
-
-  // === PARTNERLOGIK ===
-  if (elem.classList.contains("door")) {
-    const of = document.querySelector(`.openfield[data-day="${day}"]`);
-    if (of) partners.add(of);
-  }
-
-  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");
@@ -45,14 +55,12 @@ 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;
@@ -72,7 +80,6 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
       }
     }
 
-  // === ZEICHNEN ===
     function draw() {
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       if (hovering) addParticles();
@@ -99,17 +106,17 @@ 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"));
+      group.forEach(p => p.classList.add("hover-proxy"));
     });
 
-  // === HOVER ENDE ===
+    // Hover end
     elem.addEventListener("mouseleave", () => {
       hovering = false;
       setTimeout(() => {
@@ -120,6 +127,7 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
         }
       }, 300);
 
-    partners.forEach(p => p.classList.remove("hover-proxy"));
+      group.forEach(p => p.classList.remove("hover-proxy"));
+    });
   });
 });