From 2f3387114102b686e5dbb0ad4f2db172d6e5e061 Mon Sep 17 00:00:00 2001
From: Theis Pieter Hollebeek <tphollebeek@gmail.com>
Date: Sat, 11 Oct 2025 15:23:32 +0200
Subject: [PATCH] make sprite editor toggleable

Co-authored-by: Reimar <mail@reim.ar>
---
 index.html   | 10 +++++-----
 src/index.js | 17 +++++++++++++----
 style.css    | 26 ++++++++++++++++++++++++--
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index d260cc2..7bb7380 100644
--- a/index.html
+++ b/index.html
@@ -56,10 +56,6 @@
                     <div>
                         <button id="run-button">🏃 Run</button>
                     </div>
-
-                    <div>
-                        <button id="toggle-sprite-editor-button">🖼️ Toggle sprite editor</button>
-                    </div>
                 </div>
 
                 <section>
@@ -117,7 +113,11 @@ lib.startGameLoop(loop);
                 </section>
             </div>
 
-            <div class="column" id="sprite-editor-container">
+            <div class="column" id="sprite-editor-container" style="flex-grow: 0">
+                <div id="toggle-sprite-editor-button">
+                    &lsaquo;
+                </div>
+
                 <section id="sprite-editor">
                     <div class="section-header">
                         Sprite editor
diff --git a/src/index.js b/src/index.js
index 6615e77..e31d854 100644
--- a/src/index.js
+++ b/src/index.js
@@ -177,10 +177,19 @@ saveKarlkoderButton.onclick = (ev) => {
 };
 
 toggleSpriteEditorButton.addEventListener("click", () => {
-    const cont = document.querySelector("#sprite-editor-container");
-    if (cont.style.getPropertyValue("display") === "none") {
-        cont.style.removeProperty("display");
+    const container = document.querySelector("#sprite-editor-container");
+    const editor = document.querySelector("#sprite-editor");
+    const button = document.querySelector("#toggle-sprite-editor-button");
+
+    if (getComputedStyle(editor).display === "none") {
+        editor.style.display = "block";
+        container.style.flexGrow = "1";
+        button.innerHTML = "&rsaquo;";
+        button.setAttribute("expanded", true);
     } else {
-        cont.style.setProperty("display", "none");
+        editor.style.display = "none";
+        container.style.flexGrow = "0";
+        button.innerHTML = "&lsaquo;";
+        button.removeAttribute("expanded");
     }
 });
diff --git a/style.css b/style.css
index d59aaf3..b38fb48 100644
--- a/style.css
+++ b/style.css
@@ -200,8 +200,30 @@ footer {
     left: 1px;
 }
 
-#sprite-editor-area {
-    line-height: 0;
+#toggle-sprite-editor-button {
+    color: white;
+    cursor: pointer;
+    font-size: 32px;
+    align-self: center;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.5rem;
+}
+
+#toggle-sprite-editor-button[expanded] {
+    background-color: #242424;
+    border-radius: 0.5rem 0 0 0.5rem;
+}
+
+#sprite-editor {
+    background-color: #242424;
+    display: none;
+}
+
+#sprite-editor-container {
+    flex-direction: row;
+    align-items: stretch;
+    gap: 0;
+    min-width: min-content;
 }
 
 #sprite-editor-preview {