From 1df4f140af9418d219441b5b8590ca74ed322984 Mon Sep 17 00:00:00 2001
From: Theis Pieter Hollebeek <tphollebeek@gmail.com>
Date: Fri, 10 Oct 2025 13:40:08 +0200
Subject: [PATCH] [wip] sprite editor

---
 index.html        | 56 ++++++++++++++++++++++++++++++++++++++++++++---
 js/code-runner.js |  9 ++++++--
 js/index.js       |  4 +---
 style.css         | 48 +++++++++++++++++++++++++++++++++++++---
 4 files changed, 106 insertions(+), 11 deletions(-)
diff --git a/index.html b/index.html
index fc42722..2a5ca1e 100644
--- a/index.html
+++ b/index.html
@@ -14,9 +14,7 @@
                 }
             }
         </script>
-        <script
-            src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"
-        ></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.43.2/ace.js"></script>
         <script src="./js/index.js" type="module"></script>
     </head>
     <body>
@@ -114,6 +112,58 @@ lib.startGameLoop(loop);
                     </div>
                 </section>
             </div>
+
+            <div class="column">
+                <section>
+                    <div class="section-header">
+                        Sprite editor
+                    </div>
+
+                    <div id="sprite-editor-area">
+                        <img
+                            id="sprite-editor-preview"
+                            src="https://tpho.dk/shared/photo%2010-07-2021,%2003.43.17.jpg"
+                        >
+                    </div>
+
+                    <ul id="sprite-editor-list">
+                        <li><button>Upload new sprite</button></li>
+                        <li><p>hrrmimimi <button class="delete-button">X</button></p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                        <li><p>hrrmimimi</p></li>
+                    </ul>
+                </section>
+            </div>
         </main>
 
         <footer>
diff --git a/js/code-runner.js b/js/code-runner.js
index c860d58..f33ef1e 100644
--- a/js/code-runner.js
+++ b/js/code-runner.js
@@ -32,10 +32,15 @@ export class CodeRunner {
         this.isRunning = false;
 
         globalThis.libInternalAbortController?.abort();
+
+        this.console.log("Stopping code...");
     }
 
     toggle() {
-        if (this.isRunning) this.stop();
-        else this.run();
+        if (this.isRunning) {
+            this.stop();
+        } else {
+            this.run();
+        }
     }
 }
diff --git a/js/index.js b/js/index.js
index 3379c0d..8527265 100644
--- a/js/index.js
+++ b/js/index.js
@@ -49,9 +49,7 @@ function downloadFile(content, mime, extension) {
     const element = document.createElement("a");
 
     element.href = `data:${mime};charset=utf-8,${encodeURIComponent(content)}`;
-    element.download = filename.endsWith(extension)
-        ? filename
-        : filename + extension;
+    element.download = filename.endsWith(extension) ? filename : filename + extension;
     element.style.display = "none";
 
     document.body.appendChild(element);
diff --git a/style.css b/style.css
index 33f086f..11f4e49 100644
--- a/style.css
+++ b/style.css
@@ -9,7 +9,7 @@
 body {
     margin: 0;
     height: 100vh;
-    background-color: light-dark(#eee, #333);
+    background-color: #333;
 }
 
 main {
@@ -24,7 +24,7 @@ main {
     background-color: #bdbdbd;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
-    border: 1px solid light-dark(#bdbdbd, #222);
+    border: 1px solid #222;
     padding: 4px;
     padding-left: 8px;
     font-family: sans-serif;
@@ -141,6 +141,11 @@ div#buttons button {
     font-size: 16px;
 }
 
+#editor * {
+    border-radius: 0;
+    box-shadow: none;
+}
+
 .dropdown-wrapper {
     position: relative;
 }
@@ -178,7 +183,8 @@ button {
     transition-duration: 200ms;
 }
 
-button.active {
+.dropdown-wrapper:has(.active) button,
+button:active {
     background-color: #065275;
 }
 
@@ -191,3 +197,39 @@ footer {
     bottom: 1px;
     left: 1px;
 }
+
+#sprite-editor-area {
+    line-height: 0;
+}
+
+#sprite-editor-preview {
+    background-color: #1d2021;
+    max-height: 450px;
+    object-fit: contain;
+    width: 100%;
+    border-radius: 0px;
+    padding-block: 32px;
+}
+
+#sprite-editor-list {
+    list-style: none;
+    padding: 1rem;
+    margin: 0;
+}
+
+#sprite-editor-list .delete-button {
+    background-color: #c83e4d;
+    padding: 0.25rem 0.75rem;
+}
+
+#sprite-editor-list .delete-button:hover {
+    background-color: #9f2d3a;
+}
+
+#sprite-editor-list .delete-button:active {
+    background-color: #7f242f;
+}
+
+#sprite-editor-list p:first-child {
+    margin-top: 0;
+}
