adventskalender/shared/js/glitter.js aktualisiert
This commit is contained in:
@@ -4,34 +4,35 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
|
||||
let cursorX = 0, cursorY = 0;
|
||||
|
||||
const day = elem.dataset.day;
|
||||
let partner = null;
|
||||
let extraPartners = [];
|
||||
let partners = [];
|
||||
|
||||
// === Beziehungstabelle ===
|
||||
if (elem.classList.contains("door")) {
|
||||
partner = 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
|
||||
extraPartners = [
|
||||
document.querySelector(`.fluegel.left[data-day="${day}"]`),
|
||||
document.querySelector(`.fluegel.right[data-day="${day}"]`)
|
||||
].filter(Boolean);
|
||||
} else if (elem.classList.contains("fluegel")) {
|
||||
partners.push(document.querySelector(`.openfield[data-day="${day}"]`));
|
||||
}
|
||||
|
||||
if (elem.classList.contains("openfield")) {
|
||||
partners.push(document.querySelector(`.door[data-day="${day}"]`));
|
||||
partners.push(document.querySelector(`.fluegel.left[data-day="${day}"]`));
|
||||
partners.push(document.querySelector(`.fluegel.right[data-day="${day}"]`));
|
||||
}
|
||||
|
||||
if (elem.classList.contains("fluegel")) {
|
||||
const isLeft = elem.classList.contains("left");
|
||||
const isRight = elem.classList.contains("right");
|
||||
|
||||
// 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}"]`);
|
||||
if (isLeft)
|
||||
partners.push(document.querySelector(`.fluegel.right[data-day="${day}"]`));
|
||||
if (isRight)
|
||||
partners.push(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
|
||||
const openfield = document.querySelector(`.openfield[data-day="${day}"]`);
|
||||
if (openfield) extraPartners.push(openfield);
|
||||
}
|
||||
partners = partners.filter(Boolean); // ungültige raus
|
||||
|
||||
// === Canvas für Glitzer ===
|
||||
function setupCanvas() {
|
||||
if (canvas) return;
|
||||
canvas = document.createElement("canvas");
|
||||
@@ -97,16 +98,17 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
|
||||
anim = requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
// === Hover Start ===
|
||||
elem.addEventListener("mouseenter", () => {
|
||||
setupCanvas();
|
||||
hovering = true;
|
||||
cancelAnimationFrame(anim);
|
||||
draw();
|
||||
|
||||
if (partner) partner.classList.add("hover-proxy");
|
||||
extraPartners.forEach(p => p.classList.add("hover-proxy"));
|
||||
partners.forEach(p => p.classList.add("hover-proxy"));
|
||||
});
|
||||
|
||||
// === Hover Ende ===
|
||||
elem.addEventListener("mouseleave", () => {
|
||||
hovering = false;
|
||||
setTimeout(() => {
|
||||
@@ -117,7 +119,6 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
|
||||
}
|
||||
}, 300);
|
||||
|
||||
if (partner) partner.classList.remove("hover-proxy");
|
||||
extraPartners.forEach(p => p.classList.remove("hover-proxy"));
|
||||
partners.forEach(p => p.classList.remove("hover-proxy"));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user