diff --git a/Jellyfin.Plugin.Seasonals/Web/olympia.js b/Jellyfin.Plugin.Seasonals/Web/olympia.js index bc0b2cc..48226d5 100644 --- a/Jellyfin.Plugin.Seasonals/Web/olympia.js +++ b/Jellyfin.Plugin.Seasonals/Web/olympia.js @@ -1,10 +1,34 @@ const config = window.SeasonalsPluginConfig?.Olympia || {}; -const olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : true; -const symbolCount = config.SymbolCount || 25; -const useRandomSymbols = config.EnableRandomSymbols !== undefined ? config.EnableRandomSymbols : true; -const enableRandomMobile = config.EnableRandomSymbolsMobile !== undefined ? config.EnableRandomSymbolsMobile : false; -const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; +const olympia = config.EnableOlympia !== undefined ? config.EnableOlympia : true; // enable/disable olympia theme +const symbolCount = config.SymbolCount !== undefined ? config.SymbolCount : 25; // count of floating symbols +const symbolCountMobile = config.SymbolCountMobile !== undefined ? config.SymbolCountMobile : 10; // count of floating symbols on mobile +const enableDifferentDuration = config.EnableDifferentDuration !== undefined ? config.EnableDifferentDuration : true; // enable different durations + +// Olympic Ring Colors (Carnival Config) +const confettiColors = ['#0081C8', '#FCB131', '#000000', '#00A651', '#EE334E']; +const isMobile = window.matchMedia("only screen and (max-width: 768px)").matches; +const confettiCount = isMobile ? 30 : 60; + +/** + * Credits: + * https://lottiefiles.com/free-animation/gold-coin-5Spp5kJbLP + * https://lottiefiles.com/free-animation/silver-coin-SIgIP59fII + * https://lottiefiles.com/free-animation/bronze-coin-wWVCJMsOUq + */ +const olympicMedals = [ + "../Seasonals/Resources/olympic_assets/gold_coin.gif", + "../Seasonals/Resources/olympic_assets/silver_coin.gif", + "../Seasonals/Resources/olympic_assets/bronze_coin.gif" +] + +/** + * Credits: + * https://www.flaticon.com/de/kostenloses-icon/fackel_4683293 + * merged with: + * https://lottiefiles.com/free-animation/abstract-flames-lottie-json-animation-oSb0IFoBrj + */ +const olympicTorch = "../Seasonals/Resources/olympic_assets/torch.gif"; let msgPrinted = false; @@ -49,27 +73,23 @@ function createOlympia() { } const standardCount = 15; - const totalSymbols = symbolCount + standardCount; let isMobile = window.matchMedia("only screen and (max-width: 768px)").matches; - let finalCount = totalSymbols; - - if (isMobile) { - finalCount = enableRandomMobile ? totalSymbols : standardCount; - } + let finalCount = isMobile ? symbolCountMobile : symbolCount; const useRandomDuration = enableDifferentDuration !== false; - const activeItems = ['gold', 'silver', 'bronze', 'torch', 'rings_blue', 'rings_yellow', 'rings_black', 'rings_green', 'rings_red']; + const olympicRings = ['ring_blue.css', 'ring_yellow.css', 'ring_black.css', 'ring_green.css', 'ring_red.css']; + const activeItems = [...olympicMedals, ...olympicRings]; for (let i = 0; i < finalCount; i++) { let symbol = document.createElement('div'); - const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)]; - const isRing = randomItem.startsWith('rings'); - const isMedal = ['gold', 'silver', 'bronze'].includes(randomItem); + const randomImgUrl = activeItems[Math.floor(Math.random() * activeItems.length)]; + const isRing = randomImgUrl.includes('ring_'); + const isMedal = randomImgUrl.includes('_coin'); - symbol.className = `olympia-symbol olympia-${randomItem}`; + symbol.className = `olympia-symbol`; // Create inner div for sway/rotation let innerDiv = document.createElement('div'); @@ -77,19 +97,20 @@ function createOlympia() { let img = null; if (isRing) { + const colorName = randomImgUrl.split('ring_')[1].split('.')[0]; const ringColorMap = { - 'rings_blue': '#0081C8', - 'rings_yellow': '#FCB131', - 'rings_black': '#000000', - 'rings_green': '#00A651', - 'rings_red': '#EE334E' + 'blue': '#0081C8', + 'yellow': '#FCB131', + 'black': '#000000', + 'green': '#00A651', + 'red': '#EE334E' }; let ringDiv = document.createElement('div'); ringDiv.className = 'olympia-ring-css'; - ringDiv.style.setProperty('--ring-color', ringColorMap[randomItem]); + ringDiv.style.setProperty('--ring-color', ringColorMap[colorName]); innerDiv.appendChild(ringDiv); - // Add a 3D flip animation for rings and medals + // Add a 3D flip animation for rings const spinReverse = Math.random() > 0.5 ? 'reverse' : 'normal'; innerDiv.style.animation = `olympia-tumble-3d ${Math.random() * 4 + 4}s linear infinite ${spinReverse}`; @@ -99,13 +120,7 @@ function createOlympia() { innerDiv.style.setProperty('--rot-z', (Math.random() * 2 - 1).toFixed(2)); } else { img = document.createElement('img'); - let imgName = randomItem; - if (isMedal) { - imgName = `${randomItem}_coin.gif`; - } else { - imgName = `${randomItem}.png`; - } - img.src = `../Seasonals/Resources/olympic_assets/${imgName}`; + img.src = randomImgUrl; img.onerror = function() { symbol.remove(); }; @@ -181,10 +196,6 @@ function createOlympia() { createTorch(true); createTorch(false); - - // Olympic Ring Colors (Carnival Config) - const confettiColors = ['#0081C8', '#FCB131', '#000000', '#00A651', '#EE334E']; - const confettiCount = isMobile ? 30 : 60; for (let i = 0; i < confettiCount; i++) { let wrapper = document.createElement('div');