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

design sprite editor list

Browse Source
This commit is contained in:
Reimar 2025-10-11 19:36:52 +02:00
parent b013d5104b
commit 3ae6187380
3 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -131,8 +131,10 @@ lib.startGameLoop(loop);
<img id="sprite-editor-preview-image" src="">
<code id="sprite-editor-preview-snippet"></code>
</div>
<button id="sprite-editor-upload-button">Upload new sprite</button>
<p id="sprite-editor-sprite-list-title">Uploaded sprites</p>
<ul id="sprite-editor-sprite-list"></ul>
<button id="sprite-editor-upload-button">Upload new sprite</button>
</section>
</div>
</main>

8
src/sprite_editor.js
View File

@ -63,7 +63,7 @@ export class SpriteEditor {
" x, y,<br>" +
" width, height,<br>" +
` <span class="str">"${sanitizedName}"</span><br>` +
"<iden>)</iden>;";
");";
}
renderList() {
@ -71,11 +71,11 @@ export class SpriteEditor {
.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", () => {
listItem.addEventListener("click", () => {
this.setPreview(sprite.id);
});
const name = document.createElement("span");
name.textContent = sprite.name;
listItem.append(name);
return listItem;
});

30
style.css
View File

@ -232,6 +232,7 @@ footer {
#sprite-editor-preview {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
}
#sprite-editor-preview-title {
@ -252,16 +253,35 @@ footer {
max-height: min(40vh, 400px);
}
#sprite-editor-sprite-list-title {
font-weight: bold;
text-align: center;
}
#sprite-editor-sprite-list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
background-color: #131313;
list-style-type: none;
}
#sprite-editor-sprite-list li span {
#sprite-editor-sprite-list:not(:empty) {
border-top: 1px solid #131313;
border-bottom: 1px solid #131313;
}
#sprite-editor-sprite-list li {
cursor: pointer;
background-color: #242424;
transition: background-color 50ms ease-in-out;
padding: 0.5rem 1.5rem;
}
#sprite-editor-sprite-list li span:hover {
text-decoration: 1px solid underline;
#sprite-editor-sprite-list li:hover {
background-color: #131313;
}
#sprite-editor-sprite-list .delete-button {
@ -278,7 +298,8 @@ footer {
}
#sprite-editor-upload-button {
margin: 1rem;
display: block;
margin: 1rem auto;
}
#sprite-editor-preview-snippet {
@ -297,3 +318,4 @@ footer {
#sprite-editor-preview-snippet:empty {
display: none;
}