use ace editor for code editing
This commit is contained in:
parent
db45cea37e
commit
af7627d346
3 changed files with 40 additions and 24 deletions
|
@ -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"
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<head>
|
||||
<!-- polyfill global -->
|
||||
<script>
|
||||
const global = globalThis;
|
||||
|
@ -13,10 +12,9 @@
|
|||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%svelte.head%
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<div id="svelte">%svelte.body%</div>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue