Fixed some template bugs

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

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.63.58",
+  "version": "0.63.68",
   "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.63.58
+// @version      0.63.68
 // @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

@@ -107,25 +107,20 @@ export default class ApiManager {
         
         case 'tiles':
 
+          // Runs only if the tile has the a template
+          let tileCoordsTile = data['endpoint'].split('/');
+          tileCoordsTile = [parseInt(tileCoordsTile[tileCoordsTile.length - 2]), parseInt(tileCoordsTile[tileCoordsTile.length - 1].replace('.png', ''))];
+          
           const blobUUID = data['blobID'];
           const blobData = data['blobData'];
+          let templateBlob = blobData; // By default, apply no template
 
-          // let templateBlob = blobData; // By default, apply no template
+          if ((tileCoordsTile[0] == this.coordsTilePixel[0]) && (tileCoordsTile[1] == this.coordsTilePixel[1])) {
+
+            console.log(`templateState: ${this.templateManager.templateState || null}`);
+            templateBlob = !!this.templateManager.templateState ? await this.templateManager.drawTemplate(blobData, this.coordsTilePixel) : blobData;
+          }
 
-          console.log(`templateState: ${this.templateManager.templateState || null}`);
-          let templateBlob = !!this.templateManager.templateState ? await this.templateManager.drawTemplate(blobData) : blobData;
-          // Only apply the template if a template is loaded
-          // Otherwise, draw the template so the next attempted load will not need a re-draw
-          // switch (this.templateManager.templateState) {
-          //   case 'file': // Draw the template
-          //     console.log(`Attempting to draw template...`);
-          //     templateBlob = await this.templateManager.drawTemplate(blobData);
-          //     break;
-          //   case 'template': // The template is already processed, pass it in
-          //     templateBlob = this.templateManager.template;
-          //     break;
-          // }
-          
           window.postMessage({
             source: 'blue-marble',
             blobID: blobUUID,
@@ -137,7 +132,6 @@ export default class ApiManager {
         case 'robots': // Request to retrieve what script types are allowed
           this.disableAll = dataJSON['userscript']?.toString().toLowerCase() == 'false'; // Disables Blue Marble if site owner wants userscripts disabled
           break;
-
       }
     });
   }

src/templateManager.js

@@ -69,7 +69,13 @@ export default class TemplateManager {
     // setTimeout(() => URL.revokeObjectURL(url), 10000); // Destroys the blob 10 seconds later
   }
 
-  async drawTemplate(tileBlob) {
+  /** Draws the template on the tile.
+   * @param {File|Blob} tileBlob - The blob of the tile
+   * @param {Array<number, number, number, number>} [coordsTilePixel=[0,0,0,0]] - A number array of the four coordinates
+   * @returns {File|Blob} A image/png blob file
+   * @since 0.63.59
+   */
+  async drawTemplate(tileBlob, coordsTilePixel=[0, 0, 0, 0]) {
 
     // Only continue if template state is NOT 'file' NOR 'template'
     if (!((this.templateState == 'file') || (this.templateState == 'template'))) {return;}
@@ -78,13 +84,10 @@ export default class TemplateManager {
     const drawMult = 3; // Multiplier of draw size
     const drawSize = tileSize * drawMult; // Draw multiplier
 
-    // const [templateBitmap, tileBitmap] = await Promise.all([
+    coordsTilePixel = !!coordsTilePixel?.length ? coordsTilePixel : [0, 0, 0, 0]; // Set to default if [] passed in
-    //   createImageBitmap(await this.shrinkPixelsInPlace(this.template)),
-    //   createImageBitmap(tileBlob)
-    // ]);
     
-    // If the template has already been drawn, don't draw it again
     console.log(this.template);
+    // If the template has already been drawn, don't draw it again
     const templateBitmap = this.templateState == 'template' ? this.template : await createImageBitmap(await this.shreadBlob(this.template));
     const tileBitmap = await createImageBitmap(tileBlob);
 
@@ -93,8 +96,13 @@ export default class TemplateManager {
 
     context.imageSmoothingEnabled = false; // Nearest neighbor
 
+    // Tells the canvas to ignore anything outside of this area
+    context.beginPath();
+    context.rect(0, 0, drawSize, drawSize);
+    context.clip();
+
     context.clearRect(0, 0, drawSize, drawSize); // Draws transparent background
-    context.drawImage(templateBitmap, 0, 0); // TODO: Change X Y here
+    context.drawImage(templateBitmap, coordsTilePixel[2]*3, coordsTilePixel[3]*3);
     context.drawImage(tileBitmap, 0, 0, drawSize, drawSize);
 
     const final = await canvas.convertToBlob({ type: 'image/png' });
@@ -105,9 +113,9 @@ export default class TemplateManager {
       this.template = templateBitmap; // Store the drawn template
       this.templateState = 'template'; // Indicate that the template has been drawn
 
-      const url = URL.createObjectURL(final); // Creates a blob URL
+      // const url = URL.createObjectURL(final); // Creates a blob URL
-      window.open(url, '_blank'); // Opens a new tab with blob
+      // window.open(url, '_blank'); // Opens a new tab with blob
-      setTimeout(() => URL.revokeObjectURL(url), 10000); // Destroys the blob 10 seconds later
+      // setTimeout(() => URL.revokeObjectURL(url), 10000); // Destroys the blob 10 seconds later
     }
 
     return final;