create adapter for gamelib

src/gamelib.js

@@ -1,12 +1,4 @@
 export class Gamelib {
-    #loopInterval;
-
-    MouseButton = {
-        Left: 0,
-        Right: 1,
-        Middle: 2,
-    };
-
     constructor(console, assetProvider, canvasElement) {
         this.console = console;
         this.assetProvider = assetProvider;
@@ -18,6 +10,7 @@ export class Gamelib {
         this.canvas.height = this.height;
         this.cx = this.canvas.getContext("2d");
         this.cx.imageSmootingEnabled = false;
+        this.loopInterval = null;
 
         this.keysPressed = new Set();
         this.keyPressHandlers = new Map();
@@ -31,35 +24,31 @@ export class Gamelib {
     }
 
     init() {
-        document.body.addEventListener("keydown", this.#keydownListener.bind(this));
-        document.body.addEventListener("keyup", this.#keyupListener.bind(this));
+        document.body.addEventListener("keydown", this.keydownListener.bind(this));
+        document.body.addEventListener("keyup", this.keyupListener.bind(this));
 
-        this.canvas.addEventListener("mousemove", this.#mousemoveListener.bind(this));
-        this.canvas.addEventListener("mousedown", this.#mousedownListener.bind(this));
-        this.canvas.addEventListener("mouseup", this.#mouseupListener.bind(this));
-        this.canvas.addEventListener("contextmenu", this.#contextMenuListener.bind(this));
+        this.canvas.addEventListener("mousemove", this.mousemoveListener.bind(this));
+        this.canvas.addEventListener("mousedown", this.mousedownListener.bind(this));
+        this.canvas.addEventListener("mouseup", this.mouseupListener.bind(this));
+        this.canvas.addEventListener("contextmenu", this.contextMenuListener.bind(this));
     }
 
     destroy() {
-        document.body.removeEventListener("keydown", this.#keydownListener);
-        document.body.removeEventListener("keyup", this.#keyupListener);
+        document.body.removeEventListener("keydown", this.keydownListener);
+        document.body.removeEventListener("keyup", this.keyupListener);
 
-        this.canvas.removeEventListener("mousemove", this.#mousemoveListener);
-        this.canvas.removeEventListener("mousedown", this.#mousedownListener);
-        this.canvas.removeEventListener("mouseup", this.#mouseupListener);
-        this.canvas.removeEventListener("contextmenu", this.#contextMenuListener);
+        this.canvas.removeEventListener("mousemove", this.mousemoveListener);
+        this.canvas.removeEventListener("mousedown", this.mousedownListener);
+        this.canvas.removeEventListener("mouseup", this.mouseupListener);
+        this.canvas.removeEventListener("contextmenu", this.contextMenuListener);
 
-        clearInterval(this.#loopInterval);
-    }
-
-    println(msg) {
-        this.console.log(msg);
+        clearInterval(this.loopInterval);
     }
 
     startGameLoop(loopFunction) {
         let before = Date.now();
 
-        this.#loopInterval = setInterval(() => {
+        this.loopInterval = setInterval(() => {
             const now = Date.now();
             const deltaT = (now - before) / 1000;
             before = now;
@@ -71,29 +60,17 @@ export class Gamelib {
         }, 16);
     }
 
-    #keydownListener(ev) {
+    keydownListener(ev) {
         this.keysPressed.add(ev.key);
         this.keyPressHandlers.get(ev.key)?.();
     }
 
-    #keyupListener(ev) {
+    keyupListener(ev) {
         this.keysPressed.delete(ev.key);
         this.keyReleaseHandlers.get(ev.key)?.();
     }
 
-    isPressed(key) {
-        return this.keysPressed.has(key);
-    }
-
-    onPress(key, handlerFunction) {
-        this.keyPressHandlers.set(key, handlerFunction);
-    }
-
-    onRelease(key, handlerFunction) {
-        this.keyReleaseHandlers.set(key, handlerFunction);
-    }
-
-    #mousemoveListener(ev) {
+    mousemoveListener(ev) {
         const ratioX = this.canvas.width / this.canvas.clientWidth;
         const ratioY = this.canvas.height / this.canvas.clientHeight;
 
@@ -108,7 +85,7 @@ export class Gamelib {
         );
     }
 
-    #mousedownListener(ev) {
+    mousedownListener(ev) {
         const ratioX = this.canvas.width / this.canvas.clientWidth;
         const ratioY = this.canvas.height / this.canvas.clientHeight;
 
@@ -116,7 +93,7 @@ export class Gamelib {
         this.mouseDownHandlers.get(ev.button)?.(ev.offsetX * ratioX, ev.offsetY * ratioY);
     }
 
-    #mouseupListener(ev) {
+    mouseupListener(ev) {
         const ratioX = this.canvas.width / this.canvas.clientWidth;
         const ratioY = this.canvas.height / this.canvas.clientHeight;
 
@@ -124,37 +101,10 @@ export class Gamelib {
         this.mouseUpHandlers.get(ev.button)?.(ev.offsetX * ratioX, ev.offsetY * ratioY);
     }
 
-    onMouseMove(handlerFunction) {
-        this.mouseMoveHandler = handlerFunction;
-    }
-
-    isClicking(button = this.MouseButton.Left) {
-        return this.mouseButtonsPressed.has(button);
-    }
-
-    onClick(handlerFunction, button = this.MouseButton.Left) {
-        this.mouseDownHandlers.set(button, handlerFunction);
-    }
-
-    onClickRelease(handlerFunction, button = this.MouseButton.Left) {
-        this.mouseUpHandlers.set(button, handlerFunction);
-    }
-
-    #contextMenuListener(ev) {
+    contextMenuListener(ev) {
         ev.preventDefault();
     }
 
-    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);
-    }
-
     drawSprite(x, y, width, height, name) {
         const cx = this.cx;
 
@@ -165,10 +115,101 @@ export class Gamelib {
         };
     }
 
+    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);
     }
+
+    getAdapter() {
+        return new GamelibAdapter(this);
+    }
+}
+
+class GamelibAdapter {
+    MouseButton = {
+        Left: 0,
+        Right: 1,
+        Middle: 2,
+    };
+
+    constructor(gamelib) {
+        this.gamelib = gamelib;
+    }
+
+    get width() {
+        return this.gamelib.width;
+    }
+
+    get height() {
+        return this.gamelib.height;
+    }
+
+    get mouseX() {
+        return this.gamelib.mouseX;
+    }
+
+    get mouseY() {
+        return this.gamelib.mouseY;
+    }
+
+    println(msg) {
+        this.gamelib.console.log(msg);
+    }
+
+    startGameLoop(loopFunction) {
+        this.gamelib.startGameLoop(loopFunction);
+    }
+
+    isPressed(key) {
+        return this.gamelib.keysPressed.has(key);
+    }
+
+    onPress(key, handlerFunction) {
+        this.gamelib.keyPressHandlers.set(key, handlerFunction);
+    }
+
+    onRelease(key, handlerFunction) {
+        this.gamelib.keyReleaseHandlers.set(key, handlerFunction);
+    }
+
+    onMouseMove(handlerFunction) {
+        this.gamelib.mouseMoveHandler = handlerFunction;
+    }
+
+    isClicking(button = this.MouseButton.Left) {
+        return this.gamelib.mouseButtonsPressed.has(button);
+    }
+
+    onClick(handlerFunction, button = this.MouseButton.Left) {
+        this.gamelib.mouseDownHandlers.set(button, handlerFunction);
+    }
+
+    onClickRelease(handlerFunction, button = this.MouseButton.Left) {
+        this.gamelib.mouseUpHandlers.set(button, handlerFunction);
+    }
+
+    drawSprite(x, y, width, height, name) {
+        this.gamelib.drawSprite(x, y, width, height, name);
+    }
+
+    rgb(red, green, blue) {
+        return `rgb(${red}, ${green}, ${blue})`;
+    }
+
+    clear(color) {
+        this.gamelib.clear(color);
+    }
+
+    drawRect(x, y, width, height, color) {
+        this.gamelib.drawRect(x, y, width, height, color);
+    }
 }

src/html_exporter.js

@@ -53,7 +53,7 @@ export class HtmlExporter {
 
             window.karlkoder = {
                 lib() {
-                    return gamelib;
+                    return gamelib.getAdapter();
                 },
             };
         </script>

src/index.js

@@ -36,7 +36,7 @@ const playgroundConsole = new PlaygroundConsole(
 );
 
 addEventListener("DOMContentLoaded", () => {
-    playgroundConsole.getInterface().log("Karlkode 1.0");
+    playgroundConsole.getAdapter().log("Karlkode 1.0");
 });
 
 const assetProvider = new AssetProvider();
@@ -46,18 +46,18 @@ const assetEditor = new AssetEditor(document.querySelector("#asset-editor-contai
 const htmlExporter = new HtmlExporter(assetProvider);
 
 const gamelib = new Gamelib(
-    playgroundConsole.getInterface(),
+    playgroundConsole.getAdapter(),
     assetProvider,
     document.querySelector("canvas"),
 );
 
 globalThis.karlkoder = {
     lib() {
-        return gamelib;
+        return gamelib.getAdapter();
     },
 };
 
-const codeRunner = new CodeRunner(playgroundConsole.getInterface(), gamelib);
+const codeRunner = new CodeRunner(playgroundConsole.getAdapter(), gamelib);
 
 new ConsoleInput(document.querySelector("#console-input"), playgroundConsole, codeRunner);
 
@@ -122,7 +122,7 @@ runButton.onclick = async () => {
     const code = editor.getValue();
 
     const assets = await assetEditor.getAssets();
-    karlkoder.lib().assetProvider.injectAssets(assets);
+    gamelib.assetProvider.injectAssets(assets);
 
     codeRunner.setCode(code);
     codeRunner.toggle();

src/playground_console.js

@@ -109,8 +109,8 @@ export class PlaygroundConsole {
         this.addTopLevelEntry("input", ...arguments);
     }
 
-    getInterface() {
-        return new PlaygroundConsoleInterface(this);
+    getAdapter() {
+        return new PlaygroundConsoleAdapter(this);
     }
 
     clear() {
@@ -118,7 +118,7 @@ export class PlaygroundConsole {
     }
 }
 
-class PlaygroundConsoleInterface {
+class PlaygroundConsoleAdapter {
     #console;
 
     constructor(console) {