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

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

@@ -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");
@@ -78,8 +79,8 @@ document.querySelectorAll(".door, .openfield, .fluegel").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})`);
grad.addColorStop(0.3, `rgba(255, 240, 200, ${p.alpha * 0.8})`);
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);
@@ -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"));
});
});