sfja/karlkoder-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

delete sprites

Browse Source
This commit is contained in:
Mikkel Kongsted 2025-10-11 21:13:16 +02:00
parent 4df6e7bac0
commit 3cb81b7ae0
3 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.git-authors.toml
View File

@ -1,11 +1,15 @@
[authors.rpb]
name = "Reimar Pihl Browa"
email = "mail@reim.ar"
[authors.tph] [authors.tph]
name = "Theis Pieter Hollebeek" name = "Theis Pieter Hollebeek"
email = "tphollebeek@gmail.com" 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] [authors.sfj]
name = "S. F. Jakobsen" name = "S. F. Jakobsen"
email = "sfja2004@gmail.com" email = "sfja2004@gmail.com"

26
src/sprite_editor.js
View File

@ -6,6 +6,7 @@ export class SpriteEditor {
this.editor = rootEl.querySelector("#sprite-editor"); this.editor = rootEl.querySelector("#sprite-editor");
this.toggleButton = rootEl.querySelector("#toggle-sprite-editor-button"); this.toggleButton = rootEl.querySelector("#toggle-sprite-editor-button");
this.container = rootEl; this.container = rootEl;
this.previewedId = null;
this.preview = {}; this.preview = {};
this.preview.title = rootEl.querySelector("#sprite-editor-preview-title"); this.preview.title = rootEl.querySelector("#sprite-editor-preview-title");
@ -62,6 +63,7 @@ export class SpriteEditor {
} }
setPreview(id) { setPreview(id) {
this.previewedId = id;
const sprite = this.sprites.find((x) => x.id === id); const sprite = this.sprites.find((x) => x.id === id);
this.preview.title.textContent = sprite.name; this.preview.title.textContent = sprite.name;
this.preview.image.src = `data:${sprite.mime};base64,${sprite.bytes.toBase64()}`; 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() { renderList() {
const children = this.sprites const children = this.sprites
.map((sprite) => { .map((sprite) => {
const listItem = document.createElement("li"); const listItem = document.createElement("li");
listItem.classList.add("sprite-editor-list-item"); listItem.classList.add("sprite-editor-list-item");
if (this.previewedId === sprite.id) {
listItem.setAttribute("previewed", true);
}
listItem.addEventListener("click", () => { listItem.addEventListener("click", () => {
for (const li of this.list.querySelectorAll("li[previewed]")) {
li.removeAttribute("previewed");
}
listItem.setAttribute("previewed", true);
this.setPreview(sprite.id); this.setPreview(sprite.id);
}); });
const name = document.createElement("span"); const name = document.createElement("span");
name.textContent = sprite.name; name.textContent = sprite.name;
listItem.append(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; return listItem;
}); });

17
style.css
View File

@ -129,15 +129,15 @@ div#buttons button {
} }
#console .error { #console .error {
color: #D32F2F; color: #d32f2f;
} }
#console .info, #console .debug, #console .log[data-type=undefined] { #console .info, #console .debug, #console .log[data-type="undefined"] {
color: #BDBDBD; color: #bdbdbd;
} }
#console .log[data-type=number] { #console .log[data-type="number"] {
color: #1976D2; color: #1976d2;
} }
#console input { #console input {
@ -293,13 +293,17 @@ footer {
} }
#sprite-editor-sprite-list li { #sprite-editor-sprite-list li {
display: flex;
cursor: pointer; cursor: pointer;
background-color: #242424; background-color: #242424;
transition: background-color 50ms ease-in-out; transition: background-color 50ms ease-in-out;
padding: 0.5rem 1.5rem; 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; background-color: #131313;
} }
@ -337,4 +341,3 @@ footer {
#sprite-editor-preview-snippet:empty { #sprite-editor-preview-snippet:empty {
display: none; display: none;
} }