From 3ae618738010059d5b87a9efa09b8a099db7308b Mon Sep 17 00:00:00 2001
From: Reimar <mail@reim.ar>
Date: Sat, 11 Oct 2025 19:36:52 +0200
Subject: [PATCH] design sprite editor list

---
 index.html           |  4 +++-
 src/sprite_editor.js |  8 ++++----
 style.css            | 30 ++++++++++++++++++++++++++----
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 04cfb39..8d0ec6c 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/src/sprite_editor.js b/src/sprite_editor.js
index 850e58a..c247a3b 100644
--- a/src/sprite_editor.js
+++ b/src/sprite_editor.js
@@ -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;
             });
diff --git a/style.css b/style.css
index 71be00e..4f4add7 100644
--- a/style.css
+++ b/style.css
@@ -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;
 }
+