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 @@
+
+
+
+ {#if botStdErr.length > 0}
+
+
+ {botStdErr}
+
+ {/if}
+
+
+
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 @@
+
+
+
+ Submit your bot to play a match
+
+
+
+
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");
+ }
diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte
index 7b364be..1ef5c68 100644
--- a/web/pw-server/src/routes/index.svelte
+++ b/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 @@
- {#if selectedMatchLog !== undefined}
+ {#if selectedMatchLog}
{:else}
{/if}
@@ -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;
}