Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adventskalender/shared/js/glitter.js aktualisiert

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-04 21:50:23 +00:00
parent d60e1b7e4c
commit 7946ba106d
1 changed files with 27 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
adventskalender/shared/js/glitter.js
View File

@@ -4,34 +4,35 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
let cursorX = 0, cursorY = 0; let cursorX = 0, cursorY = 0;
const day = elem.dataset.day; const day = elem.dataset.day;
let partner = null; let partners = [];
let extraPartners = [];
// === Beziehungstabelle ===
if (elem.classList.contains("door")) { if (elem.classList.contains("door")) {
partner = document.querySelector(`.openfield[data-day="${day}"]`); partners.push(document.querySelector(`.openfield[data-day="${day}"]`));
} else if (elem.classList.contains("openfield")) { }
partner = document.querySelector(`.door[data-day="${day}"]`);
// neu: openfield soll auch beide Flügel als Partner erkennen if (elem.classList.contains("openfield")) {
extraPartners = [ partners.push(document.querySelector(`.door[data-day="${day}"]`));
document.querySelector(`.fluegel.left[data-day="${day}"]`), partners.push(document.querySelector(`.fluegel.left[data-day="${day}"]`));
document.querySelector(`.fluegel.right[data-day="${day}"]`) partners.push(document.querySelector(`.fluegel.right[data-day="${day}"]`));
].filter(Boolean); }
} else if (elem.classList.contains("fluegel")) {
if (elem.classList.contains("fluegel")) {
const isLeft = elem.classList.contains("left"); const isLeft = elem.classList.contains("left");
const isRight = elem.classList.contains("right"); const isRight = elem.classList.contains("right");
// gegenüberliegender Flügel if (isLeft)
if (isLeft) { partners.push(document.querySelector(`.fluegel.right[data-day="${day}"]`));
partner = document.querySelector(`.fluegel.right[data-day="${day}"]`); if (isRight)
} else if (isRight) { partners.push(document.querySelector(`.fluegel.left[data-day="${day}"]`));
partner = document.querySelector(`.fluegel.left[data-day="${day}"]`);
// jeder Flügel verbindet sich zusätzlich mit dem openfield
partners.push(document.querySelector(`.openfield[data-day="${day}"]`));
} }
// plus openfield partners = partners.filter(Boolean); // ungültige raus
const openfield = document.querySelector(`.openfield[data-day="${day}"]`);
if (openfield) extraPartners.push(openfield);
}
// === Canvas für Glitzer ===
function setupCanvas() { function setupCanvas() {
if (canvas) return; if (canvas) return;
canvas = document.createElement("canvas"); canvas = document.createElement("canvas");
@@ -97,16 +98,17 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
anim = requestAnimationFrame(draw); anim = requestAnimationFrame(draw);
} }
// === Hover Start ===
elem.addEventListener("mouseenter", () => { elem.addEventListener("mouseenter", () => {
setupCanvas(); setupCanvas();
hovering = true; hovering = true;
cancelAnimationFrame(anim); cancelAnimationFrame(anim);
draw(); draw();
if (partner) partner.classList.add("hover-proxy"); partners.forEach(p => p.classList.add("hover-proxy"));
extraPartners.forEach(p => p.classList.add("hover-proxy"));
}); });
// === Hover Ende ===
elem.addEventListener("mouseleave", () => { elem.addEventListener("mouseleave", () => {
hovering = false; hovering = false;
setTimeout(() => { setTimeout(() => {
@@ -117,7 +119,6 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
} }
}, 300); }, 300);
if (partner) partner.classList.remove("hover-proxy"); partners.forEach(p => p.classList.remove("hover-proxy"));
extraPartners.forEach(p => p.classList.remove("hover-proxy"));
}); });
}); });