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

190 lines
3.9 KiB
Svelte
Raw Normal View History

2022-01-30 23:34:21 +01:00
<script lang="ts">
import { goto } from "$app/navigation";
2022-02-05 16:48:08 +01:00
import Visualizer from "$lib/components/Visualizer.svelte";
2022-02-02 23:15:55 +01:00
import { onMount } from "svelte";
2022-02-05 16:48:08 +01:00
import "./style.css";
2022-02-02 23:15:55 +01:00
let editor;
2022-02-05 16:48:08 +01:00
let matches = [];
let selectedMatchId: string | undefined = undefined;
let selectedMatchLog: string | undefined = undefined;
2022-02-02 23:15:55 +01:00
onMount(async () => {
2022-02-05 16:48:08 +01:00
await load_editor();
});
2022-02-05 16:48:08 +01:00
async function load_editor() {
const ace = await import("ace-builds");
const python_mode = await import("ace-builds/src-noconflict/mode-python");
2022-02-05 16:48:08 +01:00
const gh_theme = await import("ace-builds/src-noconflict/theme-github");
2022-02-05 16:48:08 +01:00
editor = ace.edit("editor");
editor.getSession().setMode(new python_mode.Mode());
editor.setTheme(gh_theme);
2022-02-05 16:48:08 +01:00
}
2022-01-30 23:34:21 +01:00
async function submitCode() {
2022-02-02 23:15:55 +01:00
if (editor === undefined) {
return;
}
2022-01-30 23:34:21 +01:00
let response = await fetch("/api/submit_bot", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
2022-02-02 23:15:55 +01:00
code: editor.getValue(),
2022-01-30 23:34:21 +01:00
}),
});
if (!response.ok) {
throw Error(response.statusText);
}
let responseData = await response.json();
2022-02-05 16:48:08 +01:00
let matchId = responseData["match_id"];
2022-02-05 16:48:08 +01:00
// goto(`/submission_matches/${matchId}`);
matches.push({ matchId: matchId });
matches = matches;
}
async function selectMatch(matchId: string) {
console.log("showing match " + matchId);
let matchLog = await loadMatch(matchId);
selectedMatchId = matchId;
selectedMatchLog = matchLog;
}
async function loadMatch(matchId: string) {
const res = await fetch(`/api/submission_match_log/${matchId}`, {
headers: {
"Content-Type": "application/json",
},
});
let log = await res.text();
return log;
}
function selectEditor() {
selectedMatchId = undefined;
selectedMatchLog = undefined;
load_editor();
2022-01-30 23:34:21 +01:00
}
</script>
2022-02-05 16:48:08 +01:00
<div class="outer-container">
<div class="top-bar" />
<div class="container">
<div class="sidebar-left">
<div
class="sidebar-item"
class:selected={selectedMatchId === undefined}
on:click={selectEditor}
>
Editor
</div>
<ul class="match-list">
{#each matches as match}
<li class="match-card sidebar-item" on:click={() => selectMatch(match.matchId)}>
<div class="match-name">{match.matchId}</div>
</li>
{/each}
</ul>
</div>
<div class="editor-container">
{#if selectedMatchLog !== undefined}
<Visualizer matchLog={selectedMatchLog} />
{:else}
<div id="editor" />
{/if}
</div>
<div class="sidebar-right">
<button class="play-button" on:click={submitCode}>Submit</button>
</div>
</div>
</div>
<style lang="scss">
$bg-color: rgb(41, 41, 41);
.outer-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
height: 40px;
background-color: $bg-color;
border-bottom: 1px solid;
}
.container {
display: flex;
flex-grow: 1;
}
.sidebar-left {
width: 240px;
background-color: $bg-color;
}
.sidebar-right {
width: 400px;
background-color: white;
border-left: 1px solid;
padding: 10px;
}
.editor-container {
flex-grow: 1;
overflow: hidden;
}
2022-02-02 23:15:55 +01:00
#editor {
width: 100%;
2022-02-05 16:48:08 +01:00
height: 100%;
}
.editor-container {
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;
}
.sidebar-item {
padding: 15px;
color: #eee;
}
.sidebar-item:hover {
background-color: #333;
}
.sidebar-item.selected {
background-color: #333;
}
.toolbar-editor {
padding: 15px;
color: #eee;
}
.match-list {
list-style: none;
color: #eee;
2022-02-02 23:15:55 +01:00
}
</style>