sprite provider

src/gamelib.js

@@ -1,7 +1,8 @@
 export class Gamelib {
-    constructor(console, codeStopper, canvasElement) {
+    constructor(console, codeStopper, spriteProvider, canvasElement) {
         this.console = console;
         this.codeStopper = codeStopper;
+        this.spriteProvider = spriteProvider;
 
         this.canvas = canvasElement;
         this.width = 480;
@@ -45,6 +46,16 @@ export class Gamelib {
         cx.fillRect(0, 0, this.width, this.height);
     }
 
+    drawSprite(x, y, width, height, name) {
+        const cx = this.cx;
+
+        const image = new Image();
+        image.src = this.spriteProvider.url(name);
+        image.onload = () => {
+            cx.drawImage(image, x, y, width, height);
+        };
+    }
+
     drawRect(x, y, width, height, color) {
         const cx = this.cx;
 

src/index.js

@@ -4,6 +4,7 @@ import { Debounce } from "./debounce.js";
 import { PlaygroundConsole } from "./playground_console.js";
 import { CodeRunner } from "./code_runner.js";
 import { SpriteEditor } from "./sprite_editor.js";
+import { SpriteProvider } from "./sprite_provider.js";
 import { Gamelib } from "./gamelib.js";
 import { CodeStopper } from "./code_stopper.js";
 
@@ -13,10 +14,17 @@ const playgroundConsole = new PlaygroundConsole(
 
 const codeStopper = new CodeStopper();
 
-const codeRunner = new CodeRunner(playgroundConsole, codeStopper);
-new SpriteEditor(document.querySelector("#sprite-editor"), []);
+const spriteProvider = new SpriteProvider();
 
-const gamelib = new Gamelib(playgroundConsole, codeStopper, document.querySelector("canvas"));
+const codeRunner = new CodeRunner(playgroundConsole, codeStopper);
+const spriteEditor = new SpriteEditor(document.querySelector("#sprite-editor"), []);
+
+const gamelib = new Gamelib(
+    playgroundConsole,
+    codeStopper,
+    spriteProvider,
+    document.querySelector("canvas"),
+);
 
 globalThis.karlkoder = {
     lib() {
@@ -47,6 +55,7 @@ editor.addEventListener("change", (ev) => {
 runButton.onclick = (ev) => {
     const code = editor.getValue();
 
+    karlkoder.lib().spriteProvider.injectSprites(spriteEditor.sprites);
     codeRunner.setCode(code);
     codeRunner.toggle();
 

src/sprite_provider.js

@@ -0,0 +1,14 @@
+export class SpriteProvider {
+    constructor() {
+        this.sprites = [];
+    }
+
+    injectSprites(sprites) {
+        this.sprites = sprites;
+    }
+
+    url(name) {
+        const sprite = this.sprites.find((x) => x.name === name);
+        return `data:${sprite.mime};base64,${sprite.bytes.toBase64()}`;
+    }
+}