adventskalender/shared/js/glitter.js aktualisiert

adventskalender/shared/js/glitter.js

@@ -1,9 +1,15 @@
-// Bratonien Glitter Hover Effekt – Explosion folgt dem Cursor
+// Bratonien Glitter Hover Effekt – für .door und .openfield
 document.querySelectorAll(".door, .openfield").forEach(elem => {
   let canvas, ctx, particles = [], anim, hovering = false;
   let cursorX = 0, cursorY = 0;
 
-  // Canvas vorbereiten
+  // Partner ermitteln (Tür ↔ offenes Feld) über data-day
+  const isDoor = elem.classList.contains("door");
+  const day = elem.dataset.day;
+  const partner = document.querySelector(
+    isDoor ? `.openfield[data-day="${day}"]` : `.door[data-day="${day}"]`
+  );
+
   function setupCanvas() {
     if (canvas) return;
     canvas = document.createElement("canvas");
@@ -18,14 +24,13 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
     ctx = canvas.getContext("2d");
   }
 
-  // Cursorposition innerhalb des Elements erfassen
+  // Cursor in Element
   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 (Explosion folgt Cursor)
   function addParticles() {
     const cx = cursorX || canvas.width / 2;
     const cy = cursorY || canvas.height / 2;
@@ -45,7 +50,6 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
     }
   }
 
-  // Zeichnen
   function draw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     if (hovering) addParticles();
@@ -53,14 +57,14 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
     particles.forEach(p => {
       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})`);      // CI-Gold
+      // 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");
       ctx.fillStyle = grad;
       ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
       ctx.fill();
 
-      // Bewegung
       p.x += p.vx;
       p.y += p.vy + 0.05;
       p.vx *= 0.98;
@@ -73,15 +77,21 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
     anim = requestAnimationFrame(draw);
   }
 
-  // Hover starten
+  // HOVER START
   elem.addEventListener("mouseenter", () => {
     setupCanvas();
     hovering = true;
     cancelAnimationFrame(anim);
     draw();
+
+    // wichtigen Teil: bestehenden Hover-Style beim Partner auslösen
+    if (partner) {
+      // wir setzen KEINE neuen Styles, nur die Trigger-Klasse
+      partner.classList.add("hover-proxy");
+    }
   });
 
-  // Hover beenden
+  // HOVER ENDE
   elem.addEventListener("mouseleave", () => {
     hovering = false;
     setTimeout(() => {
@@ -91,5 +101,9 @@ document.querySelectorAll(".door, .openfield").forEach(elem => {
         ctx.clearRect(0, 0, canvas.width, canvas.height);
       }
     }, 300);
+
+    if (partner) {
+      partner.classList.remove("hover-proxy");
+    }
   });
 });