3 files changed, 91 insertions, 1 deletions
diff --git a/web/pw-server/src/lib/components/OutputPane.svelte b/web/pw-server/src/lib/components/OutputPane.svelte
new file mode 100644
index 0000000..c72a22e
--- /dev/null
+++ b/web/pw-server/src/lib/components/OutputPane.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  export let matchLog: string;
+
+  function getStdErr(log: string, botId: number): string {
+    let output = [];
+    log
+      .split("\n")
+      .slice(0, -1)
+      .forEach((line) => {
+        let message = JSON.parse(line);
+        if (message["type"] === "stderr" && message["player_id"] === botId) {
+          output.push(message["message"]);
+        }
+      });
+    return output.join("\n");
+  }
+
+  $: botStdErr = getStdErr(matchLog, 1);
+</script>
+
+<div class="output">
+  {#if botStdErr.length > 0}
+    <h3 class="output-header">stderr:</h3>
+    <div class="output-text">
+      {botStdErr}
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  .output {
+    width: 100%;
+    overflow-y: scroll;
+    background-color: rgb(41, 41, 41);
+    padding: 15px;
+  }
+
+  .output-text {
+    color: #ccc;
+    font-family: monospace;
+    white-space: pre-wrap;
+  }
+
+  .output-header {
+    color: #eee;
+    padding-bottom: 20px;
+  }
+</style>
diff --git a/web/pw-server/src/lib/components/SubmitPane.svelte b/web/pw-server/src/lib/components/SubmitPane.svelte
new file mode 100644
index 0000000..eb4d3e4
--- /dev/null
+++ b/web/pw-server/src/lib/components/SubmitPane.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+
+  const dispatch = createEventDispatcher();
+
+  function submit() {
+    dispatch("submit");
+  }
+</script>
+
+<div class="submit-pane">
+  Submit your bot to play a match
+  <button class="play-button" on:click={submit}>Submit</button>
+</div>
+
+<style lang="scss">
+  .submit-pane {
+    margin: 20px auto;
+  }
+
+  .play-button {
+    padding: 8px 16px;
+    border-radius: 8px;
+    border: 0;
+    font-size: 18pt;
+    display: block;
+    margin: 20px auto;
+    background-color: lightgreen;
+    cursor: pointer;
+  }
+</style>
diff --git a/web/pw-server/src/lib/components/Visualizer.svelte b/web/pw-server/src/lib/components/Visualizer.svelte
index d53eb36..1e8d09f 100644
--- a/web/pw-server/src/lib/components/Visualizer.svelte
+++ b/web/pw-server/src/lib/components/Visualizer.svelte
@@ -19,10 +19,21 @@
     if (matchLog === null) {
       visualizer.set_loading(true);
     } else {
-      visualizer.set_instance(matchLog);
+      console.log(matchLog);
+      let instanceLog = extractGameStates(matchLog);
+      visualizer.set_instance(instanceLog);
       visualizer.set_loading(false);
     }
   }
+
+  function extractGameStates(matchLog: string): string {
+    // TODO: find a better way to do this
+    return matchLog
+      .split("\n")
+      .slice(0, -1)
+      .filter((line) => JSON.parse(line)["type"] == "gamestate")
+      .join("\n");
+  }
 </script>
 
 <div id="main" class="loading">