diff options
| -rw-r--r-- | web/pw-server/package.json | 1 | ||||
| -rw-r--r-- | web/pw-server/src/global.d.ts | 4 | ||||
| -rw-r--r-- | web/pw-server/src/lib/components/Editor.svelte | 27 | ||||
| -rw-r--r-- | web/pw-server/src/routes/index.svelte | 37 | ||||
| -rw-r--r-- | web/pw-server/src/routes/style.css | 2 | ||||
| -rw-r--r-- | web/pw-server/svelte.config.js | 2 |
6 files changed, 49 insertions, 24 deletions
diff --git a/web/pw-server/package.json b/web/pw-server/package.json index cce4a25..54a9580 100644 --- a/web/pw-server/package.json +++ b/web/pw-server/package.json @@ -29,6 +29,7 @@ "svelte-preprocess": "^4.9.4", "tslib": "^2.3.1", "typescript": "^4.4.3", + "vite-plugin-iso-import": "^0.1.3", "vite-plugin-wasm-pack": "^0.1.9" }, "dependencies": { diff --git a/web/pw-server/src/global.d.ts b/web/pw-server/src/global.d.ts index 63908c6..8591444 100644 --- a/web/pw-server/src/global.d.ts +++ b/web/pw-server/src/global.d.ts @@ -1 +1,5 @@ /// <reference types="@sveltejs/kit" /> + +// fallback +declare module "*?client"; +declare module "*?server"; diff --git a/web/pw-server/src/lib/components/Editor.svelte b/web/pw-server/src/lib/components/Editor.svelte new file mode 100644 index 0000000..5acbca5 --- /dev/null +++ b/web/pw-server/src/lib/components/Editor.svelte @@ -0,0 +1,27 @@ +<script lang="ts"> + import type { Ace } from "ace-builds"; + import ace from "ace-builds/src-noconflict/ace?client"; + import * as aceGithubTheme from "ace-builds/src-noconflict/theme-github?client"; + + import { onMount } from "svelte"; + + export let editSession: Ace.EditSession; + + let editorDiv: HTMLDivElement | undefined; + let editor: Ace.Editor | undefined; + + onMount(async () => { + let renderer = new ace.VirtualRenderer(editorDiv); + editor = new ace.Editor(renderer, editSession); + editor.setTheme(aceGithubTheme); + }); +</script> + +<div bind:this={editorDiv} class="editor" /> + +<style> + .editor { + width: 100%; + height: 100%; + } +</style> diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte index bd9a597..76f6295 100644 --- a/web/pw-server/src/routes/index.svelte +++ b/web/pw-server/src/routes/index.svelte @@ -4,38 +4,35 @@ import { onMount } from "svelte"; import "./style.css"; - let editor; + import ace from "ace-builds/src-noconflict/ace?client"; + import Editor from "$lib/components/Editor.svelte"; + import type { Ace } from "ace-builds"; + let matches = []; let selectedMatchId: string | undefined = undefined; let selectedMatchLog: string | undefined = undefined; + let editSession: Ace.EditSession; + onMount(async () => { - await load_editor(); + await init_editor(); }); - 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 init_editor() { + const AcePythonMode = await import("ace-builds/src-noconflict/mode-python"); + editSession = new ace.EditSession(""); + editSession.setMode(new AcePythonMode.Mode()); } async function submitCode() { - if (editor === undefined) { - return; - } - let response = await fetch("/api/submit_bot", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ - code: editor.getValue(), + code: editSession.getDocument().getValue(), }), }); @@ -46,7 +43,7 @@ let responseData = await response.json(); let matchId = responseData["match_id"]; - // goto(`/submission_matches/${matchId}`); + matches.push({ matchId: matchId }); matches = matches; } @@ -72,7 +69,6 @@ function selectEditor() { selectedMatchId = undefined; selectedMatchLog = undefined; - load_editor(); } </script> @@ -99,7 +95,7 @@ {#if selectedMatchLog !== undefined} <Visualizer matchLog={selectedMatchLog} /> {:else} - <div id="editor" /> + <Editor {editSession} /> {/if} </div> <div class="sidebar-right"> @@ -144,11 +140,6 @@ overflow: hidden; } - #editor { - width: 100%; - height: 100%; - } - .editor-container { height: 100%; } diff --git a/web/pw-server/src/routes/style.css b/web/pw-server/src/routes/style.css index 699a279..293d3b1 100644 --- a/web/pw-server/src/routes/style.css +++ b/web/pw-server/src/routes/style.css @@ -1,3 +1,3 @@ body { - margin: 0; + margin: 0; } diff --git a/web/pw-server/svelte.config.js b/web/pw-server/svelte.config.js index b6a2cf8..f0e3c27 100644 --- a/web/pw-server/svelte.config.js +++ b/web/pw-server/svelte.config.js @@ -2,6 +2,7 @@ import adapter from "@sveltejs/adapter-auto"; import preprocess from "svelte-preprocess"; import { viteCommonjs } from "@originjs/vite-plugin-commonjs"; import wasmPack from "vite-plugin-wasm-pack"; +import { isoImport } from "vite-plugin-iso-import"; /** @type {import('@sveltejs/kit').Config} */ const config = { @@ -17,6 +18,7 @@ const config = { ssr: false, vite: { plugins: [ + isoImport(), wasmPack([], ["planetwars-rs"]), viteCommonjs({ transformMixedEsModules: true, |