61 lines
1.5 KiB
HTML
61 lines
1.5 KiB
HTML
|
{% extends "header.html" %} {% block content %}
|
||
|
|
<header>
|
||
|
|
<h1 class="title">Leaderboard</h1>
|
||
|
|
</header>
|
||
|
|
<table class="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Position</th>
|
||
|
|
<th>Name</th>
|
||
|
|
<th>Elo</th>
|
||
|
|
<th>Username</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="leaderboard-body">
|
||
|
|
{% for row in data %}
|
||
|
|
<tr>
|
||
|
|
<td>{{ row['position'] }}</td>
|
||
|
|
<td>{{ row['name'] }}</td>
|
||
|
|
<td>{{ row['elo'] }}</td>
|
||
|
|
<td>{{ row['username'] }}</td>
|
||
|
|
</tr>
|
||
|
|
{% endfor %}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
async function fetchLeaderboardData() {
|
||
|
|
try {
|
||
|
|
const response = await fetch("http://localhost:5000/leaderboard");
|
||
|
|
if (!response.ok) return;
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
const tableBody = document.getElementById("leaderboard-body");
|
||
|
|
|
||
|
|
tableBody.innerHTML = "";
|
||
|
|
|
||
|
|
data.forEach((row) => {
|
||
|
|
const tr = document.createElement("tr");
|
||
|
|
tr.innerHTML = `
|
||
|
|
<td>${row.position}</td>
|
||
|
|
<td>${row.name}</td>
|
||
|
|
<td>${row.elo}</td>
|
||
|
|
<td>${row.username}</td>
|
||
|
|
`;
|
||
|
|
tableBody.appendChild(tr);
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Failed to fetch leaderboard data:", error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Poll the server every 5 seconds
|
||
|
|
setInterval(fetchLeaderboardData, 5000);
|
||
|
|
|
||
|
|
// Initial load
|
||
|
|
fetchLeaderboardData();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{% endblock %}
|