diff --git a/Jellyfin.Plugin.Seasonals/Web/spring.css b/Jellyfin.Plugin.Seasonals/Web/spring.css index 0823302..d8fee62 100644 --- a/Jellyfin.Plugin.Seasonals/Web/spring.css +++ b/Jellyfin.Plugin.Seasonals/Web/spring.css @@ -10,39 +10,6 @@ z-index: 1000; } -/* Petals */ -.spring-petal { - position: fixed; - top: -20px; - z-index: 1005; - width: 15px; - height: 10px; - background-color: #ffc0cb; - border-radius: 15px 0px 15px 0px; - - will-change: transform, top; - animation-name: spring-fall, spring-sway; - animation-timing-function: linear, ease-in-out; - animation-iteration-count: infinite, infinite; - animation-duration: 10s, 3s; -} - -.spring-petal.lighter { - background-color: #ffd1dc; - opacity: 0.8; -} - -.spring-petal.darker { - background-color: #ffb7c5; - opacity: 0.9; -} - -.spring-petal.type2 { - width: 12px; - height: 12px; - border-radius: 10px 0px 10px 5px; -} - /* Pollen */ .spring-pollen { position: fixed; @@ -99,54 +66,7 @@ animation-iteration-count: infinite; } -/* Ladybugs */ -.spring-ladybug { - position: absolute; - width: 6px; - height: 4px; - background-color: #e74c3c; /* Red */ - border-radius: 3px 3px 0 0; - z-index: 1003; - - will-change: left, transform; - animation-timing-function: linear; - animation-iteration-count: infinite; -} -.spring-ladybug.right { - animation-name: spring-bug-crawl-right; - transform: scaleX(1); -} - -.spring-ladybug.left { - animation-name: spring-bug-crawl-left; - transform: scaleX(-1); -} - -.spring-ladybug::before { - content: ''; - position: absolute; - right: -2px; - top: 1px; - width: 2px; - height: 2px; - background-color: #000; - border-radius: 50%; -} - -@keyframes spring-fall { - 0% { top: -10%; } - 100% { top: 100%; } -} - -@keyframes spring-sway { - 0%, 100% { - transform: translateX(0) rotate(0deg); - } - 50% { - transform: translateX(30px) rotate(45deg); - } -} @keyframes spring-float { 0% { transform: translateX(0) translateY(0); } @@ -168,12 +88,4 @@ 100% { transform: rotate(0deg); } } -@keyframes spring-bug-crawl-right { - 0% { left: -5%; } - 100% { left: 105%; } -} -@keyframes spring-bug-crawl-left { - 0% { left: 105%; } - 100% { left: -5%; } -} diff --git a/Jellyfin.Plugin.Seasonals/Web/spring.js b/Jellyfin.Plugin.Seasonals/Web/spring.js index e6330b9..219b16e 100644 --- a/Jellyfin.Plugin.Seasonals/Web/spring.js +++ b/Jellyfin.Plugin.Seasonals/Web/spring.js @@ -1,15 +1,12 @@ const config = window.SeasonalsPluginConfig?.Spring || {}; const spring = config.EnableSpring !== undefined ? config.EnableSpring : true; -const petalCount = config.PetalCount || 25; const pollenCount = config.PollenCount || 15; -const ladybugCountConfig = config.LadybugCount || 5; const sunbeamCount = config.SunbeamCount || 5; 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 enablePetals = config.EnableSpringPetals !== undefined ? config.EnableSpringPetals : true; const enableSunbeams = config.EnableSpringSunbeams !== undefined ? config.EnableSpringSunbeams : true; let msgPrinted = false; @@ -41,35 +38,6 @@ function toggleSpring() { const observer = new MutationObserver(toggleSpring); observer.observe(document.body, { childList: true, subtree: true, attributes: true }); -function createPetal(container) { - if (!enablePetals) return; - - const petal = document.createElement('div'); - petal.classList.add('spring-petal'); - - const type = Math.random() > 0.5 ? 'type1' : 'type2'; - petal.classList.add(type); - - const color = Math.random() > 0.7 ? 'darker' : 'lighter'; - petal.classList.add(color); - - const randomLeft = Math.random() * 100; - petal.style.left = `${randomLeft}%`; - - const size = Math.random() * 0.5 + 0.5; - petal.style.transform = `scale(${size})`; - - const duration = Math.random() * 5 + 8; - const delay = Math.random() * 10; - const swayDuration = Math.random() * 2 + 2; - - if (enableDifferentDuration) { - petal.style.animationDuration = `${duration}s, ${swayDuration}s`; - } - petal.style.animationDelay = `${delay}s, ${Math.random() * 3}s`; - - container.appendChild(petal); -} function createPollen(container) { const pollen = document.createElement('div'); @@ -121,6 +89,9 @@ 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++) { @@ -140,52 +111,6 @@ function createGrass(container) { grassContainer.appendChild(blade); } - - // Add Ladybugs - const bugs = ladybugCountConfig; - for (let i = 0; i < bugs; i++) { - createLadybug(grassContainer); - } -} - -function createLadybug(container) { - const bug = document.createElement('div'); - bug.classList.add('spring-ladybug'); - - const direction = Math.random() > 0.5 ? 'right' : 'left'; - bug.classList.add(direction); - - // Position lower (bottom of grass), but ensure visibility - const bottomOffset = direction === 'right' ? Math.random() * 5 + 6 : Math.random() * 5 + 2; - bug.style.bottom = `${bottomOffset}px`; - - // Start position depends on direction - if (direction === 'right') { - bug.style.left = '-5%'; // Start off-screen left - } else { - bug.style.left = '105%'; // Start off-screen right - } - - const duration = Math.random() * 20 + 20; // Slow crawl - bug.style.animationDuration = `${duration}s`; - bug.style.animationDelay = `-${Math.random() * 20}s`; - - container.appendChild(bug); -} - -function addRandomSpringObjects() { - const container = document.querySelector('.spring-container'); - if (!container) return; - - if (enablePetals) { - for (let i = 0; i < petalCount; i++) { - createPetal(container); - } - } - - for (let i = 0; i < pollenCount; i++) { - createPollen(container); - } } function initSpringObjects() { @@ -199,30 +124,6 @@ function initSpringObjects() { createGrass(container); - if (enablePetals) { - for (let i = 0; i < 15; i++) { - const petal = document.createElement('div'); - petal.classList.add('spring-petal'); - const type = Math.random() > 0.5 ? 'type1' : 'type2'; - petal.classList.add(type); - const color = Math.random() > 0.7 ? 'darker' : 'lighter'; - petal.classList.add(color); - const randomLeft = Math.random() * 100; - petal.style.left = `${randomLeft}%`; - const size = Math.random() * 0.5 + 0.5; - petal.style.transform = `scale(${size})`; - - const duration = Math.random() * 5 + 8; - const swayDuration = Math.random() * 2 + 2; - - if (enableDifferentDuration) { - petal.style.animationDuration = `${duration}s, ${swayDuration}s`; - } - petal.style.animationDelay = `-${Math.random() * 10}s, -${Math.random() * 3}s`; - container.appendChild(petal); - } - } - if (enableSunbeams) { // Initial sunbeams for (let i = 0; i < sunbeamCount; i++) { @@ -242,4 +143,27 @@ function initializeSpring() { } } +// Debounce helper +function debounce(func, wait) { + let timeout; + return function executedFunction(...args) { + const later = () => { + clearTimeout(timeout); + func(...args); + }; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + }; +} + +// Resize handler for grass +const handleResize = debounce(() => { + const container = document.querySelector('.spring-container'); + if (container) { + createGrass(container); + } +}, 250); + +window.addEventListener('resize', handleResize); + initializeSpring();