diff --git a/build/build.js b/build/build.js index 0ea4d7e..e5ab18e 100644 --- a/build/build.js +++ b/build/build.js @@ -1,14 +1,24 @@ /** Builds the userscript using esbuild. - * This is for compiling all of the source files into a single userscript file. - * This also compiles all CSS files into a single CSS file. + * This will: + * 1. Update the package version across the entire project + * 2. Bundle the JS files into one file + * 3. Bundle the CSS files into one file + * 4. Compress & obfuscate the bundled JS file + * 5. Create a sourcemap * @since 0.0.6 */ +// ES Module imports import esbuild from 'esbuild'; import fs from 'fs'; import { execSync } from 'child_process'; -// Tries to bump the minor version +import { createRequire } from 'module'; +const require = createRequire(import.meta.url); +// CommonJS imports (require) +const terser = require('terser'); + +// Tries to bump the version try { const update = execSync('node build/update-version.js', { stdio: 'inherit' }); console.log('Version updated in meta file successfully'); @@ -34,14 +44,55 @@ esbuild.build({ }); // Compiles the JS files -esbuild.build({ - entryPoints: ['src/main.js'], - bundle: true, - outfile: 'dist/BlueMarble.user.js', - format: 'iife', - banner: { - js: metaContent +const resultEsbuild = await esbuild.build({ + entryPoints: ['src/main.js'], // "Infect" the files from this point (it spreads from this "patient 0") + bundle: true, // Should the code be bundled? + outfile: 'dist/BlueMarble.user.js', // The file the bundled code is exported to + format: 'iife', // What format the bundler bundles the code into + drop: process.env?.GITHUB_ACTIONS ? ['console', 'debugger'] : [], // Tells esbuild to remove console and debug logs if this file is run in a GitHub (Actions) Workflow + target: 'es2020', // What is the minimum version/year that should be supported? When omited, it attempts to support backwards compatability with legacy browsers + platform: 'browser', // The platform the bundled code will be operating on + sourcemap: true, // Should a sourcemap be generated? + legalComments: 'inline', // What level of legal comments are preserved? (Hard: none, Soft: inline) + minify: false, // Should the code be minified? + write: false // Should we write the outfile? +}).catch(() => process.exit(1)); + +// Retrieves the JS file and map file +const resultEsbuildJS = resultEsbuild.outputFiles.find(file => file.path.endsWith('.js')); +const resultEsbuildMap = resultEsbuild.outputFiles.find(file => file.path.endsWith('.js.map')); + +// Obfuscates the JS file +const resultTerser = await terser.minify(resultEsbuildJS.text, { + sourceMap: { + content: resultEsbuildMap.text, // esbuild sourcemap + filename: 'dist/BlueMarble.user.js', // The file to make a sourcemap for + url: 'dist/BlueMarble.user.js.map' // The sourcemap to be made }, - legalComments: 'inline', - minify: true -}).catch(() => process.exit(1)); \ No newline at end of file + mangle: { + toplevel: true, // Obfuscate top-level class/function names + keep_classnames: false, // Should class names be preserved? + keep_fnames: false, // Should function names be preserved? + reserved: [], // List of keywords to preserve + properties: { + // regex: /.*/, // Yes, I am aware I should be using a RegEx. Yes, like you, I am also suprised the userscript still functions + keep_quoted: true, // Should names in quotes be preserved? + reserved: [] // What properties should be preserved? + }, + }, + compress: { + dead_code: true, // Should unreachable code be removed? + drop_console: true, // Should console code be removed? + drop_debugger: true, // SHould debugger code be removed? + passes: 2 // Number of times the compression algorithm runs + }, + format: { + comments: 'some' // Save legal comments + } +}); + +// Creates the sourcemap file +fs.writeFileSync('dist/BlueMarble.user.js.map', resultTerser.map, 'utf8'); + +// Adds the banner +fs.writeFileSync('dist/BlueMarble.user.js', metaContent + resultTerser.code, 'utf8'); \ No newline at end of file diff --git a/dist/BlueMarble.user.css b/dist/BlueMarble.user.css index 18d08ed..597c5eb 100644 --- a/dist/BlueMarble.user.css +++ b/dist/BlueMarble.user.css @@ -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,') 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-template)>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-template),#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} +#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,') 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.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;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-template)>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-template),#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} diff --git a/dist/BlueMarble.user.js b/dist/BlueMarble.user.js index 0ff4be7..b76974e 100644 --- a/dist/BlueMarble.user.js +++ b/dist/BlueMarble.user.js @@ -1,7 +1,7 @@ // ==UserScript== // @name Blue Marble // @namespace https://github.com/SwingTheVine/ -// @version 0.46.0 +// @version 0.46.26 // @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,6 +20,5 @@ // Wplace --> https://wplace.live // License --> https://www.mozilla.org/en-US/MPL/2.0/ -(()=>{var c=class{constructor(t,e){this.name=t,this.version=e,this.apiHandler=null,this.outputStatusId="bm-output-status",this.overlay=null,this.currentParent=null,this.parentStack=[]}setApiHandler(t){this.apiHandler=t}#t(t,e={},n={}){let s=document.createElement(t);this.overlay?(this.currentParent.appendChild(s),this.parentStack.push(this.currentParent),this.currentParent=s):(this.overlay=s,this.currentParent=s);for(let[r,o]of Object.entries(e))s[r]=o;for(let[r,o]of Object.entries(n))s[r]=o;return s}buildElement(){return this.parentStack.length>0&&(this.currentParent=this.parentStack.pop()),this}buildOverlay(t){t.appendChild(this.overlay),this.overlay=null,this.currentParent=null,this.parentStack=[]}addDiv(t={},e=()=>{}){let n={},s=this.#t("div",n,t);return e(this,s),this}addP(t={},e=()=>{}){let n={},s=this.#t("p",n,t);return e(this,s),this}addImg(t={},e=()=>{}){let n={},s=this.#t("img",n,t);return e(this,s),this}addHeader(t,e={},n=()=>{}){let s={},r=this.#t("h"+t,s,e);return n(this,r),this}addHr(t={},e=()=>{}){let n={},s=this.#t("hr",n,t);return e(this,s),this}addBr(t={},e=()=>{}){let n={},s=this.#t("br",n,t);return e(this,s),this}addCheckbox(t={},e=()=>{}){let n={type:"checkbox"},s=this.#t("label",{textContent:t.textContent??""});delete t.textContent;let r=this.#t("input",n,t);return s.insertBefore(r,s.firstChild),this.buildElement(),e(this,s,r),this}addButton(t={},e=()=>{}){let n={},s=this.#t("button",n,t);return e(this,s),this}addButtonHelp(t={},e=()=>{}){let n=t.title??t.textContent??"Help: No info";delete t.textContent,t.title=`Help: ${n}`;let s={textContent:"?",className:"bm-help",onclick:()=>{this.updateInnerHTML(this.outputStatusId,n)}},r=this.#t("button",s,t);return e(this,r),this}addInput(t={},e=()=>{}){let n={},s=this.#t("input",n,t);return e(this,s),this}addInputFile(t={},e=()=>{}){let n={type:"file",style:"display: none;"},s=t.textContent??"";delete t.textContent;let r=this.#t("div"),o=this.#t("input",n,t);this.buildElement();let i=this.#t("button",{textContent:s});return this.buildElement(),this.buildElement(),i.addEventListener("click",()=>{o.click()}),o.addEventListener("change",()=>{i.style.maxWidth=`${i.offsetWidth}px`,o.files.length>0?i.textContent=o.files[0].name:i.textContent=s}),e(this,r,o,i),this}addTextarea(t={},e=()=>{}){let n={},s=this.#t("textarea",n,t);return e(this,s),this}updateInnerHTML(t,e,n=!1){let s=document.getElementById(t.replace(/^#/,""));if(s){if(s instanceof HTMLInputElement){s.value=e;return}n?s.textContent=e:s.innerHTML=e}}handleDrag(t,e){let n=!1,s,r=0;if(t=document.querySelector(t?.[0]=="#"?t:"#"+t),e=document.querySelector(e?.[0]=="#"?e:"#"+e),!t||!e){this.handleDisplayError(`Can not drag! ${t?"":"moveMe"} ${!t&&!e?"and ":""}${e?"":"iMoveThings "}was not found!`);return}e.addEventListener("mousedown",function(o){n=!0,s=o.clientX-t.getBoundingClientRect().left,r=o.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging")}),e.addEventListener("touchstart",function(o){n=!0;let i=o?.touches?.[0];i&&(s=i.clientX-t.getBoundingClientRect().left,r=i.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(o){n&&(t.style.left=o.clientX-s+"px",t.style.top=o.clientY-r+"px",t.style.right="")}),document.addEventListener("touchmove",function(o){if(n){let i=o?.touches?.[0];if(!i)return;t.style.left=i.clientX-s+"px",t.style.top=i.clientY-r+"px",o.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")})}handleDisplayError(t){console.error(`${this.name}: ${t}`),this.updateInnerHTML(this.outputStatusId,"Error: "+t,!0)}};var u=class{constructor(){this.observerBody=null,this.observerBodyTarget=null,this.targetDisplayCoords="#bm-display-coords"}createObserverBody(t){return this.observerBodyTarget=t,this.observerBody=new MutationObserver(e=>{for(let n of e)for(let s of n.addedNodes)s instanceof HTMLElement&&s.matches?.(this.targetDisplayCoords)}),this}getObserverBody(){return this.observerBody}observe(t,e=!1,n=!1){t.observe(this.observerBodyTarget,{childList:e,subtree:n})}};var p=class{serverTPtoDisplayTP(t,e){return[parseInt(t[0])%4*1e3+parseInt(e[0]),parseInt(t[1])%4*1e3+parseInt(e[1])]}};var m=class{static escapeHTML(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}};var h=class{constructor(t){this.coordsHandler=t,this.disableAll=!1,this.coordsTilePixel=[]}spontaneousResponseListener(t){window.addEventListener("message",e=>{let n=e.data;if(!(n&&n.source==="blue-marble"))return;let s=n.endpoint.split("?")[0].split("/").filter(r=>r&&isNaN(Number(r))).pop();switch(console.log(`Recieved message about "${s}"`),s){case"me":if(n.jsonData?.status&&n.jsonData?.status?.toString()[0]!="2"){t.handleDisplayError(`The game is down! -Could not fetch userdata.`);return}let r=Math.ceil(Math.pow(Math.floor(n.jsonData?.level)*Math.pow(30,.65),1/.65)-n.jsonData?.pixelsPainted);t.updateInnerHTML("bm-user-name",`Username: ${m.escapeHTML(n.jsonData?.name)}`),t.updateInnerHTML("bm-user-droplets",`Droplets: ${new Intl.NumberFormat().format(n.jsonData?.droplets)}`),t.updateInnerHTML("bm-user-nextlevel",`Next level in ${new Intl.NumberFormat().format(r)} pixel${r==1?"":"s"}`);break;case"pixel":let o=n.endpoint.split("?")[0].split("/").filter(d=>d&&!isNaN(Number(d))),i=new URLSearchParams(n.endpoint.split("?")[1]),y=[i.get("x"),i.get("y")];this.coordsTilePixel=[...o,...y];let E=this.coordsHandler.serverTPtoDisplayTP(o,y),L=document.querySelectorAll("span");for(let d of L)if(d.textContent.trim().includes(`${E[0]}, ${E[1]}`)){let a=document.querySelector("#bm-display-coords"),v=`(Tl X: ${o[0]}, Tl Y: ${o[1]}, Px X: ${y[0]}, Px Y: ${y[1]})`;a?a.textContent=v:(a=document.createElement("span"),a.id="bm-display-coords",a.textContent=v,a.style="margin-left: calc(var(--spacing)*3); font-size: small;",d.parentNode.parentNode.parentNode.insertAdjacentElement("afterend",a))}break;case"robots":this.disableAll=n.jsonData?.userscript?.toString().toLowerCase()=="false";break}})}};var x=GM_info.script.name.toString(),g=GM_info.script.version.toString();function w(l){let t=document.createElement("script");t.textContent=`(${l})();`,document.documentElement.appendChild(t),t.remove()}w(()=>{let l=window.fetch;window.fetch=async function(...t){let e=await l.apply(this,t),n=e.clone();if((n.headers.get("content-type")||"").includes("application/json")){let r=(t[0]instanceof Request?t[0]?.url:t[0])||"ignore";console.log(`Sending JSON message about endpoint "${r}"`),n.json().then(o=>{window.postMessage({source:"blue-marble",endpoint:r,jsonData:o},"*")}).catch(o=>{console.error("BM - Failed to parse JSON:",o)})}return e}});var H=GM_getResourceText("CSS-BM-File");GM_addStyle(H);var f=document.createElement("link");f.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";f.rel="preload";f.as="style";f.onload=function(){this.onload=null,this.rel="stylesheet"};document.head.appendChild(f);var R=new u,b=new c(x,g),S=new p,C=new h(S);b.setApiHandler(C);b.addDiv({id:"bm-overlay",style:"top: 10px; right: 75px;"}).addDiv({id:"bm-contain-header"}).addDiv({id:"bm-bar-drag"}).buildElement().addImg({alt:"Blue Marble Icon",src:"https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png"}).buildElement().addHeader(1,{textContent:x}).buildElement().buildElement().addHr().buildElement().addDiv({id:"bm-contain-userinfo"}).addP({id:"bm-user-name",textContent:"Username:"}).buildElement().addP({id:"bm-user-droplets",textContent:"Droplets:"}).buildElement().addP({id:"bm-user-nextlevel",textContent:"Next level in..."}).buildElement().buildElement().addHr().buildElement().addDiv({id:"bm-contain-automation"}).addCheckbox({id:"bm-input-stealth",textContent:"Stealth",checked:!0}).buildElement().addButtonHelp({title:"Waits for the website to make requests, instead of sending requests."}).buildElement().addBr().buildElement().addCheckbox({id:"bm-input-possessed",textContent:"Possessed",checked:!0}).buildElement().addButtonHelp({title:"Controls the website as if it were possessed."}).buildElement().addBr().buildElement().addDiv({id:"bm-contain-coords"}).addButton({id:"bm-button-coords",className:"bm-help",style:"margin-top: 0;",innerHTML:''},(l,t)=>{t.onclick=()=>{let e=l.apiHandler?.coordsTilePixel;if(!e?.[0]){l.handleDisplayError("Coordinates are malformed! Did you try clicking on the canvas first?");return}l.updateInnerHTML("bm-input-tx",e?.[0]||""),l.updateInnerHTML("bm-input-ty",e?.[1]||""),l.updateInnerHTML("bm-input-px",e?.[2]||""),l.updateInnerHTML("bm-input-py",e?.[3]||"")}}).buildElement().addInput({type:"number",id:"bm-input-tx",placeholder:"Tl X",min:0,max:2047,step:1}).buildElement().addInput({type:"number",id:"bm-input-ty",placeholder:"Tl Y",min:0,max:2047,step:1}).buildElement().addInput({type:"number",id:"bm-input-px",placeholder:"Px X",min:0,max:2047,step:1}).buildElement().addInput({type:"number",id:"bm-input-py",placeholder:"Px Y",min:0,max:2047,step:1}).buildElement().buildElement().addInputFile({id:"bm-input-file-template",textContent:"Upload Template"}).buildElement().addDiv({id:"bm-contain-buttons"}).addButton({id:"bm-button-enable",textContent:"Enable"}).buildElement().addButton({id:"bm-button-disable",textContent:"Disable"}).buildElement().buildElement().addTextarea({id:b.outputStatusId,placeholder:`Status: Sleeping... -Version: ${g}`,readOnly:!0}).buildElement().buildElement().buildOverlay(document.body);b.handleDrag("#bm-overlay","#bm-bar-drag");C.spontaneousResponseListener(b);console.log(`${x} (${g}) userscript has loaded!`);})(); +(()=>{var t,e,n=t=>{throw TypeError(t)},s=(t,e,s)=>(((t,e)=>{e.has(t)||n("Cannot access private method")})(t,e),s);t=new WeakSet,e=function(t,e={},n={}){const s=document.createElement(t);this.overlay?(this.currentParent.appendChild(s),this.parentStack.push(this.currentParent),this.currentParent=s):(this.overlay=s,this.currentParent=s);for(const[t,n]of Object.entries(e))s[t]=n;for(const[t,e]of Object.entries(n))s[t]=e;return s};var i=class{static escapeHTML(t){const e=document.createElement("div");return e.textContent=t,e.innerHTML}},l=GM_info.script.name.toString(),a=GM_info.script.version.toString();!function(t){const e=document.createElement("script");e.textContent=`(${t})();`,document.documentElement.appendChild(e),e.remove()}(()=>{const t=window.fetch;window.fetch=async function(...e){const n=await t.apply(this,e),s=n.clone();if((s.headers.get("content-type")||"").includes("application/json")){let t=(e[0]instanceof Request?e[0]?.url:e[0])||"ignore";s.json().then(e=>{window.postMessage({source:"blue-marble",endpoint:t,jsonData:e},"*")}).catch(t=>{})}return n}});var o=GM_getResourceText("CSS-BM-File");GM_addStyle(o);var r=document.createElement("link");r.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap",r.rel="preload",r.as="style",r.onload=function(){this.onload=null,this.rel="stylesheet"},document.head.appendChild(r),new class{constructor(){this.observerBody=null,this.observerBodyTarget=null,this.targetDisplayCoords="#bm-display-coords"}createObserverBody(t){return this.observerBodyTarget=t,this.observerBody=new MutationObserver(t=>{for(const e of t)for(const t of e.addedNodes)t instanceof HTMLElement&&t.matches?.(this.targetDisplayCoords)}),this}getObserverBody(){return this.observerBody}observe(t,e=!1,n=!1){t.observe(this.observerBodyTarget,{childList:e,subtree:n})}};var d=new class{constructor(e,s){var i,l;i=this,(l=t).has(i)?n("Cannot add the same private member more than once"):l instanceof WeakSet?l.add(i):l.set(i,undefined),this.name=e,this.version=s,this.apiHandler=null,this.outputStatusId="bm-output-status",this.overlay=null,this.currentParent=null,this.parentStack=[]}setApiHandler(t){this.apiHandler=t}buildElement(){return this.parentStack.length>0&&(this.currentParent=this.parentStack.pop()),this}buildOverlay(t){t.appendChild(this.overlay),this.overlay=null,this.currentParent=null,this.parentStack=[]}addDiv(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"div",{},n)),this}addP(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"p",{},n)),this}addImg(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"img",{},n)),this}addHeader(n,i={},l=()=>{}){return l(this,s(this,t,e).call(this,"h"+n,{},i)),this}addHr(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"hr",{},n)),this}addBr(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"br",{},n)),this}addCheckbox(n={},i=()=>{}){const l=s(this,t,e).call(this,"label",{textContent:n.textContent??""});delete n.textContent;const a=s(this,t,e).call(this,"input",{type:"checkbox"},n);return l.insertBefore(a,l.firstChild),this.buildElement(),i(this,l,a),this}addButton(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"button",{},n)),this}addButtonHelp(n={},i=()=>{}){const l=n.title??n.textContent??"Help: No info";delete n.textContent,n.title=`Help: ${l}`;const a={textContent:"?",className:"bm-help",onclick:()=>{this.updateInnerHTML(this.outputStatusId,l)}};return i(this,s(this,t,e).call(this,"button",a,n)),this}addInput(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"input",{},n)),this}addInputFile(n={},i=()=>{}){const l=n.textContent??"";delete n.textContent;const a=s(this,t,e).call(this,"div"),o=s(this,t,e).call(this,"input",{type:"file",style:"display: none;"},n);this.buildElement();const r=s(this,t,e).call(this,"button",{textContent:l});return this.buildElement(),this.buildElement(),r.addEventListener("click",()=>{o.click()}),o.addEventListener("change",()=>{r.style.maxWidth=`${r.offsetWidth}px`,o.files.length>0?r.textContent=o.files[0].name:r.textContent=l}),i(this,a,o,r),this}addTextarea(n={},i=()=>{}){return i(this,s(this,t,e).call(this,"textarea",{},n)),this}updateInnerHTML(t,e,n=!1){const s=document.getElementById(t.replace(/^#/,""));s&&(s instanceof HTMLInputElement?s.value=e:n?s.textContent=e:s.innerHTML=e)}handleDrag(t,e){let n,s=!1,i=0;t=document.querySelector("#"==t?.[0]?t:"#"+t),e=document.querySelector("#"==e?.[0]?e:"#"+e),t&&e?(e.addEventListener("mousedown",function(l){s=!0,n=l.clientX-t.getBoundingClientRect().left,i=l.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging")}),e.addEventListener("touchstart",function(l){s=!0;const a=l?.touches?.[0];a&&(n=a.clientX-t.getBoundingClientRect().left,i=a.clientY-t.getBoundingClientRect().top,document.body.style.userSelect="none",e.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(e){s&&(t.style.left=e.clientX-n+"px",t.style.top=e.clientY-i+"px",t.style.right="")}),document.addEventListener("touchmove",function(e){if(s){const s=e?.touches?.[0];if(!s)return;t.style.left=s.clientX-n+"px",t.style.top=s.clientY-i+"px",e.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchend",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){s=!1,document.body.style.userSelect="",e.classList.remove("dragging")})):this.handleDisplayError(`Can not drag! ${t?"":"moveMe"} ${t||e?"":"and "}${e?"":"iMoveThings "}was not found!`)}handleDisplayError(t){(0,console.error)(`${this.name}: ${t}`),this.updateInnerHTML(this.outputStatusId,"Error: "+t,!0)}}(l,a),c=new class{serverTPtoDisplayTP(t,e){return[parseInt(t[0])%4*1e3+parseInt(e[0]),parseInt(t[1])%4*1e3+parseInt(e[1])]}},u=new class{constructor(t){this.coordsHandler=t,this.disableAll=!1,this.coordsTilePixel=[]}spontaneousResponseListener(t){window.addEventListener("message",e=>{const n=e.data,s=n.jsonData;if(n&&"blue-marble"===n.source)switch(n.endpoint.split("?")[0].split("/").filter(t=>t&&isNaN(Number(t))).pop()){case"me":if(s.status&&"2"!=s.status?.toString()[0])return void t.handleDisplayError("The game is down!\nCould not fetch userdata.");const e=Math.ceil(Math.pow(Math.floor(s.level)*Math.pow(30,.65),1/.65)-s.pixelsPainted),l=console.log;l(s),l(s?.droplets),t.updateInnerHTML("bm-user-name",`Username: ${i.escapeHTML(s.name)}`),t.updateInnerHTML("bm-user-droplets",`Droplets: ${(new Intl.NumberFormat).format(s.droplets)}`),t.updateInnerHTML("bm-user-nextlevel",`Next level in ${(new Intl.NumberFormat).format(e)} pixel${1==e?"":"s"}`);break;case"pixel":const a=n.endpoint.split("?")[0].split("/").filter(t=>t&&!isNaN(Number(t))),o=new URLSearchParams(n.endpoint.split("?")[1]),r=[o.get("x"),o.get("y")];this.coordsTilePixel=[...a,...r];const d=this.coordsHandler.serverTPtoDisplayTP(a,r),c=document.querySelectorAll("span");for(const t of c)if(t.textContent.trim().includes(`${d[0]}, ${d[1]}`)){let e=document.querySelector("#bm-display-coords");const n=`(Tl X: ${a[0]}, Tl Y: ${a[1]}, Px X: ${r[0]}, Px Y: ${r[1]})`;e?e.textContent=n:(e=document.createElement("span"),e.id="bm-display-coords",e.textContent=n,e.style="margin-left: calc(var(--spacing)*3); font-size: small;",t.parentNode.parentNode.parentNode.insertAdjacentElement("afterend",e))}break;case"robots":this.disableAll="false"==s.userscript?.toString().toLowerCase()}})}}(c);d.setApiHandler(u),d.addDiv({id:"bm-overlay",style:"top: 10px; right: 75px;"}).addDiv({id:"bm-contain-header"}).addDiv({id:"bm-bar-drag"}).buildElement().addImg({alt:"Blue Marble Icon",src:"https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png"}).buildElement().addHeader(1,{textContent:l}).buildElement().buildElement().addHr().buildElement().addDiv({id:"bm-contain-userinfo"}).addP({id:"bm-user-name",textContent:"Username:"}).buildElement().addP({id:"bm-user-droplets",textContent:"Droplets:"}).buildElement().addP({id:"bm-user-nextlevel",textContent:"Next level in..."}).buildElement().buildElement().addHr().buildElement().addDiv({id:"bm-contain-automation"}).addCheckbox({id:"bm-input-stealth",textContent:"Stealth",checked:!0}).buildElement().addButtonHelp({title:"Waits for the website to make requests, instead of sending requests."}).buildElement().addBr().buildElement().addCheckbox({id:"bm-input-possessed",textContent:"Possessed",checked:!0}).buildElement().addButtonHelp({title:"Controls the website as if it were possessed."}).buildElement().addBr().buildElement().addDiv({id:"bm-contain-coords"}).addButton({id:"bm-button-coords",className:"bm-help",style:"margin-top: 0;",innerHTML:''},(t,e)=>{e.onclick=()=>{const e=t.apiHandler?.coordsTilePixel;e?.[0]?(t.updateInnerHTML("bm-input-tx",e?.[0]||""),t.updateInnerHTML("bm-input-ty",e?.[1]||""),t.updateInnerHTML("bm-input-px",e?.[2]||""),t.updateInnerHTML("bm-input-py",e?.[3]||"")):t.handleDisplayError("Coordinates are malformed! Did you try clicking on the canvas first?")}}).buildElement().addInput({type:"number",id:"bm-input-tx",placeholder:"Tl X",min:0,max:2047,step:1}).buildElement().addInput({type:"number",id:"bm-input-ty",placeholder:"Tl Y",min:0,max:2047,step:1}).buildElement().addInput({type:"number",id:"bm-input-px",placeholder:"Px X",min:0,max:2047,step:1}).buildElement().addInput({type:"number",id:"bm-input-py",placeholder:"Px Y",min:0,max:2047,step:1}).buildElement().buildElement().addInputFile({id:"bm-input-file-template",textContent:"Upload Template"}).buildElement().addDiv({id:"bm-contain-buttons"}).addButton({id:"bm-button-enable",textContent:"Enable"}).buildElement().addButton({id:"bm-button-disable",textContent:"Disable"}).buildElement().buildElement().addTextarea({id:d.outputStatusId,placeholder:`Status: Sleeping...\nVersion: ${a}`,readOnly:!0}).buildElement().buildElement().buildOverlay(document.body),d.handleDrag("#bm-overlay","#bm-bar-drag"),u.spontaneousResponseListener(d)})(); +//# sourceMappingURL=dist/BlueMarble.user.js.map \ No newline at end of file diff --git a/dist/BlueMarble.user.js.map b/dist/BlueMarble.user.js.map new file mode 100644 index 0000000..544c39c --- /dev/null +++ b/dist/BlueMarble.user.js.map @@ -0,0 +1 @@ +{"version":3,"file":"dist/BlueMarble.user.js","names":["_Overlay_instances","createElement_fn","WeakSet","tag","properties","additionalProperties","element","document","createElement","this","overlay","currentParent","appendChild","parentStack","push","property","value","Object","entries","Utils","escapeHTML","text","div","textContent","innerHTML","name","GM_info","script","toString","version","fn","documentElement","remove","inject","originalFetch","window","fetch","async","args","response","apply","cloned","clone","headers","get","includes","endpointName","Request","url","json","then","jsonData","postMessage","source","endpoint","catch","err","cssOverlay","GM_getResourceText","GM_addStyle","stylesheetLink","href","rel","as","onload","head","constructor","observerBody","observerBodyTarget","targetDisplayCoords","createObserverBody","target","MutationObserver","mutations","mutation","node","addedNodes","HTMLElement","matches","getObserverBody","observe","observer","watchChildList","watchSubtree","childList","subtree","apiHandler","outputStatusId","setApiHandler","buildElement","length","pop","buildOverlay","parent","addDiv","callback","__privateMethod","call","addP","addImg","addHeader","level","addHr","addBr","addCheckbox","label","checkbox","type","insertBefore","firstChild","addButton","addButtonHelp","tooltip","className","onclick","updateInnerHTML","addInput","addInputFile","container","input","style","button","addEventListener","click","maxWidth","offsetWidth","files","addTextarea","id","html","doSafe","getElementById","replace","HTMLInputElement","handleDrag","moveMe","iMoveThings","offsetX","isDragging","offsetY","querySelector","event","clientX","getBoundingClientRect","left","clientY","top","body","userSelect","classList","add","touch","touches","passive","right","preventDefault","handleDisplayError","consoleError","console","error","coordsHandler","serverTPtoDisplayTP","tile","pixel","parseInt","disableAll","coordsTilePixel","spontaneousResponseListener","data","dataJSON","split","filter","s","isNaN","Number","nextLevelPixels","Math","ceil","pow","floor","clog","log","droplets","Intl","NumberFormat","format","coordsTile","payloadExtractor","URLSearchParams","coordsPixel","displayTP","spanElements","querySelectorAll","trim","displayCoords","parentNode","insertAdjacentElement","toLowerCase","alt","src","checked","title","instance","coords","placeholder","min","max","step","readOnly"],"sources":["../src/overlay.js","../src/observers.js","../src/utils.js","../src/main.js","../src/coordsHandler.js","../src/apiHandler.js"],"sourcesContent":["/** The overlay builder for the Blue Marble script.\r\n * @description This class handles the overlay UI for the Blue Marble script.\r\n * @since 0.0.2\r\n * @example\r\n * const overlay = new Overlay();\r\n * overlay.addDiv('overlay')\r\n * .addHeader(1, {'textContent': 'Your Overlay'}).buildElement()\r\n * .addP({'textContent': 'This is your overlay. It is versatile.'}).buildElement()\r\n * .addHr().buildElement()\r\n * .buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n *
\r\n *

