Leaderboard: Implement first primitive leaderboard page (only total points)

flake.nix

@@ -81,6 +81,9 @@
         packages = with pkgs; [
           nodejs_23
           pocketbase
+
+          sqlite # For sqlite console
+          sqlitebrowser # To check low-level pocketbase data
         ];
 
         # Use $1 for positional args
@@ -88,7 +91,7 @@
           {
             name = "pb";
             help = "Serve PocketBase";
-            command = "pocketbase serve --http 192.168.86.50:8090";
+            command = "pocketbase serve --http 192.168.86.50:8090 --dev";
           }
           {
             name = "dev";

src/lib/fetch.ts

@@ -7,6 +7,8 @@ import type {
   Hottake,
   Race,
   RacePick,
+  RacePickPoints,
+  RacePickPointsAcc,
   RaceResult,
   SeasonPick,
   SeasonPickedUser,
@@ -261,3 +263,29 @@ export const fetch_seasonpickedusers = async (
 
   return seasonpickedusers;
 };
+
+/**
+ * Fetch all [RacePickPoints] from the database
+ */
+export const fetch_racepickpoints = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RacePickPoints[]> => {
+  const racepickpoints: RacePickPoints[] = await pb
+    .collection("racepickpoints")
+    .getFullList({ fetch: fetch });
+
+  return racepickpoints;
+};
+
+/**
+ * Fetch all [RacePickPointsAcc] from the database, ordered descendingly by total points.
+ */
+export const fetch_racepickpointsacc = async (
+  fetch: (_: any) => Promise<Response>,
+): Promise<RacePickPointsAcc[]> => {
+  const racepickpointsacc: RacePickPointsAcc[] = await pb
+    .collection("racepickpointsacc")
+    .getFullList({ fetch: fetch });
+
+  return racepickpointsacc;
+};

src/lib/schema.ts

@@ -127,3 +127,21 @@ export interface SeasonPickedUser {
   admin: boolean;
   picked: string | null;
 }
+
+// Points Data
+
+export interface RacePickPoints {
+  id: string;
+  user: string;
+  step: number;
+  pxx_points: number;
+  dnf_points: number;
+}
+
+export interface RacePickPointsAcc {
+  id: string;
+  user: string;
+  total_pxx_points: number;
+  total_dnf_points: number;
+  total_points: number;
+}

src/routes/leaderboard/+page.svelte

@@ -1,3 +1,28 @@
+<script lang="ts">
+  import { Table, type TableColumn } from "$lib/components";
+  import { get_by_value } from "$lib/database";
+  import type { PageData } from "./$types";
+
+  let { data }: { data: PageData } = $props();
+
+  const leaderboard_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "user",
+      label: "User",
+      valuefun: async (value: string): Promise<string> =>
+        get_by_value(await data.users, "id", value)?.firstname ?? "Invalid",
+    },
+    {
+      data_value_name: "total_points",
+      label: "Points",
+    },
+  ]);
+</script>
+
 <svelte:head>
   <title>Formula 11 - Leaderboard</title>
 </svelte:head>
+
+{#await Promise.all( [data.users, data.racepickpoints, data.racepickpointsacc], ) then [users, racepickpoints, racepickpointsacc]}
+  <Table data={racepickpointsacc} columns={leaderboard_columns} />
+{/await}

src/routes/leaderboard/+page.ts

@@ -0,0 +1,12 @@
+import { fetch_users, fetch_racepickpoints, fetch_racepickpointsacc } from "$lib/fetch";
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:users", "data:raceresults");
+
+  return {
+    users: fetch_users(fetch),
+    racepickpoints: fetch_racepickpoints(fetch),
+    racepickpointsacc: fetch_racepickpointsacc(fetch),
+  };
+};