add basic leaderboard view

2 files changed, 88 insertions, 12 deletions

diff --git a/web/pw-server/src/lib/components/Leaderboard.svelte b/web/pw-server/src/lib/components/Leaderboard.svelte
new file mode 100644
index 0000000..75e4807
--- /dev/null
+++ b/web/pw-server/src/lib/components/Leaderboard.svelte
@@ -0,0 +1,72 @@
+<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);
+    }
+  });
+
+  function formatRating(entry: object): any {
+    const rating = entry["rating"];
+    if (rating != null) {
+      return rating.toFixed(0);
+    } else {
+      // why does this happen?
+      return "-inf";
+    }
+  }
+</script>
+
+<div class="container">
+  <table class="leaderboard">
+    <tr class="leaderboard-row leaderboard-header">
+      <th class="leaderboard-rank" />
+      <th class="leaderboard-rating">Rating</th>
+      <th class="leaderboard-bot">Bot</th>
+      <th class="leaderboard-author">Author</th>
+    </tr>
+    {#each leaderboard as entry, index}
+      <tr class="leaderboard-row">
+        <td class="leaderboard-rank">{index + 1}</td>
+        <td class="leaderboard-rating">
+          {formatRating(entry)}
+        </td>
+        <td class="leaderboard-bot">{entry["bot"]["name"]}</td>
+        <td class="leaderboard-author">
+          {#if entry["author"]}
+            {entry["author"]["username"]}
+          {/if}
+        </td>
+      </tr>
+    {/each}
+  </table>
+</div>
+
+<style lang="scss">
+  .container {
+    overflow-y: scroll;
+    height: 100%;
+  }
+  .leaderboard {
+    margin: 18px auto;
+    text-align: center;
+  }
+
+  .leaderboard th,
+  .leaderboard td {
+    padding: 8px 16px;
+  }
+  .leaderboard-rank {
+    color: #333;
+  }
+</style>
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index 32efe69..243f4da 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -13,11 +13,13 @@
   import SubmitPane from "$lib/components/SubmitPane.svelte";
   import OutputPane from "$lib/components/OutputPane.svelte";
   import RulesView from "$lib/components/RulesView.svelte";
+  import Leaderboard from "$lib/components/Leaderboard.svelte";
 
   enum ViewMode {
     Editor,
     MatchVisualizer,
     Rules,
+    Leaderboard,
   }
 
   let matches = [];
@@ -111,10 +113,10 @@
     return log;
   }
 
-  function selectEditor() {
+  function setViewMode(viewMode_: ViewMode) {
     selectedMatchId = undefined;
     selectedMatchLog = undefined;
-    viewMode = ViewMode.Editor;
+    viewMode = viewMode_;
   }
 
   function selectRules() {
@@ -140,17 +142,24 @@
     <div
       class="editor-button sidebar-item"
       class:selected={viewMode === ViewMode.Editor}
-      on:click={selectEditor}
+      on:click={() => setViewMode(ViewMode.Editor)}
     >
       Editor
     </div>
     <div
       class="rules-button sidebar-item"
       class:selected={viewMode === ViewMode.Rules}
-      on:click={selectRules}
+      on:click={() => setViewMode(ViewMode.Rules)}
     >
       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}
@@ -175,6 +184,8 @@
       <EditorView {editSession} />
     {:else if viewMode === ViewMode.Rules}
       <RulesView />
+    {:else if viewMode === ViewMode.Leaderboard}
+      <Leaderboard />
     {/if}
   </div>
   <div class="sidebar-right">
@@ -218,16 +229,9 @@
     height: 100%;
   }
 
-  .editor-button {
-    padding: 15px;
-  }
-
-  .rules-button {
-    padding: 15px;
-  }
-
   .sidebar-item {
     color: #eee;
+    padding: 15px;
   }
 
   .sidebar-item:hover {