outline demo interface

This commit is contained in:
Ilion Beyst 2022-02-05 16:48:08 +01:00
parent cd9689c6ef
commit c1feeaa7e6
3 changed files with 155 additions and 15 deletions

View file

@ -23,6 +23,7 @@
"eslint-plugin-svelte3": "^3.2.1", "eslint-plugin-svelte3": "^3.2.1",
"prettier": "^2.4.1", "prettier": "^2.4.1",
"prettier-plugin-svelte": "^2.4.0", "prettier-plugin-svelte": "^2.4.0",
"sass": "^1.49.7",
"svelte": "^3.44.0", "svelte": "^3.44.0",
"svelte-check": "^2.2.6", "svelte-check": "^2.2.6",
"svelte-preprocess": "^4.9.4", "svelte-preprocess": "^4.9.4",

View file

@ -1,20 +1,29 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import Visualizer from "$lib/components/Visualizer.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import "./style.css";
let editor; let editor;
let matches = [];
let selectedMatchId: string | undefined = undefined;
let selectedMatchLog: string | undefined = undefined;
onMount(async () => { onMount(async () => {
const ace = await import("ace-builds"); await load_editor();
editor = ace.edit("editor");
const python_mode = await import("ace-builds/src-noconflict/mode-python");
editor.getSession().setMode(new python_mode.Mode());
const gh_theme = await import ("ace-builds/src-noconflict/theme-github");
editor.setTheme(gh_theme);
}); });
async function load_editor() {
const ace = await import("ace-builds");
const python_mode = await import("ace-builds/src-noconflict/mode-python");
const gh_theme = await import("ace-builds/src-noconflict/theme-github");
editor = ace.edit("editor");
editor.getSession().setMode(new python_mode.Mode());
editor.setTheme(gh_theme);
}
async function submitCode() { async function submitCode() {
if (editor === undefined) { if (editor === undefined) {
return; return;
@ -35,19 +44,146 @@
} }
let responseData = await response.json(); let responseData = await response.json();
let matchId = responseData["match_id"]; let matchId = responseData["match_id"];
goto(`/submission_matches/${matchId}`); // 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();
} }
</script> </script>
<h1>Planetwars</h1> <div class="outer-container">
<div id="editor" /> <div class="top-bar" />
<button on:click={submitCode}>Submit</button> <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;
}
<style scoped>
#editor { #editor {
width: 100%; width: 100%;
max-width: 800px; height: 100%;
height: 600px; }
.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;
} }
</style> </style>

View file

@ -0,0 +1,3 @@
body {
margin: 0;
}