diff --git a/Jellyfin.Plugin.Seasonals/Web/friday13.css b/Jellyfin.Plugin.Seasonals/Web/friday13.css index 8743e25..d395b39 100644 --- a/Jellyfin.Plugin.Seasonals/Web/friday13.css +++ b/Jellyfin.Plugin.Seasonals/Web/friday13.css @@ -13,23 +13,22 @@ .friday13-cat { position: absolute; - width: 100px; + width: 150px; /* MARK: Cat size */ height: auto; user-select: none; animation-timing-function: linear; - animation-iteration-count: infinite; opacity: 0; } @keyframes cat-walk-right { - 0% { left: -10vw; transform: scaleX(1); opacity: 1; } - 99% { left: 110vw; transform: scaleX(1); opacity: 1; } - 100% { opacity: 0; } + 0% { left: -10vw; transform: scaleX(-1); opacity: 1; } + 99% { left: 110vw; transform: scaleX(-1); opacity: 1; } + 100% { opacity: 0; transform: scaleX(-1); left: 110vw; } } @keyframes cat-walk-left { - 0% { left: 110vw; transform: scaleX(-1); opacity: 1; } - 99% { left: -10vw; transform: scaleX(-1); opacity: 1; } - 100% { opacity: 0; } + 0% { left: 110vw; transform: scaleX(1); opacity: 1; } + 99% { left: -10vw; transform: scaleX(1); opacity: 1; } + 100% { opacity: 0; transform: scaleX(1); left: -10vw; } } diff --git a/Jellyfin.Plugin.Seasonals/Web/friday13.js b/Jellyfin.Plugin.Seasonals/Web/friday13.js index 70a8857..0d7ffca 100644 --- a/Jellyfin.Plugin.Seasonals/Web/friday13.js +++ b/Jellyfin.Plugin.Seasonals/Web/friday13.js @@ -35,21 +35,38 @@ observer.observe(document.body, { }); function createFriday13(container) { - // Add walking black cat - const numCats = 1; - for (let i = 0; i < numCats; i++) { + function spawnCat() { + // MARK: Height of the cat from bottom + const catBottomPosition = "-15px"; + // MARK: Time it takes for the cat to cross the screen + const catWalkDurationSeconds = 20; + const cat = document.createElement('img'); cat.className = 'friday13-cat'; cat.src = '../Seasonals/Resources/friday_assets/black-cat.gif'; - cat.style.animationDelay = `${Math.random() * 5}s`; - cat.style.bottom = `5px`; // Walk along the very bottom edge + cat.style.bottom = catBottomPosition; // Either walk left to right or right to left const dir = Math.random() > 0.5 ? 'right' : 'left'; cat.style.animationName = `cat-walk-${dir}`; - cat.style.animationDuration = `18s`; + cat.style.animationDuration = `${catWalkDurationSeconds}s`; + cat.style.animationIterationCount = `1`; // play once and remove + cat.style.animationFillMode = `forwards`; + container.appendChild(cat); + + // Remove and respawn + setTimeout(() => { + if (cat.parentNode) { + cat.parentNode.removeChild(cat); + } + // Respawn with random delay between 5 to 25 seconds + setTimeout(spawnCat, Math.random() * 20000 + 5000); + }, (catWalkDurationSeconds * 1000) + 500); // Wait for duration + 500ms safety margin } + + // Initial spawn with random delay + setTimeout(spawnCat, Math.random() * 5000); } function initializeFriday13() { diff --git a/Jellyfin.Plugin.Seasonals/Web/friday_assets/black-cat.gif b/Jellyfin.Plugin.Seasonals/Web/friday_assets/black-cat.gif index 55bda80..90756ed 100644 Binary files a/Jellyfin.Plugin.Seasonals/Web/friday_assets/black-cat.gif and b/Jellyfin.Plugin.Seasonals/Web/friday_assets/black-cat.gif differ