gamelib/lib.js

@@ -0,0 +1,51 @@
+const consoleCode = document.querySelector("#console-code");
+
+export const width = 480;
+export const height = 360;
+
+const canvas = document.querySelector("canvas");
+canvas.width = width;
+canvas.height = height;
+const cx = canvas.getContext("2d");
+cx.imageSmoothingEnabled = false;
+
+export function rgb(red, green, blue) {
+    return `rgb(${red}, ${green}, ${blue})`;
+}
+
+export function clear(color) {
+    cx.fillStyle = color;
+    cx.fillRect(0, 0, width, height);
+}
+
+export function drawRect(x, y, width, height, color) {
+    cx.fillStyle = color;
+    cx.fillRect(x, y, width, height);
+}
+
+export function println(msg) {
+    if (consoleCode) {
+        consoleCode.textContent += `${msg}\n`;
+    } else {
+        console.log(msg);
+    }
+}
+
+export function startGameLoop(loopFunction) {
+    let before = Date.now();
+    const loopInterval = setInterval(() => {
+        const now = Date.now();
+        const deltaT = (now - before) / 1000;
+        before = now;
+        loopFunction(deltaT);
+    }, 16);
+
+    const abortSignal = globalThis.libInternalAbortController.signal;
+    if (abortSignal.aborted) {
+        clearInterval(loopInterval);
+    }
+
+    abortSignal.addEventListener("abort", () => {
+        clearInterval(loopInterval);
+    });
+}

index.html

@@ -7,6 +7,13 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
         <title>Karlkoder Playground</title>
         <link rel="stylesheet" href="./style.css">
+        <script type="importmap">
+            {
+                "imports": {
+                    "lib": "./gamelib/lib.js"
+                }
+            }
+        </script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"></script>
         <script src="./playground/index.js" type="module"></script>
     </head>

playground/code-runner.js

@@ -1,7 +1,6 @@
 export class CodeRunner {
-    constructor(console, codeStopper) {
+    constructor(cons) {
-        this.console = console;
+        this.console = cons;
-        this.codeStopper = codeStopper;
         this.isRunning = false;
     }
 
@@ -14,7 +13,8 @@ export class CodeRunner {
 
         this.console.log("Running code...");
 
-        this.codeStopper.start();
+        // Stored globally so lib.js can access it
+        globalThis.libInternalAbortController = new AbortController();
 
         // Use RNG to prevent caching
         const encodedText = encodeURIComponent(
@@ -30,7 +30,9 @@ export class CodeRunner {
 
     stop() {
         this.isRunning = false;
-        this.codeStopper.stop();
+
+        globalThis.libInternalAbortController?.abort();
+
         this.console.log("Stopping code...");
     }
 

playground/index.js

@@ -4,26 +4,13 @@ import { Debounce } from "./debounce.js";
 import { PlaygroundConsole } from "./playground-console.js";
 import { CodeRunner } from "./code-runner.js";
 import { SpriteEditor } from "./sprite-editor.js";
-import { Gamelib } from "./gamelib.js";
-import { CodeStopper } from "./code_stopper.js";
 
 const playgroundConsole = new PlaygroundConsole(
     document.querySelector("#console-code"),
 );
-
+const codeRunner = new CodeRunner(playgroundConsole);
-const codeStopper = new CodeStopper();
-
-const codeRunner = new CodeRunner(playgroundConsole, codeStopper);
 new SpriteEditor(document.querySelector("#sprite-editor"), []);
 
-const gamelib = new Gamelib(playgroundConsole, codeStopper, document.querySelector("canvas"));
-
-globalThis.karlkoder = {
-    lib() {
-        return gamelib;
-    },
-};
-
 const editor = ace.edit("editor");
 editor.setTheme("ace/theme/gruvbox");
 editor.session.setMode("ace/mode/javascript");

src/code_stopper.js

@@ -1,24 +0,0 @@
-export class CodeStopper {
-    constructor() {
-        this.abortController = new AbortController();
-    }
-
-    start() {
-        this.abortController = new AbortController();
-    }
-
-    stop() {
-        this.abortController.abort();
-    }
-
-    isStopped() {
-        return this.abortController.signal.aborted;
-    }
-
-    addListener(fn) {
-        this.abortController.signal
-            .addEventListener("abort", () => {
-                fn();
-            });
-    }
-}

src/gamelib.js

@@ -1,54 +0,0 @@
-export class Gamelib {
-    constructor(console, codeStopper, canvasElement) {
-        this.console = console;
-        this.codeStopper = codeStopper;
-
-        this.canvas = canvasElement;
-        this.width = 480;
-        this.height = 360;
-        this.canvas.width = this.width;
-        this.canvas.height = this.height;
-        this.cx = this.canvas.getContext("2d");
-        this.cx.imageSmootingEnabled = false;
-    }
-
-    println(msg) {
-        this.console.log(msg);
-    }
-
-    startGameLoop(loopFunction) {
-        let before = Date.now();
-        const loopInterval = setInterval(() => {
-            const now = Date.now();
-            const deltaT = (now - before) / 1000;
-            before = now;
-            loopFunction(deltaT);
-        }, 16);
-
-        if (this.codeStopper.isStopped()) {
-            clearInterval(loopInterval);
-        }
-
-        this.codeStopper.addListener(() => {
-            clearInterval(loopInterval);
-        });
-    }
-
-    rgb(red, green, blue) {
-        return `rgb(${red}, ${green}, ${blue})`;
-    }
-
-    clear(color) {
-        const cx = this.cx;
-
-        cx.fillStyle = color;
-        cx.fillRect(0, 0, this.width, this.height);
-    }
-
-    drawRect(x, y, width, height, color) {
-        const cx = this.cx;
-
-        cx.fillStyle = color;
-        cx.fillRect(x, y, width, height);
-    }
-}