From 916ab40d65c9c25f63256f2cd98be297c3da2208 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Thu, 28 Apr 2022 20:06:38 +0200
Subject: :bug: Small bugfixes

---
 src_frontend/Components/Editor/Editor.svelte     | 75 ++++++++++++++++++++----
 src_frontend/Components/Editor/Output.svelte     |  9 ++-
 src_frontend/Components/Editor/Simulation.svelte | 27 +++++++--
 3 files changed, 91 insertions(+), 20 deletions(-)

(limited to 'src_frontend/Components/Editor')

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>
-- 
cgit v1.2.3