Your Overlay

\r\n *

This is your overlay. It is versatile.

\r\n *
\r\n * \r\n*/\r\nexport default class Overlay {\r\n\r\n /** Constructor for the Overlay class.\r\n * @param {string} name - The name of the userscript\r\n * @param {string} version - The version of the userscript\r\n * @since 0.0.2\r\n * @see {@link Overlay}\r\n */\r\n constructor(name, version) {\r\n this.name = name; // Name of userscript\r\n this.version = version; // Version of userscript\r\n\r\n this.apiHandler = null; // The API handler instance. Later populated when setApiHandler is called\r\n \r\n this.outputStatusId = 'bm-output-status'; // ID for status element\r\n\r\n this.overlay = null; // The overlay root DOM HTMLElement\r\n this.currentParent = null; // The current parent HTMLElement in the overlay\r\n this.parentStack = []; // Tracks the parent elements BEFORE the currentParent so we can nest elements\r\n }\r\n\r\n /** Populates the apiHandler variable with the apiHandler class.\r\n * @param {apiHandler} apiHandler - The apiHandler class instance\r\n * @since 0.41.4\r\n */\r\n setApiHandler(apiHandler) {this.apiHandler = apiHandler;}\r\n\r\n /** Creates an element.\r\n * For **internal use** of the {@link Overlay} class.\r\n * @param {string} tag - The tag name as a string.\r\n * @param {Object.} [properties={}] - The DOM properties of the element.\r\n * @returns {HTMLElement} HTML Element\r\n * @since 0.43.2\r\n */\r\n #createElement(tag, properties = {}, additionalProperties={}) {\r\n\r\n const element = document.createElement(tag); // Creates the element\r\n\r\n // If this is the first element made...\r\n if (!this.overlay) {\r\n this.overlay = element; // Declare it the highest overlay element\r\n this.currentParent = element;\r\n } else {\r\n this.currentParent.appendChild(element); // ...else delcare it the child of the last element\r\n this.parentStack.push(this.currentParent);\r\n this.currentParent = element;\r\n }\r\n\r\n // For every passed in property (shared by all like-elements), apply the it to the element\r\n for (const [property, value] of Object.entries(properties)) {\r\n element[property] = value;\r\n }\r\n\r\n // For every passed in additional property, apply the it to the element\r\n for (const [property, value] of Object.entries(additionalProperties)) {\r\n element[property] = value;\r\n }\r\n \r\n return element;\r\n }\r\n\r\n /** Finishes building an element.\r\n * Call this after you are finished adding children.\r\n * If the element will have no children, call it anyways.\r\n * @returns {Overlay} Overlay class instance (this)\r\n * @since 0.43.2\r\n * @example\r\n * overlay\r\n * .addDiv()\r\n * .addHeader(1).buildElement() // Breaks out of the

\r\n * .addP().buildElement() // Breaks out of the

\r\n * .buildElement() // Breaks out of the

\r\n * .addHr() // Since there are no more elements, calling buildElement() is optional\r\n * .buildOverlay(document.body);\r\n */\r\n buildElement() {\r\n if (this.parentStack.length > 0) {\r\n this.currentParent = this.parentStack.pop();\r\n }\r\n return this;\r\n }\r\n\r\n /** Finishes building the overlay and displays it.\r\n * Call this when you are done chaining methods.\r\n * @param {HTMLElement} parent - The parent HTMLElement this overlay should be appended to as a child.\r\n * @since 0.43.2\r\n * @example\r\n * overlay\r\n * .addDiv()\r\n * .addP().buildElement()\r\n * .buildElement()\r\n * .buildOverlay(document.body); // Adds DOM structure to document body\r\n * //

\r\n */\r\n buildOverlay(parent) {\r\n parent.appendChild(this.overlay);\r\n\r\n // Resets the class-bound variables of this class instance back to default so overlay can be build again later\r\n this.overlay = null;\r\n this.currentParent = null;\r\n this.parentStack = [];\r\n }\r\n\r\n /** Adds a `
` to the overlay.\r\n * This `
` element will have properties shared between all `
` elements in the overlay.\r\n * You can override the shared properties by using a callback.\r\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `
` that are NOT shared between all overlay `
` elements. These should be camelCase.\r\n * @param {function(Overlay, HTMLDivElement):void} [callback=()=>{}] - Additional JS modification to the `
`.\r\n * @returns {Overlay} Overlay class instance (this)\r\n * @since 0.43.2\r\n * @example\r\n * // Assume all
elements have a shared class (e.g. {'className': 'bar'})\r\n * overlay.addDiv({'id': 'foo'}).buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n *
\r\n * \r\n */\r\n addDiv(additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {}; // Shared
DOM properties\r\n\r\n const div = this.#createElement('div', properties, additionalProperties); // Creates the
element\r\n callback(this, div); // Runs any script passed in through the callback\r\n return this;\r\n }\r\n\r\n /** Adds a `

` to the overlay.\r\n * This `

` element will have properties shared between all `

` elements in the overlay.\r\n * You can override the shared properties by using a callback.\r\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `

` that are NOT shared between all overlay `

` elements. These should be camelCase.\r\n * @param {function(Overlay, HTMLParagraphElement):void} [callback=()=>{}] - Additional JS modification to the `

`.\r\n * @returns {Overlay} Overlay class instance (this)\r\n * @since 0.43.2\r\n * @example\r\n * // Assume all

elements have a shared class (e.g. {'className': 'bar'})\r\n * overlay.addP({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n *

Foobar.

\r\n * \r\n */\r\n addP(additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {}; // Shared

DOM properties\r\n\r\n const p = this.#createElement('p', properties, additionalProperties); // Creates the

element\r\n callback(this, p); // Runs any script passed in through the callback\r\n return this;\r\n }\r\n\r\n /** Adds a `` to the overlay.\r\n * This `` element will have properties shared between all `` elements in the overlay.\r\n * You can override the shared properties by using a callback.\r\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `` that are NOT shared between all overlay `` elements. These should be camelCase.\r\n * @param {function(Overlay, HTMLImageElement):void} [callback=()=>{}] - Additional JS modification to the ``.\r\n * @returns {Overlay} Overlay class instance (this)\r\n * @since 0.43.2\r\n * @example\r\n * // Assume all elements have a shared class (e.g. {'className': 'bar'})\r\n * overlay.addimg({'id': 'foo', 'src': './img.png'}).buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n * \r\n * \r\n */\r\n addImg(additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {}; // Shared DOM properties\r\n\r\n const img = this.#createElement('img', properties, additionalProperties); // Creates the element\r\n callback(this, img); // Runs any script passed in through the callback\r\n return this;\r\n }\r\n\r\n /** Adds a header to the overlay.\r\n * This header element will have properties shared between all header elements in the overlay.\r\n * You can override the shared properties by using a callback.\r\n * @param {number} level - The header level. Must be between 1 and 6 (inclusive)\r\n * @param {Object.} [additionalProperties={}] - The DOM properties of the header that are NOT shared between all overlay header elements. These should be camelCase.\r\n * @param {function(Overlay, HTMLHeadingElement):void} [callback=()=>{}] - Additional JS modification to the header.\r\n * @returns {Overlay} Overlay class instance (this)\r\n * @since 0.43.7\r\n * @example\r\n * // Assume all header elements have a shared class (e.g. {'className': 'bar'})\r\n * overlay.addHeader(6, {'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n *

Foobar.
\r\n * \r\n */\r\n addHeader(level, additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {}; // Shared header DOM properties\r\n\r\n const header = this.#createElement('h' + level, properties, additionalProperties); // Creates the header element\r\n callback(this, header); // Runs any script passed in through the callback\r\n return this;\r\n }\r\n\r\n /** Adds a `
` to the overlay.\r\n * This `
` element will have properties shared between all `
` elements in the overlay.\r\n * You can override the shared properties by using a callback.\r\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `
` that are NOT shared between all overlay `
` elements. These should be camelCase.\r\n * @param {function(Overlay, HTMLHRElement):void} [callback=()=>{}] - Additional JS modification to the `
`.\r\n * @returns {Overlay} Overlay class instance (this)\r\n * @since 0.43.7\r\n * @example\r\n * // Assume all
elements have a shared class (e.g. {'className': 'bar'})\r\n * overlay.addhr({'id': 'foo'}).buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n *
\r\n * \r\n */\r\n addHr(additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {}; // Shared
DOM properties\r\n\r\n const hr = this.#createElement('hr', properties, additionalProperties); // Creates the
element\r\n callback(this, hr); // Runs any script passed in through the callback\r\n return this;\r\n }\r\n\r\n /** Adds a `
` to the overlay.\r\n * This `
` element will have properties shared between all `
` elements in the overlay.\r\n * You can override the shared properties by using a callback.\r\n * @param {Object.} [additionalProperties={}] - The DOM properties of the `
` that are NOT shared between all overlay `
` elements. These should be camelCase.\r\n * @param {function(Overlay, HTMLBRElement):void} [callback=()=>{}] - Additional JS modification to the `
`.\r\n * @returns {Overlay} Overlay class instance (this)\r\n * @since 0.43.11\r\n * @example\r\n * // Assume all
elements have a shared class (e.g. {'className': 'bar'})\r\n * overlay.addbr({'id': 'foo'}).buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n *
\r\n * \r\n */\r\n addBr(additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {}; // Shared
DOM properties\r\n\r\n const br = this.#createElement('br', properties, additionalProperties); // Creates the
element\r\n callback(this, br); // Runs any script passed in through the callback\r\n return this;\r\n }\r\n\r\n /** Adds a checkbox to the overlay.\r\n * This checkbox element will have properties shared between all checkbox elements in the overlay.\r\n * You can override the shared properties by using a callback. Note: the checkbox element is inside a label element.\r\n * @param {Object.} [additionalProperties={}] - The DOM properties of the checkbox that are NOT shared between all overlay checkbox elements. These should be camelCase.\r\n * @param {function(Overlay, HTMLLabelElement, HTMLInputElement):void} [callback=()=>{}] - Additional JS modification to the checkbox.\r\n * @returns {Overlay} Overlay class instance (this)\r\n * @since 0.43.10\r\n * @example\r\n * // Assume all checkbox elements have a shared class (e.g. {'className': 'bar'})\r\n * overlay.addCheckbox({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n * \r\n * \r\n */\r\n addCheckbox(additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {'type': 'checkbox'}; // Shared checkbox DOM properties\r\n\r\n const label = this.#createElement('label', {'textContent': additionalProperties['textContent'] ?? ''}); // Creates the label element\r\n delete additionalProperties['textContent']; // Deletes 'textContent' DOM property before adding the properties to the checkbox\r\n const checkbox = this.#createElement('input', properties, additionalProperties); // Creates the checkbox element\r\n label.insertBefore(checkbox, label.firstChild); // Makes the checkbox the first child of the label (before the text content)\r\n this.buildElement(); // Signifies that we are done adding children to the checkbox\r\n callback(this, label, checkbox); // Runs any script passed in through the callback\r\n return this;\r\n }\r\n \r\n /** Adds a `\r\n * \r\n */\r\n addButton(additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {}; // Shared \r\n * \r\n * @example\r\n * // Assume all help button elements have a shared class (e.g. {'className': 'bar'})\r\n * overlay.addButtonHelp({'id': 'foo', 'textContent': 'Foobar.'}).buildOverlay(document.body);\r\n * // Output:\r\n * // (Assume already exists in the webpage)\r\n * \r\n * \r\n * \r\n */\r\n addButtonHelp(additionalProperties = {}, callback = () => {}) {\r\n\r\n const tooltip = additionalProperties['title'] ?? additionalProperties['textContent'] ?? 'Help: No info'; // Retrieves the tooltip\r\n\r\n // Makes sure the tooltip is stored in the title property\r\n delete additionalProperties['textContent'];\r\n additionalProperties['title'] = `Help: ${tooltip}`;\r\n\r\n // Shared help button DOM properties\r\n const properties = {\r\n 'textContent': '?',\r\n 'className': 'bm-help',\r\n 'onclick': () => {\r\n this.updateInnerHTML(this.outputStatusId, tooltip);\r\n }\r\n };\r\n\r\n const help = this.#createElement('button', properties, additionalProperties); // Creates the \r\n *
\r\n * \r\n */\r\n addInputFile(additionalProperties = {}, callback = () => {}) {\r\n \r\n const properties = {'type': 'file', 'style': 'display: none;'}; // Shared file input DOM properties\r\n const text = additionalProperties['textContent'] ?? ''; // Retrieves the text content\r\n\r\n delete additionalProperties['textContent']; // Deletes the text content before applying the additional properties to the file input\r\n\r\n const container = this.#createElement('div'); // Container for file input\r\n const input = this.#createElement('input', properties, additionalProperties); // Creates the file input\r\n this.buildElement(); // Signifies that we are done adding children to the file input\r\n const button = this.#createElement('button', {'textContent': text});\r\n this.buildElement(); // Signifies that we are done adding children to the button\r\n this.buildElement(); // Signifies that we are done adding children to the container\r\n\r\n button.addEventListener('click', () => {\r\n input.click(); // Clicks the file input\r\n });\r\n\r\n // Changes the button text content (and trims the file name)\r\n input.addEventListener('change', () => {\r\n button.style.maxWidth = `${button.offsetWidth}px`;\r\n if (input.files.length > 0) {\r\n button.textContent = input.files[0].name;\r\n } else {\r\n button.textContent = text;\r\n }\r\n });\r\n\r\n callback(this, container, input, button); // Runs any script passed in through the callback\r\n return this;\r\n }\r\n\r\n /** Adds a `\r\n * \r\n */\r\n addTextarea(additionalProperties = {}, callback = () => {}) {\r\n\r\n const properties = {}; // Shared