feat: #be quick stats for dashboard

backend/src/index.ts

@@ -58,6 +58,11 @@ import { connection } from "./db";
 
 server.get("/", async (request, reply) => {
   // reply.code(200).send("Hello, World!");
+
+  const gamesCount = (await connection.table("games").count())[0].count;
+  const cluesCount = (await connection.table("clues").count())[0].count;
+  const shotsCount = (await connection.table("shots").count())[0].count;
+
   const gamesByDate = await connection
     .table("games")
     .select(
@@ -76,6 +81,9 @@ server.get("/", async (request, reply) => {
     .orderBy("bucket");
 
   reply.view("/templates/dashboard.ejs", {
+    gamesCount,
+    cluesCount,
+    shotsCount,
     gamesByDate,
     shotsByDuration,
   });

backend/templates/dashboard.ejs

@@ -32,9 +32,45 @@
     <div class="container-fluid">
         <div class="row">
             <main class="col-lg-8 col-md-10 mx-auto p-md-4">
+
+                <h1>Quick facts</h1>
+                <div class="row">
+                    <div class="col-sm-4">
+                        <div class="card text-dark bg-light m-2">
+                            <div class="card-body">
+                                <h5 class="card-title">
+                                    <%= gamesCount %>
+                                </h5>
+                                <h6 class="card-subtitle mb-2 text-muted">Games played</h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="card text-dark bg-light m-2">
+                            <div class="card-body">
+                                <h5 class="card-title">
+                                    <%= cluesCount %>
+                                </h5>
+                                <h6 class="card-subtitle mb-2 text-muted">Clues shown</h6>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-sm-4">
+                        <div class="card text-dark bg-light m-2">
+                            <div class="card-body">
+                                <h5 class="card-title">
+                                    <%= shotsCount %>
+                                </h5>
+                                <h6 class="card-subtitle mb-2 text-muted">Shots taken</h6>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
                 <h1>Game count by date</h1>
                 <script id="gamesByDateData" type="application/json"><%- JSON.stringify(gamesByDate) %></script>
                 <canvas id="gamesByDateChart"></canvas>
+
                 <h1>Shot count by duration [ms]</h1>
                 <script id="shotsByDurationData" type="application/json"><%- JSON.stringify(shotsByDuration) %></script>
                 <canvas id="shotsByDurationChart"></canvas>