show bot stderr

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>

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>

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">

web/pw-server/src/routes/index.svelte

@@ -11,6 +11,8 @@
   import * as AcePythonMode from "ace-builds/src-noconflict/mode-python?client";
   import { getBotCode, saveBotCode } from "$lib/bot_code";
   import { debounce } from "$lib/utils";
+  import SubmitPane from "$lib/components/SubmitPane.svelte";
+  import OutputPane from "$lib/components/OutputPane.svelte";
 
   let matches = [];
 
@@ -156,14 +158,18 @@
       </ul>
     </div>
     <div class="editor-container">
-      {#if selectedMatchLog !== undefined}
+      {#if selectedMatchLog}
         <Visualizer matchLog={selectedMatchLog} />
       {:else}
         <EditorView {editSession} />
       {/if}
     </div>
     <div class="sidebar-right">
-      <button class="play-button" on:click={submitCode}>Submit</button>
+      {#if selectedMatchLog}
+        <OutputPane matchLog={selectedMatchLog} />
+      {:else}
+        <SubmitPane on:submit={submitCode} />
+      {/if}
     </div>
   </div>
 </div>
@@ -199,7 +205,8 @@
     width: 400px;
     background-color: white;
     border-left: 1px solid;
-    padding: 10px;
+    padding: 0;
+    display: flex;
   }
   .editor-container {
     flex-grow: 1;
@@ -211,17 +218,6 @@
     height: 100%;
   }
 
-  .play-button {
-    padding: 8px 16px;
-    border-radius: 8px;
-    border: 0;
-    font-size: 18pt;
-    display: block;
-    margin: 20px auto;
-    background-color: lightgreen;
-    cursor: pointer;
-  }
-
   .editor-button {
     padding: 15px;
   }