document.addEventListener('DOMContentLoaded', () => { const left = document.querySelector('.left-emoji'); const right = document.querySelector('.right-emoji'); const winnerText = document.getElementById('winner-text'); // These variables will be injected by Twig in the template as data attributes or global variables const winnerSide = window.winnerSide; const loserSide = window.loserSide; left.classList.add('slide-in-left'); right.classList.add('slide-in-right'); setTimeout(() => { left.style.left = '100px'; right.style.left = '300px'; left.classList.add('fight-animation'); right.classList.add('fight-animation'); setTimeout(() => { left.classList.remove('fight-animation'); right.classList.remove('fight-animation'); const loser = loserSide === 'left' ? left : right; loser.classList.add('loser-fly-up'); const wing = document.createElement('div'); wing.classList.add('wing'); wing.textContent = '🪽'; loser.appendChild(wing); const winner = winnerSide === 'left' ? left : right; winner.classList.add('winner-center', 'winner-crown'); winnerText.textContent = `${winner.textContent.trim()} a gagné ! 🎉`; winnerText.style.display = 'block'; }, 1500); }, 3000); });