From a4ab74112bcc28ad5d3abb888a10d57dfb6a583d Mon Sep 17 00:00:00 2001 From: Reimar Date: Tue, 14 Oct 2025 15:28:24 +0200 Subject: [PATCH] create adapter for gamelib --- src/gamelib.js | 183 +++++++++++++++++++++++--------------- src/html_exporter.js | 2 +- src/index.js | 10 +-- src/playground_console.js | 6 +- 4 files changed, 121 insertions(+), 80 deletions(-) diff --git a/src/gamelib.js b/src/gamelib.js index 3b38b55..8c107e7 100644 --- a/src/gamelib.js +++ b/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); + } } diff --git a/src/html_exporter.js b/src/html_exporter.js index e3bd9db..d940ee5 100644 --- a/src/html_exporter.js +++ b/src/html_exporter.js @@ -53,7 +53,7 @@ export class HtmlExporter { window.karlkoder = { lib() { - return gamelib; + return gamelib.getAdapter(); }, }; diff --git a/src/index.js b/src/index.js index ff92dca..12ac792 100644 --- a/src/index.js +++ b/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(); diff --git a/src/playground_console.js b/src/playground_console.js index 1f95aa6..9b12e15 100644 --- a/src/playground_console.js +++ b/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) {