Combined coordsHandler into Utils; Renamed apiHandler

build/build.js

@@ -17,7 +17,7 @@ const require = createRequire(import.meta.url);
 // CommonJS imports (require)
 const terser = require('terser');
 
-const isGitHub = !!process.env.GITHUB_ACTIONS; // Is this running in a GitHub Action Workflow?
+const isGitHub = !!process.env?.GITHUB_ACTIONS; // Is this running in a GitHub Action Workflow?
 
 // Tries to bump the version
 try {

docs/README.md

@@ -35,7 +35,7 @@
 <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-35hrs_30mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
-<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-200-black?style=flat"></a>
+<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-207-black?style=flat"></a>
 <a href="" target="_blank"><img alt="Total Lines of Code" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=code"></a>
 <a href="" target="_blank"><img alt="Total Comments" src="https://tokei.rs/b1/github/SwingTheVine/Wplace-BlueMarble?category=comments"></a>
 <a href="" target="_blank"><img alt="Compression" src="https://img.shields.io/badge/Compression-30.76%25-blue"></a>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.50.7",
+  "version": "0.55.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "wplace-bluemarble",
-      "version": "0.50.7",
+      "version": "0.55.7",
       "devDependencies": {
         "esbuild": "^0.25.0",
         "terser": "^5.43.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.55.0",
+  "version": "0.55.7",
   "type": "module",
   "scripts": {
     "build": "node build/build.js",

src/BlueMarble.meta.js

@@ -1,7 +1,7 @@
 // ==UserScript==
 // @name         Blue Marble
 // @namespace    https://github.com/SwingTheVine/
-// @version      0.55.0
+// @version      0.55.7
 // @description  A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
 // @author       SwingTheVine
 // @license      MPL-2.0

src/apiManager.js

@@ -1,18 +1,16 @@
-/** ApiHandler class for handling API requests, responses, and interactions.
+/** ApiManager class for handling API requests, responses, and interactions.
  * Note: Fetch spying is done in main.js, not here.
  * @since 0.11.1
  */
 
 import Utils from "./utils";
 
-export default class ApiHandler {
+export default class ApiManager {
 
-  /** Constructor for ApiHandler class
-   * @param {CoordsHandler} coordsHandler - The CoordsHandler instance
+  /** Constructor for ApiManager class
    * @since 0.11.34
    */
-  constructor(coordsHandler) {
-    this.coordsHandler = coordsHandler;
+  constructor() {
     this.disableAll = false; // Should the entire userscript be disabled?
     this.coordsTilePixel = []; // Contains the last detected tile/pixel coordinate pair requested
   }
@@ -66,8 +64,15 @@ export default class ApiHandler {
           const coordsTile = data['endpoint'].split('?')[0].split('/').filter(s => s && !isNaN(Number(s))); // Retrieves the tile coords as [x, y]
           const payloadExtractor = new URLSearchParams(data['endpoint'].split('?')[1]); // Declares a new payload deconstructor and passes in the fetch request payload
           const coordsPixel = [payloadExtractor.get('x'), payloadExtractor.get('y')]; // Retrieves the deconstructed pixel coords from the payload
+          
+          // Don't save the coords if there are previous coords that could be used
+          if (this.coordsTilePixel.length && (!coordsTile.length || !coordsPixel.length)) {
+            overlay.handleDisplayError(`Coordinates are malformed!\nDid you try clicking the canvas first?`);
+            return; // Kills itself
+          }
+          
           this.coordsTilePixel = [...coordsTile, ...coordsPixel]; // Combines the two arrays such that [x, y, x, y]
-          const displayTP = this.coordsHandler.serverTPtoDisplayTP(coordsTile, coordsPixel);
+          const displayTP = Utils.serverTPtoDisplayTP(coordsTile, coordsPixel);
           
           const spanElements = document.querySelectorAll('span'); // Retrieves all span elements
 

src/coordsHandler.js

@@ -1,17 +0,0 @@
-/** Handles translation of coordinate systems.
- * @since 0.42.4
- */
-export default class CoordsHandler {
-
-  /** Converts the server tile-pixel coordinate system to the displayed tile-pixel coordinate system.
-   * @param {string[]} tile - The tile to convert (as an array like ["12", "124"])
-   * @param {string[]} pixel - The pixel to convert (as an array like ["12", "124"])
-   * @returns {number[]} [tile, pixel]
-   * @since 0.42.4
-   * @example
-   * console.log(serverTPtoDisplayTP(['12', '123'], ['34', '567'])); // [34, 3567]
-   */
-  serverTPtoDisplayTP(tile, pixel) {
-    return [((parseInt(tile[0]) % 4) * 1000) + parseInt(pixel[0]), ((parseInt(tile[1]) % 4) * 1000) + parseInt(pixel[1])];
-  }
-}

src/main.js

@@ -1,7 +1,6 @@
 import Overlay from './overlay.js';
 import Observers from './observers.js';
-import CoordsHandler from './coordsHandler.js';
-import ApiHandler from './apiHandler.js';
+import ApiManager from './apiManager.js';
 
 const name = GM_info.script.name.toString();
 const version = GM_info.script.version.toString();
@@ -78,10 +77,9 @@ document.head.appendChild(stylesheetLink);
 
 const observers = new Observers(); // Constructs a new Observers object
 const overlay = new Overlay(name, version); // Constructs a new Overlay object
-const coordsHandler = new CoordsHandler(); // Constructs a new CoordsHandler object
-const apiHandler = new ApiHandler(coordsHandler); // Constructs a new ApiHandler object
+const apiManager = new ApiManager(); // Constructs a new ApiManager object
 
-overlay.setApiHandler(apiHandler); // Sets the API handler
+overlay.setApiManager(apiManager); // Sets the API manager
 
 // Deploys the overlay to the page
 // Parent/child relationships in the DOM structure below are indicated by indentation
@@ -113,7 +111,7 @@ overlay.addDiv({'id': 'bm-overlay', 'style': 'top: 10px; right: 75px;'})
       .addButton({'id': 'bm-button-coords', 'className': 'bm-help', 'style': 'margin-top: 0;', 'innerHTML': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 6"><circle cx="2" cy="2" r="2"></circle><path d="M2 6 L3.7 3 L0.3 3 Z"></path><circle cx="2" cy="2" r="0.7" fill="white"></circle></svg></svg>'},
         (instance, button) => {
           button.onclick = () => {
-            const coords = instance.apiHandler?.coordsTilePixel; // Retrieves the coords from the API handler
+            const coords = instance.apiManager?.coordsTilePixel; // Retrieves the coords from the API manager
             if (!coords?.[0]) {
               instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?');
               return;
@@ -130,9 +128,20 @@ overlay.addDiv({'id': 'bm-overlay', 'style': 'top: 10px; right: 75px;'})
       .addInput({'type': 'number', 'id': 'bm-input-px', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1}).buildElement()
       .addInput({'type': 'number', 'id': 'bm-input-py', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1}).buildElement()
     .buildElement()
-    .addInputFile({'id': 'bm-input-file-template', 'textContent': 'Upload Template'}).buildElement()
+    .addInputFile({'id': 'bm-input-file-template', 'textContent': 'Upload Template', 'accept': 'image/png, image/jpeg, image/webp, image/bmp, image/gif'}).buildElement()
     .addDiv({'id': 'bm-contain-buttons'})
-      .addButton({'id': 'bm-button-enable', 'textContent': 'Enable'}).buildElement()
+      .addButton({'id': 'bm-button-enable', 'textContent': 'Enable'}, (instance, button) => {
+        button.onclick = () => {
+          const input = document.querySelector('#bm-input-file-template');
+
+          // Kills itself if there is no file
+          if (!input?.files[0]) {instance.handleDisplayError(`No file selected!`); return;}
+
+          const url = URL.createObjectURL(input.files[0]); // Creates a blob URL
+          window.open(url, '_blank'); // Opens a new tab with blob
+          setTimeout(() => URL.revokeObjectURL(url), 10000); // Destroys the blob 10 seconds later
+        }
+      }).buildElement()
       .addButton({'id': 'bm-button-disable', 'textContent': 'Disable'}).buildElement()
     .buildElement()
     .addTextarea({'id': overlay.outputStatusId, 'placeholder': `Status: Sleeping...\nVersion: ${version}`, 'readOnly': true}).buildElement()
@@ -141,6 +150,6 @@ overlay.addDiv({'id': 'bm-overlay', 'style': 'top: 10px; right: 75px;'})
 
 overlay.handleDrag('#bm-overlay', '#bm-bar-drag'); // Creates dragging capability on the drag bar for dragging the overlay
 
-apiHandler.spontaneousResponseListener(overlay); // Reads spontaneous fetch responces
+apiManager.spontaneousResponseListener(overlay); // Reads spontaneous fetch responces
 
 console.log(`${name} (${version}) userscript has loaded!`);

src/overlay.js

@@ -29,7 +29,7 @@ export default class Overlay {
     this.name = name; // Name of userscript
     this.version = version; // Version of userscript
 
-    this.apiHandler = null; // The API handler instance. Later populated when setApiHandler is called
+    this.apiManager = null; // The API manager instance. Later populated when setApiManager is called
     
     this.outputStatusId = 'bm-output-status'; // ID for status element
 
@@ -38,11 +38,11 @@ export default class Overlay {
     this.parentStack = []; // Tracks the parent elements BEFORE the currentParent so we can nest elements
   }
 
-  /** Populates the apiHandler variable with the apiHandler class.
-   * @param {apiHandler} apiHandler - The apiHandler class instance
+  /** Populates the apiManager variable with the apiManager class.
+   * @param {apiManager} apiManager - The apiManager class instance
    * @since 0.41.4
    */
-  setApiHandler(apiHandler) {this.apiHandler = apiHandler;}
+  setApiManager(apiManager) {this.apiManager = apiManager;}
 
   /** Creates an element.
    * For **internal use** of the {@link Overlay} class.

src/utils.js

@@ -24,4 +24,16 @@ export default class Utils {
     div.textContent = text; // Puts the text in a PLAIN-TEXT property
     return div.innerHTML; // Returns the HTML property of the div
   }
+
+  /** Converts the server tile-pixel coordinate system to the displayed tile-pixel coordinate system.
+   * @param {string[]} tile - The tile to convert (as an array like ["12", "124"])
+   * @param {string[]} pixel - The pixel to convert (as an array like ["12", "124"])
+   * @returns {number[]} [tile, pixel]
+   * @since 0.42.4
+   * @example
+   * console.log(serverTPtoDisplayTP(['12', '123'], ['34', '567'])); // [34, 3567]
+   */
+  static serverTPtoDisplayTP(tile, pixel) {
+    return [((parseInt(tile[0]) % 4) * 1000) + parseInt(pixel[0]), ((parseInt(tile[1]) % 4) * 1000) + parseInt(pixel[1])];
+  }
 }