Added action button UI

dist/BlueMarble.user.css

@@ -1 +1 @@
-#bm-overlay{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000}div#bm-overlay{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-bar-drag{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-bar-drag.dragging{cursor:grabbing}#bm-contain-header{margin-bottom:.5em}#bm-overlay img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}#bm-overlay h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-contain-automation input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-contain-automation label{margin-right:.5ch}.bm-help{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-button-coords{vertical-align:middle}#bm-button-coords svg{width:50%;margin:0 auto;fill:#111}#bm-contain-coords input[type=number]{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-contain-coords input[type=number]::-webkit-outer-spin-button,#bm-contain-coords input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bm-contain-buttons{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}div:has(>#bm-input-file-template)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#bm-output-status{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-contain-userinfo,#bm-contain-automation,#bm-contain-coords,#bm-contain-buttons,div:has(>#bm-input-file-template),#bm-output-status{margin-top:.5em}#bm-overlay button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-overlay button:hover,#bm-overlay button:focus-visible{background-color:#1061e5}#bm-overlay button:active,#bm-overlay button:disabled{background-color:#2e97ff}#bm-overlay button:disabled{text-decoration:line-through}
+#bm-overlay{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000}div#bm-overlay{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-bar-drag{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-bar-drag.dragging{cursor:grabbing}#bm-contain-header{margin-bottom:.5em}#bm-overlay img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle}#bm-overlay h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-contain-automation input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-contain-automation label{margin-right:.5ch}.bm-help{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-button-coords{vertical-align:middle}#bm-button-coords svg{width:50%;margin:0 auto;fill:#111}#bm-contain-coords input[type=number]{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-contain-coords input[type=number]::-webkit-outer-spin-button,#bm-contain-coords input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bm-contain-buttons-template{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}div:has(>#bm-input-file-template)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#bm-output-status{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-contain-buttons-action{display:flex;justify-content:space-between}#bm-overlay small{font-size:x-small;color:#d3d3d3}#bm-contain-userinfo,#bm-contain-automation,#bm-contain-coords,#bm-contain-buttons-template,div:has(>#bm-input-file-template),#bm-output-status{margin-top:.5em}#bm-overlay button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-overlay button:hover,#bm-overlay button:focus-visible{background-color:#1061e5}#bm-overlay button:active,#bm-overlay button:disabled{background-color:#2e97ff}#bm-overlay button:disabled{text-decoration:line-through}

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-207-black?style=flat"></a>
+<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-211-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.55.7",
+  "version": "0.55.11",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "wplace-bluemarble",
-      "version": "0.55.7",
+      "version": "0.55.11",
       "devDependencies": {
         "esbuild": "^0.25.0",
         "terser": "^5.43.1"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.55.7",
+  "version": "0.55.11",
   "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.7
+// @version      0.55.11
 // @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/TemplateManager.js

@@ -0,0 +1,27 @@
+/** Manages the template system.
+ * @since 0.55.8
+ */
+export default class TemplateManager {
+
+  /** The constructor for the {@link TemplateManager} class.
+   * @since 0.55.8
+   */
+  constructor() {
+    this.template = null; // The template image.
+    this.state = ''; // The state of the template ('blob', 'proccessing', 'template', etc.)
+  }
+
+  /** Sets the template to the image passed in.
+   * @param {File} file - The file of the template image.
+   * @since 0.55.8
+   */
+  setTemplateImage(file) {
+
+    this.template = file;
+    this.state = 'file';
+
+    const url = URL.createObjectURL(file); // 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
+  }
+}

src/main.js

@@ -1,6 +1,7 @@
 import Overlay from './Overlay.js';
 import Observers from './Observers.js';
 import ApiManager from './ApiManager.js';
+import TemplateManager from './TemplateManager.js';
 
 const name = GM_info.script.name.toString();
 const version = GM_info.script.version.toString();
@@ -77,6 +78,7 @@ 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 templateManager = new TemplateManager(); // Constructs a new TemplateManager object
 const apiManager = new ApiManager(); // Constructs a new ApiManager object
 
 overlay.setApiManager(apiManager); // Sets the API manager
@@ -129,7 +131,7 @@ overlay.addDiv({'id': 'bm-overlay', 'style': 'top: 10px; right: 75px;'})
       .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', 'accept': 'image/png, image/jpeg, image/webp, image/bmp, image/gif'}).buildElement()
-    .addDiv({'id': 'bm-contain-buttons'})
+    .addDiv({'id': 'bm-contain-buttons-template'})
       .addButton({'id': 'bm-button-enable', 'textContent': 'Enable'}, (instance, button) => {
         button.onclick = () => {
           const input = document.querySelector('#bm-input-file-template');
@@ -137,14 +139,19 @@ overlay.addDiv({'id': 'bm-overlay', 'style': 'top: 10px; right: 75px;'})
           // 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
+          templateManager.setTemplateImage(input.files[0]);
         }
       }).buildElement()
       .addButton({'id': 'bm-button-disable', 'textContent': 'Disable'}).buildElement()
     .buildElement()
     .addTextarea({'id': overlay.outputStatusId, 'placeholder': `Status: Sleeping...\nVersion: ${version}`, 'readOnly': true}).buildElement()
+    .addDiv({'id': 'bm-contain-buttons-action'})
+      .addDiv()
+        .addButton({'id': 'bm-button-teleport', 'className': 'bm-help', 'textContent': '🕴'}).buildElement()
+        .addButton({'id': 'bm-button-favorite', 'className': 'bm-help', 'innerHTML': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="10,2 12,7.5 18,7.5 13.5,11.5 15.5,18 10,14 4.5,18 6.5,11.5 2,7.5 8,7.5" fill="gold" stroke="black" stroke-width="1.4"></polygon></svg>'}).buildElement()
+        .addButton({'id': 'bm-button-templates', 'className': 'bm-help', 'innerHTML': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect width="20" height="20" stroke-width="3" stroke="black" fill="none"></rect><circle cx="10" cy="8" r="4"></circle><circle cx="10" cy="18" r="7"></circle></svg>'}).buildElement()
+      .addSmall({'textContent': 'Made by SwingTheVine'}).buildElement()
+    .buildElement()
   .buildElement()
 .buildOverlay(document.body);
 

src/overlay.css

@@ -112,7 +112,7 @@ div#bm-overlay {
 }
 
 /* Automation button container */
-#bm-contain-buttons {
+#bm-contain-buttons-template {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -139,11 +139,23 @@ div:has(> #bm-input-file-template) > button {
   width: 100%;
 }
 
+/* The action buttons below the status textarea */
+#bm-contain-buttons-action {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* All small elements */
+#bm-overlay small {
+  font-size: x-small;
+  color: lightgray;
+}
+
 /* The elements that need spacing from each-other */
 #bm-contain-userinfo,
 #bm-contain-automation,
 #bm-contain-coords,
-#bm-contain-buttons,
+#bm-contain-buttons-template,
 div:has(> #bm-input-file-template),
 #bm-output-status {
   margin-top: 0.5em;

src/overlay.js

@@ -170,6 +170,31 @@ export default class Overlay {
     return this;
   }
 
+  /** Adds a `<small>` to the overlay.
+   * This `<small>` element will have properties shared between all `<small>` elements in the overlay.
+   * You can override the shared properties by using a callback.
+   * @param {Object.<string, any>} [additionalProperties={}] - The DOM properties of the `<small>` that are NOT shared between all overlay `<small>` elements. These should be camelCase.
+   * @param {function(Overlay, HTMLParagraphElement):void} [callback=()=>{}] - Additional JS modification to the `<small>`.
+   * @returns {Overlay} Overlay class instance (this)
+   * @since 0.55.8
+   * @example
+   * // Assume all <small> elements have a shared class (e.g. {'className': 'bar'})
+   * overlay.addSmall({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);
+   * // Output:
+   * // (Assume <body> already exists in the webpage)
+   * <body>
+   *   <small id="foo" class="bar">Foobar.</small>
+   * </body>
+   */
+  addSmall(additionalProperties = {}, callback = () => {}) {
+
+    const properties = {}; // Shared <small> DOM properties
+
+    const small = this.#createElement('small', properties, additionalProperties); // Creates the <small> element
+    callback(this, small); // Runs any script passed in through the callback
+    return this;
+  }
+
   /** Adds a `<img>` to the overlay.
    * This `<img>` element will have properties shared between all `<img>` elements in the overlay.
    * You can override the shared properties by using a callback.

src/utils.js

@@ -36,4 +36,15 @@ export default class Utils {
   static serverTPtoDisplayTP(tile, pixel) {
     return [((parseInt(tile[0]) % 4) * 1000) + parseInt(pixel[0]), ((parseInt(tile[1]) % 4) * 1000) + parseInt(pixel[1])];
   }
+
+  /** Negative-Safe Modulo. You can pass negative numbers into this.
+   * @param {number} a - The first number
+   * @param {number} b - The second number
+   * @returns {number} Result
+   * @author osuplace
+   * @since 0.55.8
+   */
+  static negativeSafeModulo(a, b) {
+    return (a % b + b) % b;
+}
 }