diff --git a/Jellyfin.Plugin.Seasonals/Web/eid.js b/Jellyfin.Plugin.Seasonals/Web/eid.js index 2c3f463..7181f89 100644 --- a/Jellyfin.Plugin.Seasonals/Web/eid.js +++ b/Jellyfin.Plugin.Seasonals/Web/eid.js @@ -38,35 +38,44 @@ observer.observe(document.body, { function createEid(container) { - for (let i = 0; i < 25; i++) { - const symbol = document.createElement('div'); - symbol.className = 'eid-symbol'; - const isLantern = Math.random() > 0.8; - - if (isLantern) { - symbol.classList.add('lantern-rope'); - symbol.style.left = `${Math.random() * 90 + 5}%`; - symbol.style.animationDelay = `${Math.random() * -4}s`; - const ropeLen = 15 + Math.random() * 15; // 15vh to 30vh - symbol.style.height = `${ropeLen}vh`; + const starCount = 20; + const lanternCount = Math.floor(Math.random() * 3) + 4; // 4 to 6 lanterns - const lanternSpan = document.createElement('span'); - lanternSpan.className = 'lantern-emoji'; - lanternSpan.textContent = '🏮'; - symbol.appendChild(lanternSpan); - } else { - symbol.textContent = eidSymbols[Math.floor(Math.random() * eidSymbols.length)]; - symbol.classList.add('floating-star'); - symbol.style.left = `${Math.random() * 100}%`; - symbol.style.top = `${Math.random() * 100}%`; - symbol.style.animationDelay = `${Math.random() * -5}s`; - } + // Create evenly spaced lanterns + const segmentWidth = 100 / lanternCount; + for (let i = 0; i < lanternCount; i++) { + const symbol = document.createElement('div'); + symbol.className = 'eid-symbol lantern-rope'; + + // Base position within segment, with slight random jitter + const baseLeft = (i * segmentWidth) + (segmentWidth * 0.2); + const jitter = Math.random() * (segmentWidth * 0.6); + symbol.style.left = `${baseLeft + jitter}%`; + + symbol.style.animationDelay = `${Math.random() * -4}s`; + const ropeLen = 15 + Math.random() * 15; // 15vh to 30vh + symbol.style.height = `${ropeLen}vh`; + + const lanternSpan = document.createElement('span'); + lanternSpan.className = 'lantern-emoji'; + lanternSpan.textContent = '🏮'; + symbol.appendChild(lanternSpan); + + container.appendChild(symbol); + } + + // Create random floating stars + for (let i = 0; i < starCount; i++) { + const symbol = document.createElement('div'); + symbol.className = 'eid-symbol floating-star'; + symbol.textContent = eidSymbols[Math.floor(Math.random() * eidSymbols.length)]; + symbol.style.left = `${Math.random() * 100}%`; + symbol.style.top = `${Math.random() * 100}%`; + symbol.style.animationDelay = `${Math.random() * -5}s`; symbol.addEventListener('animationiteration', () => { - if (!isLantern) { - symbol.style.left = `${Math.random() * 90 + 5}%`; - symbol.style.top = `${Math.random() * 100}%`; - } + symbol.style.left = `${Math.random() * 90 + 5}%`; + symbol.style.top = `${Math.random() * 100}%`; }); container.appendChild(symbol);