Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-04-20 18:32:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed pixel info coord injection to flexbox

Browse source
This commit is contained in:
SwingTheVine 2026-03-16 21:06:33 -04:00
parent f607dea9e3
commit 882c6221e7
8 changed files with 59 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
dist/BlueMarble-For-GreasyFork.user.js vendored
View file

@ -2,7 +2,7 @@
// @name Blue Marble
// @name:en Blue Marble
// @namespace https://github.com/SwingTheVine/
// @version 0.91.106
// @version 0.91.115
// @description A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features.
// @description:en A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features.
// @author SwingTheVine
@ -3659,17 +3659,29 @@ Did you try clicking the canvas first?`);
const displayTP = serverTPtoDisplayTP(coordsTile, coordsPixel);
const spanElements = document.querySelectorAll("span");
for (const element of spanElements) {
if (element.textContent.trim().includes(`${displayTP[0]}, ${displayTP[1]}`)) {
const elementTextTrimmed = element.textContent.trim();
if (elementTextTrimmed.includes(displayTP[0]) && elementTextTrimmed.includes(displayTP[1])) {
let displayCoords = document.querySelector("#bm-display-coords");
const text = `(Tl X: ${coordsTile[0]}, Tl Y: ${coordsTile[1]}, Px X: ${coordsPixel[0]}, Px Y: ${coordsPixel[1]})`;
const coordsLabel = ["Tl X:", "Tl Y:", "Px X:", "Px Y:"];
const coordsID = ["bm-tile-x", "bm-tile-y", "bm-pixel-x", "bm-pixel-y"];
const coordsCombined = [...coordsTile, ...coordsPixel];
if (!displayCoords) {
displayCoords = document.createElement("span");
displayCoords.id = "bm-display-coords";
displayCoords.textContent = text;
displayCoords.style = "margin-left: calc(var(--spacing)*3); font-size: small;";
element.parentNode.parentNode.insertAdjacentElement("afterend", displayCoords);
displayCoords.style = "display: flex; flex-wrap: wrap; gap: 0 1ch; font-size: small;";
for (const [coordIndex, coordValue] of coordsCombined.entries()) {
const coordElement = document.createElement("span");
coordElement.id = coordsID[coordsCombined.indexOf(coordValue) ?? ""];
coordElement.textContent = `${coordsLabel[coordIndex] ?? "??:"} ${coordValue}`;
displayCoords.appendChild(coordElement);
}
element.parentNode.parentNode.parentNode.insertAdjacentElement("afterend", displayCoords);
} else {
displayCoords.textContent = text;
for (const [coordIndex, coordID] of coordsID.entries()) {
const coordElement = document.getElementById(coordID);
coordElement.textContent = `${coordsLabel[coordIndex] ?? "??:"} ${coordsCombined[coordIndex]}`;
}
}
}
}

4
dist/BlueMarble-Standalone.user.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -51,7 +51,7 @@
<a href="https://discord.gg/tpeBPy46hf" target="_blank" rel="noopener noreferrer"><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="https://bluemarble.lol/" target="_blank" rel="noopener noreferrer"><img alt="Blue Marble Website" src="https://img.shields.io/badge/Blue_Marble_Website-crqch-blue?style=flat&logo=globe&logoColor=white"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-212hrs_17mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1221-black?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1230-black?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Lines of Code" src="https://img.shields.io/badge/Lines_Of_Code-6620-blue?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Comments" src="https://img.shields.io/badge/Lines_Of_Comments-5414-blue?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Compression" src="https://img.shields.io/badge/Compression-71.85%25-blue"></a>

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "wplace-bluemarble",
"version": "0.91.106",
"version": "0.91.115",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "wplace-bluemarble",
"version": "0.91.106",
"version": "0.91.115",
"devDependencies": {
"esbuild": "^0.25.0",
"jsdoc": "^4.0.5",

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "wplace-bluemarble",
"version": "0.91.106",
"version": "0.91.115",
"type": "module",
"homepage": "https://bluemarble.lol/",
"repository": {

2
src/BlueMarble.meta.js
View file

@ -2,7 +2,7 @@
// @name Blue Marble
// @name:en Blue Marble
// @namespace https://github.com/SwingTheVine/
// @version 0.91.106
// @version 0.91.115
// @description A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features.
// @description:en A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features.
// @author SwingTheVine

35
src/apiManager.js
View file

@ -124,15 +124,44 @@ export default class ApiManager {
const text = `(Tl X: ${coordsTile[0]}, Tl Y: ${coordsTile[1]}, Px X: ${coordsPixel[0]}, Px Y: ${coordsPixel[1]})`;
// All 4 coordinate labels, IDs, and values
const coordsLabel = ['Tl X:', 'Tl Y:', 'Px X:', 'Px Y:'];
const coordsID = ['bm-tile-x', 'bm-tile-y', 'bm-pixel-x', 'bm-pixel-y'];
const coordsCombined = [...coordsTile, ...coordsPixel];
// 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); font-size: small;';
displayCoords.style = 'display: flex; flex-wrap: wrap; gap: 0 1ch; font-size: small;';
// For each of the 4 coordinates...
for (const [coordIndex, coordValue] of coordsCombined.entries()) {
const coordElement = document.createElement('span'); // Creates a `<span>` element
coordElement.id = coordsID[coordsCombined.indexOf(coordValue) ?? '']; // Applys the ID to the coord element
// Outputs something like "Tl X: 483"
coordElement.textContent = `${coordsLabel[coordIndex] ?? '??:'} ${coordValue}`;
// Or if the amount of labels is less than the provided values, it outputs something like "??: 483" instead of failing
displayCoords.appendChild(coordElement); // Adds the span coordinate as a child for the flexbox container
}
// Adds the display coordinate flexbox container to the pixel info menu
element.parentNode.parentNode.parentNode.insertAdjacentElement('afterend', displayCoords);
} else {
displayCoords.textContent = text;
// For each of the 4 coordinates...
for (const [coordIndex, coordID] of coordsID.entries()) {
const coordElement = document.getElementById(coordID); // Obtains the coordinate element
// Outputs something like "Tl X: 483"
coordElement.textContent = `${coordsLabel[coordIndex] ?? '??:'} ${coordsCombined[coordIndex]}`;
// Or if the amount of labels is less than the provided values, it outputs something like "??: 483" instead of failing
}
}
}
}