Add leaderboard and a somewhat working graph
This commit is contained in:
parent
9bf4326918
commit
7608a9fcd4
|
@ -319,6 +319,15 @@ export function finishedMaps(player) {
|
|||
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 {
|
||||
playerExists,
|
||||
finishedMaps,
|
||||
|
@ -326,6 +335,7 @@ export default {
|
|||
player,
|
||||
|
||||
map,
|
||||
graphMap,
|
||||
mapCategory,
|
||||
allMaps,
|
||||
mapExists,
|
||||
|
|
|
@ -23,9 +23,11 @@ routes.get(
|
|||
'/maps/:map',
|
||||
(req, res) => {
|
||||
const map = wrapper.map(req.params.map)
|
||||
const graphMap = wrapper.graphMap(req.params.map)
|
||||
const raceLeaderboard = wrapper.leaderboardRace(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" })
|
||||
}
|
||||
)
|
||||
|
||||
|
|
|
@ -3,11 +3,13 @@
|
|||
{% set map = data.map %}
|
||||
{% set raceLeaderboard = data.raceLeaderboard %}
|
||||
{% set teamLeaderboard = data.teamLeaderboard %}
|
||||
|
||||
{% set graphMap = data.graphMap %}
|
||||
{% block head %}
|
||||
<title>DDStats - Maps!</title>
|
||||
<link rel="stylesheet" type="text/css" href="/assets/css/maps.css">
|
||||
<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 %}
|
||||
|
||||
{% block body %}
|
||||
|
@ -89,7 +91,7 @@
|
|||
Median time:
|
||||
</td>
|
||||
<td>
|
||||
{{ map.times.median | round(2)}}
|
||||
{{ map.times.median | round(2) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
@ -97,9 +99,91 @@
|
|||
Average time:
|
||||
</td>
|
||||
<td>
|
||||
{{ map.times.average | round(2)}}
|
||||
{{ map.times.average | round(2) }}
|
||||
</td>
|
||||
</tr>
|
||||
</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>
|
||||
{% endblock %}
|
Loading…
Reference in New Issue
Block a user