Added install instructions

docs/README.md

@@ -31,7 +31,7 @@
 
 <h1>Blue Marble</h1>
 <a href="" target="_blank"><img alt="Latest Version" src="https://img.shields.io/badge/Latest_Version-0.65.0-lightblue?style=flat"></a>
-<a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases" target="_blank"><img alt="Latest Release" src="https://img.shields.io/github/v/release/SwingTheVine/Wplace-BlueMarble?sort=date&style=flat&label=Latest%20Release&color=blue"></a>
+<a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases" target="_blank"><img alt="Latest Release" src="https://img.shields.io/github/v/release/SwingTheVine/Wplace-BlueMarble?sort=semver&style=flat&label=Latest%20Release&color=blue"></a>
 <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/LICENSE.txt" target="_blank"><img alt="Software License: MPL-2.0" src="https://img.shields.io/badge/Software_License-MPL--2.0-brightgreen?style=flat"></a>
 <a href="https://discord.gg/tpeBPy46hf" target="_blank"><img alt="Contact Me" src="https://img.shields.io/badge/Contact_Me-gray?style=flat&logo=Discord&logoColor=white&logoSize=auto&labelColor=cornflowerblue"></a>
 <a href="" target="_blank"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-59hrs_0mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
@@ -46,6 +46,21 @@
 <p>
   Welcome to Blue Marble! Blue Marble is a userscript for the website <a href="https://wplace.live/" target="_blank">wplace.live</a>.
 
+  <h3>Installation Instructions</h3>
+  <a href="" target="_blank"><img alt="Supported Browsers" src="https://img.shields.io/badge/Browsers-Chrome%20%7C%20Firefox%20%7C%20Safari%20%7C%20IE-orange?style=flat"></a>
+  <p>
+    Blue Marble has been verified to work on mobile devices. Blue Marble was designed on Chrome, but Blue Marble might work on "unsupported" browsers not listed above.
+    <br>
+    Here is how you install the Blue Marble userscript:
+    <ol>
+      <li>Install <a href="https://www.tampermonkey.net/index.php" target="_blank">TamperMonkey</a>.</li>
+      <li>Enable Developer Mode & Userscripts (on Chrome).</li>
+      <li>Download the <a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases" target="_blank">BlueMarble.user.js</a> file.</li>
+      <li>Put the <code>BlueMarble.user.js</code> file inside the dashboard of TamperMonkey.</li>
+      <li>Enable BlueMarble inside TamperMonkey</li>
+    </ol>
+  </p>
+
   <h3>Script Settings</h3>
   <p>
     There are many settings available for the Blue Marble userscript! Through these settings, you can control how the script behaves.

src/Template.js

@@ -56,7 +56,6 @@ export default class Template {
     const context = canvas.getContext('2d');
 
     context.imageSmoothingEnabled = false; // Nearest neighbor scaleing
-    context.globalCompositeOperation = "destination-over"; // If we the image we are drawing has transparent pixels, don't preserve them.
 
     // Tells the canvas to ignore anything outside of this area
     context.beginPath();

src/apiManager.js

@@ -57,7 +57,7 @@ export default class ApiManager {
           if (dataJSON['status'] && dataJSON['status']?.toString()[0] != '2') {
             // The server is probably down (NOT a 2xx status)
             
-            overlay.handleDisplayError(`The game is down!\nCould not fetch userdata.`);
+            overlay.handleDisplayError(`You are not logged in!\nCould not fetch userdata.`);
             return; // Kills itself before attempting to display null userdata
           }
 

src/templateManager.js

@@ -1,5 +1,15 @@
 /** Manages the template system.
+ * This class handles all external requests for modification to a Template.
  * @since 0.55.8
+ * @example
+ * // Example of JSON structure for a template
+{
+  "scriptVersion": "1.13.0",
+  "schemaVersion": "2.1.0",
+  "templates": {
+    ""
+  }
+}
  */
 export default class TemplateManager {
 
@@ -22,7 +32,7 @@ export default class TemplateManager {
    * @since 0.58.3
    * @deprecated Not in use since 0.63.25
    */
-  getCanvas() {
+  /* @__PURE__ */getCanvas() {
 
     // If the stored canvas is "fresh", return the stored canvas
     if (document.body.contains(this.canvasTemplate)) {return this.canvasTemplate;}
@@ -55,6 +65,18 @@ export default class TemplateManager {
     return this.canvasTemplate; // Return the new canvas
   }
 
+  createTemplate() {
+
+  }
+
+  deleteTemplate() {
+
+  }
+
+  drawTemplateOnTile() {
+
+  }
+
   /** Sets the template to the image passed in.
    * @param {File} file - The file of the template image.
    * @since 0.55.8
@@ -103,7 +125,6 @@ export default class TemplateManager {
 
     context.clearRect(0, 0, drawSize, drawSize); // Draws transparent background
     context.drawImage(tileBitmap, 0, 0, drawSize, drawSize);
-    //context.globalCompositeOperation = "destination-atop"; // If we the image we are drawing has transparent pixels, don't preserve them.
     context.drawImage(templateBitmap, coordsTilePixel[2]*3, coordsTilePixel[3]*3);
 
     const final = await canvas.convertToBlob({ type: 'image/png' });