diff options
| -rw-r--r-- | web/pw-server/package.json | 1 | ||||
| -rw-r--r-- | web/pw-server/src/routes/index.svelte | 160 | ||||
| -rw-r--r-- | web/pw-server/src/routes/style.css | 3 |
3 files changed, 152 insertions, 12 deletions
diff --git a/web/pw-server/package.json b/web/pw-server/package.json index 53a4492..cce4a25 100644 --- a/web/pw-server/package.json +++ b/web/pw-server/package.json @@ -23,6 +23,7 @@ "eslint-plugin-svelte3": "^3.2.1", "prettier": "^2.4.1", "prettier-plugin-svelte": "^2.4.0", + "sass": "^1.49.7", "svelte": "^3.44.0", "svelte-check": "^2.2.6", "svelte-preprocess": "^4.9.4", diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte index 39afe01..bd9a597 100644 --- a/web/pw-server/src/routes/index.svelte +++ b/web/pw-server/src/routes/index.svelte @@ -1,19 +1,28 @@ <script lang="ts"> import { goto } from "$app/navigation"; + import Visualizer from "$lib/components/Visualizer.svelte"; import { onMount } from "svelte"; + import "./style.css"; let editor; + let matches = []; + + let selectedMatchId: string | undefined = undefined; + let selectedMatchLog: string | undefined = undefined; onMount(async () => { - const ace = await import("ace-builds"); - editor = ace.edit("editor"); + await load_editor(); + }); + async function load_editor() { + const ace = await import("ace-builds"); 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"); - 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() { if (editor === undefined) { @@ -35,19 +44,146 @@ } let responseData = await response.json(); + 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> -<h1>Planetwars</h1> -<div id="editor" /> -<button on:click={submitCode}>Submit</button> +<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; + } -<style scoped> #editor { width: 100%; - max-width: 800px; - height: 600px; + 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; } </style> diff --git a/web/pw-server/src/routes/style.css b/web/pw-server/src/routes/style.css new file mode 100644 index 0000000..699a279 --- /dev/null +++ b/web/pw-server/src/routes/style.css @@ -0,0 +1,3 @@ +body { + margin: 0; +} |