2024-03-29 13:31:07 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Game Title</title>
|
|
|
|
|
<style>
|
|
|
|
|
#win-screen {
|
|
|
|
|
display: none;
|
|
|
|
|
font-size: 2em;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 20%;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
2024-03-30 18:05:22 +01:00
|
|
|
#losers-podium {
|
|
|
|
|
display: none;
|
|
|
|
|
font-size: 1.5em;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
2024-03-29 13:31:07 +01:00
|
|
|
body {
|
|
|
|
|
background-color: #2C3235;
|
|
|
|
|
}
|
2024-03-30 18:05:22 +01:00
|
|
|
.flex {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content:space-between;
|
|
|
|
|
align-items:center;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 70vh;
|
|
|
|
|
}
|
2024-03-29 13:31:07 +01:00
|
|
|
</style>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2"></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-03-30 18:05:22 +01:00
|
|
|
<div class="flex">
|
|
|
|
|
<div id="win-screen"></div>
|
|
|
|
|
<div id="losers-podium"></div>
|
|
|
|
|
</div>
|
2024-03-29 13:31:07 +01:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var gamestate = JSON.parse('{{ gamestate | tojson }}');
|
2024-03-30 18:05:22 +01:00
|
|
|
var players = [];
|
2024-03-29 13:31:07 +01:00
|
|
|
for (player in gamestate.players) {
|
2024-03-30 18:05:22 +01:00
|
|
|
gamestate.players[player]['name'] = player;
|
|
|
|
|
players.push(gamestate.players[player]);
|
2024-03-29 13:31:07 +01:00
|
|
|
}
|
2024-03-30 18:05:22 +01:00
|
|
|
players.sort((a, b) => b.points - a.points);
|
|
|
|
|
var winner = players.shift();
|
|
|
|
|
var winnerName = winner.name;
|
|
|
|
|
var winnerpoints = winner.points;
|
2024-03-29 13:31:07 +01:00
|
|
|
|
|
|
|
|
function showWinScreen() {
|
|
|
|
|
// Display confetti
|
|
|
|
|
confetti({
|
|
|
|
|
particleCount: 200,
|
|
|
|
|
spread: 80,
|
|
|
|
|
origin: { y: 0.6 }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Display winner's name
|
|
|
|
|
var winScreen = document.getElementById('win-screen');
|
|
|
|
|
winScreen.innerHTML = "<strong>" + winnerName + "</strong> wins!" + "<br>" + "with <strong>" + winnerpoints + "</strong> points";
|
|
|
|
|
winScreen.style.display = 'block';
|
2024-03-30 18:05:22 +01:00
|
|
|
|
|
|
|
|
// Display losers
|
|
|
|
|
var losersPodium = document.getElementById('losers-podium');
|
|
|
|
|
losersPodium.innerHTML = "<strong>Losers:</strong><br>";
|
|
|
|
|
players.forEach(player => {
|
|
|
|
|
losersPodium.innerHTML += player.name + ": " + player.points + " points<br>";
|
|
|
|
|
});
|
|
|
|
|
losersPodium.style.display = 'block';
|
2024-03-29 13:31:07 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showWinScreen();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
