Refactor spring and carnival animations, enhance configuration options, and improve asset management

2026-02-21 04:31:15 +01:00
parent cde5201991
commit 4e8a37540f
6 changed files with 460 additions and 90 deletions
--- a/Jellyfin.Plugin.Seasonals/Web/spring.js
+++ b/Jellyfin.Plugin.Seasonals/Web/spring.js
@@ -1,13 +1,28 @@
 const config = window.SeasonalsPluginConfig?.Spring || {};

-const spring = config.EnableSpring !== undefined ? config.EnableSpring : true; 
-const pollenCount = config.PollenCount || 15;
-const sunbeamCount = config.SunbeamCount || 5;
+const spring = config.EnableSpring !== undefined ? config.EnableSpring : true; // Enable/disable spring
+const pollenCount = config.PollenCount || 30; // Number of pollen particles
+const sunbeamCount = config.SunbeamCount || 5; // Number of sunbeams
+const enableSunbeams = config.EnableSpringSunbeams !== undefined ? config.EnableSpringSunbeams : true; // Enable/disable sunbeams
+const birdCount = config.BirdCount !== undefined ? config.BirdCount : 3; // Number of birds
+const butterflyCount = config.ButterflyCount !== undefined ? config.ButterflyCount : 4; // Number of butterflies
+const beeCount = config.BeeCount !== undefined ? config.BeeCount : 1; // Number of bees
+const ladybugCount = config.LadybugCount !== undefined ? config.LadybugCount : 1; // Number of ladybugs
+const randomSpring = config.EnableRandomSpring !== undefined ? config.EnableRandomSpring : true; // Enable random spring objects

-const randomSpring = config.EnableRandomSpring !== undefined ? config.EnableRandomSpring : true; 
-const randomSpringMobile = config.EnableRandomSpringMobile !== undefined ? config.EnableRandomSpringMobile : false; 
-const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; 
-const enableSunbeams = config.EnableSpringSunbeams !== undefined ? config.EnableSpringSunbeams : true;
+const birdImages = [
+    '../Seasonals/Resources/spring_assets/Bird_1.gif',
+    '../Seasonals/Resources/spring_assets/Bird_2.gif',
+    '../Seasonals/Resources/spring_assets/Bird_3.gif'
+];
+
+const butterflyImages = [
+    '../Seasonals/Resources/spring_assets/Butterfly_1.gif',
+    '../Seasonals/Resources/spring_assets/Butterfly_2.gif'
+];
+
+const beeImage = '../Seasonals/Resources/spring_assets/Bee.gif';
+const ladybugImage = '../Seasonals/Resources/spring_assets/ladybug.gif';

 let msgPrinted = false;

