adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,114 +1,133 @@
-// Bratonien Glitter Hover Effekt – final, voll bidirektional
+// shared/js/door-open.js
-document.addEventListener("DOMContentLoaded", () => {
+document.querySelectorAll(".door, .fluegel").forEach(elem => {
-
+  elem.addEventListener("click", () => {
-  // === 1. Elemente nach Tagen gruppieren ===
-  const groups = {};
-
-  document.querySelectorAll(".door, .fluegel, .openfield").forEach(elem => {
     const day = elem.dataset.day;
-    if (!groups[day]) groups[day] = [];
+
-    groups[day].push(elem);
+    // === 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");
+    }
   });
+});
 
-  // === 2. Hoverlogik für jede Gruppe ===
+// === HOVER LOGIK FÜR DOOR, FLÜGEL UND OPENFIELD ===
-  Object.values(groups).forEach(elems => {
+const hoverGroups = {};
-    elems.forEach(elem => {
+document.querySelectorAll(".door, .fluegel, .openfield").forEach(elem => {
-      let canvas, ctx, particles = [], anim, hovering = false;
+  const day = elem.dataset.day;
-      let cursorX = 0, cursorY = 0;
+  if (!hoverGroups[day]) hoverGroups[day] = [];
 
-      // Canvas für Glitzereffekt
+  hoverGroups[day].push(elem);
-      function setupCanvas() {
+});
-        if (canvas) return;
-        canvas = document.createElement("canvas");
-        canvas.width = elem.offsetWidth * 1.4;
-        canvas.height = elem.offsetHeight * 1.4;
-        canvas.style.position = "absolute";
-        canvas.style.top = "-20%";
-        canvas.style.left = "-20%";
-        canvas.style.pointerEvents = "none";
-        canvas.style.zIndex = "10";
-        elem.appendChild(canvas);
-        ctx = canvas.getContext("2d");
-      }
 
-      // Cursor verfolgen (für Partikel)
+Object.values(hoverGroups).forEach(group => {
-      elem.addEventListener("mousemove", e => {
+  group.forEach(elem => {
-        const rect = elem.getBoundingClientRect();
+    let canvas, ctx, particles = [], anim, hovering = false;
-        cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2);
+    let cursorX = 0, cursorY = 0;
-        cursorY = (e.clientY - rect.top) * 1.4 - (elem.offsetHeight * 0.2);
-      });
 
-      // Partikel hinzufügen
+    function setupCanvas() {
-      function addParticles() {
+      if (canvas) return;
-        const cx = cursorX || canvas.width / 2;
+      canvas = document.createElement("canvas");
-        const cy = cursorY || canvas.height / 2;
+      canvas.width = elem.offsetWidth * 1.4;
-        for (let i = 0; i < 4; i++) {
+      canvas.height = elem.offsetHeight * 1.4;
-          const angle = Math.random() * Math.PI * 2;
+      canvas.style.position = "absolute";
-          const speed = Math.random() * 1.5 + 0.3;
+      canvas.style.top = "-20%";
-          particles.push({
+      canvas.style.left = "-20%";
-            x: cx,
+      canvas.style.pointerEvents = "none";
-            y: cy,
+      canvas.style.zIndex = "10";
-            r: Math.random() * 1.3 + 0.2,
+      elem.appendChild(canvas);
-            alpha: Math.random() * 0.7 + 0.3,
+      ctx = canvas.getContext("2d");
-            vx: Math.cos(angle) * speed,
+    }
-            vy: Math.sin(angle) * speed,
-            life: Math.random() * 120 + 60,
-            decay: Math.random() * 0.015 + 0.008
-          });
-        }
-      }
 
-      // Zeichnen
+    elem.addEventListener("mousemove", e => {
-      function draw() {
+      const rect = elem.getBoundingClientRect();
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2);
-        if (hovering) addParticles();
+      cursorY = (e.clientY - rect.top) * 1.4 - (elem.offsetHeight * 0.2);
+    });
 
-        particles.forEach(p => {
+    function addParticles() {
-          ctx.beginPath();
+      const cx = cursorX || canvas.width / 2;
-          const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3);
+      const cy = cursorY || canvas.height / 2;
-          grad.addColorStop(0, `rgba(200, 170, 73, ${p.alpha})`);
+      for (let i = 0; i < 4; i++) {
-          grad.addColorStop(0.3, `rgba(255, 240, 200, ${p.alpha * 0.8})`);
+        const angle = Math.random() * Math.PI * 2;
-          grad.addColorStop(1, "transparent");
+        const speed = Math.random() * 1.5 + 0.3;
-          ctx.fillStyle = grad;
+        particles.push({
-          ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
+          x: cx,
-          ctx.fill();
+          y: cy,
-
+          r: Math.random() * 1.3 + 0.2,
-          p.x += p.vx;
+          alpha: Math.random() * 0.7 + 0.3,
-          p.y += p.vy + 0.05;
+          vx: Math.cos(angle) * speed,
-          p.vx *= 0.98;
+          vy: Math.sin(angle) * speed,
-          p.vy *= 0.98;
+          life: Math.random() * 120 + 60,
-          p.alpha -= p.decay;
+          decay: Math.random() * 0.015 + 0.008
-          p.life--;
         });
-
-        particles = particles.filter(p => p.life > 0 && p.alpha > 0);
-        anim = requestAnimationFrame(draw);
       }
+    }
 
-      // === HOVER START ===
+    function draw() {
-      elem.addEventListener("mouseenter", () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
-        setupCanvas();
+      if (hovering) addParticles();
-        hovering = true;
-        cancelAnimationFrame(anim);
-        draw();
 
-        // Alle Elemente des gleichen Tages gleichzeitig hervorheben
+      particles.forEach(p => {
-        elems.forEach(el => el.classList.add("hover-proxy"));
+        ctx.beginPath();
+        const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3);
+        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");
+        ctx.fillStyle = grad;
+        ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
+        ctx.fill();
+
+        p.x += p.vx;
+        p.y += p.vy + 0.05;
+        p.vx *= 0.98;
+        p.vy *= 0.98;
+        p.alpha -= p.decay;
+        p.life--;
       });
 
-      // === HOVER ENDE ===
+      particles = particles.filter(p => p.life > 0 && p.alpha > 0);
-      elem.addEventListener("mouseleave", () => {
+      anim = requestAnimationFrame(draw);
-        hovering = false;
+    }
-        setTimeout(() => {
-          if (!hovering) {
-            cancelAnimationFrame(anim);
-            particles = [];
-            if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
-          }
-        }, 300);
 
-        elems.forEach(el => el.classList.remove("hover-proxy"));
+    // Hover start
-      });
+    elem.addEventListener("mouseenter", () => {
+      setupCanvas();
+      hovering = true;
+      cancelAnimationFrame(anim);
+      draw();
+
+      group.forEach(p => p.classList.add("hover-proxy"));
+    });
+
+    // Hover end
+    elem.addEventListener("mouseleave", () => {
+      hovering = false;
+      setTimeout(() => {
+        if (!hovering) {
+          cancelAnimationFrame(anim);
+          particles = [];
+          ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+      }, 300);
+
+      group.forEach(p => p.classList.remove("hover-proxy"));
     });
   });
 });