From 2104e752ad1d9c0877d4dd45d64dd628b42bfc46 Mon Sep 17 00:00:00 2001
From: Theis Pieter Hollebeek <tphollebeek@gmail.com>
Date: Fri, 10 Oct 2025 18:40:17 +0200
Subject: [PATCH] sprite provider

---
 src/gamelib.js         | 13 ++++++++++++-
 src/index.js           | 15 ++++++++++++---
 src/sprite_provider.js | 14 ++++++++++++++
 3 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 src/sprite_provider.js

diff --git a/src/gamelib.js b/src/gamelib.js
index 204753c..f93f83f 100644
--- a/src/gamelib.js
+++ b/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;
 
diff --git a/src/index.js b/src/index.js
index 8c28eaa..0f4d4cb 100644
--- a/src/index.js
+++ b/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();
 
diff --git a/src/sprite_provider.js b/src/sprite_provider.js
new file mode 100644
index 0000000..f925a68
--- /dev/null
+++ b/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()}`;
+    }
+}