diff --git a/.git-authors.toml b/.git-authors.toml index 28364bf..d6024d9 100644 --- a/.git-authors.toml +++ b/.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" diff --git a/src/sprite_editor.js b/src/sprite_editor.js index 2430f71..596a517 100644 --- a/src/sprite_editor.js +++ b/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; }); diff --git a/style.css b/style.css index 2933c91..3e446dc 100644 --- a/style.css +++ b/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; } -