You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.4 KiB
39 lines
1.4 KiB
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);
|
|
});
|