Jellyfin-Seasonals-Plugin/Jellyfin.Plugin.Seasonals/Web/sports.js

const config = window.SeasonalsPluginConfig?.Sports || {};

const sports = config.EnableSports !== undefined ? config.EnableSports : 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;

let msgPrinted = false;

function toggleSports() {
  const container = document.querySelector('.sports-container');
  if (!container) return;

  const videoPlayer = document.querySelector('.videoPlayerContainer');
  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
  const isDashboard = document.body.classList.contains('dashboardDocument');
  const hasUserMenu = document.querySelector('#app-user-menu');

  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
    container.style.display = 'none';
    if (!msgPrinted) {
      console.log('Sports hidden');
      msgPrinted = true;
    }
  } else {
    container.style.display = 'block';
    if (msgPrinted) {
      console.log('Sports visible');
      msgPrinted = false;
    }
  }
}

const observer = new MutationObserver(toggleSports);
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true
});

function createSports() {
    const container = document.querySelector('.sports-container') || document.createElement('div');

    if (!document.querySelector('.sports-container')) {
        container.className = 'sports-container';
        container.setAttribute("aria-hidden", "true");
        document.body.appendChild(container);
    }

    // Create a turf/grass overlay at the bottom
    const turf = document.createElement('div');
    turf.className = 'sports-turf';
    container.appendChild(turf);

    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;
    }

    const useRandomDuration = enableDifferentDuration !== false;

    // Standard sports items to spawn
    const activeItems = ['soccer', 'football', 'yellow_card', 'red_card', 'trophy'];

    // Create falling sports items
    for (let i = 0; i < finalCount; i++) {
        let symbol = document.createElement('div');
        
        // Randomly pick an item
        const randomItem = activeItems[Math.floor(Math.random() * activeItems.length)];
        symbol.className = `sports-symbol sports-${randomItem}`;

        // Try load image
        let img = document.createElement('img');
        img.src = `../Seasonals/Resources/sports_images/${randomItem}.png`;
        img.onerror = function() {
            this.style.display = 'none'; // hide broken image icon
            this.parentElement.innerHTML = getEmojiFallback(randomItem); // inject emoji fallback
        };
        symbol.appendChild(img);

        const leftPos = Math.random() * 100;
        const delaySeconds = Math.random() * 10;
        
        let durationSeconds = 8;
        if (useRandomDuration) {
            durationSeconds = Math.random() * 4 + 6; // 6 to 10 seconds
        }

        // Add a random slight rotation difference
        const startRot = Math.random() * 360;
        symbol.style.setProperty('--start-rot', `${startRot}deg`);
        symbol.style.setProperty('--end-rot', `${startRot + (Math.random() > 0.5 ? 360 : -360)}deg`);

        symbol.style.left = `${leftPos}vw`;
        symbol.style.animationDuration = `${durationSeconds}s`;
        symbol.style.animationDelay = `${delaySeconds}s`;

        container.appendChild(symbol);
    }

    // Add Germany Colored confetti (Black, Red, Gold)
    const confettiColors = ['#000000', '#FF0000', '#FFCC00'];
    const confettiCount = isMobile ? 30 : 60;
    
    for (let i = 0; i < confettiCount; i++) {
        let confetti = document.createElement('div');
        confetti.className = 'sports-confetti';
        
        const color = confettiColors[Math.floor(Math.random() * confettiColors.length)];
        confetti.style.backgroundColor = color;
        
        const leftPos = Math.random() * 100;
        const delaySeconds = Math.random() * 8;
        const duration = Math.random() * 3 + 4; // 4 to 7 seconds

        confetti.style.left = `${leftPos}vw`;
        confetti.style.animationDuration = `${duration}s`;
        confetti.style.animationDelay = `${delaySeconds}s`;

        container.appendChild(confetti);
    }
}

function getEmojiFallback(type) {
    if (type === 'soccer') return '⚽';
    if (type === 'football') return '🏈';
    if (type === 'yellow_card') return '🟨';
    if (type === 'red_card') return '🟥';
    if (type === 'trophy') return '🏆';
    return '';
}

function initializeSports() {
  if (!sports) return;
  createSports();
  toggleSports();
}

initializeSports();