sprite editor

index.html

@@ -107,27 +107,30 @@ function loop(deltaT) {
 
 lib.startGameLoop(loop);
 
-</pre
+</pre>
-                        >
                     </div>
                 </section>
             </div>
 
             <div class="column">
-                <section>
+                <section id="sprite-editor">
                     <div class="section-header">
                         Sprite editor
                     </div>
 
-                    <div id="sprite-editor-area">
+                    <div id="sprite-editor-preview">
+                        <p id="sprite-editor-preview-title">
+                            cattttttttttttttttttttttttttttttttttttttttttttttttttttttt.png
+                        </p>
                         <img
-                            id="sprite-editor-preview"
+                            id="sprite-editor-preview-image"
                             src="https://tpho.dk/shared/photo%2010-07-2021,%2003.43.17.jpg"
                         >
                     </div>
 
-                    <ul id="sprite-editor-list">
+                    <button id="sprite-editor-upload-button">Upload new sprite</button>
-                        <li><button>Upload new sprite</button></li>
+
+                    <ul id="sprite-editor-sprite-list">
                         <li><p>hrrmimimi <button class="delete-button">X</button></p></li>
                         <li><p>hrrmimimi</p></li>
                         <li><p>hrrmimimi</p></li>

js/index.js

@@ -3,11 +3,13 @@
 import { Debounce } from "./debounce.js";
 import { PlaygroundConsole } from "./playground-console.js";
 import { CodeRunner } from "./code-runner.js";
+import { SpriteEditor } from "./sprite-editor.js";
 
 const playgroundConsole = new PlaygroundConsole(
     document.querySelector("#console-code"),
 );
 const codeRunner = new CodeRunner(playgroundConsole);
+new SpriteEditor(document.querySelector("#sprite-editor"), []);
 
 const editor = ace.edit("editor");
 editor.setTheme("ace/theme/gruvbox");

js/sprite-editor.js

@@ -0,0 +1,72 @@
+export class SpriteEditor {
+    constructor(rootEl, sprites) {
+        this.list = rootEl.querySelector("#sprite-editor-sprite-list");
+        this.preview = {};
+        this.preview.title = rootEl.querySelector("#sprite-editor-preview-title");
+        this.preview.image = rootEl.querySelector("#sprite-editor-preview-image");
+        this.sprites = sprites;
+
+        rootEl.querySelector("#sprite-editor-upload-button").addEventListener("click", () => {
+            this.promptUpload();
+        });
+
+        this.renderList();
+    }
+
+    promptUpload() {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.multiple = true;
+        input.style = "display: none;";
+        input.addEventListener("cancel", () => {
+            input.remove();
+        });
+        input.addEventListener("change", async () => {
+            for (const file of input.files) {
+                this.addSprite({
+                    name: file.name,
+                    mime: file.type,
+                    bytes: await fetch(URL.createObjectURL(file)).then((x) => x.bytes()),
+                });
+            }
+            input.remove();
+        });
+        document.body.append(input);
+        input.click();
+    }
+
+    addSprite({ name, bytes, mime }) {
+        const id = Math.round(Math.random() * 1e6);
+        this.sprites.push({ id, bytes, name, mime });
+        this.renderList();
+    }
+
+    deleteSprite(id) {
+        this.sprites = this.sprites.filter((x) => x.id !== id);
+        this.renderList();
+    }
+
+    setPreview(id) {
+        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()}`;
+    }
+
+    renderList() {
+        const children = this.sprites
+            .map((sprite) => {
+                const listItem = document.createElement("li");
+                listItem.classList.add("sprite-editor-list-item");
+                const name = document.createElement("span");
+                name.textContent = sprite.name;
+                name.addEventListener("click", () => {
+                    this.setPreview(sprite.id);
+                });
+                listItem.append(name);
+                return listItem;
+            });
+
+        this.list.replaceChildren(...children);
+    }
+}

style.css

@@ -2,6 +2,10 @@
     color-scheme: dark;
 }
 
+body {
+    font-family: system-ui;
+}
+
 * {
     box-sizing: border-box;
 }
@@ -16,24 +20,23 @@ main {
     display: flex;
     flex-direction: row;
     height: 100vh;
-    padding: 32px;
+    padding: 2rem;
-    gap: 32px;
+    gap: 2rem;
 }
 
 .section-header {
     background-color: #bdbdbd;
-    border-top-left-radius: 8px;
+    border-top-left-radius: 0.5rem;
-    border-top-right-radius: 8px;
+    border-top-right-radius: 0.5rem;
     border: 1px solid #222;
-    padding: 4px;
+    padding: 0.25rem;
-    padding-left: 8px;
+    padding-left: 0.5rem;
-    font-family: sans-serif;
     color: #424242;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
 }
 
 section {
-    border-radius: 8px;
+    border-radius: 0.5rem;
     width: 100%;
     flex: 1;
     display: flex;
@@ -47,8 +50,8 @@ section canvas {
 }
 
 section *:last-child {
-    border-bottom-left-radius: 8px;
+    border-bottom-left-radius: 0.5rem;
-    border-bottom-right-radius: 8px;
+    border-bottom-right-radius: 0.5rem;
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
     flex: 1;
 }
@@ -58,7 +61,7 @@ div#buttons {
     display: flex;
     flex-wrap: wrap;
     flex: row;
-    gap: 5px;
+    gap: 0.3rem;
 }
 
 div#buttons > * {
@@ -73,10 +76,10 @@ div#buttons button {
 .column {
     display: flex;
     flex-direction: column;
-    gap: 5px;
+    gap: 0.3rem;
     justify-content: space-evenly;
     align-items: flex-start;
-    gap: 32px;
+    gap: 2rem;
     flex: 1;
     min-width: 0;
 }
@@ -123,7 +126,7 @@ div#buttons button {
     color: white;
     border: none;
     background-color: #222;
-    padding: 4px 8px;
+    padding: 0.25rem 0.5rem;
     font-family: monospace;
     font-size: 1rem;
     flex-grow: 0;
@@ -138,7 +141,7 @@ div#buttons button {
     margin: 0;
     width: 100%;
     height: 100%;
-    font-size: 16px;
+    font-size: 1rem;
 }
 
 #editor * {
@@ -157,13 +160,12 @@ div#buttons button {
     top: 100%;
     left: 0;
     right: 0;
-    border-radius: 4px;
+    border-radius: 0.25rem;
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
 }
 
 .dropdown-option {
-    padding: 5px 10px;
+    padding: 0.3rem 0.6rem;
-    font-family: sans-serif;
     color: #424242;
     font-size: 0.8rem;
     cursor: pointer;
@@ -177,8 +179,8 @@ button {
     background-color: #087aaf;
     border: none;
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-    padding: 8px 16px;
+    padding: 0.5rem 1rem;
-    border-radius: 8px;
+    border-radius: 0.5rem;
     cursor: pointer;
     transition-duration: 200ms;
 }
@@ -203,33 +205,48 @@ footer {
 }
 
 #sprite-editor-preview {
-    background-color: #1d2021;
+    display: flex;
-    max-height: 450px;
+    flex-direction: column;
-    object-fit: contain;
-    width: 100%;
-    border-radius: 0px;
-    padding-block: 32px;
 }
 
-#sprite-editor-list {
+#sprite-editor-preview-title {
-    list-style: none;
+    margin: 1rem;
-    padding: 1rem;
+    overflow-wrap: break-word;
+    font-weight: bold;
+}
+#sprite-editor-preview-image {
+    background-color: #1d2021;
+    object-fit: contain;
+    width: 100%;
+    border-radius: 0;
+    max-height: min(40vh, 400px);
+}
+
+#sprite-editor-sprite-list {
     margin: 0;
 }
 
-#sprite-editor-list .delete-button {
+#sprite-editor-sprite-list li span {
+    cursor: pointer;
+}
+
+#sprite-editor-sprite-list li span:hover {
+    text-decoration: 1px solid underline;
+}
+
+#sprite-editor-sprite-list .delete-button {
     background-color: #c83e4d;
     padding: 0.25rem 0.75rem;
 }
 
-#sprite-editor-list .delete-button:hover {
+#sprite-editor-sprite-list .delete-button:hover {
     background-color: #9f2d3a;
 }
 
-#sprite-editor-list .delete-button:active {
+#sprite-editor-sprite-list .delete-button:active {
     background-color: #7f242f;
 }
 
-#sprite-editor-list p:first-child {
+#sprite-editor-upload-button {
-    margin-top: 0;
+    margin: 1rem;
 }