implement running and stopping

index.html

@@ -54,7 +54,7 @@
                         </div>
                     </div>
 
-                    <button id="run-button">▶️ Run</button>
+                    <button id="run-button">🏃 Run</button>
                 </div>
 
                 <section>

js/code-runner.js

@@ -0,0 +1,40 @@
+export class CodeRunner {
+    constructor(cons) {
+        this.console = cons;
+        this.isRunning = false;
+    }
+
+    setCode(code) {
+        this.code = code;
+    }
+
+    async run() {
+        this.isRunning = true;
+
+        this.console.log("Running code...");
+
+        // Stored globally so lib.js can access it
+        window.libInternalAbortController = new AbortController();
+
+        // Use RNG to prevent caching
+        const encodedText = encodeURIComponent(this.code + `/*(tph): ${Math.random()}*/`);
+
+        try {
+            await import(`data:text/javascript;charset=utf-8,${encodedText}`);
+        } catch (error) {
+            this.console.log(error);
+        }
+    }
+
+    stop() {
+        this.isRunning = false;
+
+        window.libInternalAbortController?.abort();
+    }
+
+    toggle() {
+        if (this.isRunning) this.stop();
+        else this.run();
+    }
+}
+

js/index.js

@@ -1,21 +1,11 @@
 /// <reference types="ace" />
 
 import { Debounce } from "./debounce.js";
+import { PlaygroundConsole } from "./playground-console.js";
+import { CodeRunner } from "./code-runner.js";
 
-async function runCode(code, consoleCode) {
+const playgroundConsole = new PlaygroundConsole(document.querySelector("#console-code"));
-    consoleCode.textContent += `\nRunning code....\n`;
+const codeRunner = new CodeRunner(playgroundConsole);
-    try {
-        window.libInternalAbortController?.abort();
-        window.libInternalAbortController = new AbortController();
-        await import(
-            `data:text/javascript;charset=utf-8,${
-                encodeURIComponent(code + `/*(tph): ${Math.random()}*/`)
-            }`
-        );
-    } catch (error) {
-        consoleCode.textContent += `${error}\n`;
-    }
-}
 
 const editor = ace.edit("editor");
 editor.setTheme("ace/theme/gruvbox");
@@ -28,7 +18,6 @@ const saveButton = document.querySelector("#save-button");
 const saveDropdown = document.querySelector("#save-dropdown");
 const saveJsButton = document.querySelector("#save-js");
 const saveHtmlButton = document.querySelector("#save-html");
-const consoleCode = document.querySelector("#console-code");
 
 const sessionSaveDebounce = new Debounce(1000);
 editor.addEventListener("change", (ev) => {
@@ -39,9 +28,17 @@ editor.addEventListener("change", (ev) => {
 
 runButton.onclick = (ev) => {
     const code = editor.getValue();
-    runCode(code, consoleCode);
+
-    runButton.textContent = "◼ Stop";
+    codeRunner.setCode(code);
-	runButton.classList.add("active");
+    codeRunner.toggle();
+
+    if (codeRunner.isRunning) {
+        runButton.textContent = "✋ Stop";
+        runButton.classList.add("active");
+    } else {
+        runButton.textContent = "🏃 Run";
+        runButton.classList.remove("active");
+    }
 };
 
 function downloadFile(content, mime, extension) {

js/playground-console.js

@@ -0,0 +1,10 @@
+export class PlaygroundConsole {
+    constructor(elem) {
+        this.elem = elem;
+    }
+
+    log(text) {
+        this.elem.textContent += `\n${text}\n`;
+    }
+}
+