Fixed bug with drag bar circles and drag teleporting

This commit is contained in:
SwingTheVine 2025-07-24 15:05:24 -04:00
parent 58f2395a9a
commit ed4ef7ba92
7 changed files with 15 additions and 15 deletions

View file

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

View file

@ -20,10 +20,10 @@
<h1>Blue Marble</h1>
<a href="" target="_blank"><img alt="Latest Version" src="https://img.shields.io/badge/Latest_Version-0.24.0-lightblue?style=flat"></a>
<a href="https://github.com/SwingTheVine/Wplace-BlueMarble/releases" target="_blank"><img alt="Latest Release" src="https://img.shields.io/github/v/release/SwingTheVine/Wplace-BlueMarble?sort=date&style=flat&label=Latest%20Release&color=blue"></a>
<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-GPL--3.0-brightgreen?style=flat"></a>
<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-56-black?style=flat"></a>
<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-57-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.23.14"
"version": "0.24.1"
},
"node_modules/@esbuild/aix-ppc64": {
"version": "0.25.8",
@ -467,5 +467,5 @@
}
}
},
"version": "0.23.14"
"version": "0.24.1"
}

View file

@ -1,6 +1,6 @@
{
"name": "wplace-bluemarble",
"version": "0.24.0",
"version": "0.24.1",
"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.24.0
// @version 0.24.1
// @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

@ -23,7 +23,8 @@ div#bm-overlay {
#bm-bar-drag {
margin-bottom: 0.5em;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="5" cy="5" r="2" fill="CornflowerBlue" /></svg>') repeat;
/* For background circles, width & height should be odd, cx & cy should be half of width & height, and r should be less than or equal to cx & cy */
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;

View file

@ -85,7 +85,6 @@ export class Overlay {
offsetX = event.clientX - overlay.getBoundingClientRect().left;
offsetY = event.clientY - overlay.getBoundingClientRect().top;
document.body.style.userSelect = 'none'; // Prevents text selection while dragging
overlay.style.right = ''; // Destroys the right property to unbind the overlay from the right side of the screen
barDrag.classList.add('dragging'); // Adds a class to indicate a dragging state
});
@ -94,18 +93,18 @@ export class Overlay {
isDragging = true;
const touch = event?.touches?.[0];
if (!touch) {return;}
offsetX = touch.clientX - overlay.getBoundingClientRect().left;
offsetY = touch.clientY - overlay.getBoundingClientRect().top;
offsetX = touch.clientX - overlay.getBoundingClientRect().left; // Distance between the left edge of the overlay, and the cursor
offsetY = touch.clientY - overlay.getBoundingClientRect().top; // Distance between the top edge of the overlay, and the cursor
document.body.style.userSelect = 'none'; // Prevents text selection while dragging
overlay.style.right = ''; // Destroys the right property to unbind the overlay from the right side of the screen
barDrag.classList.add('dragging'); // Adds a class to indicate a dragging state
}, { passive: false }); // Prevents scrolling from being captured
// What to do when the mouse is moved while dragging
document.addEventListener('mousemove', function(event) {
if (isDragging) {
overlay.style.left = (event.clientX - offsetX) + 'px';
overlay.style.top = (event.clientY - offsetY) + 'px';
overlay.style.left = (event.clientX - offsetX) + 'px'; // Binds the overlay to the left side of the screen, and sets it's position to the cursor
overlay.style.top = (event.clientY - offsetY) + 'px'; // Binds the overlay to the top of the screen, and sets it's position to the cursor
overlay.style.right = ''; // Destroys the right property to unbind the overlay from the right side of the screen
}
});