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} +

stderr:

+
+ {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; }