aboutsummaryrefslogtreecommitdiff
path: root/src_frontend
diff options
context:
space:
mode:
Diffstat (limited to 'src_frontend')
-rw-r--r--src_frontend/App.svelte12
-rw-r--r--src_frontend/Components/Editor/Editor.svelte75
-rw-r--r--src_frontend/Components/Editor/Output.svelte9
-rw-r--r--src_frontend/Components/Editor/Simulation.svelte27
4 files changed, 97 insertions, 26 deletions
diff --git a/src_frontend/App.svelte b/src_frontend/App.svelte
index d9f5f92..c5648ca 100644
--- a/src_frontend/App.svelte
+++ b/src_frontend/App.svelte
@@ -30,10 +30,10 @@
component: UnknownRoute
}));
- let updateInProgess = false;
- openSocket.on("updater", (state) => {
- if (state == "start") { updateInProgess = true; }
- });
+ //let updateInProgess = false;
+ //openSocket.on("updater", (state) => {
+ // if (state == "start") { updateInProgess = true; }
+ //});
</script>
<style>
@@ -104,7 +104,7 @@
</style>
-{#if $updateInProgess || $connected}
+{#if $connected}
<Router routes={main_router_routes} />
{:else if $reconnecting}
<div class="no-connection">
@@ -116,4 +116,4 @@
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
<div>No server connection, attempting to connect...</div>
</div>
-{/if} \ No newline at end of file
+{/if}
diff --git a/src_frontend/Components/Editor/Editor.svelte b/src_frontend/Components/Editor/Editor.svelte
index fc5d589..d77b4f5 100644
--- a/src_frontend/Components/Editor/Editor.svelte
+++ b/src_frontend/Components/Editor/Editor.svelte
@@ -3,6 +3,7 @@
</script>
<script>
import { onDestroy } from "svelte";
+ import { get } from "svelte/store";
import { pop } from "svelte-spa-router";
import { EditorState, basicSetup } from "@codemirror/basic-setup"
import { EditorView, keymap } from "@codemirror/view"
@@ -17,7 +18,7 @@
import Output from "./Output.svelte";
import Simulation from "./Simulation.svelte";
- import { authorizedSocket, authorizedSocketNeeded } from "../../stores/socketStore";
+ import { authorizedSocket, authorizedSocketNeeded, openSocketConnected } from "../../stores/socketStore";
authorizedSocketNeeded.set(true);
export let modeId;
@@ -26,16 +27,50 @@
let codeEditorEl;
let codeEditorHasChanges = false;
let procIsRunning = false;
+ let failCount = 0;
+ let reconnecting = false;
function initDebugger() {
if (debuggerInitialised) { return; }
debuggerInitialised = true;
+ console.log("emitting editor:open");
authorizedSocket.emit("editor:open", `user/${modeId}`, (res) => {
- if (!res.success) { notif({title: res.reason, type: "danger"}); return; }
+ handleError(res);
});
}
+ function notifErr(err) {
+ if (err.hasOwnProperty("detail")) {
+ notif({title: err.reason, type: "danger"});
+ } else {
+ notif({title: err.reason, text: err.detail, type: "danger"});
+ }
+ }
+
+ function handleError(err) {
+ console.log(err);
+ if (err.success) { return; }
+ failCount++;
+ if (failCount < 10) {
+ if (err.reason == "debugger not open") {
+ if (!reconnecting) {
+ reconnecting = true;
+ console.log("emitting editor:open");
+ authorizedSocket.emit("editor:open", `user/${modeId}`, (res) => {
+ reconnecting = false;
+ handleError(res);
+ });
+ }
+ } else {
+ notifErr(err);
+ }
+ } else {
+ notifErr(err);
+ }
+ }
+
authorizedSocket.on("editor:code", (modeId, code) => {
+ console.log("received editor:code");
const chalky = "#e5c07b",
coral = "#e06c75",
cyan = "#56b6c2",
@@ -165,38 +200,47 @@
parent: codeEditorEl
})
});
- authorizedSocket.on("editor:proc:start", () => procIsRunning = true);
- authorizedSocket.on("editor:proc:exit", (code) => {
+ authorizedSocket.on("receivededitor:proc:start", () => {
+ console.log("received editor:proc:start");
+ procIsRunning = true
+ });
+ authorizedSocket.on("received editor:proc:exit", (code) => {
+ console.log("received editor:proc:exit");
procIsRunning = false;
});
function startProc() {
- saveCode(() => {
+ saveCode((res) => {
+ handleError(res);
+ console.log("emitting editor:startmode");
authorizedSocket.emit("editor:startmode", (res) => {
- if (!res.success) { notif({title: res.reason, type: "danger"}); }
+ handleError(res);
});
});
}
function stopProc() {
+ console.log("emitting editor:stopmode");
authorizedSocket.emit("editor:stopmode", (res) => {
- if (!res.success) { notif({title: res.reason, type: "danger"}); }
+ handleError(res);
});
}
function restartProc () {
saveCode((res) => {
- if (!res.success) { notif({title: res.reason, type: "danger"}); }
+ handleError(res);
+ console.log("emitting editor:restartmode");
authorizedSocket.emit("editor:restartmode", (res) => {
- if (!res.success) { notif({title: res.reason, type: "danger"}); }
+ handleError(res);
});
});
}
function saveCode(fn) {
if (codeEditorView == null) { return; }
+ console.log("emitting editor:save");
authorizedSocket.emit("editor:save", `user/${modeId}`, codeEditorView.state.doc.toString(), res => {
- if (!res.success) { notif({title: res.reason, type: "danger"}); }
+ handleError(res);
if (fn != null) { fn(res) }
});
codeEditorHasChanges = false;
@@ -204,16 +248,21 @@
function closeDebugger() {
saveCode((res) => {
- if (!res.success) { notif({title: res.reason, type: "danger"}); }
+ handleError(res);
+ console.log("emitting editor:close");
authorizedSocket.emit("editor:close", res => {
- if (!res.success) { notif({title: res.reason, type: "danger"}); }
+ handleError(res);
debuggerInitialised = false;
});
});
}
onDestroy(() => {
- closeDebugger();
+ if (get(openSocketConnected)) {
+ closeDebugger();
+ } else {
+ debuggerInitialised = false;
+ }
})
document.addEventListener("keydown", function(e) {
diff --git a/src_frontend/Components/Editor/Output.svelte b/src_frontend/Components/Editor/Output.svelte
index 9e4c953..52b7216 100644
--- a/src_frontend/Components/Editor/Output.svelte
+++ b/src_frontend/Components/Editor/Output.svelte
@@ -4,6 +4,7 @@
let scrollBox;
let htmlCode = "";
+ let buffer = "";
function addData(data, classname) {
// let styles = "white-space:pre-wrap;margin:0;";
@@ -17,11 +18,17 @@
styles += "color: red";
break;
}
- htmlCode += `<span style="${styles}">${data}</span>`;
+ buffer += `<span style="${styles}">${data}</span>`;
if (scrollBox != null) {
scrollBox.scrollTop = scrollBox.scrollHeight + 100;
}
}
+
+ function flushBuffer() {
+ htmlCode += buffer;
+ buffer = "";
+ };
+ setInterval(flushBuffer, 400);
authorizedSocket.on("editor:proc:start", () => htmlCode = "");
authorizedSocket.on("editor:proc:exit", (code) => addData(`\nMode exited with ${code}\n\n`, "exit"));
diff --git a/src_frontend/Components/Editor/Simulation.svelte b/src_frontend/Components/Editor/Simulation.svelte
index abe202c..86cc66c 100644
--- a/src_frontend/Components/Editor/Simulation.svelte
+++ b/src_frontend/Components/Editor/Simulation.svelte
@@ -5,6 +5,7 @@
let svg;
let pixels = [];
+ let pixelBuffer = [];
function updateMatrix(matrix) {
if (matrix == null) { return; }
@@ -24,12 +25,26 @@
}
async function updateColors(colors) {
- for (let i = 0; i+2 < colors.length; i+=3) {
- try {
- document.querySelector("#sim-pixel-"+(i/3)).style.setProperty("fill", `rgb(${colors[i]}, ${colors[i+1]}, ${colors[i+2]})`);
- } catch(e) {}
- }
+ pixelBuffer = colors;
+ }
+
+ async function flushPixelBuffer() {
+ //console.log(pixelBuffer);
+ window.requestAnimationFrame((ts) => {
+ for (let i = 0; i+2 < pixelBuffer.length; i+=3) {
+ try {
+ document.querySelector("#sim-pixel-"+(i/3))
+ .style
+ .setProperty(
+ "fill",
+ `rgb(${pixelBuffer[i]}, ${pixelBuffer[i+1]}, ${pixelBuffer[i+2]})`);
+ } catch(e) {
+ console.log(e);
+ }
+ }
+ });
}
+ setInterval(flushPixelBuffer, 50);
onMount(() => {
authorizedSocket.on("matrix", updateMatrix);
@@ -58,4 +73,4 @@
<rect id="sim-pixel-{pixel.n}" x="{pixel.x*2+1}" y="{pixel.y*2+1}" width="1" height="1" style="fill:rgb(0,0,0);filter:blur(0.2px);" />
{/each}
</svg>
-</div> \ No newline at end of file
+</div>
generated by cgit v1.2.3 (git 2.39.1) at 2025-06-27 07:22:47 +0000