add a simple view with game rules

1 files changed, 22 insertions, 0 deletions

diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index 1ed7b8b..8680588 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/web/pw-server/src/routes/index.svelte
@@ -13,10 +13,12 @@
   import { debounce } from "$lib/utils";
   import SubmitPane from "$lib/components/SubmitPane.svelte";
   import OutputPane from "$lib/components/OutputPane.svelte";
+  import RulesView from "$lib/components/RulesView.svelte";
 
   enum ViewMode {
     Editor,
     MatchVisualizer,
+    Rules,
   }
 
   let matches = [];
@@ -113,6 +115,12 @@
     viewMode = ViewMode.Editor;
   }
 
+  function selectRules() {
+    selectedMatchId = undefined;
+    selectedMatchLog = undefined;
+    viewMode = ViewMode.Rules;
+  }
+
   function formatMatchTimestamp(timestampString: string): string {
     let timestamp = DateTime.fromISO(timestampString, { zone: "utc" }).toLocal();
     if (timestamp.startOf("day").equals(DateTime.now().startOf("day"))) {
@@ -134,6 +142,13 @@
       >
         Editor
       </div>
+      <div
+        class="rules-button sidebar-item"
+        class:selected={viewMode === ViewMode.Rules}
+        on:click={selectRules}
+      >
+        Rules
+      </div>
       <div class="sidebar-header">match history</div>
       <ul class="match-list">
         {#each matches as match}
@@ -156,6 +171,8 @@
         <Visualizer matchLog={selectedMatchLog} />
       {:else if viewMode === ViewMode.Editor}
         <EditorView {editSession} />
+      {:else if viewMode === ViewMode.Rules}
+        <RulesView />
       {/if}
     </div>
     <div class="sidebar-right">
@@ -207,6 +224,7 @@
     flex-grow: 1;
     flex-shrink: 1;
     overflow: hidden;
+    background-color: white;
   }
 
   .editor-container {
@@ -217,6 +235,10 @@
     padding: 15px;
   }
 
+  .rules-button {
+    padding: 15px;
+  }
+
   .sidebar-item {
     color: #eee;
   }