add code snippet to sprite editor preview

index.html

@@ -126,6 +126,7 @@ lib.startGameLoop(loop);
                     <div id="sprite-editor-preview">
                         <p id="sprite-editor-preview-title"></p>
                         <img id="sprite-editor-preview-image" src="">
+                        <code id="sprite-editor-preview-snippet">test</code>
                     </div>
                     <button id="sprite-editor-upload-button">Upload new sprite</button>
                     <ul id="sprite-editor-sprite-list"></ul>

src/index.js

@@ -19,7 +19,7 @@ const codeStopper = new CodeStopper();
 const spriteProvider = new SpriteProvider();
 
 const codeRunner = new CodeRunner(playgroundConsole, codeStopper);
-const spriteEditor = new SpriteEditor(document.querySelector("#sprite-editor"), []);
+const spriteEditor = new SpriteEditor(document.querySelector("#sprite-editor-container"), []);
 
 const gamelib = new Gamelib(
     playgroundConsole,
@@ -176,20 +176,4 @@ saveKarlkoderButton.onclick = (ev) => {
     );
 };
 
-toggleSpriteEditorButton.addEventListener("click", () => {
+toggleSpriteEditorButton.addEventListener("click", () => spriteEditor.toggleEditor());
-    const container = document.querySelector("#sprite-editor-container");
-    const editor = document.querySelector("#sprite-editor");
-    const button = document.querySelector("#toggle-sprite-editor-button");
-
-    if (getComputedStyle(editor).display === "none") {
-        editor.style.display = "block";
-        container.style.flexGrow = "1";
-        button.innerHTML = "›";
-        button.setAttribute("expanded", true);
-    } else {
-        editor.style.display = "none";
-        container.style.flexGrow = "0";
-        button.innerHTML = "‹";
-        button.removeAttribute("expanded");
-    }
-});

src/sprite_editor.js

@@ -3,9 +3,14 @@ import { promptUpload } from "./prompt_upload.js";
 export class SpriteEditor {
     constructor(rootEl, sprites) {
         this.list = rootEl.querySelector("#sprite-editor-sprite-list");
+        this.editor = rootEl.querySelector("#sprite-editor");
+        this.toggleButton = rootEl.querySelector("#toggle-sprite-editor-button");
+        this.container = rootEl;
+
         this.preview = {};
         this.preview.title = rootEl.querySelector("#sprite-editor-preview-title");
         this.preview.image = rootEl.querySelector("#sprite-editor-preview-image");
+        this.preview.snippet = rootEl.querySelector("#sprite-editor-preview-snippet");
         this.sprites = sprites;
 
         rootEl.querySelector("#sprite-editor-upload-button").addEventListener("click", () => {
@@ -52,6 +57,13 @@ export class SpriteEditor {
         const sprite = this.sprites.find((x) => x.id === id);
         this.preview.title.textContent = sprite.name;
         this.preview.image.src = `data:${sprite.mime};base64,${sprite.bytes.toBase64()}`;
+
+        const sanitizedName = sprite.name.replace(/</g, "&lt;").replace(/&/g, "&amp;");
+        this.preview.snippet.innerHTML = "lib.drawImage(<br>" +
+            "    x, y,<br>" +
+            "    width, height,<br>" +
+            `    "${sanitizedName}"<br>` +
+            ");";
     }
 
     renderList() {
@@ -70,4 +82,18 @@ export class SpriteEditor {
 
         this.list.replaceChildren(...children);
     }
+
+    toggleEditor() {
+        if (getComputedStyle(this.editor).display === "none") {
+            this.editor.style.display = "block";
+            this.container.style.flexGrow = "1";
+            this.toggleButton.innerHTML = "&rsaquo;";
+            this.toggleButton.setAttribute("expanded", true);
+        } else {
+            this.editor.style.display = "none";
+            this.container.style.flexGrow = "0";
+            this.toggleButton.innerHTML = "&lsaquo;";
+            this.toggleButton.removeAttribute("expanded");
+        }
+    }
 }

style.css

@@ -49,10 +49,14 @@ section canvas {
     margin-right: auto;
 }
 
-section *:last-child {
+section {
     border-bottom-left-radius: 0.5rem;
     border-bottom-right-radius: 0.5rem;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
+    overflow-y: hidden;
+}
+
+section > :last-child {
     flex: 1;
 }
 
@@ -277,3 +281,15 @@ footer {
 #sprite-editor-upload-button {
     margin: 1rem;
 }
+
+#sprite-editor-preview-snippet {
+    background-color: black;
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.25rem;
+    margin: 0.5rem;
+    white-space: pre;
+}
+
+#sprite-editor-preview-title:empty {
+    display: none;
+}