Show text when initializing the interpreter

Author: DolphyWind

electra_web/index.html

@@ -244,17 +244,29 @@ <h1>Electra</h1>
     const outputEl = document.getElementById('output');
     const themeBtn = document.getElementById('theme-toggle');
     let worker = null;
-
-    function appendOutput(text) {
-      outputEl.value += text;
-      outputEl.scrollTop = outputEl.scrollHeight;
-    }
+    let programOutput = '';
 
     function setOutput(text) {
       outputEl.value = text;
       outputEl.scrollTop = outputEl.scrollHeight;
     }
 
+    function appendOutput(text) {
+      // outputEl.value += text;
+      // outputEl.scrollTop = outputEl.scrollHeight;
+      setOutput(outputEl.value + text);
+    }
+
+    function appendProgramOutput(text) {
+      appendOutput(text.slice(programOutput.length));
+      programOutput = text;
+    }
+
+    function clearOutput() {
+      programOutput = '';
+      setOutput(programOutput);
+    }
+
     function resetButton() {
       btn.textContent = 'Run';
       btn.classList.remove('running');
@@ -264,6 +276,7 @@ <h1>Electra</h1>
       if (btn.textContent === 'Run') {
         worker = new Worker("worker.js", { type: "module" });
         outputEl.value = '';
+        programOutput = '';
         worker.postMessage({
           type: 'start',
           data: {
@@ -273,8 +286,10 @@ <h1>Electra</h1>
         });
         worker.onmessage = (e) => {
           const { type, data } = e.data;
-          if (type === 'output') setOutput(String(data));
-          else if (type === 'log') console.log(data);
+          if (type === 'output') appendProgramOutput(String(data));
+          else if (type === 'clog') console.log(data);
+          else if (type === 'log') appendOutput(data);
+          else if (type === 'clear') clearOutput();
           else if (type === 'final') { appendOutput(data); resetButton(); }
         };
         worker.onerror = (e) => appendOutput('Error: ' + e.message + '\n');

electra_web/worker.js

@@ -13,7 +13,9 @@ onmessage = async (e) => {
     input = data.input;
 
     if(!Electra) {
+      postMessage({ type: "log", data: "[Initializing the interpreter]\n" });
       Electra = await createModule();
+      postMessage({ type: "clear", data: "" });
     }
 
     loop();