extract leaderboard from editor

web/pw-server/src/lib/components/Leaderboard.svelte

@@ -1,20 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-
-  let leaderboard = [];
-
-  onMount(async () => {
-    const res = await fetch("/api/leaderboard", {
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-
-    if (res.ok) {
-      leaderboard = await res.json();
-      console.log(leaderboard);
-    }
-  });
+  export let leaderboard;
 
   function formatRating(entry: object): any {
     const rating = entry["rating"];

web/pw-server/src/routes/__layout.svelte

@@ -13,6 +13,9 @@
       <div class="navbar-item">
         <a href="/editor">Editor</a>
       </div>
+      <div class="navbar-item">
+        <a href="/leaderboard">Leaderboard</a>
+      </div>
     </div>
     <div class="navbar-right">
       <UserControls />

web/pw-server/src/routes/editor.svelte

@@ -19,7 +19,6 @@
     Editor,
     MatchVisualizer,
     Rules,
-    Leaderboard,
   }
 
   let matches = [];
@@ -153,13 +152,6 @@
     >
       Rules
     </div>
-    <div
-      class="sidebar-item"
-      class:selected={viewMode === ViewMode.Leaderboard}
-      on:click={() => setViewMode(ViewMode.Leaderboard)}
-    >
-      Leaderboard
-    </div>
     <div class="sidebar-header">match history</div>
     <ul class="match-list">
       {#each matches as match}
@@ -184,8 +176,6 @@
       <EditorView {editSession} />
     {:else if viewMode === ViewMode.Rules}
       <RulesView />
-    {:else if viewMode === ViewMode.Leaderboard}
-      <Leaderboard />
     {/if}
   </div>
   <div class="sidebar-right">

web/pw-server/src/routes/leaderboard.svelte

@@ -0,0 +1,28 @@
+<script lang="ts" context="module">
+  import { ApiClient } from "$lib/api_client";
+
+  export async function load({ fetch }) {
+    try {
+      const apiClient = new ApiClient(fetch);
+      const leaderboard = await apiClient.get("/api/leaderboard");
+      return {
+        props: {
+          leaderboard,
+        },
+      };
+    } catch (error) {
+      return {
+        status: error.status,
+        error: error,
+      };
+    }
+  }
+</script>
+
+<script lang="ts">
+  import Leaderboard from "$lib/components/Leaderboard.svelte";
+
+  export let leaderboard: object[];
+</script>
+
+<Leaderboard {leaderboard} />