diff --git a/index.html b/index.html
index 7bb7380..3ecc762 100644
--- a/index.html
+++ b/index.html
@@ -126,6 +126,7 @@ lib.startGameLoop(loop);
![]()
+
test
diff --git a/src/index.js b/src/index.js
index 0b609a1..89217c9 100644
--- a/src/index.js
+++ b/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", () => {
- 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");
- }
-});
+toggleSpriteEditorButton.addEventListener("click", () => spriteEditor.toggleEditor());
diff --git a/src/sprite_editor.js b/src/sprite_editor.js
index a37b204..4392f2d 100644
--- a/src/sprite_editor.js
+++ b/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(/" +
+ " x, y,
" +
+ " width, height,
" +
+ ` "${sanitizedName}"
` +
+ ");";
}
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 = "›";
+ this.toggleButton.setAttribute("expanded", true);
+ } else {
+ this.editor.style.display = "none";
+ this.container.style.flexGrow = "0";
+ this.toggleButton.innerHTML = "‹";
+ this.toggleButton.removeAttribute("expanded");
+ }
+ }
}
diff --git a/style.css b/style.css
index b38fb48..71b710b 100644
--- a/style.css
+++ b/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;
+}