show bot stderr

This commit is contained in:
Ilion Beyst 2022-02-23 22:30:36 +01:00
parent 54b9694f0d
commit 816b3bfc27
4 changed files with 101 additions and 15 deletions

View file

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

View file

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

View file

@ -19,10 +19,21 @@
if (matchLog === null) { if (matchLog === null) {
visualizer.set_loading(true); visualizer.set_loading(true);
} else { } else {
visualizer.set_instance(matchLog); console.log(matchLog);
let instanceLog = extractGameStates(matchLog);
visualizer.set_instance(instanceLog);
visualizer.set_loading(false); 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> </script>
<div id="main" class="loading"> <div id="main" class="loading">

View file

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