Added help button feature

This commit is contained in:
SwingTheVine 2025-07-24 17:49:33 -04:00
parent b7024badb6
commit 0e076eff7f
7 changed files with 52 additions and 7 deletions

View file

@ -1,7 +1,7 @@
// ==UserScript==
// @name Blue Marble
// @namespace https://github.com/SwingTheVine/
// @version 0.25.4
// @version 0.25.6
// @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
@ -20,4 +20,4 @@
// Wplace --> https://wplace.live
// License --> https://www.mozilla.org/en-US/MPL/2.0/
(()=>{var d=class{constructor(e,n){this.name=e,this.version=n}create(){let e=document.createElement("div");e.id="bm-overlay",e.style.top="10px",e.style.right="75px";let n=document.createElement("div");n.id="bm-contain-header";let t=document.createElement("div");t.id="bm-bar-drag",n.appendChild(t);let s=document.createElement("img");s.src="https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png",s.alt="Blue Marble Icon",n.appendChild(s);let a=document.createElement("h1");a.textContent=this.name,n.appendChild(a);let o=document.createElement("div");o.id="bm-contain-userinfo";let c=document.createElement("p");c.id="bm-user-name",c.textContent="Username:",o.appendChild(c);let u=document.createElement("p");u.id="bm-user-droplets",u.textContent="Droplets:",o.appendChild(u);let p=document.createElement("p");p.id="bm-user-nextlevel",p.textContent="Next level in...",o.appendChild(p);let m=document.createElement("div");m.id="bm-contain-automation";let h=document.createElement("label");h.textContent=" Stealth Mode";let f=document.createElement("input");f.type="checkbox",f.id="bm-input-stealth",h.prepend(f),m.appendChild(h),e.appendChild(n),e.appendChild(document.createElement("hr")),e.appendChild(o),e.appendChild(document.createElement("hr")),e.appendChild(m),document.body.appendChild(e),this.handleDrag(e,t)}updateInnerHTML(e,n,t=!1){let s=document.getElementById(e);s&&(t?s.textContent=n:s.innerHTML=n)}handleDrag(e,n){let t=!1,s,a=0;n.addEventListener("mousedown",function(o){t=!0,s=o.clientX-e.getBoundingClientRect().left,a=o.clientY-e.getBoundingClientRect().top,document.body.style.userSelect="none",n.classList.add("dragging")}),n.addEventListener("touchstart",function(o){t=!0;let c=o?.touches?.[0];c&&(s=c.clientX-e.getBoundingClientRect().left,a=c.clientY-e.getBoundingClientRect().top,document.body.style.userSelect="none",n.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(o){t&&(e.style.left=o.clientX-s+"px",e.style.top=o.clientY-a+"px",e.style.right="")}),document.addEventListener("touchmove",function(o){if(t){let c=o?.touches?.[0];if(!c)return;e.style.left=c.clientX-s+"px",e.style.top=c.clientY-a+"px",o.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){t=!1,document.body.style.userSelect="",n.classList.remove("dragging")}),document.addEventListener("touchend",function(){t=!1,document.body.style.userSelect="",n.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){t=!1,document.body.style.userSelect="",n.classList.remove("dragging")})}};var r=class{constructor(){this.disableAll=!1}spontaneousResponseListener(e){window.addEventListener("message",n=>{let t=n.data;if(t&&t.source==="blue-marble")switch(t.endpoint){case"me":let s=Math.ceil(Math.pow(Math.floor(t.jsonData?.level)*Math.pow(30,.65),1.5384615384615383)-t.jsonData?.pixelsPainted);e.updateInnerHTML("bm-user-name",`Username: <b>${t.jsonData?.name}</b>`),e.updateInnerHTML("bm-user-droplets",`Droplets: <b>${new Intl.NumberFormat().format(t.jsonData?.droplets)}</b>`),e.updateInnerHTML("bm-user-nextlevel",`Next level in <b>${new Intl.NumberFormat().format(s)}</b> pixel${s==1?"":"s"}`);break;case"robots":this.disableAll=t.jsonData?.userscript?.toString().toLowerCase()=="false"}})}};var g=GM_info.script.name.toString(),b=GM_info.script.version.toString();function v(i){let e=document.createElement("script");e.textContent=`(${i})();`,document.documentElement.appendChild(e),e.remove()}v(()=>{let i=window.fetch;window.fetch=async function(...e){let n=await i.apply(this,e),t=n.clone();if((t.headers.get("content-type")||"").includes("application/json")){let a=(e[0]instanceof Request?e[0]?.url:e[0])||"ignore";a=a.split("/").filter(Boolean).pop()||"ignore",console.log(`Sending JSON message about endpoint "${a}"`),t.json().then(o=>{window.postMessage({source:"blue-marble",endpoint:a,jsonData:o},"*")}).catch(o=>{console.error("BM - Failed to parse JSON:",o)})}return n}});var y=GM_getResourceText("CSS-Overlay");GM_addStyle(y);var l=document.createElement("link");l.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";l.rel="preload";l.as="style";l.onload="this.onload=null;this.rel='stylesheet'";document.head.appendChild(l);var C=new d(g,b);C.create();var x=new r;x.spontaneousResponseListener(C);console.log(`${g} (${b}) userscript has loaded!`);})();
(()=>{var u=class{constructor(t,e){this.name=t,this.version=e}create(){let t="bm-output-status",e=document.createElement("div");e.id="bm-overlay",e.style.top="10px",e.style.right="75px";let n=document.createElement("div");n.id="bm-contain-header";let o=document.createElement("div");o.id="bm-bar-drag",n.appendChild(o);let a=document.createElement("img");a.src="https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png",a.alt="Blue Marble Icon",n.appendChild(a);let s=document.createElement("h1");s.textContent=this.name,n.appendChild(s);let c=document.createElement("div");c.id="bm-contain-userinfo";let m=document.createElement("p");m.id="bm-user-name",m.textContent="Username:",c.appendChild(m);let h=document.createElement("p");h.id="bm-user-droplets",h.textContent="Droplets:",c.appendChild(h);let f=document.createElement("p");f.id="bm-user-nextlevel",f.textContent="Next level in...",c.appendChild(f);let d=document.createElement("div");d.id="bm-contain-automation";let g=document.createElement("label");g.textContent="Stealth Mode";let r=document.createElement("input");r.type="checkbox",r.id="bm-input-stealth",r.checked=!0,g.prepend(r),d.appendChild(g),d.appendChild(this.createQuestionBox("bm-help-stealth","Waits for the website to make the request, instead of sending a request.",t)),e.appendChild(n),e.appendChild(document.createElement("hr")),e.appendChild(c),e.appendChild(document.createElement("hr")),e.appendChild(d),document.body.appendChild(e),this.handleDrag(e,o)}updateInnerHTML(t,e,n=!1){let o=document.getElementById(t);o&&(n?o.textContent=e:o.innerHTML=e)}createQuestionBox(t,e,n){let o=document.createElement("button");return o.id=t,o.className="bm-help",o.textContent="?",o.title=e,o.onclick=()=>{this.updateInnerHTML(n,e)},o}handleDrag(t,e){let n=!1,o,a=0;e.addEventListener("mousedown",function(s){n=!0,o=s.clientX-t.getBoundingClientRect().left,a=s.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging")}),e.addEventListener("touchstart",function(s){n=!0;let c=s?.touches?.[0];c&&(o=c.clientX-t.getBoundingClientRect().left,a=c.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(s){n&&(t.style.left=s.clientX-o+"px",t.style.top=s.clientY-a+"px",t.style.right="")}),document.addEventListener("touchmove",function(s){if(n){let c=s?.touches?.[0];if(!c)return;t.style.left=c.clientX-o+"px",t.style.top=c.clientY-a+"px",s.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchend",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){n=!1,document.body.style.userSelect="",e.classList.remove("dragging")})}};var p=class{constructor(){this.disableAll=!1}spontaneousResponseListener(t){window.addEventListener("message",e=>{let n=e.data;if(n&&n.source==="blue-marble")switch(n.endpoint){case"me":let o=Math.ceil(Math.pow(Math.floor(n.jsonData?.level)*Math.pow(30,.65),1.5384615384615383)-n.jsonData?.pixelsPainted);t.updateInnerHTML("bm-user-name",`Username: <b>${n.jsonData?.name}</b>`),t.updateInnerHTML("bm-user-droplets",`Droplets: <b>${new Intl.NumberFormat().format(n.jsonData?.droplets)}</b>`),t.updateInnerHTML("bm-user-nextlevel",`Next level in <b>${new Intl.NumberFormat().format(o)}</b> pixel${o==1?"":"s"}`);break;case"robots":this.disableAll=n.jsonData?.userscript?.toString().toLowerCase()=="false"}})}};var b=GM_info.script.name.toString(),x=GM_info.script.version.toString();function v(i){let t=document.createElement("script");t.textContent=`(${i})();`,document.documentElement.appendChild(t),t.remove()}v(()=>{let i=window.fetch;window.fetch=async function(...t){let e=await i.apply(this,t),n=e.clone();if((n.headers.get("content-type")||"").includes("application/json")){let a=(t[0]instanceof Request?t[0]?.url:t[0])||"ignore";a=a.split("/").filter(Boolean).pop()||"ignore",console.log(`Sending JSON message about endpoint "${a}"`),n.json().then(s=>{window.postMessage({source:"blue-marble",endpoint:a,jsonData:s},"*")}).catch(s=>{console.error("BM - Failed to parse JSON:",s)})}return e}});var y=GM_getResourceText("CSS-Overlay");GM_addStyle(y);var l=document.createElement("link");l.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";l.rel="preload";l.as="style";l.onload="this.onload=null;this.rel='stylesheet'";document.head.appendChild(l);var C=new u(b,x);C.create();var E=new p;E.spontaneousResponseListener(C);console.log(`${b} (${x}) userscript has loaded!`);})();

View file

@ -23,7 +23,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-62-black?style=flat"></a>
<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-64-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.25.4"
"version": "0.25.6"
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.25.8",
@ -467,5 +467,5 @@
}
}
},
"version": "0.25.4"
"version": "0.25.6"
}

View file

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

View file

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

View file

@ -59,4 +59,18 @@ div#bm-overlay {
#bm-contain-automation input[type="checkbox"] {
vertical-align: middle;
margin-right: 0.5ch;
}
#bm-contain-automation label {
margin-right: 0.5ch;
}
.bm-help {
border: white 1px solid;
border-radius: 1em;
height: 1.25em;
width: 1.25em;
margin-top: 2px;
text-align: center;
line-height: 1.25em;
}

View file

@ -20,6 +20,8 @@ export class Overlay {
*/
create() {
const outputStatusId = 'bm-output-status'; // ID for status element
const overlay = document.createElement('div'); // Creates a new <div> element for the overlay
overlay.id = 'bm-overlay';
overlay.style.top = '10px'; // Position from top of viewport
@ -68,9 +70,17 @@ export class Overlay {
const inputStealthMode = document.createElement('input'); // Stealth Mode checkbox
inputStealthMode.type = 'checkbox';
inputStealthMode.id = 'bm-input-stealth';
inputStealthMode.checked = true; // Checkbox checked by default
labelStealthMode.prepend(inputStealthMode); // Adds the input to the label
containerAutomation.appendChild(labelStealthMode); // Adds the label & checkbox to the automation container
// Adds the help icon for stealth mode
containerAutomation.appendChild(this.createQuestionBox(
'bm-help-stealth',
'Waits for the website to make the request, instead of sending a request.',
outputStatusId
));
// Construction of the overlay element
overlay.appendChild(containerOverlayHeader); // Adds the overlay header container to the overlay
overlay.appendChild(document.createElement('hr')); // Adds a horizontal line to the overlay
@ -101,6 +111,27 @@ export class Overlay {
}
}
/** Creates a help icon.
* When clicked, it will populate the text content of the outputId element with the tooltip.
* On hover, it will generate a tooltip.
* @param {string} id - ID of the help icon
* @param {string} tooltip - Flavor message
* @param {string} outputId - ID of the element to populate the text content with
* @returns {HTMLButtonElement} HTML Button Element
* @since 0.25.5
*/
createQuestionBox(id, tooltip, outputId) {
const questionBox = document.createElement('button');
questionBox.id = id;
questionBox.className = 'bm-help';
questionBox.textContent = '?';
questionBox.title = tooltip; // Tooltip on hover
questionBox.onclick = () => {
this.updateInnerHTML(outputId, tooltip); // Update output element text with tooltip on click
}
return questionBox;
}
/** Handles dragging of the overlay.
* @param {HTMLElement} overlay - The overlay element to be moved.
* @param {HTMLElement} barDrag - The element that acts as the drag handle.