Add leaderboard and a somewhat working graph

libs/database/wrapper.js

@@ -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,

routes/routes.js

@@ -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" })
     }
 )
 

views/pages/mapSingle.njk

@@ -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 %}
@@ -101,5 +103,87 @@
                 </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 %}