mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-03-11 17:15:38 +00:00
Updated styling for buttons
This commit is contained in:
SwingTheVine
parent
844bd05de8
commit
8861e9b947
8 changed files with 90 additions and 36 deletions
2
dist/BlueMarble.user.css
vendored
2
dist/BlueMarble.user.css
vendored
|
|
@ -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,<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}#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-userinfo,#bm-contain-automation{margin-top:.5em}#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;border-radius:1em;height:1.25em;width:1.25em;margin-top:2px;text-align:center;line-height:1.25em}#bm-button-coords{vertical-align:middle}#bm-button-coords svg{width:50%;margin:0 auto;fill:#111}#bm-output-status{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%;margin-top:.5em}#bm-contain-coords input[type=text]{width:7.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch}
|
||||
#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,<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}#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-userinfo,#bm-contain-automation{margin-top:.5em}#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;border-radius:1em;height:1.25em;width:1.25em;margin-top:2px;text-align:center;line-height:1.25em}#bm-button-coords{vertical-align:middle}#bm-button-coords svg{width:50%;margin:0 auto;fill:#111}#bm-output-status{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%;margin-top:.5em}#bm-contain-coords input[type=text]{width:7.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}
|
||||
|
|
|
|||
6
dist/BlueMarble.user.js
vendored
6
dist/BlueMarble.user.js
vendored
|
|
@ -1,7 +1,7 @@
|
|||
// ==UserScript==
|
||||
// @name Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.33.0
|
||||
// @version 0.33.2
|
||||
// @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,5 +20,5 @@
|
|||
// Wplace --> https://wplace.live
|
||||
// License --> https://www.mozilla.org/en-US/MPL/2.0/
|
||||
|
||||
(()=>{var m=class{constructor(e,t){this.name=e,this.version=t}create(){let e="bm-output-status",t=document.createElement("div");t.id="bm-overlay",t.style.top="10px",t.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 i=document.createElement("img");i.src="https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png",i.alt="Blue Marble Icon",n.appendChild(i);let s=document.createElement("h1");s.textContent=this.name,n.appendChild(s);let c=document.createElement("div");c.id="bm-contain-userinfo";let b=document.createElement("p");b.id="bm-user-name",b.textContent="Username:",c.appendChild(b);let f=document.createElement("p");f.id="bm-user-droplets",f.textContent="Droplets:",c.appendChild(f);let g=document.createElement("p");g.id="bm-user-nextlevel",g.textContent="Next level in...",c.appendChild(g);let a=document.createElement("div");a.id="bm-contain-automation",a.appendChild(this.createInputCheckbox("Stealth","bm-input-stealth",!0)),a.appendChild(this.createQuestionBox("bm-help-stealth","Help: Waits for the website to make requests, instead of sending requests.",e)),a.appendChild(document.createElement("br")),a.appendChild(this.createInputCheckbox("Possessed","bm-input-possessed",!0)),a.appendChild(this.createQuestionBox("bm-help-possessed","Help: Controls the website as if it were possessed.",e)),a.appendChild(document.createElement("br")),a.appendChild(this.createInputCheckbox("Panic","bm-input-panic")),a.appendChild(this.createQuestionBox("bm-help-panic","Help: Stops placing for a while if it detects a user nearby.",e)),a.appendChild(document.createElement("br"));let l=document.createElement("div");l.id="bm-contain-coords";let r=document.createElement("button");r.id="bm-button-coords",r.className="bm-help",r.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 6"><circle cx="2" cy="2" r="2"></circle><path d="M2 6 L3.7 3 L0.3 3 Z"></path><circle cx="2" cy="2" r="0.7" fill="white"></circle></svg></svg>',r.onclick=()=>{},l.appendChild(r),l.appendChild(this.createInputText("bm-input-tx","Tile X","","4")),l.appendChild(this.createInputText("bm-input-ty","Tile Y","","4")),l.appendChild(this.createInputText("bm-input-px","Pixl X","","4")),l.appendChild(this.createInputText("bm-input-py","Pixl Y","","4")),a.appendChild(l),a.appendChild(document.createElement("br"));let u=document.createElement("textarea");u.id=e,u.readOnly=!0,u.placeholder=`Status: Sleeping...
|
||||
Version: ${this.version}`,a.appendChild(u),t.appendChild(n),t.appendChild(document.createElement("hr")),t.appendChild(c),t.appendChild(document.createElement("hr")),t.appendChild(a),document.body.appendChild(t),this.handleDrag(t,o)}updateInnerHTML(e,t,n=!1){let o=document.getElementById(e);if(o){if(o instanceof HTMLInputElement){o.value=t;return}n?o.textContent=t:o.innerHTML=t}}createQuestionBox(e,t,n){let o=document.createElement("button");return o.id=e,o.className="bm-help",o.textContent="?",o.title=t,o.onclick=()=>{this.updateInnerHTML(n,t)},o}createInputText(e,t="",n="",o="",i=!1){let s=document.createElement("input");return s.id=e,s.type="text",s.placeholder=t,s.value=n,s.readOnly=i,s.maxLength=o,s}createInputCheckbox(e,t,n=!1){let o=document.createElement("label");o.textContent=e;let i=document.createElement("input");return i.type="checkbox",i.id=t,i.checked=n,o.prepend(i),o}handleDrag(e,t){let n=!1,o,i=0;t.addEventListener("mousedown",function(s){n=!0,o=s.clientX-e.getBoundingClientRect().left,i=s.clientY-e.getBoundingClientRect().top,document.body.style.userSelect="none",t.classList.add("dragging")}),t.addEventListener("touchstart",function(s){n=!0;let c=s?.touches?.[0];c&&(o=c.clientX-e.getBoundingClientRect().left,i=c.clientY-e.getBoundingClientRect().top,document.body.style.userSelect="none",t.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(s){n&&(e.style.left=s.clientX-o+"px",e.style.top=s.clientY-i+"px",e.style.right="")}),document.addEventListener("touchmove",function(s){if(n){let c=s?.touches?.[0];if(!c)return;e.style.left=c.clientX-o+"px",e.style.top=c.clientY-i+"px",s.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")}),document.addEventListener("touchend",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")})}};var h=class{constructor(){this.disableAll=!1}spontaneousResponseListener(e){window.addEventListener("message",t=>{let n=t.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);e.updateInnerHTML("bm-user-name",`Username: <b>${n.jsonData?.name}</b>`),e.updateInnerHTML("bm-user-droplets",`Droplets: <b>${new Intl.NumberFormat().format(n.jsonData?.droplets)}</b>`),e.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 x=GM_info.script.name.toString(),C=GM_info.script.version.toString();function v(d){let e=document.createElement("script");e.textContent=`(${d})();`,document.documentElement.appendChild(e),e.remove()}v(()=>{let d=window.fetch;window.fetch=async function(...e){let t=await d.apply(this,e),n=t.clone();if((n.headers.get("content-type")||"").includes("application/json")){let i=(e[0]instanceof Request?e[0]?.url:e[0])||"ignore";i=i.split("/").filter(Boolean).pop()||"ignore",console.log(`Sending JSON message about endpoint "${i}"`),n.json().then(s=>{window.postMessage({source:"blue-marble",endpoint:i,jsonData:s},"*")}).catch(s=>{console.error("BM - Failed to parse JSON:",s)})}return t}});var y=GM_getResourceText("CSS-BM-File");GM_addStyle(y);var p=document.createElement("link");p.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";p.rel="preload";p.as="style";p.onload="this.onload=null;this.rel='stylesheet'";document.head.appendChild(p);var E=new m(x,C);E.create();var w=new h;w.spontaneousResponseListener(E);console.log(`${x} (${C}) userscript has loaded!`);})();
|
||||
(()=>{var h=class{constructor(e,t){this.name=e,this.version=t}create(){let e="bm-output-status",t=document.createElement("div");t.id="bm-overlay",t.style.top="10px",t.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 i=document.createElement("img");i.src="https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/src/assets/Favicon.png",i.alt="Blue Marble Icon",n.appendChild(i);let s=document.createElement("h1");s.textContent=this.name,n.appendChild(s);let c=document.createElement("div");c.id="bm-contain-userinfo";let f=document.createElement("p");f.id="bm-user-name",f.textContent="Username:",c.appendChild(f);let C=document.createElement("p");C.id="bm-user-droplets",C.textContent="Droplets:",c.appendChild(C);let g=document.createElement("p");g.id="bm-user-nextlevel",g.textContent="Next level in...",c.appendChild(g);let a=document.createElement("div");a.id="bm-contain-automation",a.appendChild(this.createInputCheckbox("Stealth","bm-input-stealth",!0)),a.appendChild(this.createButtonQuestion("bm-help-stealth","Help: Waits for the website to make requests, instead of sending requests.",e)),a.appendChild(document.createElement("br")),a.appendChild(this.createInputCheckbox("Possessed","bm-input-possessed",!0)),a.appendChild(this.createButtonQuestion("bm-help-possessed","Help: Controls the website as if it were possessed.",e)),a.appendChild(document.createElement("br")),a.appendChild(this.createInputCheckbox("Panic","bm-input-panic")),a.appendChild(this.createButtonQuestion("bm-help-panic","Help: Stops placing for a while if it detects a user nearby.",e)),a.appendChild(document.createElement("br"));let l=document.createElement("div");l.id="bm-contain-coords";let d=document.createElement("button");d.id="bm-button-coords",d.className="bm-help",d.style="margin-top: 0",d.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 6"><circle cx="2" cy="2" r="2"></circle><path d="M2 6 L3.7 3 L0.3 3 Z"></path><circle cx="2" cy="2" r="0.7" fill="white"></circle></svg></svg>',d.onclick=()=>{},l.appendChild(d),l.appendChild(this.createInputText("bm-input-tx","Tile X","","4")),l.appendChild(this.createInputText("bm-input-ty","Tile Y","","4")),l.appendChild(this.createInputText("bm-input-px","Pixl X","","4")),l.appendChild(this.createInputText("bm-input-py","Pixl Y","","4")),a.appendChild(l),a.appendChild(document.createElement("br"));let u=document.createElement("div");u.appendChild(this.createButton("bm-button-start","Start")),u.appendChild(this.createButton("bm-button-start","Pause",!1)),u.appendChild(this.createButton("bm-button-start","Stop",!1)),a.appendChild(u),a.appendChild(document.createElement("br"));let m=document.createElement("textarea");m.id=e,m.readOnly=!0,m.placeholder=`Status: Sleeping...
|
||||
Version: ${this.version}`,a.appendChild(m),t.appendChild(n),t.appendChild(document.createElement("hr")),t.appendChild(c),t.appendChild(document.createElement("hr")),t.appendChild(a),document.body.appendChild(t),this.handleDrag(t,o)}updateInnerHTML(e,t,n=!1){let o=document.getElementById(e);if(o){if(o instanceof HTMLInputElement){o.value=t;return}n?o.textContent=t:o.innerHTML=t}}createButtonQuestion(e,t,n){let o=this.createButton(e,"?");return o.className="bm-help",o.title=t,o.onclick=()=>{this.updateInnerHTML(n,t)},o}createButton(e,t,n=!0){let o=document.createElement("button");return o.id=e,o.textContent=t,o.disabled=!n,o}createInputText(e,t="",n="",o="",i=!1){let s=document.createElement("input");return s.id=e,s.type="text",s.placeholder=t,s.value=n,s.readOnly=i,s.maxLength=o,s}createInputCheckbox(e,t,n=!1){let o=document.createElement("label");o.textContent=e;let i=document.createElement("input");return i.type="checkbox",i.id=t,i.checked=n,o.prepend(i),o}handleDrag(e,t){let n=!1,o,i=0;t.addEventListener("mousedown",function(s){n=!0,o=s.clientX-e.getBoundingClientRect().left,i=s.clientY-e.getBoundingClientRect().top,document.body.style.userSelect="none",t.classList.add("dragging")}),t.addEventListener("touchstart",function(s){n=!0;let c=s?.touches?.[0];c&&(o=c.clientX-e.getBoundingClientRect().left,i=c.clientY-e.getBoundingClientRect().top,document.body.style.userSelect="none",t.classList.add("dragging"))},{passive:!1}),document.addEventListener("mousemove",function(s){n&&(e.style.left=s.clientX-o+"px",e.style.top=s.clientY-i+"px",e.style.right="")}),document.addEventListener("touchmove",function(s){if(n){let c=s?.touches?.[0];if(!c)return;e.style.left=c.clientX-o+"px",e.style.top=c.clientY-i+"px",s.preventDefault()}},{passive:!1}),document.addEventListener("mouseup",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")}),document.addEventListener("touchend",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")}),document.addEventListener("touchcancel",function(){n=!1,document.body.style.userSelect="",t.classList.remove("dragging")})}};var b=class{constructor(){this.disableAll=!1}spontaneousResponseListener(e){window.addEventListener("message",t=>{let n=t.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);e.updateInnerHTML("bm-user-name",`Username: <b>${n.jsonData?.name}</b>`),e.updateInnerHTML("bm-user-droplets",`Droplets: <b>${new Intl.NumberFormat().format(n.jsonData?.droplets)}</b>`),e.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 x=GM_info.script.name.toString(),E=GM_info.script.version.toString();function y(r){let e=document.createElement("script");e.textContent=`(${r})();`,document.documentElement.appendChild(e),e.remove()}y(()=>{let r=window.fetch;window.fetch=async function(...e){let t=await r.apply(this,e),n=t.clone();if((n.headers.get("content-type")||"").includes("application/json")){let i=(e[0]instanceof Request?e[0]?.url:e[0])||"ignore";i=i.split("/").filter(Boolean).pop()||"ignore",console.log(`Sending JSON message about endpoint "${i}"`),n.json().then(s=>{window.postMessage({source:"blue-marble",endpoint:i,jsonData:s},"*")}).catch(s=>{console.error("BM - Failed to parse JSON:",s)})}return t}});var w=GM_getResourceText("CSS-BM-File");GM_addStyle(w);var p=document.createElement("link");p.href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";p.rel="preload";p.as="style";p.onload="this.onload=null;this.rel='stylesheet'";document.head.appendChild(p);var v=new h(x,E);v.create();var L=new b;L.spontaneousResponseListener(v);console.log(`${x} (${E}) userscript has loaded!`);})();
|
||||
|
|
|
|||
|
|
@ -35,7 +35,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-75-black?style=flat"></a>
|
||||
<a href="" target="_blank"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-77-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
4
package-lock.json
generated
|
|
@ -7,7 +7,7 @@
|
|||
"devDependencies": {
|
||||
"esbuild": "^0.25.0"
|
||||
},
|
||||
"version": "0.30.3"
|
||||
"version": "0.33.2"
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.8",
|
||||
|
|
@ -467,5 +467,5 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"version": "0.30.3"
|
||||
"version": "0.33.2"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.33.0",
|
||||
"version": "0.33.2",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "node build/build.js",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// ==UserScript==
|
||||
// @name Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.33.0
|
||||
// @version 0.33.2
|
||||
// @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
|
||||
|
|
|
|||
|
|
@ -59,13 +59,12 @@ div#bm-overlay {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* The user info container */
|
||||
#bm-contain-userinfo {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* The automation information container */
|
||||
#bm-contain-automation {
|
||||
/* The containers that need spacing from each-other */
|
||||
#bm-contain-userinfo,
|
||||
#bm-contain-automation,
|
||||
#bm-contain-coords,
|
||||
#bm-contain-buttons,
|
||||
#bm-output-status {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +102,44 @@ div#bm-overlay {
|
|||
fill: #111;
|
||||
}
|
||||
|
||||
/* Tile (x, y) & Pixel (x, y) input fields */
|
||||
#bm-contain-coords input[type="text"] {
|
||||
width: 7.5ch;
|
||||
margin-left: 1ch;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding: 0 0.5ch;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
/* Automation button container */
|
||||
#bn-contain-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
}
|
||||
|
||||
/* Automation button array buttons */
|
||||
#bn-contain-buttons button {
|
||||
background-color: lightslategray;
|
||||
border-radius: 1em;
|
||||
padding: 0 0.75ch;
|
||||
}
|
||||
|
||||
/* Automation button array buttons when hovered/selected */
|
||||
#bn-contain-buttons button:hover,
|
||||
#bn-contain-buttons button:focus {
|
||||
background-color: slategray;
|
||||
}
|
||||
|
||||
/* Automation button array buttons when disabled */
|
||||
#bn-contain-buttons button:disabled {
|
||||
background-color: dimgray;
|
||||
}
|
||||
|
||||
/* Output status area */
|
||||
#bm-output-status {
|
||||
font-size: small;
|
||||
|
|
@ -110,13 +147,4 @@ div#bm-overlay {
|
|||
padding: 0 0.5ch;
|
||||
height: 3.75em;
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* Tile (x, y) & Pixel (x, y) input fields */
|
||||
#bm-contain-coords input[type="text"] {
|
||||
width: 7.5ch;
|
||||
margin-left: 1ch;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding: 0 0.5ch;
|
||||
}
|
||||
|
|
@ -72,7 +72,7 @@ export class Overlay {
|
|||
));
|
||||
|
||||
// Adds the help icon for stealth mode
|
||||
containerAutomation.appendChild(this.createQuestionBox(
|
||||
containerAutomation.appendChild(this.createButtonQuestion(
|
||||
'bm-help-stealth',
|
||||
'Help: Waits for the website to make requests, instead of sending requests.',
|
||||
outputStatusId
|
||||
|
|
@ -88,7 +88,7 @@ export class Overlay {
|
|||
));
|
||||
|
||||
// Adds the help icon for possessed mode
|
||||
containerAutomation.appendChild(this.createQuestionBox(
|
||||
containerAutomation.appendChild(this.createButtonQuestion(
|
||||
'bm-help-possessed',
|
||||
'Help: Controls the website as if it were possessed.',
|
||||
outputStatusId
|
||||
|
|
@ -103,7 +103,7 @@ export class Overlay {
|
|||
));
|
||||
|
||||
// Adds the help icon for panic mode
|
||||
containerAutomation.appendChild(this.createQuestionBox(
|
||||
containerAutomation.appendChild(this.createButtonQuestion(
|
||||
'bm-help-panic',
|
||||
'Help: Stops placing for a while if it detects a user nearby.',
|
||||
outputStatusId
|
||||
|
|
@ -117,6 +117,7 @@ export class Overlay {
|
|||
const buttonCoords = document.createElement('button');
|
||||
buttonCoords.id = 'bm-button-coords';
|
||||
buttonCoords.className = 'bm-help';
|
||||
buttonCoords.style = 'margin-top: 0';
|
||||
buttonCoords.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 6"><circle cx="2" cy="2" r="2"></circle><path d="M2 6 L3.7 3 L0.3 3 Z"></path><circle cx="2" cy="2" r="0.7" fill="white"></circle></svg></svg>';
|
||||
buttonCoords.onclick = () => {
|
||||
//this.updateInnerHTML(outputId, tooltip); // Update output element text with tooltip on click
|
||||
|
|
@ -133,6 +134,18 @@ export class Overlay {
|
|||
|
||||
containerAutomation.appendChild(document.createElement('br')); // Line break
|
||||
|
||||
const containerAutomationButtons = document.createElement('div'); // Button array for bot
|
||||
containerAutomationButtons.id = 'bm-contain-buttons';
|
||||
|
||||
// Button array for bot
|
||||
containerAutomationButtons.appendChild(this.createButton('bm-button-start', 'Start'));
|
||||
containerAutomationButtons.appendChild(this.createButton('bm-button-start', 'Pause', false));
|
||||
containerAutomationButtons.appendChild(this.createButton('bm-button-start', 'Stop', false));
|
||||
|
||||
containerAutomation.appendChild(containerAutomationButtons); // Adds button container to automation container
|
||||
|
||||
containerAutomation.appendChild(document.createElement('br')); // Line break
|
||||
|
||||
const outputStatus = document.createElement('textarea'); // Outputs bot status
|
||||
outputStatus.id = outputStatusId;
|
||||
outputStatus.readOnly = true; // Read-only input field
|
||||
|
|
@ -185,16 +198,29 @@ export class Overlay {
|
|||
* @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 = () => {
|
||||
createButtonQuestion(id, tooltip, outputId) {
|
||||
const buttonQuestion = this.createButton(id, '?'); // Creates a button
|
||||
buttonQuestion.className = 'bm-help';
|
||||
buttonQuestion.title = tooltip; // Tooltip on hover
|
||||
buttonQuestion.onclick = () => {
|
||||
this.updateInnerHTML(outputId, tooltip); // Update output element text with tooltip on click
|
||||
}
|
||||
return questionBox;
|
||||
return buttonQuestion;
|
||||
}
|
||||
|
||||
/** Creates a button
|
||||
* @param {string} id - The ID of the button
|
||||
* @param {string} text - The text content of the button
|
||||
* @param {boolean} [isEnabled] - (Optional) Is the button enabled? Default is true
|
||||
* @returns {HTMLButtonElement} HTML Button Element
|
||||
* @since 0.33.1
|
||||
*/
|
||||
createButton(id, text, isEnabled=true) {
|
||||
const button = document.createElement('button');
|
||||
button.id = id;
|
||||
button.textContent = text;
|
||||
button.disabled = !isEnabled;
|
||||
return button;
|
||||
}
|
||||
|
||||
/** Creates a text input field
|
||||
|
|
|
|||
Loading…
Reference in a new issue