Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-05-06 19:59:40 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Template Objects work properly now

Browse source
This commit is contained in:
SwingTheVine 2025-08-01 09:25:27 -04:00
parent d1d6ebe7cc
commit f84fbea0ce
7 changed files with 128 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
dist/BlueMarble.user.js vendored
View file

File diff suppressed because one or more lines are too long

2
docs/README.md
View file

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

4
package-lock.json generated
View file

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

2
package.json
View file

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

2
src/BlueMarble.meta.js
View file

@ -1,7 +1,7 @@
// ==UserScript==
// @name Blue Marble
// @namespace https://github.com/SwingTheVine/
// @version 0.65.41
// @version 0.65.51
// @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

146
src/Template.js
View file

@ -5,81 +5,117 @@
export default class Template {
/** The constructor for the {@link Template} class.
* @param {Object} [params={}] - Object containing all optional params
* @param {string} [params.displayName='My template'] - The display name of the template
* @param {number} [params.sortID=0] - The sort number of the template
* @param {string} [params.authorID=''] - The user ID of the person who exported the template. This is to prevent sort ID collisions when importing
* @param {string} [params.url=''] - The URL to the image
* @param {File} [params.file=null] - The template file. This can be a pre-processed File, or a processed bitmap
* @param {[number, number, number, number]} [params.coords=null] - The coordinates of the top left corner as (x, y, x, y)
* @param {Object} [params.chunked=null] - The affected chunks of the template, and their template for each chunk
* @param {number} [params.tileSize=1000] - The size of a tile in pixels. Assumes the tile is a square
* @since 0.65.2
*/
constructor() {
this.templateName = ''; // The name of the template
this.templateFile = null; // The template file. This can be a pre-processed File, or a processed bitmap
this.templateState = ''; // The state of the template file. This is how you tell if it is a File, bitmap, or nothing
this.templateCoords = null; // The coordinates of the top left corner as (x, y, x, y)
this.templateChunked = null; // The affected chunks of the template, and their template for each chunk
constructor({
displayName = 'My template',
sortID = 0,
authorID = '',
url = '',
file = null,
coords = null,
chunked = null,
tileSize = 1000
} = {}) {
this.displayName = displayName;
this.sortID = sortID;
this.authorID = authorID;
this.url = url;
this.file = file;
this.coords = coords;
this.chunked = chunked;
this.tileSize = tileSize;
}
/** Sets the template to the image passed in.
* @param {File} file - The file of the template image.
* @since 0.65.2
/** Creates chunks of the template for each tile.
* @returns {Object} Collection of template bitmaps in a Object
* @since 0.65.4
*/
setTemplateImage(file) {
async createTemplateTiles() {
this.templateName = file.name.replace(/\.[^/.]+$/, ''); // "foo.bar.png" -> "foo.bar"
this.template = file; // Overrides The previous template image/bitmap with the new image
this.templateState = 'file'; // Indicates that the template is now an image (not a bitmap)
console.log(this.coords);
// 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
}
const shreadSize = 3; // Scale image factor. Must be odd
const bitmap = await createImageBitmap(this.file); // Creates a bitmap image from the uploaded file
const imageWidth = bitmap.width;
const imageHeight = bitmap.height;
/** Draws the template on the tile. Returns the tile plus the overlay.
* @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]) {
const templateTiles = {}; // Holds the template tiles
// Only continue if template state is NOT 'file' NOR 'template'
if (!((this.templateState == 'file') || (this.templateState == 'template'))) {return;}
const canvas = new OffscreenCanvas(this.tileSize, this.tileSize);
const context = canvas.getContext('2d', { willReadFrequently: true });
const tileSize = 1000; // Pixels in a tile
const drawMult = 3; // Multiplier of draw size
const drawSize = tileSize * drawMult; // Draw multiplier
// For every tile...
for (let pixelY = this.coords[3]; pixelY < (imageHeight + this.coords[3]);) {
coordsTilePixel = !!coordsTilePixel?.length ? coordsTilePixel : [0, 0, 0, 0]; // Set to default if [] passed in
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);
// Draws the partial tile first, if any
// This calculates the size based on which is smaller:
// A. The top left corner of the current tile to the bottom right corner of the current tile
// B. The top left corner of the current tile to the bottom right corner of the image
const drawSizeY = Math.min(this.tileSize - (pixelY % this.tileSize), imageHeight - ((pixelY - this.coords[3]) * (pixelY != this.coords[3])));
console.log(`Math.min(${this.tileSize} - (${pixelY} % ${this.tileSize}), ${imageHeight} - (${pixelY - this.coords[3]} * (${pixelY} != ${this.coords[3]})))`);
const canvas = new OffscreenCanvas(drawSize, drawSize);
const context = canvas.getContext('2d');
for (let pixelX = this.coords[2]; pixelX < (imageWidth + this.coords[2]);) {
console.log(`Pixel X: ${pixelX}\nPixel Y: ${pixelY}`);
context.imageSmoothingEnabled = false; // Nearest neighbor scaleing
// Draws the partial tile first, if any
// This calculates the size based on which is smaller:
// A. The top left corner of the current tile to the bottom right corner of the current tile
// B. The top left corner of the current tile to the bottom right corner of the image
const drawSizeX = Math.min(this.tileSize - (pixelX % this.tileSize), imageWidth - ((pixelX - this.coords[2]) * (pixelX != this.coords[2])));
console.log(`Math.min(${this.tileSize} - (${pixelX} % ${this.tileSize}), ${imageWidth} - (${pixelX} * (${pixelX} != ${this.coords[2]})))`);
// Tells the canvas to ignore anything outside of this area
context.beginPath();
context.rect(0, 0, drawSize, drawSize);
context.clip();
console.log(`Draw Size X: ${drawSizeX}\nDraw Size Y: ${drawSizeY}`);
context.clearRect(0, 0, drawSize, drawSize); // Draws transparent background
context.drawImage(tileBitmap, 0, 0, drawSize, drawSize); // Draws the tile
context.drawImage(templateBitmap, coordsTilePixel[2]*3, coordsTilePixel[3]*3); // Draws the template on top of the tile
console.log(`Draw X: ${drawSizeX}\nDraw Y: ${drawSizeY}\nCanvas Width: ${drawSizeX * shreadSize}\nCanvas Height: ${drawSizeY * shreadSize}`);
const final = await canvas.convertToBlob({ type: 'image/png' });
// Change the canvas size and wipe the canvas
canvas.width = drawSizeX * shreadSize;
canvas.height = drawSizeY * shreadSize;
// If the template is not drawn yet...
if (this.templateState != 'template') {
// (99% chance templateState is 'file')
console.log(`Getting X ${pixelX}-${pixelX + drawSizeX}\nGetting Y ${pixelY}-${pixelY + drawSizeY}`);
this.template = templateBitmap; // Store the drawn template
this.templateState = 'template'; // Indicate that the template has been drawn, and this.template now stores a bitmap
// Draws the template segment on this tile segment
context.clearRect(0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Clear any previous drawing (only runs when canvas size does not change)
context.drawImage(bitmap, pixelX, pixelY, drawSizeX, drawSizeY, 0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Coordinates and size of draw area of source image, then canvas
// const url = URL.createObjectURL(final); // 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
const imageData = context.getImageData(0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Data of the image on the canvas
for (let y = 0; y < drawSizeY * shreadSize; y++) {
for (let x = 0; x < drawSizeX * shreadSize; x++) {
// For every pixel...
// ... Make it transparent unless it is the "center"
if ((x % shreadSize !== 1) || (y % shreadSize !== 1)) {
const pixelIndex = (y * drawSizeX + x) * 4; // Find the pixel index in an array where every 4 indexes are 1 pixel
imageData.data[pixelIndex + 3] = 0; // Make the pixel transparent on the alpha channel
}
}
}
console.log(`Shreaded pixels for ${pixelX}, ${pixelY}`, imageData);
context.putImageData(imageData, 0, 0);
templateTiles[`${(this.coords[0] + Math.floor(pixelX / 1000)).toString().padStart(4, '0')},${(this.coords[1] + Math.floor(pixelY / 1000)).toString().padStart(4, '0')},${(pixelX % 1000).toString().padStart(3, '0')},${(pixelY % 1000).toString().padStart(3, '0')}`] = await canvas.convertToBlob({ type: 'image/png' });
console.log(templateTiles);
pixelX += drawSizeX;
}
pixelY += drawSizeY;
}
return final;
console.log('Template Tiles: ', templateTiles);
return templateTiles;
}
}

138
src/templateManager.js
View file

@ -1,3 +1,4 @@
import Template from "./Template";
import { numberToEncoded } from "./utils";
/** Manages the template system.
@ -20,6 +21,7 @@ import { numberToEncoded } from "./utils";
* },
* "1 $Z": {
* "name": "My Template",
* "URL": "https://github.com/SwingTheVine/Wplace-BlueMarble/blob/main/dist/assets/Favicon.png",
* "enabled": false,
* "tiles": {
* "375,1846,276,188": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA",
@ -50,7 +52,8 @@ export default class TemplateManager {
this.canvasMainID = 'div#map canvas.maplibregl-canvas'; // The selector for the main canvas
this.template = null; // The template image.
this.templateState = ''; // The state of the template ('blob', 'proccessing', 'template', etc.)
this.templates = null; // All templates currently loaded (JSON)
this.templatesArray = []; // All Template instnaces currently loaded (Template)
this.templatesJSON = null; // All templates currently loaded (JSON)
}
/** Retrieves the pixel art canvas.
@ -114,124 +117,37 @@ export default class TemplateManager {
async createTemplate(blob, name, coords) {
// Creates the JSON object if it does not already exist
if (!this.templates) {this.templates = await this.createJSON();}
if (!this.templatesJSON) {this.templatesJSON = await this.createJSON(); console.log(`Creating JSON...`);}
const tileSize = 1000; // The size of a tile in pixels
console.log(`Awaiting creation...`);
// Creates a new template instance
const template = new Template({
displayName: name,
sortID: Object.keys(this.templatesJSON.templates).length || 0,
authorID: numberToEncoded(this.userID || 0, this.encodingBase),
file: blob,
coords: coords
});
template.chunked = await template.createTemplateTiles(tileSize); // Chunks the tiles
// Appends a child into the templates object
// The child's name is the number of templates already in the list (sort order) plus the encoded player ID
this.templates.templates[`${this.templates.templates.length || 0} ${numberToEncoded(this.userID || 0, this.encodingBase)}`] = {
"name": name, // Display name of template
"tiles": await this.#createTemplateTiles(blob, coords, tileSize)
this.templatesJSON.templates[`${template.sortID} ${template.authorID}`] = {
"name": template.displayName, // Display name of template
"tiles": template.chunked
};
console.log(this.templates);
}
this.templatesArray.push(template); // Pushes the Template object instance to the Template Array
/** Creates chunks of the template for each tile.
* @param {File} blob - The File blob to process
* @param {Array<number, number, number, number>} coords - The coordinates of the top left corner of the template
* @param {number} tileSize - The size of a tile (assumes tiles are square)
* @returns {Object} Collection of template bitmaps in a Object
* @since 0.65.4
*/
async #createTemplateTiles(blob, coords, tileSize) {
console.log(coords);
const shreadSize = 3; // Scale image factor. Must be odd
const bitmap = await createImageBitmap(blob); // Creates a bitmap image
const imageWidth = bitmap.width;
const imageHeight = bitmap.height;
const templateTiles = {}; // Holds the template tiles
const canvas = new OffscreenCanvas(tileSize, tileSize);
const context = canvas.getContext('2d', { willReadFrequently: true });
// For every tile...
for (let pixelY = coords[3]; pixelY < (imageHeight + coords[3]);) {
// Draws the partial tile first, if any
// This calculates the size based on which is smaller:
// A. The top left corner of the current tile to the bottom right corner of the current tile
// B. The top left corner of the current tile to the bottom right corner of the image
const drawSizeY = Math.min(tileSize - (pixelY % tileSize), imageHeight - ((pixelY - coords[3]) * (pixelY != coords[3])));
console.log(`Math.min(${tileSize} - (${pixelY} % ${tileSize}), ${imageHeight} - (${pixelY - coords[3]} * (${pixelY} != ${coords[3]})))`);
for (let pixelX = coords[2]; pixelX < (imageWidth + coords[2]);) {
console.log(`Pixel X: ${pixelX}\nPixel Y: ${pixelY}`);
// Draws the partial tile first, if any
// This calculates the size based on which is smaller:
// A. The top left corner of the current tile to the bottom right corner of the current tile
// B. The top left corner of the current tile to the bottom right corner of the image
const drawSizeX = Math.min(tileSize - (pixelX % tileSize), imageWidth - ((pixelX - coords[2]) * (pixelX != coords[2])));
console.log(`Math.min(${tileSize} - (${pixelX} % ${tileSize}), ${imageWidth} - (${pixelX} * (${pixelX} != ${coords[2]})))`);
console.log(`Draw Size X: ${drawSizeX}\nDraw Size Y: ${drawSizeY}`);
console.log(`Draw X: ${drawSizeX}\nDraw Y: ${drawSizeY}\nCanvas Width: ${drawSizeX * shreadSize}\nCanvas Height: ${drawSizeY * shreadSize}`);
// Change the canvas size and wipe the canvas
canvas.width = drawSizeX * shreadSize;
canvas.height = drawSizeY * shreadSize;
console.log(`Getting X ${pixelX}-${pixelX + drawSizeX}\nGetting Y ${pixelY}-${pixelY + drawSizeY}`);
// Draws the template segment on this tile segment
context.clearRect(0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Clear any previous drawing (only runs when canvas size does not change)
context.drawImage(bitmap, pixelX, pixelY, drawSizeX, drawSizeY, 0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Coordinates and size of draw area of source image, then canvas
const imageData = context.getImageData(0, 0, drawSizeX * shreadSize, drawSizeY * shreadSize); // Data of the image on the canvas
for (let y = 0; y < drawSizeY * shreadSize; y++) {
for (let x = 0; x < drawSizeX * shreadSize; x++) {
// For every pixel...
// ... Make it transparent unless it is the "center"
if ((x % shreadSize !== 1) || (y % shreadSize !== 1)) {
const pixelIndex = (y * drawSizeX + x) * 4; // Find the pixel index in an array where every 4 indexes are 1 pixel
imageData.data[pixelIndex + 3] = 0; // Make the pixel transparent on the alpha channel
}
}
}
console.log(`Shreaded pixels for ${pixelX}, ${pixelY}`, imageData);
context.putImageData(imageData, 0, 0);
templateTiles[`${(coords[0] + Math.floor(pixelX / 1000)).toString().padStart(4, '0')},${(coords[1] + Math.floor(pixelY / 1000)).toString().padStart(4, '0')},${(pixelX % 1000).toString().padStart(3, '0')},${(pixelY % 1000).toString().padStart(3, '0')}`] = await canvas.convertToBlob({ type: 'image/png' });
console.log(templateTiles);
pixelX += drawSizeX;
}
pixelY += drawSizeY;
}
console.log('Template Tiles: ', templateTiles);
return templateTiles;
}
/** Creates an image from a blob File
* @param {File} blob - The blob to convert to an Image
* @returns {Image} The image of the blob as an Image
* @since 0.65.4
*/
#loadImageFromBlob(blob) {
return new Promise((resolve, reject) => {
const image = new Image(); // Create a blank image
image.onload = () => resolve(image); // When the blank image loads, populate it with the blob
image.onerror = reject; // Return the error, if any
image.src = URL.createObjectURL(blob);
});
console.log(Object.keys(this.templatesJSON.templates).length);
console.log(this.templatesJSON);
console.log(this.templatesArray);
}
/** Generates a {@link Template} class instance from the JSON object template
*
*/
#loadTemplate() {
@ -239,27 +155,31 @@ export default class TemplateManager {
/** Deletes a template from the JSON object.
* Also delete's the corrosponding {@link Template} class instance
*
*/
deleteTemplate() {
}
/** Draws all templates on that tile
*
*/
drawTemplateOnTile() {
}
/** Imports the JSON object, and appends it to any JSON object already loaded
*/
importJSON() {
}
/** Parses the Blue Marble JSON object
*/
#parseBlueMarble() {
}
/** Parses the OSU! Place JSON object
*/
#parseOSU() {
}
@ -267,6 +187,7 @@ export default class TemplateManager {
/** Sets the template to the image passed in.
* @param {File} file - The file of the template image.
* @since 0.55.8
* @deprecated Since 0.65.43
*/
setTemplateImage(file) {
@ -283,6 +204,7 @@ export default class TemplateManager {
* @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
* @deprecated Since 0.65.43
*/
async drawTemplate(tileBlob, coordsTilePixel=[0, 0, 0, 0]) {