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; 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}"]`);
}
// plus openfield // jeder Flügel verbindet sich zusätzlich mit dem openfield
const openfield = document.querySelector(`.openfield[data-day="${day}"]`); partners.push(document.querySelector(`.openfield[data-day="${day}"]`));
if (openfield) extraPartners.push(openfield);
} }
partners = partners.filter(Boolean); // ungültige raus
// === Canvas für Glitzer ===
function setupCanvas() { function setupCanvas() {
if (canvas) return; if (canvas) return;
canvas = document.createElement("canvas"); canvas = document.createElement("canvas");
@@ -78,8 +79,8 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
particles.forEach(p => { particles.forEach(p => {
ctx.beginPath(); ctx.beginPath();
const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3); 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, `rgba(200,170,73,${p.alpha})`);
grad.addColorStop(0.3, `rgba(255, 240, 200, ${p.alpha * 0.8})`); grad.addColorStop(0.3, `rgba(255,240,200,${p.alpha * 0.8})`);
grad.addColorStop(1, "transparent"); grad.addColorStop(1, "transparent");
ctx.fillStyle = grad; ctx.fillStyle = grad;
ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2); 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); 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"));
}); });
}); });