xerbalind/planetwars.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages 1 Wiki Activity

use ace editor for code editing

Browse source
This commit is contained in:
Ilion Beyst 2022-02-02 23:15:55 +01:00
parent db45cea37e
commit af7627d346
3 changed files with 40 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
web/pw-server/package.json
View file

@ -31,10 +31,11 @@
"vite-plugin-wasm-pack": "^0.1.9" "vite-plugin-wasm-pack": "^0.1.9"
}, },
"dependencies": { "dependencies": {
"ace-builds": "^1.4.14",
"dayjs": "^1.10.7", "dayjs": "^1.10.7",
"svelte-select": "^4.4.7", "planetwars-rs": "file:../planetwars-rs/pkg",
"pw-visualizer": "file:../pw-visualizer", "pw-visualizer": "file:../pw-visualizer",
"planetwars-rs": "file:../planetwars-rs/pkg" "svelte-select": "^4.4.7"
}, },
"type": "module" "type": "module"
} }

34
web/pw-server/src/app.html
View file

@ -1,22 +1,20 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<!-- polyfill global -->
<script>
const global = globalThis;
</script>
<!-- end polyfill -->
<head> <meta charset="utf-8" />
<!-- polyfill global --> <meta name="description" content="" />
<script> <link rel="icon" href="/favicon.ico" />
const global = globalThis; <meta name="viewport" content="width=device-width, initial-scale=1" />
</script> %svelte.head%
<!-- end polyfill --> </head>
<meta charset="utf-8" /> <body>
<meta name="description" content="" /> <div id="svelte">%svelte.body%</div>
<link rel="icon" href="/favicon.ico" /> </body>
<meta name="viewport" content="width=device-width, initial-scale=1" /> </html>
%svelte.head%
</head>
<body>
<div id="svelte">%svelte.body%</div>
</body>
</html>

25
web/pw-server/src/routes/index.svelte
View file

@ -1,17 +1,26 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { onMount } from "svelte";
let code = ""; let editor;
onMount(async () => {
const ace = await import("ace-builds");
editor = ace.edit("editor");
});
async function submitCode() { async function submitCode() {
console.log("click"); if (editor === undefined) {
return;
}
let response = await fetch("/api/submit_bot", { let response = await fetch("/api/submit_bot", {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
body: JSON.stringify({ body: JSON.stringify({
code: code, code: editor.getValue(),
}), }),
}); });
@ -26,5 +35,13 @@
</script> </script>
<h1>Planetwars</h1> <h1>Planetwars</h1>
<textarea bind:value={code} /> <div id="editor" />
<button on:click={submitCode}>Submit</button> <button on:click={submitCode}>Submit</button>
<style scoped>
#editor {
width: 100%;
max-width: 800px;
height: 600px;
}
</style>