add a simple view with game rules

2 files changed, 92 insertions, 0 deletions

diff --git a/web/pw-server/src/lib/components/RulesView.svelte b/web/pw-server/src/lib/components/RulesView.svelte
new file mode 100644
index 0000000..c3cf125
--- /dev/null
+++ b/web/pw-server/src/lib/components/RulesView.svelte
@@ -0,0 +1,70 @@
+<div class="game-rules">
+  <p>
+    Every turn, your bot will receive a json-encoded line on stdin, representing the current game
+    state.
+  </p>
+
+  Example game state:
+  <pre>{`
+  {
+    "planets": [
+      {
+          "ship_count": 2,
+          "x": -2.0,
+          "y": 0.0,
+          "owner": 1,
+          "name": "your planet"
+      },
+      {
+          "ship_count": 4,
+          "x": 2.0,
+          "y": 0.0,
+          "owner": 2,
+          "name": "enemy planet"
+      },
+    ],
+    "expeditions": [
+      {
+        "id": 169,
+        "ship_count": 8,
+        "origin": "your planet",
+        "destination": "enemy planet",
+        "owner": 1,
+        "turns_remaining": 2
+      }
+    ]
+  }
+  `}</pre>
+
+  <p>
+    Every turn, you may send out expeditions to conquer other planets. You can do this by writing a
+    json-encoded line to stdout:
+  </p>
+
+  Example command:
+  <pre>{`
+  {
+    "moves": [
+      {
+        "origin": "your planet",
+        "target": "enemy planet",
+        "ship_count": 2
+      }
+    ]
+  }
+  `}
+  </pre>
+
+  The amount of turns an expedition will travel is equal to the ceiled euclidean distance between
+  its origin and target planet.
+</div>
+
+<style lang="scss">
+  .game-rules {
+    padding: 15px;
+    overflow-y: scroll;
+    height: 100%;
+    margin-bottom: 200px;
+    box-sizing: border-box;
+  }
+</style>
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;
   }