Creepso/Wplace-BlueMarble
1
0
Fork 0
mirror of https://github.com/SwingTheVine/Wplace-BlueMarble.git synced 2026-03-11 21:26:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Refactored main BM window logic

Browse source
This commit is contained in:
SwingTheVine 2026-02-15 18:46:53 -05:00
parent a9d95ce00a
commit d97a460e9a
10 changed files with 248 additions and 487 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
dist/BlueMarble-For-GreasyFork.user.js vendored
View file

@ -2,7 +2,7 @@
// @name Blue Marble
// @name:en Blue Marble
// @namespace https://github.com/SwingTheVine/
// @version 0.88.133
// @version 0.88.144
// @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.
// @description:en 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
@ -37,7 +37,7 @@
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
// src/Overlay.js
var _Overlay_instances, createElement_fn;
var _Overlay_instances, createElement_fn, applyAttribute_fn;
var Overlay = class {
/** Constructor for the Overlay class.
* @param {string} name - The name of the userscript
@ -449,6 +449,8 @@
}) {
const properties = {
"type": "file",
"tabindex": "-1",
"aria-hidden": "true",
"style": "display: none !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; opacity: 0 !important;"
};
const text = additionalProperties["textContent"] ?? "";
@ -459,8 +461,6 @@
const button = __privateMethod(this, _Overlay_instances, createElement_fn).call(this, "button", { "textContent": text });
this.buildElement();
this.buildElement();
input.setAttribute("tabindex", "-1");
input.setAttribute("aria-hidden", "true");
button.addEventListener("click", () => {
input.click();
});
@ -521,6 +521,52 @@
element.innerHTML = html;
}
}
/** Handles the minimization logic for windows spawned by Blue Marble
* @param {HTMLButtonElement} button - The UI button that triggered this minimization event
* @since 0.88.142
*/
handleMinimization(button) {
button.disabled = true;
button.style.textDecoration = "none";
const window2 = button.closest(".bm-window");
const dragbar = button.closest(".bm-dragbar");
const header = window2.querySelector("h1");
const windowContent = window2.querySelector(".bm-window-content");
if (button.dataset["buttonStatus"] == "expanded") {
const dragbarHeader1 = header.cloneNode(true);
const dragbarHeader1Text = dragbarHeader1.textContent;
button.parentNode.appendChild(dragbarHeader1);
windowContent.style.height = windowContent.scrollHeight + "px";
window2.style.width = window2.scrollWidth + "px";
windowContent.style.height = "0";
windowContent.addEventListener("transitionend", function handler() {
windowContent.style.display = "none";
button.disabled = false;
button.style.textDecoration = "";
windowContent.removeEventListener("transitionend", handler);
});
button.textContent = "\u25B6";
button.dataset["buttonStatus"] = "collapsed";
button.ariaLabel = `Unminimize window "${dragbarHeader1Text}"`;
} else {
const dragbarHeader1 = dragbar.querySelector("h1");
const dragbarHeader1Text = dragbarHeader1.textContent;
dragbarHeader1.remove();
windowContent.style.display = "";
windowContent.style.height = "0";
window2.style.width = "";
windowContent.style.height = windowContent.scrollHeight + "px";
windowContent.addEventListener("transitionend", function handler() {
windowContent.style.height = "";
button.disabled = false;
button.style.textDecoration = "";
windowContent.removeEventListener("transitionend", handler);
});
button.textContent = "\u25BC";
button.dataset["buttonStatus"] = "expanded";
button.ariaLabel = `Minimize window "${dragbarHeader1Text}"`;
}
}
/** Handles dragging of the overlay.
* Uses requestAnimationFrame for smooth animations and GPU-accelerated transforms.
* Use the appropriate CSS selectors.
@ -671,13 +717,43 @@
this.currentParent = element;
}
for (const [property, value] of Object.entries(properties)) {
element[property != "class" ? property : "className"] = value;
__privateMethod(this, _Overlay_instances, applyAttribute_fn).call(this, element, property, value);
}
for (const [property, value] of Object.entries(additionalProperties)) {
element[property != "class" ? property : "className"] = value;
__privateMethod(this, _Overlay_instances, applyAttribute_fn).call(this, element, property, value);
}
return element;
};
/** Applies an attribute to an element
* @param {HTMLElement} element - The element to apply the attribute to
* @param {String} property - The name of the attribute to apply
* @param {String} value - The value of the attribute
* @since 0.88.136
*/
applyAttribute_fn = function(element, property, value) {
if (property == "class") {
element.classList.add(...value.split(/\s+/));
} else if (property == "for") {
element.htmlFor = value;
} else if (property == "tabindex") {
element.tabIndex = Number(value);
} else if (property == "readonly") {
element.readOnly = value == "true" || value == "1";
} else if (property == "maxlength") {
element.maxLength = Number(value);
} else if (property.startsWith("data")) {
element.dataset[property.slice(5).split("-").map(
(part, i) => i == 0 ? part : part[0].toUpperCase() + part.slice(1)
).join("")] = value;
} else if (property.startsWith("aria")) {
const camelCase = property.slice(5).split("-").map(
(part, i) => i == 0 ? part : part[0].toUpperCase() + part.slice(1)
).join("");
element["aria" + camelCase[0].toUpperCase() + camelCase.slice(1)] = value;
} else {
element[property] = value;
}
};
// src/observers.js
var Observers = class {
@ -1698,36 +1774,8 @@ Time Since Blink: ${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String
observer.observe(document.body, { childList: true, subtree: true });
}
function buildOverlayMain() {
overlayMain.addDiv({ "id": "bm-window-main", "class": "bm-window", "style": "top: 10px; right: 75px;" }).addDiv({ "class": "bm-dragbar" }).addDiv().addButton({ "class": "bm-button-circle", "textContent": "\u25BC" }, (instance, button) => {
button.onclick = () => {
const window2 = button.closest(".bm-window");
const dragbar = button.closest(".bm-dragbar");
const header = window2.querySelector("h1");
const windowContent = window2.querySelector(".bm-window-content");
if (button.textContent == "\u25BC") {
const dragbarHeader1 = header.cloneNode(true);
button.parentNode.appendChild(dragbarHeader1);
windowContent.style.height = windowContent.scrollHeight + "px";
window2.style.width = window2.scrollWidth + "px";
windowContent.style.height = "0";
windowContent.addEventListener("transitionend", function handler() {
windowContent.style.display = "none";
windowContent.removeEventListener("transitionend", handler);
});
} else {
const dragbarHeader1 = dragbar.querySelector("h1");
dragbarHeader1.remove();
windowContent.style.display = "";
windowContent.style.height = "0";
window2.style.width = "";
windowContent.style.height = windowContent.scrollHeight + "px";
windowContent.addEventListener("transitionend", function handler() {
windowContent.style.height = "";
windowContent.removeEventListener("transitionend", handler);
});
}
button.textContent = button.textContent == "\u25BC" ? "\u25B6" : "\u25BC";
};
overlayMain.addDiv({ "id": "bm-window-main", "class": "bm-window", "style": "top: 10px; right: 75px;" }).addDiv({ "class": "bm-dragbar" }).addDiv().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Blue Marble"', "data-button-status": "expanded" }, (instance, button) => {
button.onclick = () => instance.handleMinimization(button);
}).buildElement().buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container" }).addImg({ "class": "bm-favicon", "src": "https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png" }).buildElement().addHeader(1, { "textContent": name }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container" }).addP({ "id": "bm-user-droplets", "textContent": "Droplets:" }).buildElement().addP({ "id": "bm-user-nextlevel", "textContent": "Next level in..." }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container" }).addDiv({ "class": "bm-container" }).addButton(
{ "class": "bm-button-circle bm-button-pin", "style": "margin-top: 0;", "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>' },
(instance, button) => {
@ -1755,25 +1803,21 @@ Time Since Blink: ${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String
}
event.preventDefault();
});
const handler = () => persistCoords();
input.addEventListener("input", handler);
input.addEventListener("change", handler);
}).buildElement().addInput({ "type": "number", "id": "bm-input-ty", "class": "bm-input-coords", "placeholder": "Tl Y", "min": 0, "max": 2047, "step": 1, "required": true }, (instance, input) => {
const handler = () => persistCoords();
input.addEventListener("input", handler);
input.addEventListener("change", handler);
}).buildElement().addInput({ "type": "number", "id": "bm-input-px", "class": "bm-input-coords", "placeholder": "Px X", "min": 0, "max": 2047, "step": 1, "required": true }, (instance, input) => {
const handler = () => persistCoords();
input.addEventListener("input", handler);
input.addEventListener("change", handler);
}).buildElement().addInput({ "type": "number", "id": "bm-input-py", "class": "bm-input-coords", "placeholder": "Px Y", "min": 0, "max": 2047, "step": 1, "required": true }, (instance, input) => {
const handler = () => persistCoords();
input.addEventListener("input", handler);
input.addEventListener("change", handler);
}).buildElement().buildElement().addDiv({ "class": "bm-container" }).addInputFile({ "class": "bm-input-file", "textContent": "Upload Template", "accept": "image/png, image/jpeg, image/webp, image/bmp, image/gif" }).buildElement().buildElement().addDiv({ "class": "bm-container bm-flex-between" }).addButton({ "textContent": "Enable" }, (instance, button) => {
}).buildElement().addInput({ "type": "number", "id": "bm-input-ty", "class": "bm-input-coords", "placeholder": "Tl Y", "min": 0, "max": 2047, "step": 1, "required": true }).buildElement().addInput({ "type": "number", "id": "bm-input-px", "class": "bm-input-coords", "placeholder": "Px X", "min": 0, "max": 2047, "step": 1, "required": true }).buildElement().addInput({ "type": "number", "id": "bm-input-py", "class": "bm-input-coords", "placeholder": "Px Y", "min": 0, "max": 2047, "step": 1, "required": true }).buildElement().buildElement().addDiv({ "class": "bm-container" }).addInputFile({ "class": "bm-input-file", "textContent": "Upload Template", "accept": "image/png, image/jpeg, image/webp, image/bmp, image/gif" }).buildElement().buildElement().addDiv({ "class": "bm-container bm-flex-between" }).addButton({ "textContent": "Disable", "data-button-status": "shown" }, (instance, button) => {
button.onclick = () => {
instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(true);
instance.handleDisplayStatus(`Enabled templates!`);
button.disabled = true;
if (button.dataset["buttonStatus"] == "shown") {
instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(false);
button.dataset["buttonStatus"] = "hidden";
button.textContent = "Enable";
instance.handleDisplayStatus(`Disabled templates!`);
} else {
instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(true);
button.dataset["buttonStatus"] = "shown";
button.textContent = "Disable";
instance.handleDisplayStatus(`Enabled templates!`);
}
button.disabled = false;
};
}).buildElement().addButton({ "textContent": "Create" }, (instance, button) => {
button.onclick = () => {
@ -1809,27 +1853,19 @@ Time Since Blink: ${String(Math.floor(elapsed / 6e4)).padStart(2, "0")}:${String
templateManager.createTemplate(input.files[0], input.files[0]?.name.replace(/\.[^/.]+$/, ""), [Number(coordTlX.value), Number(coordTlY.value), Number(coordPxX.value), Number(coordPxY.value)]);
instance.handleDisplayStatus(`Drew to canvas!`);
};
}).buildElement().addButton({ "textContent": "Disable" }, (instance, button) => {
}).buildElement().addButton({ "textContent": "Filter" }, (instance, button) => {
button.onclick = () => {
instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(false);
instance.handleDisplayStatus(`Disabled templates!`);
};
}).buildElement().buildElement().addDiv({ "class": "bm-container" }).addTextarea({ "id": overlayMain.outputStatusId, "placeholder": `Status: Sleeping...
Version: ${version}`, "readOnly": true }).buildElement().buildElement().addDiv({ "class": "bm-container bm-flex-between", "style": "margin-bottom: 0;" }).addDiv({ "class": "bm-flex-between" }).addButton(
{ "class": "bm-button-circle", "innerHTML": "\u{1F3A8}", "title": "Template Color Converter" },
(instance, button) => {
button.addEventListener("click", () => {
window.open("https://pepoafonso.github.io/color_converter_wplace/", "_blank", "noopener noreferrer");
});
}
).buildElement().addButton(
{ "class": "bm-button-circle", "innerHTML": "\u{1F310}", "title": "Official Blue Marble Website" },
(instance, button) => {
button.addEventListener("click", () => {
window.open("https://bluemarble.lol/", "_blank", "noopener noreferrer");
});
}
).buildElement().buildElement().addSmall({ "textContent": "Made by SwingTheVine", "style": "margin-top: auto;" }).buildElement().buildElement().buildElement().buildElement().buildElement().buildOverlay(document.body);
Version: ${version}`, "readOnly": true }).buildElement().buildElement().addDiv({ "class": "bm-container bm-flex-between", "style": "margin-bottom: 0;" }).addDiv({ "class": "bm-flex-between" }).addButton({ "class": "bm-button-circle", "innerHTML": "\u{1F3A8}", "title": "Template Color Converter" }, (instance, button) => {
button.onclick = () => {
window.open("https://pepoafonso.github.io/color_converter_wplace/", "_blank", "noopener noreferrer");
};
}).buildElement().addButton({ "class": "bm-button-circle", "innerHTML": "\u{1F310}", "title": "Official Blue Marble Website" }, (instance, button) => {
button.onclick = () => {
window.open("https://bluemarble.lol/", "_blank", "noopener noreferrer");
};
}).buildElement().buildElement().addSmall({ "textContent": "Made by SwingTheVine", "style": "margin-top: auto;" }).buildElement().buildElement().buildElement().buildElement().buildElement().buildOverlay(document.body);
}
function buildTelemetryOverlay(overlay) {
overlay.addDiv({ "id": "bm-overlay-telemetry", style: "top: 0px; left: 0px; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; z-index: 9999;" }).addDiv({ "id": "bm-contain-all-telemetry", style: "display: flex; flex-direction: column; align-items: center;" }).addDiv({ "id": "bm-contain-header-telemetry", style: "margin-top: 10%;" }).addHeader(1, { "textContent": `${name} Telemetry` }).buildElement().buildElement().addDiv({ "id": "bm-contain-telemetry", style: "max-width: 50%; overflow-y: auto; max-height: 80vh;" }).addHr().buildElement().addBr().buildElement().addDiv({ "style": "width: fit-content; margin: auto; text-align: center;" }).addButton({ "id": "bm-button-telemetry-more", "textContent": "More Information" }, (instance, button) => {

4
dist/BlueMarble-Standalone.user.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/BlueMarble.user.css vendored
View file

File diff suppressed because one or more lines are too long

4
dist/BlueMarble.user.js vendored
View file

File diff suppressed because one or more lines are too long

2
docs/README.md
View file

@ -51,7 +51,7 @@
<a href="https://discord.gg/tpeBPy46hf" target="_blank" rel="noopener noreferrer"><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="https://bluemarble.lol/" target="_blank" rel="noopener noreferrer"><img alt="Blue Marble Website" src="https://img.shields.io/badge/Blue_Marble_Website-crqch-blue?style=flat&logo=globe&logoColor=white"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="WakaTime" src="https://img.shields.io/badge/Coding_Time-111hrs_12mins-blue?style=flat&logo=wakatime&logoColor=black&logoSize=auto&labelColor=white"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-631-black?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-642-black?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Lines of Code" src="https://img.shields.io/badge/Lines_Of_Code-498-blue?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Comments" src="https://img.shields.io/badge/Lines_Of_Comments-498-blue?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Compression" src="https://img.shields.io/badge/Compression-70.19%25-blue"></a>

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "wplace-bluemarble",
"version": "0.88.133",
"version": "0.88.144",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "wplace-bluemarble",
"version": "0.88.133",
"version": "0.88.144",
"devDependencies": {
"esbuild": "^0.25.0",
"jsdoc": "^4.0.5",

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "wplace-bluemarble",
"version": "0.88.133",
"version": "0.88.144",
"type": "module",
"homepage": "https://bluemarble.lol/",
"repository": {

2
src/BlueMarble.meta.js
View file

@ -2,7 +2,7 @@
// @name Blue Marble
// @name:en Blue Marble
// @namespace https://github.com/SwingTheVine/
// @version 0.88.133
// @version 0.88.144
// @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.
// @description:en 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

106
src/Overlay.js
View file

@ -73,17 +73,50 @@ export default class Overlay {
// For every passed in property (shared by all like-elements), apply the it to the element
for (const [property, value] of Object.entries(properties)) {
element[(property != 'class') ? property : 'className'] = value; // if the property is 'class', pass in 'className' instead
this.#applyAttribute(element, property, value);
}
// For every passed in additional property, apply the it to the element
for (const [property, value] of Object.entries(additionalProperties)) {
element[(property != 'class') ? property : 'className'] = value; // if the property is 'class', pass in 'className' instead
this.#applyAttribute(element, property, value);
}
return element;
}
/** Applies an attribute to an element
* @param {HTMLElement} element - The element to apply the attribute to
* @param {String} property - The name of the attribute to apply
* @param {String} value - The value of the attribute
* @since 0.88.136
*/
#applyAttribute(element, property, value) {
if (property == 'class') {
element.classList.add(...value.split(/\s+/)); // converts `'foo bar'` to `'foo', 'bar'` which is accepted
} else if (property == 'for') {
element.htmlFor = value;
} else if (property == 'tabindex') {
element.tabIndex = Number(value);
} else if (property == 'readonly') {
element.readOnly = ((value == 'true') || (value == '1'));
} else if (property == 'maxlength') {
element.maxLength = Number(value);
} else if (property.startsWith('data')) {
element.dataset[
property.slice(5).split('-').map(
(part, i) => (i == 0) ? part : part[0].toUpperCase() + part.slice(1)
).join('')
] = value;
} else if (property.startsWith('aria')) {
const camelCase = property.slice(5).split('-').map(
(part, i) => (i == 0) ? part : part[0].toUpperCase() + part.slice(1)
).join('');
element['aria' + camelCase[0].toUpperCase() + camelCase.slice(1)] = value;
} else {
element[property] = value;
}
}
/** Finishes building an element.
* Call this after you are finished adding children.
* If the element will have no children, call it anyways.
@ -505,6 +538,8 @@ export default class Overlay {
const properties = {
'type': 'file',
'tabindex': '-1',
'aria-hidden': 'true',
'style': 'display: none !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; opacity: 0 !important;'
}; // Complete file input hiding to prevent native browser text interference
const text = additionalProperties['textContent'] ?? ''; // Retrieves the text content
@ -519,8 +554,8 @@ export default class Overlay {
this.buildElement(); // Signifies that we are done adding children to the container
// Prevent file input from being accessible or visible by screen-readers and tabbing
input.setAttribute('tabindex', '-1');
input.setAttribute('aria-hidden', 'true');
//input.setAttribute('tabindex', '-1');
//input.setAttribute('aria-hidden', 'true');
button.addEventListener('click', () => {
input.click(); // Clicks the file input
@ -592,6 +627,69 @@ export default class Overlay {
}
}
/** Handles the minimization logic for windows spawned by Blue Marble
* @param {HTMLButtonElement} button - The UI button that triggered this minimization event
* @since 0.88.142
*/
handleMinimization(button) {
button.disabled = true; // Disables the button until the transition ends
button.style.textDecoration = 'none'; // Disables the disabled button text decoration strikethrough line
const window = button.closest('.bm-window'); // Get the window
const dragbar = button.closest('.bm-dragbar'); // Get the dragbar
const header = window.querySelector('h1'); // Get the header
const windowContent = window.querySelector('.bm-window-content'); // Get the window content container
// If window content is open...
if (button.dataset['buttonStatus'] == 'expanded') {
// ...we want to close it
// Makes a clone of the h1 element inside the window, and adds it to the dragbar
const dragbarHeader1 = header.cloneNode(true);
const dragbarHeader1Text = dragbarHeader1.textContent;
button.parentNode.appendChild(dragbarHeader1);
// Logic for the transition animation to collapse the window
windowContent.style.height = windowContent.scrollHeight + 'px';
window.style.width = window.scrollWidth + 'px'; // So the width of the window does not change due to the lack of content
windowContent.style.height = '0'; // Set the height to 0px
windowContent.addEventListener('transitionend', function handler() { // Add an event listener to cleanup once the minimize transition is complete
windowContent.style.display = 'none'; // Changes "display" to "none" for screen readers
button.disabled = false; // Enables the button
button.style.textDecoration = ''; // Resets the text decoration to default
windowContent.removeEventListener('transitionend', handler); // Removes the event listener
});
button.textContent = '▶'; // Swap button icon
button.dataset['buttonStatus'] = 'collapsed'; // Swap button status tracker
button.ariaLabel = `Unminimize window "${dragbarHeader1Text}"`; // Screen reader label
} else {
// Else, the window is closed, and we want to open it
// Deletes the h1 element inside the dragbar
const dragbarHeader1 = dragbar.querySelector('h1');
const dragbarHeader1Text = dragbarHeader1.textContent;
dragbarHeader1.remove();
// Logic for the transition animation to expand the window
windowContent.style.display = ''; // Resets display to default
windowContent.style.height = '0'; // Sets the height to 0
window.style.width = ''; // Resets the window width to default
windowContent.style.height = windowContent.scrollHeight + 'px'; // Change the height back to normal
windowContent.addEventListener('transitionend', function handler() { // Add an event listener to cleanup once the minimize transition is complete
windowContent.style.height = ''; // Changes the height back to default
button.disabled = false; // Enables the button
button.style.textDecoration = ''; // Resets the text decoration to default
windowContent.removeEventListener('transitionend', handler); // Removes the event listener
});
button.textContent = '▼'; // Swap button icon
button.dataset['buttonStatus'] = 'expanded'; // Swap button status tracker
button.ariaLabel = `Minimize window "${dragbarHeader1Text}"`; // Screen reader label
}
}
/** Handles dragging of the overlay.
* Uses requestAnimationFrame for smooth animations and GPU-accelerated transforms.
* Use the appropriate CSS selectors.

429
src/main.js
View file

@ -276,36 +276,8 @@ function buildOverlayMain() {
overlayMain.addDiv({'id': 'bm-window-main', 'class': 'bm-window', 'style': 'top: 10px; right: 75px;'})
.addDiv({'class': 'bm-dragbar'})
.addDiv()
.addButton({'class': 'bm-button-circle', 'textContent': '▼'}, (instance, button) => {
button.onclick = () => {
const window = button.closest('.bm-window'); // Get the window
const dragbar = button.closest('.bm-dragbar'); // Get the dragbar
const header = window.querySelector('h1'); // Get the header
const windowContent = window.querySelector('.bm-window-content'); // Get the window content container
if (button.textContent == '▼') { // If window content is open...
const dragbarHeader1 = header.cloneNode(true); // Makes a copy of the header 1
button.parentNode.appendChild(dragbarHeader1); // Adds the header to the dragbar
windowContent.style.height = windowContent.scrollHeight + 'px';
window.style.width = window.scrollWidth + 'px'; // So the width of the window does not change due to the lack of content
windowContent.style.height = '0'; // Set the height to 0px
windowContent.addEventListener('transitionend', function handler() { // Add an event listener to cleanup once the minimize transition is complete
windowContent.style.display = 'none'; // Changes "display" to "none" for screen readers
windowContent.removeEventListener('transitionend', handler); // Removes the event listener
});
} else { // Else, the window is closed
const dragbarHeader1 = dragbar.querySelector('h1'); // Get the header 1
dragbarHeader1.remove(); // Removes the dragbar header 1
windowContent.style.display = ''; // Resets display to default
windowContent.style.height = '0'; // Sets the height to 0
window.style.width = ''; // Resets the window width to default
windowContent.style.height = windowContent.scrollHeight + 'px'; // Change the height back to normal
windowContent.addEventListener('transitionend', function handler() { // Add an event listener to cleanup once the minimize transition is complete
windowContent.style.height = ''; // Changes the height back to default
windowContent.removeEventListener('transitionend', handler); // Removes the event listener
});
}
button.textContent = (button.textContent == '▼') ? '▶' : '▼'; // Swap button icon
}
.addButton({'class': 'bm-button-circle', 'textContent': '▼', 'aria-label': 'Minimize window "Blue Marble"', 'data-button-status': 'expanded'}, (instance, button) => {
button.onclick = () => instance.handleMinimization(button);
}).buildElement()
.buildElement()
.buildElement()
@ -350,40 +322,37 @@ function buildOverlayMain() {
}
event.preventDefault(); //prevent the pasting of the original paste that would overide the split value
})
const handler = () => persistCoords();
input.addEventListener('input', handler);
input.addEventListener('change', handler);
}).buildElement()
.addInput({'type': 'number', 'id': 'bm-input-ty', 'class': 'bm-input-coords', 'placeholder': 'Tl Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}, (instance, input) => {
const handler = () => persistCoords();
input.addEventListener('input', handler);
input.addEventListener('change', handler);
}).buildElement()
.addInput({'type': 'number', 'id': 'bm-input-px', 'class': 'bm-input-coords', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1, 'required': true}, (instance, input) => {
const handler = () => persistCoords();
input.addEventListener('input', handler);
input.addEventListener('change', handler);
}).buildElement()
.addInput({'type': 'number', 'id': 'bm-input-py', 'class': 'bm-input-coords', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}, (instance, input) => {
const handler = () => persistCoords();
input.addEventListener('input', handler);
input.addEventListener('change', handler);
}).buildElement()
.addInput({'type': 'number', 'id': 'bm-input-ty', 'class': 'bm-input-coords', 'placeholder': 'Tl Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement()
.addInput({'type': 'number', 'id': 'bm-input-px', 'class': 'bm-input-coords', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement()
.addInput({'type': 'number', 'id': 'bm-input-py', 'class': 'bm-input-coords', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement()
.buildElement()
.addDiv({'class': 'bm-container'})
.addInputFile({'class': 'bm-input-file', 'textContent': 'Upload Template', 'accept': 'image/png, image/jpeg, image/webp, image/bmp, image/gif'}).buildElement()
.buildElement()
.addDiv({'class': 'bm-container bm-flex-between'})
.addButton({'textContent': 'Enable'}, (instance, button) => {
.addButton({'textContent': 'Disable', 'data-button-status': 'shown'}, (instance, button) => {
button.onclick = () => {
instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(true);
instance.handleDisplayStatus(`Enabled templates!`);
button.disabled = true; // Disables the button until the transition ends
if (button.dataset['buttonStatus'] == 'shown') { // If templates are currently being 'shown' then hide them
instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(false); // Disables templates from being drawn
button.dataset['buttonStatus'] = 'hidden'; // Swap internal button status tracker
button.textContent = 'Enable'; // Swap button text
instance.handleDisplayStatus(`Disabled templates!`); // Inform the user
} else { // In all other cases, we should show templates instead of hiding them
instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(true); // Allows templates to be drawn
button.dataset['buttonStatus'] = 'shown'; // Swap internal button status tracker
button.textContent = 'Disable'; // Swap button text
instance.handleDisplayStatus(`Enabled templates!`); // Inform the user
}
button.disabled = false; // Enables the button
}
}).buildElement()
.addButton({'textContent': 'Create'}, (instance, button) => {
button.onclick = () => {
const input = document.querySelector('#bm-window-main button.bm-input-file');
// Checks to see if the coordinates are valid. Throws an error if they are not
const coordTlX = document.querySelector('#bm-input-tx');
if (!coordTlX.checkValidity()) {coordTlX.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;}
const coordTlY = document.querySelector('#bm-input-ty');
@ -400,10 +369,9 @@ function buildOverlayMain() {
instance.handleDisplayStatus(`Drew to canvas!`);
}
}).buildElement()
.addButton({'textContent': 'Disable'}, (instance, button) => {
.addButton({'textContent': 'Filter'}, (instance, button) => {
button.onclick = () => {
instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(false);
instance.handleDisplayStatus(`Disabled templates!`);
}
}).buildElement()
.buildElement()
@ -413,17 +381,15 @@ function buildOverlayMain() {
.addDiv({'class': 'bm-container bm-flex-between', 'style': 'margin-bottom: 0;'})
.addDiv({'class': 'bm-flex-between'})
// .addButton({'class': 'bm-button-circle', 'innerHTML': '🖌'}).buildElement()
.addButton({'class': 'bm-button-circle', 'innerHTML': '🎨', 'title': 'Template Color Converter'},
(instance, button) => {
button.addEventListener('click', () => {
.addButton({'class': 'bm-button-circle', 'innerHTML': '🎨', 'title': 'Template Color Converter'}, (instance, button) => {
button.onclick = () => {
window.open('https://pepoafonso.github.io/color_converter_wplace/', '_blank', 'noopener noreferrer');
});
}
}).buildElement()
.addButton({'class': 'bm-button-circle', 'innerHTML': '🌐', 'title': 'Official Blue Marble Website'},
(instance, button) => {
button.addEventListener('click', () => {
.addButton({'class': 'bm-button-circle', 'innerHTML': '🌐', 'title': 'Official Blue Marble Website'}, (instance, button) => {
button.onclick = () => {
window.open('https://bluemarble.lol/', '_blank', 'noopener noreferrer');
});
}
}).buildElement()
.buildElement()
.addSmall({'textContent': 'Made by SwingTheVine', 'style': 'margin-top: auto;'}).buildElement()
@ -431,345 +397,6 @@ function buildOverlayMain() {
.buildElement()
.buildElement()
.buildElement().buildOverlay(document.body);
// let isMinimized = false; // Overlay state tracker (false = maximized, true = minimized)
// overlayMain.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 - Click to minimize/maximize', 'src': 'https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/main/dist/assets/Favicon.png', 'style': 'cursor: pointer;'},
// (instance, img) => {
// /** Click event handler for overlay minimize/maximize functionality.
// *
// * Toggles between two distinct UI states:
// * 1. MINIMIZED STATE (60×76px):
// * - Shows only the Blue Marble icon and drag bar
// * - Hides all input fields, buttons, and status information
// * - Applies fixed dimensions for consistent appearance
// * - Repositions icon with 3px right offset for visual centering
// *
// * 2. MAXIMIZED STATE (responsive):
// * - Restores full functionality with all UI elements
// * - Removes fixed dimensions to allow responsive behavior
// * - Resets icon positioning to default alignment
// * - Shows success message when returning to maximized state
// *
// * @param {Event} event - The click event object (implicit)
// */
// img.addEventListener('click', () => {
// isMinimized = !isMinimized; // Toggle the current state
// const overlay = document.querySelector('#bm-overlay');
// const header = document.querySelector('#bm-contain-header');
// const dragBar = document.querySelector('#bm-bar-drag');
// const coordsContainer = document.querySelector('#bm-contain-coords');
// const coordsButton = document.querySelector('#bm-button-coords');
// const createButton = document.querySelector('#bm-button-create');
// const enableButton = document.querySelector('#bm-button-enable');
// const disableButton = document.querySelector('#bm-button-disable');
// const coordInputs = document.querySelectorAll('#bm-contain-coords input');
// // Pre-restore original dimensions when switching to maximized state
// // This ensures smooth transition and prevents layout issues
// if (!isMinimized) {
// overlay.style.width = "auto";
// overlay.style.maxWidth = "300px";
// overlay.style.minWidth = "200px";
// overlay.style.padding = "10px";
// }
// // Define elements that should be hidden/shown during state transitions
// // Each element is documented with its purpose for maintainability
// const elementsToToggle = [
// '#bm-overlay h1', // Main title "Blue Marble"
// '#bm-contain-userinfo', // User information section (username, droplets, level)
// '#bm-overlay hr', // Visual separator lines
// '#bm-contain-automation > *:not(#bm-contain-coords)', // Automation section excluding coordinates
// '#bm-input-file-template', // Template file upload interface
// '#bm-contain-buttons-action', // Action buttons container
// `#${instance.outputStatusId}`, // Status log textarea for user feedback
// ];
// // Apply visibility changes to all toggleable elements
// elementsToToggle.forEach(selector => {
// const elements = document.querySelectorAll(selector);
// elements.forEach(element => {
// element.style.display = isMinimized ? 'none' : '';
// });
// });
// // Handle coordinate container and button visibility based on state
// if (isMinimized) {
// // ==================== MINIMIZED STATE CONFIGURATION ====================
// // In minimized state, we hide ALL interactive elements except the icon and drag bar
// // This creates a clean, unobtrusive interface that maintains only essential functionality
// // Hide coordinate input container completely
// if (coordsContainer) {
// coordsContainer.style.display = 'none';
// }
// // Hide coordinate button (pin icon)
// if (coordsButton) {
// coordsButton.style.display = 'none';
// }
// // Hide create template button
// if (createButton) {
// createButton.style.display = 'none';
// }
// // Hide enable templates button
// if (enableButton) {
// enableButton.style.display = 'none';
// }
// // Hide disable templates button
// if (disableButton) {
// disableButton.style.display = 'none';
// }
// // Hide all coordinate input fields individually (failsafe)
// coordInputs.forEach(input => {
// input.style.display = 'none';
// });
// // Apply fixed dimensions for consistent minimized appearance
// // These dimensions were chosen to accommodate the icon while remaining compact
// overlay.style.width = '60px'; // Fixed width for consistency
// overlay.style.height = '76px'; // Fixed height (60px + 16px for better proportions)
// overlay.style.maxWidth = '60px'; // Prevent expansion
// overlay.style.minWidth = '60px'; // Prevent shrinking
// overlay.style.padding = '8px'; // Comfortable padding around icon
// // Apply icon positioning for better visual centering in minimized state
// // The 3px offset compensates for visual weight distribution
// img.style.marginLeft = '3px';
// // Configure header layout for minimized state
// header.style.textAlign = 'center';
// header.style.margin = '0';
// header.style.marginBottom = '0';
// // Ensure drag bar remains visible and properly spaced
// if (dragBar) {
// dragBar.style.display = '';
// dragBar.style.marginBottom = '0.25em';
// }
// } else {
// // ==================== MAXIMIZED STATE RESTORATION ====================
// // In maximized state, we restore all elements to their default functionality
// // This involves clearing all style overrides applied during minimization
// // Restore coordinate container to default state
// if (coordsContainer) {
// coordsContainer.style.display = ''; // Show container
// coordsContainer.style.flexDirection = ''; // Reset flex layout
// coordsContainer.style.justifyContent = ''; // Reset alignment
// coordsContainer.style.alignItems = ''; // Reset alignment
// coordsContainer.style.gap = ''; // Reset spacing
// coordsContainer.style.textAlign = ''; // Reset text alignment
// coordsContainer.style.margin = ''; // Reset margins
// }
// // Restore coordinate button visibility
// if (coordsButton) {
// coordsButton.style.display = '';
// }
// // Restore create button visibility and reset positioning
// if (createButton) {
// createButton.style.display = '';
// createButton.style.marginTop = '';
// }
// // Restore enable button visibility and reset positioning
// if (enableButton) {
// enableButton.style.display = '';
// enableButton.style.marginTop = '';
// }
// // Restore disable button visibility and reset positioning
// if (disableButton) {
// disableButton.style.display = '';
// disableButton.style.marginTop = '';
// }
// // Restore all coordinate input fields
// coordInputs.forEach(input => {
// input.style.display = '';
// });
// // Reset icon positioning to default (remove minimized state offset)
// img.style.marginLeft = '';
// // Restore overlay to responsive dimensions
// overlay.style.padding = '10px';
// // Reset header styling to defaults
// header.style.textAlign = '';
// header.style.margin = '';
// header.style.marginBottom = '';
// // Reset drag bar spacing
// if (dragBar) {
// dragBar.style.marginBottom = '0.5em';
// }
// // Remove all fixed dimensions to allow responsive behavior
// // This ensures the overlay can adapt to content changes
// overlay.style.width = '';
// overlay.style.height = '';
// }
// // ==================== ACCESSIBILITY AND USER FEEDBACK ====================
// // Update accessibility information for screen readers and tooltips
// // Update alt text to reflect current state for screen readers and tooltips
// img.alt = isMinimized ?
// 'Blue Marble Icon - Minimized (Click to maximize)' :
// 'Blue Marble Icon - Maximized (Click to minimize)';
// // No status message needed - state change is visually obvious to users
// });
// }
// ).buildElement()
// .addHeader(1, {'textContent': name}).buildElement()
// .buildElement()
// .addHr().buildElement()
// .addDiv({'id': 'bm-contain-userinfo'})
// .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': true}).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': true}).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': '<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>'},
// (instance, button) => {
// button.onclick = () => {
// const coords = instance.apiManager?.coordsTilePixel; // Retrieves the coords from the API manager
// if (!coords?.[0]) {
// instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?');
// return;
// }
// instance.updateInnerHTML('bm-input-tx', coords?.[0] || '');
// instance.updateInnerHTML('bm-input-ty', coords?.[1] || '');
// instance.updateInnerHTML('bm-input-px', coords?.[2] || '');
// instance.updateInnerHTML('bm-input-py', coords?.[3] || '');
// }
// }
// ).buildElement()
// .addInput({'type': 'number', 'id': 'bm-input-tx', 'placeholder': 'Tl X', 'min': 0, 'max': 2047, 'step': 1, 'required': true}, (instance, input) => {
// //if a paste happens on tx, split and format it into other coordinates if possible
// input.addEventListener("paste", (event) => {
// let splitText = (event.clipboardData || window.clipboardData).getData("text").split(" ").filter(n => n).map(Number).filter(n => !isNaN(n)); //split and filter all Non Numbers
// if (splitText.length !== 4 ) { // If we don't have 4 clean coordinates, end the function.
// return;
// }
// let coords = selectAllCoordinateInputs(document);
// for (let i = 0; i < coords.length; i++) {
// coords[i].value = splitText[i]; //add the split vales
// }
// event.preventDefault(); //prevent the pasting of the original paste that would overide the split value
// })
// const handler = () => persistCoords();
// input.addEventListener('input', handler);
// input.addEventListener('change', handler);
// }).buildElement()
// .addInput({'type': 'number', 'id': 'bm-input-ty', 'placeholder': 'Tl Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}, (instance, input) => {
// const handler = () => persistCoords();
// input.addEventListener('input', handler);
// input.addEventListener('change', handler);
// }).buildElement()
// .addInput({'type': 'number', 'id': 'bm-input-px', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1, 'required': true}, (instance, input) => {
// const handler = () => persistCoords();
// input.addEventListener('input', handler);
// input.addEventListener('change', handler);
// }).buildElement()
// .addInput({'type': 'number', 'id': 'bm-input-py', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}, (instance, input) => {
// const handler = () => persistCoords();
// input.addEventListener('input', handler);
// input.addEventListener('change', handler);
// }).buildElement()
// .buildElement()
// .addInputFile({'id': 'bm-input-file-template', 'textContent': 'Upload Template', 'accept': 'image/png, image/jpeg, image/webp, image/bmp, image/gif'}).buildElement()
// .addDiv({'id': 'bm-contain-buttons-template'})
// .addButton({'id': 'bm-button-enable', 'textContent': 'Enable'}, (instance, button) => {
// button.onclick = () => {
// instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(true);
// instance.handleDisplayStatus(`Enabled templates!`);
// }
// }).buildElement()
// .addButton({'id': 'bm-button-create', 'textContent': 'Create'}, (instance, button) => {
// button.onclick = () => {
// const input = document.querySelector('#bm-input-file-template');
// const coordTlX = document.querySelector('#bm-input-tx');
// if (!coordTlX.checkValidity()) {coordTlX.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;}
// const coordTlY = document.querySelector('#bm-input-ty');
// if (!coordTlY.checkValidity()) {coordTlY.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;}
// const coordPxX = document.querySelector('#bm-input-px');
// if (!coordPxX.checkValidity()) {coordPxX.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;}
// const coordPxY = document.querySelector('#bm-input-py');
// if (!coordPxY.checkValidity()) {coordPxY.reportValidity(); instance.handleDisplayError('Coordinates are malformed! Did you try clicking on the canvas first?'); return;}
// // Kills itself if there is no file
// if (!input?.files[0]) {instance.handleDisplayError(`No file selected!`); return;}
// templateManager.createTemplate(input.files[0], input.files[0]?.name.replace(/\.[^/.]+$/, ''), [Number(coordTlX.value), Number(coordTlY.value), Number(coordPxX.value), Number(coordPxY.value)]);
// // console.log(`TCoords: ${apiManager.templateCoordsTilePixel}\nCoords: ${apiManager.coordsTilePixel}`);
// // apiManager.templateCoordsTilePixel = apiManager.coordsTilePixel; // Update template coords
// // console.log(`TCoords: ${apiManager.templateCoordsTilePixel}\nCoords: ${apiManager.coordsTilePixel}`);
// // templateManager.setTemplateImage(input.files[0]);
// instance.handleDisplayStatus(`Drew to canvas!`);
// }
// }).buildElement()
// .addButton({'id': 'bm-button-disable', 'textContent': 'Disable'}, (instance, button) => {
// button.onclick = () => {
// instance.apiManager?.templateManager?.setTemplatesShouldBeDrawn(false);
// instance.handleDisplayStatus(`Disabled templates!`);
// }
// }).buildElement()
// .buildElement()
// .addTextarea({'id': overlayMain.outputStatusId, 'placeholder': `Status: Sleeping...\nVersion: ${version}`, 'readOnly': true}).buildElement()
// .addDiv({'id': 'bm-contain-buttons-action'})
// .addDiv()
// // .addButton({'id': 'bm-button-teleport', 'className': 'bm-help', 'textContent': '✈'}).buildElement()
// // .addButton({'id': 'bm-button-favorite', 'className': 'bm-help', 'innerHTML': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="10,2 12,7.5 18,7.5 13.5,11.5 15.5,18 10,14 4.5,18 6.5,11.5 2,7.5 8,7.5" fill="white"></polygon></svg>'}).buildElement()
// // .addButton({'id': 'bm-button-templates', 'className': 'bm-help', 'innerHTML': '🖌'}).buildElement()
// .addButton({'id': 'bm-button-convert', 'className': 'bm-help', 'innerHTML': '🎨', 'title': 'Template Color Converter'},
// (instance, button) => {
// button.addEventListener('click', () => {
// window.open('https://pepoafonso.github.io/color_converter_wplace/', '_blank', 'noopener noreferrer');
// });
// }).buildElement()
// .addButton({'id': 'bm-button-website', 'className': 'bm-help', 'innerHTML': '🌐', 'title': 'Official Blue Marble Website'},
// (instance, button) => {
// button.addEventListener('click', () => {
// window.open('https://bluemarble.lol/', '_blank', 'noopener noreferrer');
// });
// }).buildElement()
// .buildElement()
// .addSmall({'textContent': 'Made by SwingTheVine', 'style': 'margin-top: auto;'}).buildElement()
// .buildElement()
// .buildElement()
// .buildOverlay(document.body);
}
function buildTelemetryOverlay(overlay) {