mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-04-20 18:32:04 +00:00
Added coords UI
This commit is contained in:
SwingTheVine
parent
8317405624
commit
5c027f0552
8 changed files with 79 additions and 14 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-output-status{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%;margin-top:.5em}
|
||||
#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}#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}
|
||||
|
|
|
|||
5
dist/BlueMarble.user.js
vendored
5
dist/BlueMarble.user.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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-72-black?style=flat"></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 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.29.3"
|
||||
"version": "0.30.3"
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.8",
|
||||
|
|
@ -467,5 +467,5 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"version": "0.29.3"
|
||||
"version": "0.30.3"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.30.0",
|
||||
"version": "0.30.3",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "node build/build.js",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// ==UserScript==
|
||||
// @name Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.30.0
|
||||
// @version 0.30.3
|
||||
// @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
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/* @since 0.5.1 */
|
||||
|
||||
/* The entire overlay */
|
||||
#bm-overlay {
|
||||
position: fixed;
|
||||
background-color: rgba(21, 48, 99, 0.9);
|
||||
|
|
@ -9,6 +10,7 @@
|
|||
z-index: 9000;
|
||||
}
|
||||
|
||||
/* The entire overlay BUT it is cascading */
|
||||
div#bm-overlay {
|
||||
/* Font stack is as follows:
|
||||
* Highest Priority (Roboto Mono)
|
||||
|
|
@ -21,6 +23,7 @@ div#bm-overlay {
|
|||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* The drag bar */
|
||||
#bm-bar-drag {
|
||||
margin-bottom: 0.5em;
|
||||
/* 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 */
|
||||
|
|
@ -30,14 +33,17 @@ div#bm-overlay {
|
|||
height: 1em;
|
||||
}
|
||||
|
||||
/* When the overlay is being dragged */
|
||||
#bm-bar-drag.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* The container for the overlay header */
|
||||
#bm-contain-header {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* The Blue Marble image */
|
||||
#bm-overlay img {
|
||||
display: inline-block;
|
||||
height: 2.5em;
|
||||
|
|
@ -45,6 +51,7 @@ div#bm-overlay {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* The Blue Marble header */
|
||||
#bm-overlay h1 {
|
||||
display: inline-block;
|
||||
font-size: x-large;
|
||||
|
|
@ -52,23 +59,28 @@ div#bm-overlay {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* The user info container */
|
||||
#bm-contain-userinfo {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* The automation information container */
|
||||
#bm-contain-automation {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
/* Checkboxes in the automation container */
|
||||
#bm-contain-automation input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5ch;
|
||||
}
|
||||
|
||||
/* Checkbox label/flavor text in the automation container */
|
||||
#bm-contain-automation label {
|
||||
margin-right: 0.5ch;
|
||||
}
|
||||
|
||||
/* Question Mark button */
|
||||
.bm-help {
|
||||
border: white 1px solid;
|
||||
border-radius: 1em;
|
||||
|
|
@ -79,6 +91,14 @@ div#bm-overlay {
|
|||
line-height: 1.25em;
|
||||
}
|
||||
|
||||
/* Pin button */
|
||||
#button-coords svg {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
fill: #111;
|
||||
}
|
||||
|
||||
/* Output status area */
|
||||
#bm-output-status {
|
||||
font-size: small;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -86,4 +106,8 @@ div#bm-overlay {
|
|||
height: 3.75em;
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
#bm-contain-coords input[type="text"] {
|
||||
width: 7ch;
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@ export class Overlay {
|
|||
containerAutomation.id = 'bm-contain-automation';
|
||||
|
||||
// Stealth Mode checkbox
|
||||
containerAutomation.appendChild(this.createLineCheckbox(
|
||||
containerAutomation.appendChild(this.createInputCheckbox(
|
||||
'Stealth',
|
||||
'bm-input-stealth',
|
||||
true
|
||||
|
|
@ -81,7 +81,7 @@ export class Overlay {
|
|||
containerAutomation.appendChild(document.createElement('br')); // Line break
|
||||
|
||||
// Possessed Mode checkbox
|
||||
containerAutomation.appendChild(this.createLineCheckbox(
|
||||
containerAutomation.appendChild(this.createInputCheckbox(
|
||||
'Possessed',
|
||||
'bm-input-possessed',
|
||||
true
|
||||
|
|
@ -97,7 +97,7 @@ export class Overlay {
|
|||
containerAutomation.appendChild(document.createElement('br')); // Line break
|
||||
|
||||
// Panic mode checkbox
|
||||
containerAutomation.appendChild(this.createLineCheckbox(
|
||||
containerAutomation.appendChild(this.createInputCheckbox(
|
||||
'Panic',
|
||||
'bm-input-panic'
|
||||
));
|
||||
|
|
@ -111,10 +111,32 @@ export class Overlay {
|
|||
|
||||
containerAutomation.appendChild(document.createElement('br')); // Line break
|
||||
|
||||
const containerAutomationCoords = document.createElement('div'); // Coords container
|
||||
containerAutomationCoords.id = 'bm-contain-coords';
|
||||
|
||||
const buttonCoords = document.createElement('button');
|
||||
buttonCoords.id = 'bm-button-coords';
|
||||
buttonCoords.className = 'bm-help';
|
||||
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
|
||||
}
|
||||
containerAutomationCoords.appendChild(buttonCoords); // Adds the coordinate button to the automation container
|
||||
|
||||
// Tile (x,y) and Pixel (x,y) input fields
|
||||
containerAutomationCoords.appendChild(this.createInputText('bm-input-tx', 'Tile X'));
|
||||
containerAutomationCoords.appendChild(this.createInputText('bm-input-ty', 'Tile Y'));
|
||||
containerAutomationCoords.appendChild(this.createInputText('bm-input-px', 'Pixel X'));
|
||||
containerAutomationCoords.appendChild(this.createInputText('bm-input-py', 'Pixel Y'));
|
||||
|
||||
containerAutomation.appendChild(containerAutomationCoords); // Adds coord 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
|
||||
outputStatus.placeholder = 'Status: Sleeping...'; // Default text value
|
||||
outputStatus.placeholder = `Status: Sleeping...\nVersion: ${this.version}`; // Default text value
|
||||
containerAutomation.appendChild(outputStatus);
|
||||
|
||||
// Construction of the overlay element
|
||||
|
|
@ -175,14 +197,32 @@ export class Overlay {
|
|||
return questionBox;
|
||||
}
|
||||
|
||||
/** Creates the checkbox line/label
|
||||
/** Creates a text input field
|
||||
* @param {string} inputId - The ID for the text input
|
||||
* @param {string} [placeholder] - (Optional) The placeholder text of the input
|
||||
* @param {string} [text] - (Optional) The text content of the input
|
||||
* @param {boolean} [isReadOnly] - (Optional) Should the input be readOnly? False by default
|
||||
* @returns {HTMLInputElement} HTML Input Element
|
||||
* @since 0.30.3
|
||||
*/
|
||||
createInputText(inputId, placeholder='', text='', isReadOnly=false) {
|
||||
const input = document.createElement('input');
|
||||
input.id = inputId;
|
||||
input.type = 'text';
|
||||
input.placeholder = placeholder;
|
||||
input.value = text;
|
||||
input.readOnly = isReadOnly;
|
||||
return input;
|
||||
}
|
||||
|
||||
/** Creates the checkbox input
|
||||
* @param {string} labelText - The text for the label
|
||||
* @param {string} checkboxId - The ID for the checkbox input
|
||||
* @param {boolean} [checkboxDefault] - (Optional) The default status of the checkbox (true = checked). False by default.
|
||||
* @returns {HTMLLabelElement} HTML Label Element with Input child
|
||||
* @since 0.27.1
|
||||
*/
|
||||
createLineCheckbox(labelText, checkboxId, checkboxDefault=false) {
|
||||
createInputCheckbox(labelText, checkboxId, checkboxDefault=false) {
|
||||
const label = document.createElement('label');
|
||||
label.textContent = labelText;
|
||||
const input = document.createElement('input');
|
||||
|
|
|
|||
Loading…
Reference in a new issue