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=""> <img id="sprite-editor-preview-image" src="">
<code id="sprite-editor-preview-snippet"></code> <code id="sprite-editor-preview-snippet"></code>
</div> </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> <ul id="sprite-editor-sprite-list"></ul>
<button id="sprite-editor-upload-button">Upload new sprite</button>
</section> </section>
</div> </div>
</main> </main>

8
src/sprite_editor.js
View File

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

30
style.css
View File

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