@@ -43,11 +58,13 @@ function createPollen(container) {
    const pollen = document.createElement('div');
    pollen.classList.add('spring-pollen');
    
+    // MARK: POLLEN START VERTICAL POSITION (in %)
    const startY = Math.random() * 60 + 20; 
    pollen.style.top = `${startY}%`;
    pollen.style.left = `${Math.random() * 100}%`;
    
-    const size = Math.random() * 3 + 1; 
+    // MARK: POLLEN SIZE
+    const size = Math.random() * 3 + 1; // 1-4px
    pollen.style.width = `${size}px`;
    pollen.style.height = `${size}px`;
    
@@ -58,27 +75,40 @@ function createPollen(container) {
    container.appendChild(pollen);
 }

-function createSunbeam(container) {
+function spawnSunbeamGroup(container, count) {
    if (!enableSunbeams) return;

-    const beam = document.createElement('div');
-    beam.classList.add('spring-sunbeam');
-    
-    const left = Math.random() * 100; // Spread across full width
-    beam.style.left = `${left}%`;
-    
-    // Thinner beams as requested
-    const width = Math.random() * 20 + 10; // 10-30px wide
-    beam.style.width = `${width}px`;
-    
-    const rotate = Math.random() * 20 - 10 + 45; 
-    beam.style.transform = `rotate(${rotate}deg)`;
-    
-    const duration = Math.random() * 10 + 10; 
-    beam.style.animationDuration = `${duration}s`;
-    beam.style.animationDelay = `-${Math.random() * 10}s`;
-    
-    container.appendChild(beam);
+    const rotate = Math.random() * 30 - 15 + 45; 
+    let beamsActive = count;
+
+    for (let i = 0; i < count; i++) {
+        const beam = document.createElement('div');
+        beam.classList.add('spring-sunbeam');
+        
+        const left = Math.random() * 100;
+        beam.style.left = `${left}%`;
+        
+        // MARK: SUNBEAM WIDTH (in px)
+        const width = Math.random() * 5 + 15; // 5-20px wide
+        beam.style.width = `${width}px`;
+        
+        beam.style.setProperty('--beam-rotation', `${rotate}deg`);
+        
+        const duration = Math.random() * 7 + 8; // 8-15s
+        beam.style.animation = `spring-beam-pulse ${duration}s ease-in-out forwards`;
+        
+        beam.style.animationDelay = `${Math.random() * 3}s`;
+        
+        beam.addEventListener('animationend', () => {
+            beam.remove();
+            beamsActive--;
+            if (beamsActive === 0) {
+                spawnSunbeamGroup(container, count);
+            }
+        });
+        
+        container.appendChild(beam);
+    }
 }

 function createGrass(container) {
@@ -89,15 +119,14 @@ function createGrass(container) {
        container.appendChild(grassContainer);
    }
    
-    // Clear existing grass if any (for resize)
    grassContainer.innerHTML = '';
    
-    // More grass: 1 blade every 3px (was 15px)
    const bladeCount = window.innerWidth / 3; 
    for (let i = 0; i < bladeCount; i++) {
        const blade = document.createElement('div');
        blade.classList.add('spring-grass');
        
+        // MARK: GRASS HEIGHT
        const height = Math.random() * 40 + 20; // 20-60px height
        blade.style.height = `${height}px`;
        blade.style.left = `${i * 3 + Math.random() * 2}px`;
@@ -109,6 +138,11 @@ function createGrass(container) {
        const hue = 100 + Math.random() * 40; 
        blade.style.backgroundColor = `hsl(${hue}, 60%, 40%)`;
        
+        // Random z-index to interleave with Ladybug (1002)
+        // Values: 1001 (behind) or 1003 (front)
+        const z = Math.random() > 0.5 ? 1001 : 1003;
+        blade.style.zIndex = z;
+        
        grassContainer.appendChild(blade);
    }
 }
@@ -125,25 +159,219 @@ function initSpringObjects() {
    createGrass(container);
    
    if (enableSunbeams) {
-        // Initial sunbeams
-        for (let i = 0; i < sunbeamCount; i++) {
-            createSunbeam(container);
-        }
+        spawnSunbeamGroup(container, sunbeamCount);
    }
 }

 function initializeSpring() {
-    if (!spring) return;
+    if (!spring) {
+        console.warn('Spring is disabled.');
+        return;
+    }
+
    initSpringObjects();
    toggleSpring();

-    const screenWidth = window.innerWidth;
-    if (randomSpring && (screenWidth > 768 || randomSpringMobile)) {
-        addRandomSpringObjects();
+    const container = document.querySelector('.spring-container');
+    if (container) {
+        if (randomSpring) {
+            // Add Pollen
+            for (let i = 0; i < pollenCount; i++) {
+                createPollen(container);
+            }
+
+            // Add Birds
+            for (let i = 0; i < birdCount; i++) {
+                setTimeout(() => createBird(container), Math.random() * 1000); // 0-1s desync
+            }
+            // Add Butterflies
+            for (let i = 0; i < butterflyCount; i++) {
+                setTimeout(() => createButterfly(container), Math.random() * 1000); // 0-1s desync
+            }
+            // Add Bees
+            for (let i = 0; i < beeCount; i++) {
+                setTimeout(() => createBee(container), Math.random() * 1000); // 0-1s desync
+            }
+            // Add Ladybugs
+            for (let i = 0; i < ladybugCount; i++) {
+                setTimeout(() => createLadybugGif(container), Math.random() * 1000); // 0-1s desync
+            }
+        }
    }
 }

-// Debounce helper
+function createBird(container) {
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('spring-anim-wrapper'); 
+    wrapper.classList.add('spring-bird-wrapper'); 
+    
+    const mirror = document.createElement('div');
+    mirror.classList.add('spring-mirror-wrapper');
+    
+    const bird = document.createElement('img');
+    bird.classList.add('spring-bird');
+    
+    const randomSrc = birdImages[Math.floor(Math.random() * birdImages.length)];
+    bird.src = randomSrc;
+    
+    const direction = Math.random() > 0.5 ? 'right' : 'left';
+    // MARK: BIRD SPEED (10-15s)
+    const duration = Math.random() * 5 + 10;
+    
+    // MARK: BIRD HEIGHT RANGE (in %)
+    const startY = Math.random() * 55 + 5; // Start 5-60%
+    const endY = Math.random() * 55 + 5;   // End 5-60%
+    wrapper.style.setProperty('--start-y', `${startY}%`);
+    wrapper.style.setProperty('--end-y', `${endY}%`);
+    
+    if (direction === 'right') {
+        wrapper.style.animation = `spring-fly-right-wrapper ${duration}s linear forwards, spring-vertical-drift ${duration}s linear forwards`;
+        mirror.style.transform = 'scaleX(-1)'; 
+    } else {
+        wrapper.style.animation = `spring-fly-left-wrapper ${duration}s linear forwards, spring-vertical-drift ${duration}s linear forwards`;
+        mirror.style.transform = 'scaleX(1)'; 
+    }
+    
+    wrapper.addEventListener('animationend', (e) => {
+        if (e.animationName.includes('fly-')) {
+            wrapper.remove();
+            createBird(container);
+        }
+    });
+    
+    bird.style.animation = `spring-bob 2s ease-in-out infinite`;
+     
+    wrapper.style.top = `${startY}%`; 
+    
+    mirror.appendChild(bird);
+    wrapper.appendChild(mirror);
+    container.appendChild(wrapper);
+}
+
+function createButterfly(container) {
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('spring-anim-wrapper');
+    wrapper.classList.add('spring-butterfly-wrapper');
+
+    const mirror = document.createElement('div');
+    mirror.classList.add('spring-mirror-wrapper');
+
+    const butterfly = document.createElement('img');
+    butterfly.classList.add('spring-butterfly');
+    
+    const randomSrc = butterflyImages[Math.floor(Math.random() * butterflyImages.length)];
+    butterfly.src = randomSrc;
+    
+    const duration = Math.random() * 15 + 25; 
+    const direction = Math.random() > 0.5 ? 'right' : 'left';
+    
+    if (direction === 'right') {
+        wrapper.style.animation = `spring-fly-right-wrapper ${duration}s linear forwards`;  
+        mirror.style.transform = 'scaleX(1)'; 
+    } else {
+        wrapper.style.animation = `spring-fly-left-wrapper ${duration}s linear forwards`;
+        mirror.style.transform = 'scaleX(-1)'; 
+    }
+    
+    wrapper.addEventListener('animationend', (e) => {
+        if (e.animationName.includes('fly-')) {
+            wrapper.remove();
+            createButterfly(container);
+        }
+    });
+
+    // MARK: BUTTERFLY FLUTTER RHYTHM
+    butterfly.style.animation = `spring-flutter 3s ease-in-out infinite`;
+    butterfly.style.animationDelay = `-${Math.random() * 3}s`;
+
+    // MARK: BUTTERFLY HEIGHT (in %)
+    const top = Math.random() * 35 + 50; // 50-85% 
+    wrapper.style.top = `${top}%`;
+    
+    mirror.appendChild(butterfly);
+    wrapper.appendChild(mirror);
+    container.appendChild(wrapper);
+}
+
+function createBee(container) {
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('spring-anim-wrapper'); 
+    wrapper.classList.add('spring-bee-wrapper');
+
+    const mirror = document.createElement('div');
+    mirror.classList.add('spring-mirror-wrapper');
+
+    const bee = document.createElement('img');
+    bee.classList.add('spring-bee');
+    bee.src = beeImage;
+    
+    const duration = Math.random() * 10 + 15;
+    const direction = Math.random() > 0.5 ? 'right' : 'left';
+    
+    if (direction === 'right') {
+        wrapper.style.animation = `spring-fly-right-wrapper ${duration}s linear forwards`;
+        mirror.style.transform = 'scaleX(1)'; 
+    } else {
+        wrapper.style.animation = `spring-fly-left-wrapper ${duration}s linear forwards`;
+        mirror.style.transform = 'scaleX(-1)';
+    }
+
+    wrapper.addEventListener('animationend', (e) => {
+        if (e.animationName.includes('fly-')) {
+            wrapper.remove();
+            createBee(container);
+        }
+    });
+
+    // MARK: BEE HEIGHT (in %)
+    const top = Math.random() * 60 + 20; // 20-80%
+    wrapper.style.top = `${top}%`;
+    
+    mirror.appendChild(bee);
+    wrapper.appendChild(mirror);
+    container.appendChild(wrapper);
+}
+
+function createLadybugGif(container) {
+    const wrapper = document.createElement('div');
+    wrapper.classList.add('spring-anim-wrapper'); 
+    wrapper.classList.add('spring-ladybug-wrapper');
+
+    const mirror = document.createElement('div');
+    mirror.classList.add('spring-mirror-wrapper');
+
+    const bug = document.createElement('img');
+    bug.classList.add('spring-ladybug-gif');
+    bug.src = ladybugImage;
+    
+    const direction = Math.random() > 0.5 ? 'right' : 'left';
+    const duration = Math.random() * 20 + 30; 
+    
+    if (direction === 'right') {
+        wrapper.style.animation = `spring-walk-right ${duration}s linear forwards`;
+        mirror.style.transform = 'scaleX(1)'; 
+    } else {
+        wrapper.style.animation = `spring-walk-left ${duration}s linear forwards`;
+        mirror.style.transform = 'scaleX(-1)';
+    }
+    
+    wrapper.addEventListener('animationend', (e) => {
+        if (e.animationName.includes('walk-')) {
+            wrapper.remove();
+            createLadybugGif(container);
+        }
+    });
+        
+    bug.style.animation = `spring-crawl 2s ease-in-out infinite`;
+
+    wrapper.style.top = 'auto'; 
+    wrapper.style.bottom = '5px';
+    
+    mirror.appendChild(bug);
+    wrapper.appendChild(mirror);
+    container.appendChild(wrapper);
+}
+
 function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
@@ -156,7 +384,6 @@ function debounce(func, wait) {
    };
 }

-// Resize handler for grass
 const handleResize = debounce(() => {
    const container = document.querySelector('.spring-container');
    if (container) {