Add leaderboard and a somewhat working graph

This commit is contained in:
furo 2021-11-05 09:36:43 +01:00
parent 9bf4326918
commit 7608a9fcd4
3 changed files with 100 additions and 4 deletions

View File

@ -319,6 +319,15 @@ export function finishedMaps(player) {
return unfinished return unfinished
} }
export function graphMap(map) {
const finishes = sqlite.prepare(`SELECT * FROM graphRecordCache WHERE map = ? ORDER BY date`)
let array = []
for (const record of finishes.iterate(map))
array.push({ t: record.date, y: record.time, player: record.player})
return array
}
export default { export default {
playerExists, playerExists,
finishedMaps, finishedMaps,
@ -326,6 +335,7 @@ export default {
player, player,
map, map,
graphMap,
mapCategory, mapCategory,
allMaps, allMaps,
mapExists, mapExists,

View File

@ -23,9 +23,11 @@ routes.get(
'/maps/:map', '/maps/:map',
(req, res) => { (req, res) => {
const map = wrapper.map(req.params.map) const map = wrapper.map(req.params.map)
const graphMap = wrapper.graphMap(req.params.map)
const raceLeaderboard = wrapper.leaderboardRace(req.params.map, 1, 10) const raceLeaderboard = wrapper.leaderboardRace(req.params.map, 1, 10)
const teamLeaderboard = wrapper.leaderboardTeamrace(req.params.map, 1, 10) const teamLeaderboard = wrapper.leaderboardTeamrace(req.params.map, 1, 10)
tx(req, res)('pages/mapSingle.njk', { map, raceLeaderboard, teamLeaderboard }, { currentSection: "maps" })
tx(req, res)('pages/mapSingle.njk', { map, graphMap, raceLeaderboard, teamLeaderboard }, { currentSection: "maps" })
} }
) )

View File

@ -3,11 +3,13 @@
{% set map = data.map %} {% set map = data.map %}
{% set raceLeaderboard = data.raceLeaderboard %} {% set raceLeaderboard = data.raceLeaderboard %}
{% set teamLeaderboard = data.teamLeaderboard %} {% set teamLeaderboard = data.teamLeaderboard %}
{% set graphMap = data.graphMap %}
{% block head %} {% block head %}
<title>DDStats - Maps!</title> <title>DDStats - Maps!</title>
<link rel="stylesheet" type="text/css" href="/assets/css/maps.css"> <link rel="stylesheet" type="text/css" href="/assets/css/maps.css">
<script src="/assets/scripts/lazyLoadImages.js" defer></script> <script src="/assets/scripts/lazyLoadImages.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
@ -101,5 +103,87 @@
</td> </td>
</tr> </tr>
</table> </table>
<h2> Records! </h2>
{% for record in raceLeaderboard %}
<img class="country-image" src="https://ddnet.tw/countryflags/{{ record.server }}.png">
{{ record.rank }} -
{{ (record.time - (record.time % 60)) / 60 }}:
{%- if record.time | round % 60 > 9 %}
{{- record.time | round % 60 }}
{%- else %}
0{{- record.time | round % 60 }}
{% endif %}
{{ record.player }} <br>
{% endfor %}
<h2> Team records! </h2>
{% for record in teamLeaderboard %}
<img class="country-image" src="https://ddnet.tw/countryflags/{{ record.server }}.png">
{{ record.teamrank }} -
{{ (record.time - (record.time % 60)) / 60 }}:
{%- if record.time | round % 60 > 9 %}
{{- record.time | round % 60 }}
{%- else %}
0{{- record.time | round % 60 }}
{% endif %}
{{ record.players.join(", ") }} <br>
{% endfor %}
<h1> Record over time </h1>
<div class="container">
<canvas id="chart"></canvas>
</div>
<script>
var ctx = document.getElementById("chart").getContext("2d");
const graph = {{ data.graphMap | dump | safe }}
var myChart = new Chart(ctx, {
type: 'line',
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
},
/* This currently doesn't work :( */
callbacks: {
label: function(tooltipItem, data) {
return data[tooltipItem['index']]['player']
}
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'year'
}
}]
},
elements: {
point: {
radius: 10
},
line: {
fill: false
}
}
},
data: {
datasets: [{
label: '{{ map.map }}',
data: graph,
borderColor: [
'rgba(255,99,132,1)'
],
borderWidth: 3
}
]}
});
</script>
</main> </main>
{% endblock %} {% endblock %}