chris/toadstoolTally
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Boost burst particle counts

Browse Source
This commit is contained in:
chris 2025-12-10 15:50:41 -05:00
parent bd4cfe9dfe
commit 99c940af60
2 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
assets/app.js
View File

@ -317,7 +317,7 @@ function exportSelected() {
}
// --- Firefly Animation ---
function spawnFirefly({ markActive = false, source = 'ambient' } = {}) {
function spawnFirefly({ markActive = false, source = 'ambient', side = 'left' } = {}) {
const wrap = document.createElement('div');
wrap.className = 'firefly-wrap';
const el = document.createElement('div');
@ -325,9 +325,35 @@ function spawnFirefly({ markActive = false, source = 'ambient' } = {}) {
const top = Math.random() * 55 + 5; // 5vh–60vh
const scale = 0.9 + Math.random() * 0.4;
const duration = 12 + Math.random() * 8; // 12–20s
wrap.style.top = `${top}vh`;
const chosenSide = side === 'any' ? ['left','right','top','bottom'][Math.floor(Math.random()*4)] : side;
let startX = '-10vw', endX = '110vw', startY = `${top}vh`, endY = `${top + (Math.random()*12 - 6)}vh`;
let midX = '25vw', midY = `${top - 6}vh`, mid2X = '65vw', mid2Y = `${top + 6}vh`;
if (chosenSide === 'right') {
startX = '110vw'; endX = '-10vw';
midX = '-25vw'; mid2X = '-65vw';
} else if (chosenSide === 'top') {
const x = Math.random()*80 + 10;
startX = `${x}vw`; endX = `${x + (Math.random()*20 - 10)}vw`;
startY = '-12vh'; endY = '110vh';
midX = `${x + 8}vw`; mid2X = `${x - 8}vw`;
midY = '25vh'; mid2Y = '65vh';
} else if (chosenSide === 'bottom') {
const x = Math.random()*80 + 10;
startX = `${x}vw`; endX = `${x + (Math.random()*20 - 10)}vw`;
startY = '110vh'; endY = '-12vh';
midX = `${x - 8}vw`; mid2X = `${x + 8}vw`;
midY = '75vh'; mid2Y = '35vh';
}
wrap.style.setProperty('--fly-scale', scale);
wrap.style.setProperty('--fly-duration', `${duration}s`);
wrap.style.setProperty('--fly-start-x', startX);
wrap.style.setProperty('--fly-start-y', startY);
wrap.style.setProperty('--fly-mid-x', midX);
wrap.style.setProperty('--fly-mid-y', midY);
wrap.style.setProperty('--fly-mid2-x', mid2X);
wrap.style.setProperty('--fly-mid2-y', mid2Y);
wrap.style.setProperty('--fly-end-x', endX);
wrap.style.setProperty('--fly-end-y', endY);
if (markActive) fireflyActive = true;
wrap.addEventListener('animationend', (e) => {
if (e.animationName !== 'fireflyGlide') return;
@ -410,7 +436,7 @@ if (logoIcon) {
logoIcon.addEventListener('click', () => {
if (!animationsEnabled || fireflyActive) return;
if (isDarkMode) {
spawnFirefly({ markActive: true, source: 'logo' });
spawnFirefly({ markActive: true, source: 'logo', side: 'any' });
} else {
spawnSeed({ markActive: true, source: 'logo' });
}
@ -450,8 +476,8 @@ if (titleEl) {
function triggerBurst() {
if (!animationsEnabled) return;
const burstCount = 8;
const spawner = isDarkMode ? spawnFirefly : spawnSeed;
const burstCount = isDarkMode ? 24 : 18;
const spawner = isDarkMode ? (opts) => spawnFirefly({ ...opts, side: 'any' }) : spawnSeed;
for (let i = 0; i < burstCount; i++) {
const jitter = Math.random() * 200;
setTimeout(() => spawner({ source: 'burst' }), i * 140 + jitter);

9
assets/style.css
View File

@ -539,7 +539,6 @@ button:active { transform: scale(0.97); box-shadow: none; }
.firefly-wrap {
position: fixed;
left: -12vw;
width: 28px;
height: 28px;
animation: fireflyGlide var(--fly-duration, 14s) linear forwards;
@ -575,12 +574,12 @@ button:active { transform: scale(0.97); box-shadow: none; }
animation: seedDrift 2.6s ease-in-out infinite alternate, seedFlicker 1.4s ease-in-out infinite alternate;
}
@keyframes fireflyGlide {
0% { transform: translate3d(-10vw, 0, 0) scale(var(--fly-scale, 1)); opacity: 0; }
0% { transform: translate3d(var(--fly-start-x, -10vw), var(--fly-start-y, 0), 0) scale(var(--fly-scale, 1)); opacity: 0; }
12% { opacity: 0.55; }
35% { transform: translate3d(25vw, -6px, 0) scale(var(--fly-scale, 1)); opacity: 0.65; }
65% { transform: translate3d(65vw, 6px, 0) scale(var(--fly-scale, 1)); opacity: 0.55; }
35% { transform: translate3d(var(--fly-mid-x, 25vw), var(--fly-mid-y, -6px), 0) scale(var(--fly-scale, 1)); opacity: 0.65; }
65% { transform: translate3d(var(--fly-mid2-x, 65vw), var(--fly-mid2-y, 6px), 0) scale(var(--fly-scale, 1)); opacity: 0.55; }
90% { opacity: 0.35; }
100% { transform: translate3d(110vw, 0, 0) scale(var(--fly-scale, 1)); opacity: 0; }
100% { transform: translate3d(var(--fly-end-x, 110vw), var(--fly-end-y, 0), 0) scale(var(--fly-scale, 1)); opacity: 0; }
}
@keyframes fireflyFlutter {
0% { transform: translateY(-2px) translateX(-3px) scale(0.95); }