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

Started windowed filter; 'x' button icon change; Main Window class changed

Browse source
This commit is contained in:
SwingTheVine 2026-02-28 15:06:55 -05:00
parent 21dbfd069f
commit a20adef713
16 changed files with 122 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
dist/BlueMarble-For-GreasyFork.user.css vendored
View file

@ -56,6 +56,9 @@ confetti-piece {
"Arial";
letter-spacing: 0.05em;
}
.bm-window.bm-windowed {
max-width: 300px;
}
.bm-dragbar {
display: grid;
grid-template-columns: auto 1fr auto;
@ -347,11 +350,6 @@ input[type=file] {
display: none;
}
/* src/WindowMain.css */
#bm-window-main {
max-width: 300px;
}
/* src/WindowWizard.css */
#bm-wizard-tlist {
display: flex;

55
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.90.34
// @version 0.90.38
// @description A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features.
// @description:en A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features.
// @author SwingTheVine
@ -1766,7 +1766,7 @@ Getting Y ${pixelY}-${pixelY + drawSizeY}`);
button.ontouchend = () => {
button.click();
};
}).buildElement().addDiv().buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u{1F7AA}", "aria-label": 'Close window "Template Wizard"' }, (instance, button) => {
}).buildElement().addDiv().buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u2716", "aria-label": 'Close window "Template Wizard"' }, (instance, button) => {
button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove();
};
@ -2676,7 +2676,7 @@ Did you try clicking the canvas first?`);
button.ontouchend = () => {
button.click();
};
}).buildElement().addDiv().buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u{1F7AA}", "aria-label": 'Close window "Credits"' }, (instance, button) => {
}).buildElement().addDiv().buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u2716", "aria-label": 'Close window "Credits"' }, (instance, button) => {
button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove();
};
@ -2735,14 +2735,22 @@ Did you try clicking the canvas first?`);
button.ontouchend = () => {
button.click();
};
}).buildElement().addDiv().buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u{1F7AA}", "aria-label": 'Close window "Color Filter"' }, (instance, button) => {
}).buildElement().addDiv().buildElement().addDiv({ "class": "bm-flex-center" }).addButton({ "class": "bm-button-circle", "textContent": "\u{1F5D7}", "aria-label": 'Switch to windowed mode for "Color Filter"' }, (instance, button) => {
button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove();
this.buildWindowed();
};
button.ontouchend = () => {
button.click();
};
}).buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u2716", "aria-label": 'Close window "Color Filter"' }, (instance, button) => {
button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove();
};
button.ontouchend = () => {
button.click();
};
}).buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container bm-center-vertically" }).addHeader(1, { "textContent": "Color Filter" }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container bm-flex-between bm-center-vertically", "style": "gap: 1.5ch;" }).addButton({ "textContent": "Hide All Colors" }, (instance, button) => {
}).buildElement().buildElement().buildElement().addDiv({ "class": "bm-window-content" }).addDiv({ "class": "bm-container bm-center-vertically" }).addHeader(1, { "textContent": "Color Filter" }).buildElement().buildElement().addHr().buildElement().addDiv({ "class": "bm-container bm-flex-between bm-center-vertically", "style": "gap: 1.5ch;" }).addButton({ "textContent": "Hide All Colors" }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, selectColorList_fn).call(this, false);
}).buildElement().addButton({ "textContent": "Show All Colors" }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, selectColorList_fn).call(this, true);
@ -2769,6 +2777,38 @@ Did you try clicking the canvas first?`);
__privateMethod(this, _WindowFilter_instances, buildColorList_fn).call(this, scrollableContainer);
__privateMethod(this, _WindowFilter_instances, sortColorList_fn).call(this, "id", "ascending", false);
}
/** Spawns a windowed Color Filter window.
* If another color filter window already exists, we DON'T spawn another!
* Parent/child relationships in the DOM structure below are indicated by indentation.
* @since 0.90.35
*/
buildWindowed() {
if (document.querySelector(`#${this.windowID}`)) {
document.querySelector(`#${this.windowID}`).remove();
return;
}
this.window = this.addDiv({ "id": this.windowID, "class": "bm-window bm-windowed" }).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Color Filter"', "data-button-status": "expanded" }, (instance, button) => {
button.onclick = () => instance.handleMinimization(button);
button.ontouchend = () => {
button.click();
};
}).buildElement().addDiv().buildElement().addDiv({ "class": "bm-flex-center" }).addButton({ "class": "bm-button-circle", "textContent": "\u{1F5D7}", "aria-label": 'Switch to windowed mode for "Color Filter"' }, (instance, button) => {
button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove();
this.buildWindowed();
};
button.ontouchend = () => {
button.click();
};
}).buildElement().addButton({ "class": "bm-button-circle", "textContent": "\u2716", "aria-label": 'Close window "Color Filter"' }, (instance, button) => {
button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove();
};
button.ontouchend = () => {
button.click();
};
}).buildElement().buildElement().buildElement().buildElement().buildOverlay(this.windowParent);
}
};
_WindowFilter_instances = new WeakSet();
/** Creates the color list container.
@ -2853,9 +2893,6 @@ Did you try clicking the canvas first?`);
this.sortPrimary = sortPrimary;
this.sortSecondary = sortSecondary;
this.showUnused = showUnused;
console.log(this.sortPrimary);
console.log(this.sortSecondary);
console.log(this.showUnused);
const colorList = document.querySelector(".bm-filter-flex");
const colors = Array.from(colorList.children);
colors.sort((index, nextIndex) => {
@ -2966,7 +3003,7 @@ Did you try clicking the canvas first?`);
this.handleDisplayError("Main window already exists!");
return;
}
this.window = this.addDiv({ "id": this.windowID, "class": "bm-window", "style": "top: 10px; left: unset; right: 75px;" }, (instance, div) => {
this.window = this.addDiv({ "id": this.windowID, "class": "bm-window bm-windowed", "style": "top: 10px; left: unset; right: 75px;" }, (instance, div) => {
}).addDragbar().addButton({ "class": "bm-button-circle", "textContent": "\u25BC", "aria-label": 'Minimize window "Blue Marble"', "data-button-status": "expanded" }, (instance, button) => {
button.onclick = () => instance.handleMinimization(button);
button.ontouchend = () => {

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-212hrs_17mins-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-1073-black?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1077-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-5908-blue?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Comments" src="https://img.shields.io/badge/Lines_Of_Comments-5160-blue?style=flat"></a>
<a href="" target="_blank" rel="noopener noreferrer"><img alt="Compression" src="https://img.shields.io/badge/Compression-73.34%25-blue"></a>

4
package-lock.json generated
View file

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

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "wplace-bluemarble",
"version": "0.90.34",
"version": "0.90.38",
"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.90.34
// @version 0.90.38
// @description A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features.
// @description:en A userscript to enhance the user experience on Wplace.live. This includes, but is not limited to: uploading images to display locally on a canvas, adding a button to move the Wplace color palette menu, and other QoL features.
// @author SwingTheVine

2
src/WindowCredits.js
View file

@ -59,7 +59,7 @@ export default class WindowCredts extends Overlay {
button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.addDiv().buildElement() // Contains the minimized h1 element
.addButton({'class': 'bm-button-circle', 'textContent': '🞪', 'aria-label': 'Close window "Credits"'}, (instance, button) => {
.addButton({'class': 'bm-button-circle', 'textContent': '✖', 'aria-label': 'Close window "Credits"'}, (instance, button) => {
button.onclick = () => {document.querySelector(`#${this.windowID}`)?.remove();};
button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar
}).buildElement()

58
src/WindowFilter.js
View file

@ -75,10 +75,19 @@ export default class WindowFilter extends Overlay {
button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.addDiv().buildElement() // Contains the minimized h1 element
.addButton({'class': 'bm-button-circle', 'textContent': '🞪', 'aria-label': 'Close window "Color Filter"'}, (instance, button) => {
button.onclick = () => {document.querySelector(`#${this.windowID}`)?.remove();};
button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.addDiv({'class': 'bm-flex-center'})
.addButton({'class': 'bm-button-circle', 'textContent': '🗗', 'aria-label': 'Switch to windowed mode for "Color Filter"'}, (instance, button) => {
button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove();
this.buildWindowed();
};
button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.addButton({'class': 'bm-button-circle', 'textContent': '✖', 'aria-label': 'Close window "Color Filter"'}, (instance, button) => {
button.onclick = () => {document.querySelector(`#${this.windowID}`)?.remove();};
button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.buildElement()
.buildElement()
.addDiv({'class': 'bm-window-content'})
.addDiv({'class': 'bm-container bm-center-vertically'})
@ -178,6 +187,47 @@ export default class WindowFilter extends Overlay {
this.#sortColorList('id', 'ascending', false);
}
/** Spawns a windowed Color Filter window.
* If another color filter window already exists, we DON'T spawn another!
* Parent/child relationships in the DOM structure below are indicated by indentation.
* @since 0.90.35
*/
buildWindowed() {
// If a color filter wizard window already exists, close it
if (document.querySelector(`#${this.windowID}`)) {
document.querySelector(`#${this.windowID}`).remove();
return;
}
// Creates a new windowed color filter window
this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window bm-windowed'})
.addDragbar()
.addButton({'class': 'bm-button-circle', 'textContent': '▼', 'aria-label': 'Minimize window "Color Filter"', 'data-button-status': 'expanded'}, (instance, button) => {
button.onclick = () => instance.handleMinimization(button);
button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.addDiv().buildElement() // Contains the minimized h1 element
.addDiv({'class': 'bm-flex-center'})
.addButton({'class': 'bm-button-circle', 'textContent': '🗗', 'aria-label': 'Switch to windowed mode for "Color Filter"'}, (instance, button) => {
button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove();
this.buildWindowed();
};
button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.addButton({'class': 'bm-button-circle', 'textContent': '✖', 'aria-label': 'Close window "Color Filter"'}, (instance, button) => {
button.onclick = () => {document.querySelector(`#${this.windowID}`)?.remove();};
button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.buildElement()
.buildElement()
.addDiv({'class': 'bm-window-content'})
.buildElement()
.buildElement().buildOverlay(this.windowParent);
}
/** Creates the color list container.
* @param {HTMLElement} parentElement - Parent element to add the color list to as a child
* @since 0.88.222

6
src/WindowMain.css
View file

@ -1,6 +0,0 @@
/* @since 0.88.460 */
/* The main window */
#bm-window-main {
max-width: 300px;
}

2
src/WindowMain.js
View file

@ -39,7 +39,7 @@ export default class WindowMain extends Overlay {
}
// Creates the window
this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window', 'style': 'top: 10px; left: unset; right: 75px;'}, (instance, div) => {
this.window = this.addDiv({'id': this.windowID, 'class': 'bm-window bm-windowed', 'style': 'top: 10px; left: unset; right: 75px;'}, (instance, div) => {
// div.onclick = (event) => {
// if (event.target.closest('button, a, input, select')) {return;} // Exit-early if interactive child was clicked
// div.parentElement.appendChild(div); // When the window is clicked on, bring to top

2
src/WindowWizard.js
View file

@ -68,7 +68,7 @@ export default class WindowWizard extends Overlay {
button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar
}).buildElement()
.addDiv().buildElement() // Contains the minimized h1 element
.addButton({'class': 'bm-button-circle', 'textContent': '🞪', 'aria-label': 'Close window "Template Wizard"'}, (instance, button) => {
.addButton({'class': 'bm-button-circle', 'textContent': '✖', 'aria-label': 'Close window "Template Wizard"'}, (instance, button) => {
button.onclick = () => {document.querySelector(`#${this.windowID}`)?.remove();};
button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar
}).buildElement()

1
src/main.css
View file

@ -6,5 +6,4 @@
@import './confettiManager.css';
@import './overlay.css';
@import './WindowFilter.css';
@import './WindowMain.css';
@import './WindowWizard.css';

7
src/overlay.css
View file

@ -13,7 +13,7 @@
border: 0;
}
/* The Blue Marble window(s) */
/* The Blue Marble windows */
.bm-window {
position: fixed;
background-color: rgba(21, 48, 99, 0.9);
@ -38,6 +38,11 @@
letter-spacing: 0.05em;
}
/* The Blue Marble windowed windows */
.bm-window.bm-windowed {
max-width: 300px;
}
/* The drag bar */
.bm-dragbar {
display: grid;