ddstats-server/views/pages/mapSingle.njk

209 lines
7.3 KiB
Plaintext
Raw Permalink Normal View History

2021-11-04 22:50:57 +01:00
{% extends "../templates/basic.njk" %}
{% import "../components/_map.njk" as mapComponent %}
2021-11-05 11:30:17 +01:00
{% import "../components/_utils.njk" as utils %}
2021-11-04 22:58:32 +01:00
{% set map = data.map %}
2021-11-04 23:20:41 +01:00
{% set raceLeaderboard = data.raceLeaderboard %}
{% set teamLeaderboard = data.teamLeaderboard %}
{% set graphMap = data.graphMap %}
2021-11-04 22:50:57 +01:00
{% block head %}
<title>DDStats - {{ map.map }}</title>
2021-11-04 22:50:57 +01:00
<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>
2021-11-04 22:50:57 +01:00
{% endblock %}
{% block body %}
2021-11-05 10:32:06 +01:00
<main class="flex-container">
<div class="map map-detailed">
<img class="map-image" src="https://ddnet.tw/ranks/maps/{{ map.map | replace(r/[À-ž]/g, "__") | replace(r/[^a-zA-Z0-9]/g, "_") }}.png">
<h1 class="map-name">{{ map.map }}</h1>
<table class="map-info">
<tr>
<td>
{% if map.mappers[1] %}
Mappers:
{% else %}
Mapper:
{% endif %}
</td>
<td>
{{ map.mappers.join(", ") }}
</td>
</tr>
<tr>
<td>
Category:
</td>
<td>
{{ map.category }}
</td>
</tr>
<tr>
<td>
Rating:
</td>
<td>
{% for i in range(0, map.stars) %}★{% endfor %}
{% for i in range(0, 5 - map.stars) %}☆{% endfor %}
</td>
</tr>
<tr>
<td>
Points:
</td>
<td>
{{ map.points }}
</td>
</tr>
<tr>
<td>
Released:
</td>
<td>
{{ map.release }}
</td>
</tr>
<tr>
<td>
Total finishes:
</td>
<td>
{{ map.finishes.total }}
</td>
</tr>
<tr>
<td>
Team finishes:
</td>
<td>
{{ map.finishes.team }}
</td>
</tr>
<tr>
<td>
Unique finishes:
</td>
<td>
{{ map.finishes.unique }}
</td>
</tr>
<tr>
<td>
Median time:
</td>
<td>
{{ utils.fancyTime(map.times.median) }}
2021-11-05 10:32:06 +01:00
</td>
</tr>
<tr>
<td>
Average time:
</td>
<td>
{{ utils.fancyTime(map.times.average) }}
2021-11-05 10:32:06 +01:00
</td>
</tr>
</table>
</div>
2021-11-05 10:32:06 +01:00
<div class="leaderboard">
<h2> Records! </h2>
{% for record in raceLeaderboard %}
<div class="rank">
2021-11-06 23:01:30 +01:00
<img class="country-image" data-src="https://ddnet.tw/countryflags/{%if record.server %}{{record.server}}{%else%}UNK{%endif%}.png">
2021-11-05 10:32:06 +01:00
<p class="rank-position">{{ record.rank }}.</p>
<p class="rank-player">{{ record.player }}</p>
2021-11-05 11:30:17 +01:00
<p class="rank-time">{{ utils.fancyTime(record.time) }}</p>
2021-11-05 10:32:06 +01:00
</div>
{% endfor %}
</div>
2021-11-05 11:56:31 +01:00
{% if map.finishes.team %}
<div class="leaderboard">
<h2> Team records! </h2>
{% for record in teamLeaderboard %}
<div class="rank">
2021-11-06 23:01:30 +01:00
<img class="country-image" data-src="https://ddnet.tw/countryflags/{%if record.server %}{{record.server}}{%else%}UNK{%endif%}.png">
2021-11-05 11:56:31 +01:00
<p class="rank-position">{{ record.teamrank }}.</p>
<p class="rank-player">{{ record.players.join(", ") }}</p>
<p class="rank-time">{{ utils.fancyTime(record.time) }}</p>
</div>
{% endfor %}
</div>
{% endif %}
2021-11-05 10:32:06 +01:00
<div class="leaderboard-history">
<h1> Record over time </h1>
<div class="container">
<canvas id="chart"></canvas>
</div>
<script>
const ctx = document.getElementById("chart").getContext("2d");
const graph = {{ data.graphMap | dump | safe }}
2021-11-05 14:00:44 +01:00
const map = "{{ map.map | safe }}"
2021-11-05 10:32:06 +01:00
2021-11-05 14:00:44 +01:00
Chart.defaults.global.defaultFontFamily = "Manrope Regular"
Chart.defaults.global.defaultFontColor = "#9090AF"
2021-11-05 10:32:06 +01:00
const myChart = new Chart(ctx, {
type: 'line',
options: {
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
},
scales: {
xAxes: [{
2021-11-05 14:00:44 +01:00
gridLines: {
display: true,
color: "#50506F"
},
2021-11-05 10:32:06 +01:00
type: 'time',
time: {
unit: 'year'
}
2021-11-05 14:00:44 +01:00
}],
yAxes: [{
gridLines: {
display: true,
color: "#50506F"
},
scaleLabel: {
display: true,
labelString: 'Time (seconds)'
}
2021-11-05 10:32:06 +01:00
}]
},
elements: {
point: {
2021-11-05 11:56:31 +01:00
radius: 0
2021-11-05 10:32:06 +01:00
},
line: {
fill: false
}
2021-11-05 14:00:44 +01:00
},
},
2021-11-05 10:32:06 +01:00
data: {
datasets: [{
2021-11-05 14:00:44 +01:00
label: map,
2021-11-05 10:32:06 +01:00
data: graph,
color: [
'#EE588F'
],
borderColor: [
'#FBA7C6'
],
2021-11-05 11:56:31 +01:00
borderWidth: 3,
lineTension: 0
2021-11-05 10:32:06 +01:00
}]
}
2021-11-05 10:32:06 +01:00
})
</script>
</div>
2021-11-04 22:50:57 +01:00
</main>
{% endblock %}