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.
62 lines
2.3 KiB
62 lines
2.3 KiB
document.addEventListener('DOMContentLoaded', () => {
|
|
const left = document.querySelector('.left-emoji');
|
|
const right = document.querySelector('.right-emoji');
|
|
const winnerText = document.getElementById('winner-text');
|
|
|
|
fetch(`localhost:8000/emojis/fight/${id1}/${id2}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const { leftEmoji, rightEmoji, winner } = data;
|
|
|
|
left.dataset.content = leftEmoji;
|
|
right.dataset.content = rightEmoji;
|
|
|
|
window.winnerSide = winner === 'left' ? 'left' : 'right';
|
|
window.loserSide = winner === 'left' ? 'right' : 'left';
|
|
|
|
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 = window.loserSide === 'left' ? left : right;
|
|
loser.classList.add('loser-fly-up');
|
|
const winnerEl = window.winnerSide === 'left' ? left : right;
|
|
winnerEl.classList.add('winner-center', 'winner-crown');
|
|
|
|
let name = winnerEl.dataset.content;
|
|
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);
|
|
});
|
|
|
|
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;
|
|
}
|
|
}
|
|
});
|