few improvements

README.md

@@ -2,4 +2,9 @@
 
 Online playground for [litecanvas](https://github.com/litecanvas/game-engine) game engine.
 
-Try: https://litecanvas.js.org/
+Try on https://litecanvas.js.org/
+
+## Playground tips
+
+- https://litecanvas.js.org/?reset=1 cleans the backup code (stored locally)
+- https://litecanvas.js.org/?autorun=0 prevents the code from being executed immediately (only on large screens)

public/about.html

@@ -4,7 +4,7 @@
     <link rel="manifest" href="manifest.json" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>litecanvas cheatsheet</title>
+    <title>Litecanvas Cheatsheet</title>
     <link rel="stylesheet" href="prism/prism.css" />
     <link rel="icon" href="icons/favicon.ico" />
     <style>
@@ -36,6 +36,10 @@
         font-size: 1.2rem;
         line-height: 2;
       }
+      #install code {
+        background-color: #eee;
+        word-break: break-all;
+      }
       @media print {
         .no-print {
           display: none;
@@ -82,13 +86,14 @@ <h1>LITECANVAS</h1>
         helpers, no gui tools... just coding.
       </p>
 
-      <p>
+      <p id="install">
         <strong>NPM</strong>:
-        <code onclick="selectText(this)" class="language-bash"
-          >npm i @litecanvas/litecanvas</code
-        >
-        <br /><strong>CND</strong>:
-        <code onclick="selectText(this)" class="language-bash"
+        <code onclick="selectText(this)">npm i @litecanvas/litecanvas</code>
+      </p>
+
+      <p id="install">
+        <strong>CND</strong>:
+        <code onclick="selectText(this)"
           >https://unpkg.com/@litecanvas/litecanvas/dist/dist.js</code
         >
       </p>
@@ -105,6 +110,8 @@ <h1>LITECANVAS</h1>
         <a href="#advanced">Advanced</a>
       </nav>
 
+      <h2>Basic boilerplate</h2>
+
       <pre><code class="language-typescript">litecanvas({
   loop: { init, update, draw, resized }
 })
@@ -162,7 +169,9 @@ <h2><a id="settings">Game Configuration</a></h2>
 settings.fullscreen = true
 
 // the game screen size
-settings.width = settings.height = undefined
+// by default, the game fills the entire screen
+settings.width = null
+settings.height = settings.width || null
 
 // scale the canvas
 settings.autoscale = true
@@ -191,7 +200,7 @@ <h2><a id="settings">Game Configuration</a></h2>
 // amount of time (milliseconds) to pause the tapping detection
 settings.tappingInterval = 100;
 
-// export all functions to global context
+// export all functions to global scope
 settings.global = true</code></pre>
 
       <h2><a id="drawing">Functions for Drawing</a></h2>
@@ -312,7 +321,7 @@ <h2><a id="drawing">Functions for Drawing</a></h2>
 // see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform
 transform(a, b, c, d, e, f, resetFirst = true): void
 
-// update the alpha (transparency)
+// update the alpha (opacity)
 // see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha
 alpha(value: number): void
 
@@ -324,7 +333,7 @@ <h2><a id="drawing">Functions for Drawing</a></h2>
 // see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke
 stroke(color: number, path?: Path2D): void
 
-// create a Path2D instance
+// create (or clone) a Path2D instance
 // see: https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D
 path(arg?: Path2D | string): Path2D
 

public/index.html

@@ -13,7 +13,7 @@
       content="width=device-width, initial-scale=1.0, user-scalable=no"
     />
     <link rel="icon" href="icons/favicon.ico" />
-    <title>litecanvas playground</title>
+    <title>Litecanvas Playground</title>
     <link rel="stylesheet" href="app.css" />
     <script src="app.js" defer></script>
   </head>

public/sw.js

@@ -1,5 +1,5 @@
 const cacheName = "luizbills.litecanvas-editor-v1";
-const version = "1.64.0";
+const version = "1.64.1";
 
 const precacheResources = [
   "/",

public/tools/pixel-art-editor.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8" />
     <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>
+    <title>LITEPIXEL - Tiny pixel art editor</title>
     <style>
       body {
         margin: 0;

src/index.js

@@ -31,7 +31,8 @@ if (url.searchParams.get("reset") !== null) {
   window.location = location.origin;
 }
 
-const autoplay = url.searchParams.get("autoplay") != 0;
+const autoplay = !["0", "false"].includes(url.searchParams.get("autoplay"));
+console.log("autoplay", autoplay);
 
 let codeFromURL = url.searchParams.get("c");
 if (codeFromURL !== null) {
@@ -113,7 +114,7 @@ function stopGame(evt) {
 shareButton.addEventListener("click", (evt) => {
   if (!navigator.clipboard) {
     return alert(
-      "Your browser not support this feature. Consider installing Firefox or Chrome.",
+      "Your browser not support this feature. Consider installing Firefox or Chrome."
     );
   }
   const code = codeEditor.state.doc.toString();
@@ -131,14 +132,14 @@ shareButton.addEventListener("click", (evt) => {
     (err) => {
       alert("Error: Unable to generate your shareable url!");
       console.error("Error on copying text to clipboard:", err);
-    },
+    }
   );
 });
 
 copyButton.addEventListener("click", (evt) => {
   if (!navigator.clipboard) {
     return alert(
-      "Your browser not support this feature. Consider installing Firefox or Chrome.",
+      "Your browser not support this feature. Consider installing Firefox or Chrome."
     );
   }
   const code = codeEditor.state.doc.toString();
@@ -148,14 +149,14 @@ copyButton.addEventListener("click", (evt) => {
     (err) => {
       alert("Error: Unable to generate your shareable url!");
       console.error("Error on copying text to clipboard:", err);
-    },
+    }
   );
 });
 
 function runCode() {
   if (!litecanvasSourceCode) {
     return alert(
-      "The litecanvas source code  was not loaded. Try reloading this page.",
+      "The litecanvas source code  was not loaded. Try reloading this page."
     );
   }
   const game = codeEditor.state.doc.toString();
@@ -203,7 +204,7 @@ const state = EditorState.create({
           sourceType: "script",
         },
         rules: {},
-      }),
+      })
     ),
     javascriptLanguage.data.of({
       autocomplete: customCompletions,
@@ -273,16 +274,16 @@ function decompressString(str) {
         new Uint8Array(
           atob(str)
             .split("")
-            .map((c) => c.charCodeAt(0)),
+            .map((c) => c.charCodeAt(0))
         ),
-        { to: "string" },
+        { to: "string" }
       );
       console.log("Playground url decoded successfully!");
       break;
     } catch (e) {
       console.error(
         `Failed decode the playground url (${attempts + 1}/2). Error:`,
-        e,
+        e
       );
       console.log("Trying to decode again (fixing some characters)...");
       code = null;