From 17d29c5397f5b2a39d76587722d20467a53014a8 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Wed, 18 May 2022 22:03:46 +0200
Subject: add basic leaderboard view

---
 web/pw-server/src/routes/index.svelte | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

(limited to 'web/pw-server/src/routes/index.svelte')

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 {
-- 
cgit v1.2.3