mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-05-12 17:30:41 +00:00
Changed coord inject selection back to pixel span
This commit is contained in:
SwingTheVine
parent
bf553e8fc2
commit
0fcc04e439
10 changed files with 157 additions and 149 deletions
256
dist/BlueMarble-For-GreasyFork.user.css
vendored
256
dist/BlueMarble-For-GreasyFork.user.css
vendored
|
|
@ -1,131 +1,3 @@
|
|||
/* src/WindowFilter.css */
|
||||
#bm-window-filter p svg {
|
||||
display: inline;
|
||||
height: 1em;
|
||||
fill: white;
|
||||
}
|
||||
#bm-filter-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1em 3ch;
|
||||
}
|
||||
.bm-filter-color {
|
||||
width: fit-content;
|
||||
max-width: 35ch;
|
||||
background-color: rgba(21, 48, 99, 0.9);
|
||||
border-radius: 1em;
|
||||
padding: 0.5em;
|
||||
gap: 1ch;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.bm-filter-color:hover,
|
||||
.bm-filter-color:focus-within {
|
||||
background-color: rgba(17, 40, 85, 0.9);
|
||||
}
|
||||
.bm-filter-container-rgb {
|
||||
display: block;
|
||||
border: thick double darkslategray;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding: 1ch;
|
||||
}
|
||||
.bm-filter-color[data-id="-2"] .bm-filter-container-rgb {
|
||||
background:
|
||||
conic-gradient(
|
||||
#aa0000 0%,
|
||||
#aaaa00 16.6%,
|
||||
#00aa00 33.3%,
|
||||
#00aaaa 50%,
|
||||
#0000aa 66.6%,
|
||||
#aa00aa 83.3%,
|
||||
#aa0000 100%);
|
||||
}
|
||||
.bm-filter-color[data-id="-1"] .bm-filter-container-rgb {
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8" width="1em" height="1em"><path d="M0,0V8H16V16H8V0" fill="rgba(0,0,0,0.5)"/></svg>') repeat;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.bm-filter-color[data-id="-1"] .bm-filter-container-rgb svg {
|
||||
fill: white !important;
|
||||
}
|
||||
.bm-filter-color[data-id="0"] .bm-filter-container-rgb {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
#bm-window-filter .bm-filter-container-rgb button {
|
||||
padding: 0.75em 0.5ch;
|
||||
}
|
||||
.bm-filter-container-rgb svg {
|
||||
width: 4ch;
|
||||
}
|
||||
.bm-filter-color > .bm-flex-between {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
.bm-filter-color small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
#bm-window-filter .bm-filter-color.bm-color-hide {
|
||||
display: none;
|
||||
}
|
||||
.bm-windowed #bm-filter-flex {
|
||||
flex-direction: column;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.bm-windowed .bm-filter-color {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.bm-windowed .bm-filter-container-rgb {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 0.5ch;
|
||||
align-items: center;
|
||||
padding: 0.1em 0.5ch;
|
||||
border: none;
|
||||
border-radius: 1em;
|
||||
}
|
||||
#bm-window-filter.bm-windowed .bm-filter-container-rgb button {
|
||||
padding: 0.5em 0.25ch;
|
||||
}
|
||||
.bm-windowed .bm-filter-container-rgb svg {
|
||||
width: 3ch;
|
||||
}
|
||||
.bm-windowed .bm-filter-color h2 {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
/* src/WindowWizard.css */
|
||||
#bm-wizard-tlist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#bm-wizard-tlist > .bm-container {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
background-color: rgba(21, 48, 99, 0.9);
|
||||
border-radius: 1em;
|
||||
padding: 0.5em;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
#bm-wizard-tlist > .bm-container:hover,
|
||||
#bm-wizard-tlist > .bm-container:focus-within {
|
||||
background-color: rgba(17, 40, 85, 0.9);
|
||||
}
|
||||
#bm-wizard-tlist .bm-wizard-template-container-image {
|
||||
height: 100%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
#bm-wizard-tlist .bm-wizard-template-container-flavor {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* src/confettiManager.css */
|
||||
div:has(> confetti-piece) {
|
||||
position: absolute;
|
||||
|
|
@ -413,4 +285,132 @@ input[type=file] {
|
|||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* src/WindowFilter.css */
|
||||
#bm-window-filter p svg {
|
||||
display: inline;
|
||||
height: 1em;
|
||||
fill: white;
|
||||
}
|
||||
#bm-filter-flex {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 1em 3ch;
|
||||
}
|
||||
.bm-filter-color {
|
||||
width: fit-content;
|
||||
max-width: 35ch;
|
||||
background-color: rgba(21, 48, 99, 0.9);
|
||||
border-radius: 1em;
|
||||
padding: 0.5em;
|
||||
gap: 1ch;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
.bm-filter-color:hover,
|
||||
.bm-filter-color:focus-within {
|
||||
background-color: rgba(17, 40, 85, 0.9);
|
||||
}
|
||||
.bm-filter-container-rgb {
|
||||
display: block;
|
||||
border: thick double darkslategray;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding: 1ch;
|
||||
}
|
||||
.bm-filter-color[data-id="-2"] .bm-filter-container-rgb {
|
||||
background:
|
||||
conic-gradient(
|
||||
#aa0000 0%,
|
||||
#aaaa00 16.6%,
|
||||
#00aa00 33.3%,
|
||||
#00aaaa 50%,
|
||||
#0000aa 66.6%,
|
||||
#aa00aa 83.3%,
|
||||
#aa0000 100%);
|
||||
}
|
||||
.bm-filter-color[data-id="-1"] .bm-filter-container-rgb {
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 8 8" width="1em" height="1em"><path d="M0,0V8H16V16H8V0" fill="rgba(0,0,0,0.5)"/></svg>') repeat;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.bm-filter-color[data-id="-1"] .bm-filter-container-rgb svg {
|
||||
fill: white !important;
|
||||
}
|
||||
.bm-filter-color[data-id="0"] .bm-filter-container-rgb {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
#bm-window-filter .bm-filter-container-rgb button {
|
||||
padding: 0.75em 0.5ch;
|
||||
}
|
||||
.bm-filter-container-rgb svg {
|
||||
width: 4ch;
|
||||
}
|
||||
.bm-filter-color > .bm-flex-between {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
.bm-filter-color small {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
#bm-window-filter .bm-filter-color.bm-color-hide {
|
||||
display: none;
|
||||
}
|
||||
.bm-windowed #bm-filter-flex {
|
||||
flex-direction: column;
|
||||
gap: 0.25em;
|
||||
}
|
||||
.bm-windowed .bm-filter-color {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.bm-windowed .bm-filter-container-rgb {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 0.5ch;
|
||||
align-items: center;
|
||||
padding: 0.1em 0.5ch;
|
||||
border: none;
|
||||
border-radius: 1em;
|
||||
}
|
||||
#bm-window-filter.bm-windowed .bm-filter-container-rgb button {
|
||||
padding: 0.5em 0.25ch;
|
||||
}
|
||||
.bm-windowed .bm-filter-container-rgb svg {
|
||||
width: 3ch;
|
||||
}
|
||||
.bm-windowed .bm-filter-color h2 {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
/* src/WindowWizard.css */
|
||||
#bm-wizard-tlist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#bm-wizard-tlist > .bm-container {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
background-color: rgba(21, 48, 99, 0.9);
|
||||
border-radius: 1em;
|
||||
padding: 0.5em;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
#bm-wizard-tlist > .bm-container:hover,
|
||||
#bm-wizard-tlist > .bm-container:focus-within {
|
||||
background-color: rgba(17, 40, 85, 0.9);
|
||||
}
|
||||
#bm-wizard-tlist .bm-wizard-template-container-image {
|
||||
height: 100%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
#bm-wizard-tlist .bm-wizard-template-container-flavor {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
/* src/main.css */
|
||||
|
|
|
|||
11
dist/BlueMarble-For-GreasyFork.user.js
vendored
11
dist/BlueMarble-For-GreasyFork.user.js
vendored
|
|
@ -2,14 +2,14 @@
|
|||
// @name Blue Marble
|
||||
// @name:en Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.91.0
|
||||
// @version 0.91.4
|
||||
// @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
|
||||
// @license MPL-2.0
|
||||
// @supportURL https://discord.gg/tpeBPy46hf
|
||||
// @homepageURL https://bluemarble.lol/
|
||||
// @icon https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/ffa17bc9a7c2db10efc201437dbf1637e11a6f61/dist/assets/Favicon.png
|
||||
// @icon https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/78477321232b29c09e3794c360068d7d23a0172c/dist/assets/Favicon.png
|
||||
// @updateURL https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/BlueMarble-For-GreasyFork.user.js
|
||||
// @downloadURL https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/BlueMarble-For-GreasyFork.user.js
|
||||
// @match https://wplace.live/*
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
// @grant GM_xmlhttpRequest
|
||||
// @grant GM.download
|
||||
// @connect telemetry.thebluecorner.net
|
||||
// @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/ffa17bc9a7c2db10efc201437dbf1637e11a6f61/dist/BlueMarble-For-GreasyFork.user.css
|
||||
// @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/78477321232b29c09e3794c360068d7d23a0172c/dist/BlueMarble-For-GreasyFork.user.css
|
||||
// @antifeature tracking Anonymous opt-in telemetry data
|
||||
// @noframes
|
||||
// ==/UserScript==
|
||||
|
|
@ -2506,7 +2506,8 @@ 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]})`;
|
||||
if (!displayCoords) {
|
||||
|
|
@ -2514,7 +2515,7 @@ Did you try clicking the canvas first?`);
|
|||
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);
|
||||
element.parentNode.parentNode.parentNode.insertAdjacentElement("afterend", displayCoords);
|
||||
} else {
|
||||
displayCoords.textContent = text;
|
||||
}
|
||||
|
|
|
|||
4
dist/BlueMarble-Standalone.user.js
vendored
4
dist/BlueMarble-Standalone.user.js
vendored
File diff suppressed because one or more lines are too long
2
dist/BlueMarble.user.css
vendored
2
dist/BlueMarble.user.css
vendored
File diff suppressed because one or more lines are too long
4
dist/BlueMarble.user.js
vendored
4
dist/BlueMarble.user.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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-1115-black?style=flat"></a>
|
||||
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1119-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
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.90.76",
|
||||
"version": "0.91.4",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.90.76",
|
||||
"version": "0.91.4",
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"jsdoc": "^4.0.5",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.91.0",
|
||||
"version": "0.91.4",
|
||||
"type": "module",
|
||||
"homepage": "https://bluemarble.lol/",
|
||||
"repository": {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
// @name Blue Marble
|
||||
// @name:en Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.91.0
|
||||
// @version 0.91.4
|
||||
// @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
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
import TemplateManager from "./templateManager.js";
|
||||
import { consoleError, escapeHTML, localizeNumber, numberToEncoded } from "./utils.js";
|
||||
import { consoleError, escapeHTML, localizeNumber, numberToEncoded, serverTPtoDisplayTP } from "./utils.js";
|
||||
|
||||
export default class ApiManager {
|
||||
|
||||
|
|
@ -107,11 +107,18 @@ export default class ApiManager {
|
|||
|
||||
this.coordsTilePixel = [...coordsTile, ...coordsPixel]; // Combines the two arrays such that [x, y, x, y]
|
||||
|
||||
const buttonElements = document.querySelectorAll('button'); // Retrieves all button elements
|
||||
const displayTP = serverTPtoDisplayTP(coordsTile, coordsPixel); // Retrieves the coordinates that Wplace displays for this region
|
||||
|
||||
// For every button element, find the one we want (paint button)
|
||||
for (const element of buttonElements) {
|
||||
if (element.textContent.trim().includes('Paint')) {
|
||||
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) {
|
||||
// We use the pixel numbers to find this element because it is the only identifiable piece of information, assuming the website can load in non-Engligh languages.
|
||||
|
||||
const elementTextTrimmed = element.textContent.trim(); // Stores the text of the span element, without leading or trailing spaces
|
||||
|
||||
// If the text content of the element includes both coordinates seperatly (avoids failure when the comma seperator changes due to localization)
|
||||
if (elementTextTrimmed.includes(displayTP[0]) && elementTextTrimmed.includes(displayTP[1])) {
|
||||
|
||||
let displayCoords = document.querySelector('#bm-display-coords'); // Find the additional pixel coords span
|
||||
|
||||
|
|
@ -123,7 +130,7 @@ export default class ApiManager {
|
|||
displayCoords.id = 'bm-display-coords';
|
||||
displayCoords.textContent = text;
|
||||
displayCoords.style = 'margin-left: calc(var(--spacing)*3); font-size: small;';
|
||||
element.parentNode.insertAdjacentElement('beforebegin', displayCoords);
|
||||
element.parentNode.parentNode.parentNode.insertAdjacentElement('afterend', displayCoords);
|
||||
} else {
|
||||
displayCoords.textContent = text;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue