// Main application logic document.addEventListener('DOMContentLoaded', () => { // Initialize tooltips const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); // Lineup management logic const lineupSlots = document.querySelectorAll('custom-lineup-slot'); let currentLineup = { QB: null, RB1: null, RB2: null, WR1: null, WR2: null, WR3: null, TE: null, FLEX: null, DST: null }; let remainingSalary = 50000; // Function to update salary display function updateSalaryDisplay() { const usedSalary = Object.values(currentLineup).reduce((sum, player) => { return sum + (player ? player.salary : 0); }, 0); remainingSalary = 50000 - usedSalary; document.querySelector('[data-used-salary]').textContent = `$${usedSalary}`; document.querySelector('[data-remaining-salary]').textContent = `$${remainingSalary}`; const salaryBar = document.querySelector('.salary-progress-bar'); const percentage = (usedSalary / 50000) * 100; salaryBar.style.width = `${percentage}%`; salaryBar.className = `salary-progress-bar h-2.5 rounded-full ${ percentage > 95 ? 'bg-red-500' : percentage > 85 ? 'bg-yellow-500' : 'bg-green-500' }`; } // Event delegation for player selection document.addEventListener('click', (e) => { if (e.target.closest('.select-player-btn')) { const playerCard = e.target.closest('custom-player-card'); const playerData = { id: playerCard.getAttribute('data-id'), name: playerCard.getAttribute('name'), team: playerCard.getAttribute('team'), position: playerCard.getAttribute('position'), salary: parseInt(playerCard.getAttribute('salary')), fppg: parseFloat(playerCard.getAttribute('fppg')), image: playerCard.getAttribute('image') }; // Find the appropriate slot let slotPosition = playerData.position; if (slotPosition === 'RB' || slotPosition === 'WR' || slotPosition === 'TE') { // Check if FLEX is available const flexSlot = Array.from(lineupSlots).find(slot => slot.getAttribute('position') === 'FLEX' && !slot.hasAttribute('filled') ); if (flexSlot) { slotPosition = 'FLEX'; } } const targetSlot = Array.from(lineupSlots).find(slot => slot.getAttribute('position') === slotPosition && !slot.hasAttribute('filled') ); if (targetSlot && remainingSalary >= playerData.salary) { targetSlot.setAttribute('filled', ''); targetSlot.setAttribute('player-name', playerData.name); targetSlot.setAttribute('player-team', playerData.team); targetSlot.setAttribute('player-salary', playerData.salary); targetSlot.setAttribute('player-image', playerData.image); // Update current lineup const slotKey = targetSlot.getAttribute('position'); currentLineup[slotKey] = playerData; updateSalaryDisplay(); } } // Handle removing players from lineup if (e.target.closest('.remove-player-btn')) { const slot = e.target.closest('custom-lineup-slot'); const slotPosition = slot.getAttribute('position'); slot.removeAttribute('filled'); slot.removeAttribute('player-name'); slot.removeAttribute('player-team'); slot.removeAttribute('player-salary'); slot.removeAttribute('player-image'); currentLineup[slotPosition] = null; updateSalaryDisplay(); } }); });