prefix the local storage keys of litepixel tool

litecanvas · May 18, 2024 · 0e10ae8 · 0e10ae8
1 parent ccaa4a7
commit 0e10ae8
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 47 deletions.
diff --git a/public/sw.js b/public/sw.js
@@ -1,5 +1,5 @@
 const cacheName = "luizbills.litecanvas-editor-v1";
-const version = "1.52.0";
+const version = "1.53.0";
 
 const precacheResources = [
   "/",

diff --git a/public/tools/pixel-art-editor.html b/public/tools/pixel-art-editor.html
@@ -3,8 +3,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="manifest" href="manifest.json" />
-    <link rel="icon" href="icons/favicon.ico" />
+    <link rel="icon" href="../icons/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>litepixel - Tiny pixel art editor</title>
     <style>
@@ -25,6 +24,8 @@
       }
 
       textarea {
+        font-family: Consolas, "Lucida Console", monospace;
+        font-size: 0.9em;
         margin-top: 2rem;
         margin-bottom: 0.5rem;
         display: block;
@@ -56,6 +57,26 @@
         line-height: 1.5;
       }
 
+      kbd {
+        font-family: Consolas, "Lucida Console", monospace;
+        display: inline-block;
+        border-radius: 3px;
+        padding: 0px 4px;
+        box-shadow: 1px 1px 1px #777;
+        margin: 2px;
+        font-size: small;
+        vertical-align: text-bottom;
+        background: #eee;
+        font-weight: 500;
+        color: #555;
+        cursor: pointer;
+        font-variant: small-caps;
+        font-weight: 700;
+        letter-spacing: 1px;
+        line-height: 1.35;
+        font-style: normal;
+      }
+
       .canvas-wrapper {
         margin-top: 1rem;
       }
@@ -186,9 +207,19 @@ <h1>litepixel</h1>
       <button id="copy">copy</button>
     </section>
 
+    <footer>
+      <strong>Hotkeys:</strong>
+      <ul>
+        <li><kbd>0</kbd>...<kbd>7</kbd>: select a color.</li>
+        <li><kbd>space</kbd>: select the color #0.</li>
+        <li><kbd>x</kbd> or <kbd>e</kbd>: select the eraser.</li>
+      </ul>
+    </footer>
+
     <script>
       const ctx = art.getContext("2d");
       const $ = (selector) => document.querySelector(selector);
+      // color palette
       const colors = [
         "#101820",
         "#736464",
@@ -199,6 +230,16 @@ <h1>litepixel</h1>
         "#00a0c8",
         "#10c840",
       ];
+      // local storage wrapper
+      const storage = {
+        prefix: "litepixel_",
+        getItem(key) {
+          return localStorage.getItem(this.prefix + key);
+        },
+        setItem(key, value) {
+          return localStorage.setItem(this.prefix + key, value);
+        },
+      };
 
       /** @type HTMLElement */
       let selected = null,
@@ -207,35 +248,43 @@ <h1>litepixel</h1>
         H,
         ps,
         dirty = false,
-        pixels = [];
+        pixels;
 
-      onload =
-        pixelSize.onchange =
+      pixelSize.onchange =
         pixelSize.oninput =
         width.onchange =
         width.oninput =
         height.onchange =
         height.oninput =
-          function () {
-            prepare();
-            draw();
-          };
-
-      // Restore from localStorage
-      width.value = ~~localStorage.getItem("width") || 8;
-      height.value = ~~localStorage.getItem("height") || 8;
-      pixelSize.value = ~~localStorage.getItem("ps") || "";
-      try {
-        json = localStorage.getItem("pixels");
-        pixels = json ? JSON.parse(json) : pixels;
-      } catch (error) {}
+          () => handleChanges(true);
+
+      // Restore from user's local storage
+      width.value = ~~storage.getItem("width") || 8;
+      height.value = ~~storage.getItem("height") || 8;
 
+      pixelSize.value = ~~storage.getItem("ps") || "";
       if (!pixelSize.value) {
         pixelSize.value = innerWidth < 800 ? 36 : 24;
       }
 
+      try {
+        json = storage.getItem("pixels");
+        pixels = json ? JSON.parse(json) : pixels;
+      } catch (error) {
+        console.error(error);
+      }
+
+      handleChanges(false);
+
+      function handleChanges(save = true) {
+        prepare();
+        draw();
+        dirty = save;
+      }
+
       // Setup canvas
       function prepare() {
+        pixels = pixels || [];
         ps = pixelSize.value;
         W = ~~width.value;
         H = ~~height.value;
@@ -255,19 +304,6 @@ <h1>litepixel</h1>
         dirty = true;
       }
 
-      // Reset
-      clearButton.onclick = () => {
-        if (
-          confirm(
-            "Are you sure you want to erase the canvas? This action cannot be undone."
-          )
-        ) {
-          pixels.length = 0;
-          localStorage.removeItem("pixels");
-          prepare();
-        }
-      };
-
       // Draw
       function draw() {
         art.width = art.width; // hack to clear the canvas
@@ -380,15 +416,14 @@ <h1>litepixel</h1>
         }
       }
 
+      // Hotkeys
       window.onkeypress = (evt) => {
         if ("INPUT" === evt.target.tagName) return;
 
         evt.preventDefault();
         const key = " " === evt.key ? 0 : parseInt(evt.key, 10);
         const keys = [0, 1, 2, 3, 4, 5, 6, 7];
 
-        console.log(key);
-
         if (keys.includes(key)) {
           const el = $(`[data-color="${key}"]`);
           setCurrentColor(key, el);
@@ -398,6 +433,19 @@ <h1>litepixel</h1>
         }
       };
 
+      // Reset
+      clearButton.onclick = () => {
+        if (
+          confirm(
+            "Are you sure you want to erase the canvas? This action cannot be undone."
+          )
+        ) {
+          pixels.length = 0;
+          storage.setItem("pixels", null);
+          prepare();
+        }
+      };
+
       // Export
       exportButton.onclick = function () {
         let output = "";
@@ -443,10 +491,10 @@ <h1>litepixel</h1>
       // Auto-save in local storage
       setInterval(() => {
         if (dirty) {
-          localStorage.setItem("width", W);
-          localStorage.setItem("height", H);
-          localStorage.setItem("pixels", JSON.stringify(pixels));
-          localStorage.setItem("ps", ps);
+          storage.setItem("width", W);
+          storage.setItem("height", H);
+          storage.setItem("pixels", JSON.stringify(pixels));
+          storage.setItem("ps", ps);
           dirty = false;
         }
       }, 500);
@@ -458,14 +506,5 @@ <h1>litepixel</h1>
         }
       });
     </script>
-
-    <footer>
-      <strong>Hotkeys:</strong>
-      <ul>
-        <li><code>0</code>...<code>7</code>: select a color.</li>
-        <li><code>space</code>...<code>7</code>: select the color #0.</li>
-        <li><code>x</code> or <code>e</code>: select the eraser.</li>
-      </ul>
-    </footer>
   </body>
 </html>