Update stats page with new API format

Author: oskarrough

src/game/backend.js

@@ -59,12 +59,11 @@ export async function postRun(game, playerName) {
 }
 
 /**
- * @returns {Promise<Run[]>} list of game runs
+ * @returns {Promise<{runs: Run[], total: number}>} list of game runs
  */
 export async function getRuns() {
 	const res = await fetch(apiUrl)
-	const {runs} = await res.json()
-	return runs
+	return await res.json()
 }
 
 /**

src/ui/pages/stats.astro

@@ -3,7 +3,7 @@ import Layout from '../layouts/Layout.astro'
 import {getRuns} from '../../game/backend.js'
 import '../styles/typography.css'
 
-const runs = (await getRuns()).reverse()
+let {runs, total} = (await getRuns())
 ---
 
 <Layout title="Statistics & Highscores">
@@ -18,7 +18,7 @@ const runs = (await getRuns()).reverse()
 
     <div class="Box Box--text Box--full">
       <p>
-        A chronological list of Slay the Web runs.<br />
+        A chronological list of <strong>{total}</strong> Slay the Web runs. Although we only show 200 latest here because I did not implement pagination and else the server timeouts..<br />
         There is quite a bit of statistics that could be gathered from the runs, and isn't yet shown here. <a
           href="https://matrix.to/#/#slaytheweb:matrix.org"
           rel="nofollow">Chat on #slaytheweb:matrix.org</a>