delete sprites

.git-authors.toml

@@ -1,11 +1,15 @@
-[authors.rpb]
-name = "Reimar Pihl Browa"
-email = "mail@reim.ar"
-
 [authors.tph]
 name = "Theis Pieter Hollebeek"
 email = "tphollebeek@gmail.com"
 
+[authors.mtk]
+name = "Mikkel Kongsted"
+email = "mtkongsted@gmail.com"
+
+[authors.rpb]
+name = "Reimar Pihl Browa"
+email = "mail@reim.ar"
+
 [authors.sfj]
 name = "S. F. Jakobsen"
 email = "sfja2004@gmail.com"

src/sprite_editor.js

@@ -6,6 +6,7 @@ export class SpriteEditor {
         this.editor = rootEl.querySelector("#sprite-editor");
         this.toggleButton = rootEl.querySelector("#toggle-sprite-editor-button");
         this.container = rootEl;
+        this.previewedId = null;
 
         this.preview = {};
         this.preview.title = rootEl.querySelector("#sprite-editor-preview-title");
@@ -62,6 +63,7 @@ export class SpriteEditor {
     }
 
     setPreview(id) {
+        this.previewedId = 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()}`;
@@ -74,17 +76,41 @@ export class SpriteEditor {
             ");";
     }
 
+    clearPreview() {
+        this.preview.title.textContent = "";
+        this.preview.snippet.textContent = "";
+        this.preview.image.src = "";
+    }
+
     renderList() {
         const children = this.sprites
             .map((sprite) => {
                 const listItem = document.createElement("li");
                 listItem.classList.add("sprite-editor-list-item");
+                if (this.previewedId === sprite.id) {
+                    listItem.setAttribute("previewed", true);
+                }
                 listItem.addEventListener("click", () => {
+                    for (const li of this.list.querySelectorAll("li[previewed]")) {
+                        li.removeAttribute("previewed");
+                    }
+                    listItem.setAttribute("previewed", true);
                     this.setPreview(sprite.id);
                 });
                 const name = document.createElement("span");
                 name.textContent = sprite.name;
                 listItem.append(name);
+                const deleteButton = document.createElement("button");
+                deleteButton.innerHTML = "×";
+                deleteButton.classList.add("delete-button");
+                deleteButton.addEventListener("click", (event) => {
+                    event.stopPropagation();
+                    if (listItem.getAttribute("previewed")) {
+                        this.clearPreview();
+                    }
+                    this.deleteSprite(sprite.id);
+                });
+                listItem.append(deleteButton);
                 return listItem;
             });
 

style.css

@@ -129,15 +129,15 @@ div#buttons button {
 }
 
 #console .error {
-    color: #D32F2F;
+    color: #d32f2f;
 }
 
-#console .info, #console .debug, #console .log[data-type=undefined] {
-    color: #BDBDBD;
+#console .info, #console .debug, #console .log[data-type="undefined"] {
+    color: #bdbdbd;
 }
 
-#console .log[data-type=number] {
-    color: #1976D2;
+#console .log[data-type="number"] {
+    color: #1976d2;
 }
 
 #console input {
@@ -293,13 +293,17 @@ footer {
 }
 
 #sprite-editor-sprite-list li {
+    display: flex;
     cursor: pointer;
     background-color: #242424;
     transition: background-color 50ms ease-in-out;
     padding: 0.5rem 1.5rem;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
 }
 
-#sprite-editor-sprite-list li:hover {
+#sprite-editor-sprite-list li:hover, #sprite-editor-sprite-list li[previewed] {
     background-color: #131313;
 }
 
@@ -337,4 +341,3 @@ footer {
 #sprite-editor-preview-snippet:empty {
     display: none;
 }
-