From 4ab14a88a5c37c3edbc7bde1727ad52811cf14b0 Mon Sep 17 00:00:00 2001
From: Theis Pieter Hollebeek <tphollebeek@gmail.com>
Date: Fri, 10 Oct 2025 16:38:31 +0200
Subject: [PATCH] toggle sprite editor visibility

---
 index.html  |  6 +++++-
 js/index.js | 11 +++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 2795ee8..06620fa 100644
--- a/index.html
+++ b/index.html
@@ -55,6 +55,10 @@
                     <div>
                         <button id="run-button">🏃 Run</button>
                     </div>
+
+                    <div>
+                        <button id="toggle-sprite-editor-button">🖼️ Toggle sprite editor</button>
+                    </div>
                 </div>
 
                 <section>
@@ -112,7 +116,7 @@ lib.startGameLoop(loop);
                 </section>
             </div>
 
-            <div class="column">
+            <div class="column" id="sprite-editor-container">
                 <section id="sprite-editor">
                     <div class="section-header">
                         Sprite editor
diff --git a/js/index.js b/js/index.js
index d65c298..9651716 100644
--- a/js/index.js
+++ b/js/index.js
@@ -22,6 +22,7 @@ const saveButton = document.querySelector("#save-button");
 const saveDropdown = document.querySelector("#save-dropdown");
 const saveJsButton = document.querySelector("#save-js");
 const saveHtmlButton = document.querySelector("#save-html");
+const toggleSpriteEditorButton = document.querySelector("#toggle-sprite-editor-button");
 
 const sessionSaveDebounce = new Debounce(1000);
 editor.addEventListener("change", (ev) => {
@@ -123,3 +124,13 @@ ${js}
 
     downloadFile(html, "text/html", ".html");
 };
+
+toggleSpriteEditorButton.addEventListener("click", () => {
+    const cont = document.querySelector("#sprite-editor-container");
+    console.log(cont.style.getPropertyValue("display"));
+    if (cont.style.getPropertyValue("display") === "none") {
+        cont.style.removeProperty("display");
+    } else {
+        cont.style.setProperty("display", "none");
+    }
+});