make gamelib rational

gamelib/lib.js

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

playground/index.js

@@ -4,13 +4,26 @@ 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");