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:24:26 +00:00
parent 195a5c16d7
commit 08f621b0f7
1 changed files with 30 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,20 +4,33 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
let cursorX = 0, cursorY = 0;
const day = elem.dataset.day;
const partnerElems = new Set();
const partners = new Set();
// Partner zuweisen
// === PARTNERLOGIK ===
if (elem.classList.contains("door")) {
document.querySelectorAll(`.openfield[data-day="${day}"]`).forEach(e => partnerElems.add(e));
}
if (elem.classList.contains("openfield")) {
document.querySelectorAll(`.door[data-day="${day}"], .fluegel[data-day="${day}"]`).forEach(e => partnerElems.add(e));
}
if (elem.classList.contains("fluegel")) {
document.querySelectorAll(`.fluegel[data-day="${day}"]:not(.${elem.classList.contains("left") ? "left" : "right"})`).forEach(e => partnerElems.add(e));
document.querySelectorAll(`.openfield[data-day="${day}"]`).forEach(e => partnerElems.add(e));
const of = document.querySelector(`.openfield[data-day="${day}"]`);
if (of) partners.add(of);
}
else if (elem.classList.contains("openfield")) {
const door = document.querySelector(`.door[data-day="${day}"]`);
if (door) partners.add(door);
const left = document.querySelector(`.fluegel.left[data-day="${day}"]`);
const right = document.querySelector(`.fluegel.right[data-day="${day}"]`);
if (left) partners.add(left);
if (right) partners.add(right);
}
else if (elem.classList.contains("fluegel")) {
const opposite = document.querySelector(`.fluegel.${elem.classList.contains("left") ? "right" : "left"}[data-day="${day}"]`);
if (opposite) partners.add(opposite);
const of = document.querySelector(`.openfield[data-day="${day}"]`);
if (of) partners.add(of);
}
// === CANVAS SETUP ===
function setupCanvas() {
if (canvas) return;
canvas = document.createElement("canvas");
@@ -32,12 +45,14 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
ctx = canvas.getContext("2d");
}
// === MAUSPOSITION FÜR EFFEKT ===
elem.addEventListener("mousemove", e => {
const rect = elem.getBoundingClientRect();
cursorX = (e.clientX - rect.left) * 1.4 - (elem.offsetWidth * 0.2);
cursorY = (e.clientY - rect.top) * 1.4 - (elem.offsetHeight * 0.2);
});
// === PARTIKEL ERZEUGEN ===
function addParticles() {
const cx = cursorX || canvas.width / 2;
const cy = cursorY || canvas.height / 2;
@@ -57,6 +72,7 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
}
}
// === ZEICHNEN ===
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
if (hovering) addParticles();
@@ -83,17 +99,17 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
anim = requestAnimationFrame(draw);
}
// HOVER START
// === HOVER START ===
elem.addEventListener("mouseenter", () => {
setupCanvas();
hovering = true;
cancelAnimationFrame(anim);
draw();
partnerElems.forEach(p => p.classList.add("hover-proxy"));
partners.forEach(p => p.classList.add("hover-proxy"));
});
// HOVER ENDE
// === HOVER ENDE ===
elem.addEventListener("mouseleave", () => {
hovering = false;
setTimeout(() => {
@@ -104,6 +120,6 @@ document.querySelectorAll(".door, .openfield, .fluegel").forEach(elem => {
}
}, 300);
partnerElems.forEach(p => p.classList.remove("hover-proxy"));
partners.forEach(p => p.classList.remove("hover-proxy"));
});
});