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
|
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,
|
||||||
|
|
|
@ -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" })
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -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 %}
|
Loading…
Reference in New Issue
Block a user