use ace editor for code editing

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

View file

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

View file

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

View file

@ -1,17 +1,26 @@
<script lang="ts">
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() {
console.log("click");
if (editor === undefined) {
return;
}
let response = await fetch("/api/submit_bot", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
code: code,
code: editor.getValue(),
}),
});
@ -26,5 +35,13 @@
</script>
<h1>Planetwars</h1>
<textarea bind:value={code} />
<div id="editor" />
<button on:click={submitCode}>Submit</button>
<style scoped>
#editor {
width: 100%;
max-width: 800px;
height: 600px;
}
</style>