Added red box overlay

build/build.js

@@ -96,7 +96,7 @@ let importedMapCSS = {}; // The imported CSS map
 
 // Only import a CSS map if we are NOT in production (GitHub Workflow)
 // Theoretically, if the previous map is always imported, the names would not scramble. However, the names would never decrease in number...
-if (isGitHub) {
+if (!isGitHub) {
   try {
     importedMapCSS = JSON.parse(fs.readFileSync('dist/BlueMarble.user.css.map.json', 'utf8'));
   } catch {

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-260-black?style=flat"></a>
+<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-274-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-70.34%25-blue"></a>

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.60.0",
+  "version": "0.60.14",
   "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.60.0
+// @version      0.60.14
 // @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/main.js

@@ -26,7 +26,7 @@ function inject(callback) {
     script.remove();
 }
 
-/** What code to execute instantly in the client (webpage).
+/** What code to execute instantly in the client (webpage) to spy on fetch calls.
  * This code will execute outside of TamperMonkey's sandbox.
  * @since 0.11.15
  */
@@ -73,6 +73,24 @@ inject(() => {
   };
 });
 
+/** What code to execute instantly in the client (webpage) to spy on the canvas.
+ * This code will execute outside of TamperMonkey's sandbox.
+ * @since 0.60.14
+ */
+inject(() => {
+
+  const script = document.currentScript; // Gets the current script HTML Script Element
+  const name = script?.getAttribute('bm-name') || 'Blue Marble'; // Gets the name value that was passed in. Defaults to "Blue Marble" if nothing was found
+  const consoleStyle = script?.getAttribute('bm-cStyle') || ''; // Gets the console style value that was passed in. Defaults to no styling if nothing was found
+  
+  const originalMap = maplibregl.Map;
+  maplibregl.Map = function (...args) {
+    const instance = new originalMap(...args);
+    window.__bm_interceptedMap;
+    return instance;
+  }
+});
+
 // Imports the CSS file from dist folder on github
 const cssOverlay = GM_getResourceText("CSS-BM-File");
 GM_addStyle(cssOverlay);
@@ -166,6 +184,7 @@ function buildOverlayMain() {
             templateManager.setTemplateImage(input.files[0]);
 
             templateManager.tempDraw();
+            console.log(templateManager.canvasTemplate);
             instance.handleDisplayStatus(`Drew to canvas!`);
           }
         }).buildElement()

src/templateManager.js

@@ -7,8 +7,13 @@ export default class TemplateManager {
    * @since 0.55.8
    */
   constructor() {
-    this.canvas = null; // The canvas
-    this.canvasID = 'div#map canvas'; // The selector for the main canvas
+    this.canvasTemplate = null; // Our canvas
+    this.canvasTemplateID = 'bm-canvas'; // Our canvas ID
+    this.canvasMainID = 'div#map canvas.maplibregl-canvas'; // The selector for the main canvas
+    this.canvasMainMap = window.__bm_interceptedMap;
+    this.onMove = this.onMove.bind(this); // Binds the handler for `move` to this class instance's function
+    this.onResize = this.onResize.bind(this); // Binds the handler for `resize` to this class instance's function
+    this.onZoom = this.onZoom.bind(this); // Binds the handler for `zoom` to this class instance's function
     this.template = null; // The template image.
     this.state = ''; // The state of the template ('blob', 'proccessing', 'template', etc.)
   }
@@ -19,14 +24,35 @@ export default class TemplateManager {
    * @returns {HTMLCanvasElement|null} The canvas as an HTML Canvas Element, or null if the canvas does not exist
    * @since 0.58.3
    */
-  getCanvas(selector) {
+  getCanvas() {
 
-    // If the stored canvas is "fresh," return the stored canvas
-    if (document.body.contains(this.canvas)) {return this.canvas;}
-    // Else, the stored canvas is "stale," get the canvas again
+    // If the stored canvas is "fresh", return the stored canvas
+    if (document.body.contains(this.canvasTemplate)) {return this.canvasTemplate;}
+    // Else, the stored canvas is "stale", get the canvas again
 
-    this.canvas = document.querySelector(selector); // Get the new canvas
-    return this.canvas; // Return the new canvas or null
+    // Attempt to find and destroy the "stale" canvas
+    document.getElementById(this.canvasTemplateID)?.remove(); 
+
+    const canvasMain = document.querySelector(this.canvasMainID);
+
+    const canvasTemplateNew = document.createElement('canvas');
+    canvasTemplateNew.id = this.canvasTemplateID;
+    canvasTemplateNew.className = 'maplibregl-canvas';
+    canvasTemplateNew.style.position = 'absolute';
+    canvasTemplateNew.style.top = '0';
+    canvasTemplateNew.style.left = '0';
+    canvasTemplateNew.style.height = canvasMain?.style?.height;
+    canvasTemplateNew.style.width = canvasMain?.style?.width;
+    canvasTemplateNew.style.zIndex = '8999';
+    canvasTemplateNew.style.pointerEvents = 'none';
+    canvasMain?.parentElement?.appendChild(canvasTemplateNew); // Append the newCanvas as a child of the parent of the main canvas
+    this.canvasTemplate = canvasTemplateNew; // Store the new canvas
+
+    window.addEventListener('move', this.onMove);
+    window.addEventListener('zoom', this.onZoom);
+    window.addEventListener('resize', this.onResize);
+
+    return this.canvasTemplate; // Return the new canvas
   }
 
   /** Sets the template to the image passed in.
@@ -44,10 +70,44 @@ export default class TemplateManager {
   }
 
   tempDraw() {
-    const ctx = this.getCanvas(this.canvasID)?.getContext('2d');
+    const ctx = this.getCanvas(this.canvasTemplateID)?.getContext('2d');
     if (ctx) {
-      ctx.fillStyle = 'red';
-      ctx.fillRect(21511, 1305644, 500, 500);
+      function drawLoop() {
+        ctx.fillStyle = 'red';
+        ctx.fillRect(10, 10, 100, 100);
+        //ctx.setTransform(1, 0, 0, 1, -21511, -1305644);
+        //requestAnimationFrame(drawLoop);
+      }
+      drawLoop();
     }
   }
+
+  /** What to do to our canvas when the canvas is panned.
+   * @since 0.60.10
+   */
+  onMove() {
+    this.tempDraw();
+    console.log(this.canvasMainMap);
+  }
+
+  /** What to do to our canvas when the canvas is zoomes.
+   * @since 0.60.11
+   */
+  onZoom() {
+    this.tempDraw();
+  }
+
+  /** What to do to our canvas when the viewport is resized.
+   * @since 0.60.10
+   */
+  onResize() {
+    const canvasMain = document.querySelector(this.canvasMainID);
+    const canvasTemplate = this.getCanvas();
+    if (!canvasTemplate || !canvasMain) {return;}
+    canvasTemplate.style.height = canvasMain.style.height;
+    canvasTemplate.style.width = canvasMain.style.width;
+    canvasTemplate.height = canvasMain.height;
+    canvasTemplate.width = canvasMain.width;
+    this.tempDraw();
+  }
 }