document.addEventListener('DOMContentLoaded', () => {
    const left = document.querySelector('.left-emoji');
    const right = document.querySelector('.right-emoji');
    const winnerText = document.getElementById('winner-text');

    const winnerSide = window.winnerSide;
    const loserSide = window.loserSide;

    function insertEmojiOrImage(el) {
        const value = el.dataset.content;
        if (/^https?:\/\//.test(value)) {
            const img = document.createElement('img');
            img.src = value;
            img.className = 'emoji-img';
            el.appendChild(img);
        } else {
            el.textContent = value;
        }
    }

    insertEmojiOrImage(left);
    insertEmojiOrImage(right);

    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 winner = winnerSide === 'left' ? left : right;
            winner.classList.add('winner-center', 'winner-crown');

            let name = winner.dataset.content;
            //check if name is an image URL or an emoji
            if (/^https?:\/\//.test(name)) {
                winnerText.innerHTML = `<img src="${name}" style="width:64px">a gagné ! 🎉`;
            }
            else {
                winnerText.textContent = `${name} a gagné ! 🎉`;
            }
            winnerText.style.display = 'block';
        }, 1500);
    }, 3000);
});