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:46:31 +00:00
parent 1cc300626b
commit d60e1b7e4c
1 changed files with 14 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,27 +5,31 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
const day = elem.dataset.day;
let partner = null;
let extraPartner = null; // neu: für das openfield bei flügeln
let extraPartners = [];
if (elem.classList.contains("door")) {
// door -> openfield
partner = document.querySelector(`.openfield[data-day="${day}"]`);
} else if (elem.classList.contains("openfield")) {
// openfield -> door
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")) {
const isLeft = elem.classList.contains("left");
const isRight = elem.classList.contains("right");
// fluegel -> gegenüberliegender flügel
// 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}"]`);
}
// fluegel -> zugehöriges openfield (das hat vorher gefehlt!)
extraPartner = document.querySelector(`.openfield[data-day="${day}"]`);
// plus openfield
const openfield = document.querySelector(`.openfield[data-day="${day}"]`);
if (openfield) extraPartners.push(openfield);
}
function setupCanvas() {
@@ -42,7 +46,6 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
ctx = canvas.getContext("2d");
}
// Cursor in Element
elem.addEventListener("mousemove", e => {
const rect = elem.getBoundingClientRect();
cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2);
@@ -75,7 +78,6 @@ 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);
// 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");
@@ -95,23 +97,16 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
anim = requestAnimationFrame(draw);
}
// HOVER START
elem.addEventListener("mouseenter", () => {
setupCanvas();
hovering = true;
cancelAnimationFrame(anim);
draw();
// wichtigsten Teil: bestehenden Hover-Style beim Partner auslösen
if (partner) {
partner.classList.add("hover-proxy");
}
if (extraPartner) {
extraPartner.classList.add("hover-proxy");
}
if (partner) partner.classList.add("hover-proxy");
extraPartners.forEach(p => p.classList.add("hover-proxy"));
});
// HOVER ENDE
elem.addEventListener("mouseleave", () => {
hovering = false;
setTimeout(() => {
@@ -122,11 +117,7 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
}
}, 300);
if (partner) {
partner.classList.remove("hover-proxy");
}
if (extraPartner) {
extraPartner.classList.remove("hover-proxy");
}
if (partner) partner.classList.remove("hover-proxy");
extraPartners.forEach(p => p.classList.remove("hover-proxy"));
});
});