aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web/pw-server/src/lib/components/OutputPane.svelte48
-rw-r--r--web/pw-server/src/lib/components/SubmitPane.svelte31
-rw-r--r--web/pw-server/src/lib/components/Visualizer.svelte13
-rw-r--r--web/pw-server/src/routes/index.svelte24
4 files changed, 101 insertions, 15 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">
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 @@
</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;
}