Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-03-11 17:15:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Completed Pin Icon functionality

Browse source
This commit is contained in:
SwingTheVine 2025-07-26 01:55:47 -04:00
parent aae685ee2c
commit 73217b9c97
11 changed files with 65 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/BlueMarble.user.css vendored
View file

@ -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.25em;width:1.25em;margin-top:2px;text-align:center;line-height:1.25em;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]{-moz-appearance:textfield;width:4.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)>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),#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{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.25em;width:1.25em;margin-top:2px;text-align:center;line-height:1.25em;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)>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),#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}

6
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-10hrs_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-92-black?style=flat"></a>
<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-108-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="Build" src="https://github.com/SwingTheVine/Wplace-BlueMarble/actions/workflows/build.yml/badge.svg"></a>

4
package-lock.json generated
View file

@ -7,7 +7,7 @@
"devDependencies": {
"esbuild": "^0.25.0"
},
"version": "0.41.11"
"version": "0.42.16"
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.25.8",
@ -467,5 +467,5 @@
}
}
},
"version": "0.41.11"
"version": "0.42.16"
}

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "wplace-bluemarble",
"version": "0.42.0",
"version": "0.42.16",
"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.42.0
// @version 0.42.16
// @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

28
src/apiHandler.js
View file

@ -5,9 +5,11 @@
export class ApiHandler {
/** Constructor for ApiHandler class
* @param {CoordsHandler} coordsHandler - The CoordsHandler instance
* @since 0.11.34
*/
constructor() {
constructor(coordsHandler) {
this.coordsHandler = coordsHandler;
this.disableAll = false; // Should the entire userscript be disabled?
this.coordsTilePixel = []; // Contains the last detected tile/pixel coordinate pair requested
}
@ -50,6 +52,30 @@ export class ApiHandler {
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
this.coordsTilePixel = [...coordsTile, ...coordsPixel]; // Combines the two arrays such that [x, y, x, y]
const displayTP = this.coordsHandler.serverTPtoDisplayTP(coordsTile, coordsPixel);
const spanElements = document.querySelectorAll('span'); // Retrieves all span elements
// For every span element, find the one we want (pixel numbers when canvas clicked)
for (const element of spanElements) {
if (element.textContent.trim().includes(`${displayTP[0]}, ${displayTP[1]}`)) {
let displayCoords = document.querySelector('#bm-display-coords'); // Find the additional pixel coords span
const text = `(Tl X: ${coordsTile[0]}, Tl Y: ${coordsTile[1]}, Px X: ${coordsPixel[0]}, Px Y: ${coordsPixel[1]})`;
// If we could not find the addition coord span, we make it then update the textContent with the new coords
if (!displayCoords) {
displayCoords = document.createElement('span');
displayCoords.id = 'bm-display-coords';
displayCoords.textContent = text;
displayCoords.style = 'margin-left: calc(var(--spacing)*3);';
element.parentNode.parentNode.parentNode.insertAdjacentElement('afterend', displayCoords);
} else {
displayCoords.textContent = text;
}
}
}
break;
case 'robots': // Request to retrieve what script types are allowed

17
src/coordsHandler.js Normal file
View file

@ -0,0 +1,17 @@
/** Handles translation of coordinate systems.
* @since 0.42.4
*/
export 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])];
}
}

4
src/main.js
View file

@ -1,4 +1,5 @@
import { Overlay } from './overlay.js';
import { CoordsHandler } from './coordsHandler.js';
import { ApiHandler } from './apiHandler.js';
const name = GM_info.script.name.toString();
@ -72,7 +73,8 @@ stylesheetLink.onload = "this.onload=null;this.rel='stylesheet'";
document.head.appendChild(stylesheetLink);
const overlay = new Overlay(name, version); // Constructs a new Overlay object
const apiHandler = new ApiHandler(); // Constructs a new ApiHandler object
const coordsHandler = new CoordsHandler(); // Constructs a new CoordsHandler object
const apiHandler = new ApiHandler(coordsHandler); // Constructs a new ApiHandler object
overlay.setApiHandler(apiHandler); // Sets the API handler

5
src/overlay.css
View file

@ -95,8 +95,9 @@ div#bm-overlay {
/* Tile (x, y) & Pixel (x, y) input fields */
#bm-contain-coords input[type="number"] {
appearance: auto;
-moz-appearance: textfield;
width: 4.5ch;
width: 5.5ch;
margin-left: 1ch;
background-color: rgba(0, 0, 0, 0.2);
padding: 0 0.5ch;
@ -156,7 +157,7 @@ div:has(> #bm-input-file),
}
/* All overlay buttons when hovered/focused */
#bm-overlay button:hover, #bm-overlay button:focus {
#bm-overlay button:hover, #bm-overlay button:focus-visible {
background-color: #1061e5;
}

13
src/overlay.js
View file

@ -116,16 +116,16 @@ export class Overlay {
this.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?');
return;
}
this.updateInnerHTML('bm-input-tx', coords?.[0] || '000');
this.updateInnerHTML('bm-input-ty', coords?.[1] || '000');
this.updateInnerHTML('bm-input-tx', coords?.[0] || '0000');
this.updateInnerHTML('bm-input-ty', coords?.[1] || '0000');
this.updateInnerHTML('bm-input-px', coords?.[2] || '000');
this.updateInnerHTML('bm-input-py', coords?.[3] || '000');
}
containerAutomationCoords.appendChild(buttonCoords); // Adds the coordinate button to the automation container
// Tile (x,y) and Pixel (x,y) input fields
containerAutomationCoords.appendChild(this.createInputNumber('bm-input-tx', 'Tl X', '', '3', '0', '999', '1'));
containerAutomationCoords.appendChild(this.createInputNumber('bm-input-ty', 'Tl Y', '', '3', '0', '999', '1'));
containerAutomationCoords.appendChild(this.createInputNumber('bm-input-tx', 'Tl X', '', '4', '0', '2047', '1'));
containerAutomationCoords.appendChild(this.createInputNumber('bm-input-ty', 'Tl Y', '', '4', '0', '2047', '1'));
containerAutomationCoords.appendChild(this.createInputNumber('bm-input-px', 'Px X', '', '3', '0', '999', '1'));
containerAutomationCoords.appendChild(this.createInputNumber('bm-input-py', 'Px Y', '', '3', '0', '999', '1'));
@ -243,7 +243,6 @@ export class Overlay {
* @param {string} inputId - The ID for the number input
* @param {string} [placeholder] - (Optional) The placeholder text of the input
* @param {string} [text] - (Optional) The text content of the input
* @param {string} [maxLength] - (Optional) The maximum character amount of the input
* @param {string} [numMin] - (Optional) The minimum possible number the user can input
* @param {string} [numMax] - (Optional) The maximum possible number the user can input
* @param {string} [numStep] - (Optional) The increment that numbers are considered valid inputs. E.g. a step of "1" will only allow integers
@ -251,8 +250,8 @@ export class Overlay {
* @returns {HTMLInputElement} HTML Input Element
* @since 0.41.9
*/
createInputNumber(inputId, placeholder='', text='', maxLength='', numMin='', numMax='', numStep='', isReadOnly=false) {
const input = this.createInputText(inputId, placeholder, text, maxLength, isReadOnly); // A shortcut :P
createInputNumber(inputId, placeholder='', text='', numMin='', numMax='', numStep='', isReadOnly=false) {
const input = this.createInputText(inputId, placeholder, text, '', isReadOnly); // A shortcut :P
input.type = 'number';
input.min = numMin;
input.max = numMax;