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

Filter Minimized Window UI Done

Browse source
This commit is contained in:
SwingTheVine 2026-02-28 17:36:27 -05:00
parent a20adef713
commit 0f34b78279
12 changed files with 346 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -277,6 +277,12 @@ input[type=file] {
font-size: 1.6em; font-size: 1.6em;
font-family: monospace; font-family: monospace;
} }
.bm-container {
margin: 0.25em 0;
}
.bm-windowed h1 {
font-size: 1em;
}
/* src/WindowFilter.css */ /* src/WindowFilter.css */
#bm-window-filter p svg { #bm-window-filter p svg {
@ -349,6 +355,33 @@ input[type=file] {
#bm-window-filter .bm-filter-color.bm-color-hide { #bm-window-filter .bm-filter-color.bm-color-hide {
display: none; display: none;
} }
.bm-windowed .bm-filter-flex {
flex-direction: column;
gap: 0.25em;
}
.bm-windowed .bm-filter-color {
width: auto;
margin: 0;
padding: 0;
}
.bm-windowed .bm-filter-container-rgb {
display: flex;
width: 100%;
gap: 0.5ch;
align-items: center;
padding: 0.1em 0.5ch;
border: none;
border-radius: 1em;
}
#bm-window-filter.bm-windowed .bm-filter-container-rgb button {
padding: 0.5em 0.25ch;
}
.bm-windowed .bm-filter-container-rgb svg {
width: 3ch;
}
.bm-windowed .bm-filter-color h2 {
font-size: 0.75em;
}
/* src/WindowWizard.css */ /* src/WindowWizard.css */
#bm-wizard-tlist { #bm-wizard-tlist {

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

@ -2,7 +2,7 @@
// @name Blue Marble // @name Blue Marble
// @name:en Blue Marble // @name:en Blue Marble
// @namespace https://github.com/SwingTheVine/ // @namespace https://github.com/SwingTheVine/
// @version 0.90.38 // @version 0.90.59
// @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 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. // @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 // @author SwingTheVine
@ -2775,7 +2775,7 @@ Did you try clicking the canvas first?`);
this.updateInnerHTML("#bm-filter-tot-remaining", `<b>Remaining:</b> ${localizeNumber((this.allPixelsTotal || 0) - (this.allPixelsCorrectTotal || 0))} (${localizePercent(((this.allPixelsTotal || 0) - (this.allPixelsCorrectTotal || 0)) / (this.allPixelsTotal || 1))})`); this.updateInnerHTML("#bm-filter-tot-remaining", `<b>Remaining:</b> ${localizeNumber((this.allPixelsTotal || 0) - (this.allPixelsCorrectTotal || 0))} (${localizePercent(((this.allPixelsTotal || 0) - (this.allPixelsCorrectTotal || 0)) / (this.allPixelsTotal || 1))})`);
this.updateInnerHTML("#bm-filter-tot-completed", `<b>Completed at:</b> <time datetime="${this.timeRemaining.toISOString().replace(/\.\d{3}Z$/, "Z")}">${this.timeRemainingLocalized}</time>`); this.updateInnerHTML("#bm-filter-tot-completed", `<b>Completed at:</b> <time datetime="${this.timeRemaining.toISOString().replace(/\.\d{3}Z$/, "Z")}">${this.timeRemainingLocalized}</time>`);
__privateMethod(this, _WindowFilter_instances, buildColorList_fn).call(this, scrollableContainer); __privateMethod(this, _WindowFilter_instances, buildColorList_fn).call(this, scrollableContainer);
__privateMethod(this, _WindowFilter_instances, sortColorList_fn).call(this, "id", "ascending", false); __privateMethod(this, _WindowFilter_instances, sortColorList_fn).call(this, this.sortPrimary, this.sortSecondary, this.showUnused);
} }
/** Spawns a windowed Color Filter window. /** Spawns a windowed Color Filter window.
* If another color filter window already exists, we DON'T spawn another! * If another color filter window already exists, we DON'T spawn another!
@ -2792,10 +2792,10 @@ Did you try clicking the canvas first?`);
button.ontouchend = () => { button.ontouchend = () => {
button.click(); 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) => { }).buildElement().addDiv().buildElement().addDiv({ "class": "bm-flex-center" }).addButton({ "class": "bm-button-circle", "textContent": "\u{1F5D6}", "aria-label": 'Switch to fullscreen mode for "Color Filter"' }, (instance, button) => {
button.onclick = () => { button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove(); document.querySelector(`#${this.windowID}`)?.remove();
this.buildWindowed(); this.buildWindow();
}; };
button.ontouchend = () => { button.ontouchend = () => {
button.click(); button.click();
@ -2807,7 +2807,19 @@ Did you try clicking the canvas first?`);
button.ontouchend = () => { button.ontouchend = () => {
button.click(); button.click();
}; };
}).buildElement().buildElement().buildElement().buildElement().buildOverlay(this.windowParent); }).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": "None" }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, selectColorList_fn).call(this, false);
}).buildElement().addButton({ "textContent": "Refresh" }, (instance, button) => {
button.onclick = () => {
};
}).buildElement().addButton({ "textContent": "All" }, (instance, button) => {
button.onclick = () => __privateMethod(this, _WindowFilter_instances, selectColorList_fn).call(this, true);
}).buildElement().buildElement().addDiv({ "class": "bm-container bm-scrollable" }).buildElement().buildElement().buildElement().buildOverlay(this.windowParent);
this.handleDrag(`#${this.windowID}.bm-window`, `#${this.windowID} .bm-dragbar`);
const scrollableContainer = document.querySelector(`#${this.windowID} .bm-container.bm-scrollable`);
__privateMethod(this, _WindowFilter_instances, calculatePixelStatistics_fn).call(this);
__privateMethod(this, _WindowFilter_instances, buildColorList_fn).call(this, scrollableContainer);
__privateMethod(this, _WindowFilter_instances, sortColorList_fn).call(this, this.sortPrimary, this.sortSecondary, this.showUnused);
} }
}; };
_WindowFilter_instances = new WeakSet(); _WindowFilter_instances = new WeakSet();
@ -2816,6 +2828,8 @@ Did you try clicking the canvas first?`);
* @since 0.88.222 * @since 0.88.222
*/ */
buildColorList_fn = function(parentElement) { buildColorList_fn = function(parentElement) {
const isWindowedMode = parentElement.closest(`#${this.windowID}`)?.classList.contains("bm-windowed");
console.log(`Is Windowed Mode: ${isWindowedMode}`);
const colorList = new Overlay(this.name, this.version); const colorList = new Overlay(this.name, this.version);
colorList.addDiv({ "class": "bm-filter-flex" }); colorList.addDiv({ "class": "bm-filter-flex" });
for (const color of this.palette) { for (const color of this.palette) {
@ -2841,45 +2855,89 @@ Did you try clicking the canvas first?`);
} }
const colorIncorrect = parseInt(colorTotal) - parseInt(colorCorrect); const colorIncorrect = parseInt(colorTotal) - parseInt(colorCorrect);
const isColorHidden = !!(this.templateManager.shouldFilterColor.get(color.id) || false); const isColorHidden = !!(this.templateManager.shouldFilterColor.get(color.id) || false);
colorList.addDiv({ if (isWindowedMode) {
"class": "bm-container bm-filter-color bm-flex-between", const styleBackgroundStar = `background-size: auto 100%; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,5L79,91L2,39L98,39L21,91' fill='${textColorForPaletteColorBackground}' fill-opacity='.1'/></svg>");`;
"data-id": color.id, colorList.addDiv({
"data-name": color.name, "class": "bm-container bm-filter-color bm-flex-between",
"data-premium": +color.premium, // Dataset
"data-correct": !Number.isNaN(parseInt(colorCorrect)) ? colorCorrect : "0", "data-id": color.id,
"data-total": colorTotal, "data-name": color.name,
"data-percent": colorPercent.slice(-1) == "%" ? colorPercent.slice(0, -1) : "0", "data-premium": +color.premium,
"data-incorrect": colorIncorrect || 0 "data-correct": !Number.isNaN(parseInt(colorCorrect)) ? colorCorrect : "0",
}).addDiv({ "class": "bm-flex-center", "style": "flex-direction: column;" }).addDiv({ "class": "bm-filter-container-rgb", "style": `background-color: rgb(${color.rgb?.map((channel) => Number(channel) || 0).join(",")});` }).addButton( "data-total": colorTotal,
{ "data-percent": colorPercent.slice(-1) == "%" ? colorPercent.slice(0, -1) : "0",
"class": "bm-button-trans " + bgEffectForButtons, "data-incorrect": colorIncorrect || 0
"data-state": isColorHidden ? "hidden" : "shown", }).addDiv({ "class": "bm-filter-container-rgb", "style": `background-color: rgb(${color.rgb?.map((channel) => Number(channel) || 0).join(",")});${color.premium ? styleBackgroundStar : ""}` }).addButton(
"aria-label": isColorHidden ? `Show the color ${color.name || ""} on templates.` : `Hide the color ${color.name || ""} on templates.`, {
"innerHTML": isColorHidden ? this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`) "class": "bm-button-trans " + bgEffectForButtons,
}, "data-state": isColorHidden ? "hidden" : "shown",
(instance, button) => { "aria-label": isColorHidden ? `Show the color ${color.name || ""} on templates.` : `Hide the color ${color.name || ""} on templates.`,
button.onclick = () => { "innerHTML": isColorHidden ? this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`)
button.style.textDecoration = "none"; },
button.disabled = true; (instance, button) => {
if (button.dataset["state"] == "shown") { button.onclick = () => {
button.innerHTML = this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`); button.style.textDecoration = "none";
button.dataset["state"] = "hidden"; button.disabled = true;
button.ariaLabel = `Show the color ${color.name || ""} on templates.`; if (button.dataset["state"] == "shown") {
this.templateManager.shouldFilterColor.set(color.id, true); button.innerHTML = this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`);
} else { button.dataset["state"] = "hidden";
button.innerHTML = this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`); button.ariaLabel = `Show the color ${color.name || ""} on templates.`;
button.dataset["state"] = "shown"; this.templateManager.shouldFilterColor.set(color.id, true);
button.ariaLabel = `Hide the color ${color.name || ""} on templates.`; } else {
this.templateManager.shouldFilterColor.delete(color.id); button.innerHTML = this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`);
button.dataset["state"] = "shown";
button.ariaLabel = `Hide the color ${color.name || ""} on templates.`;
this.templateManager.shouldFilterColor.delete(color.id);
}
button.disabled = false;
button.style.textDecoration = "";
};
if (!color.id) {
button.disabled = true;
} }
button.disabled = false;
button.style.textDecoration = "";
};
if (!color.id) {
button.disabled = true;
} }
} ).buildElement().addSmall({ "textContent": `#${color.id.toString().padStart(2, 0)}`, "style": `color: ${color.id == -1 || color.id == 0 ? "white" : textColorForPaletteColorBackground}` }).buildElement().addHeader(2, { "textContent": color.name, "style": `color: ${color.id == -1 || color.id == 0 ? "white" : textColorForPaletteColorBackground}` }).buildElement().addSmall({ "textContent": `${colorCorrectLocalized} / ${colorTotalLocalized}`, "style": `color: ${color.id == -1 || color.id == 0 ? "white" : textColorForPaletteColorBackground}; flex: 1 1 auto; text-align: right;` }).buildElement().buildElement().buildElement();
).buildElement().buildElement().addSmall({ "textContent": color.id == -2 ? "???????" : colorValueHex }).buildElement().buildElement().addDiv({ "class": "bm-flex-between" }).addHeader(2, { "textContent": (color.premium ? "\u2605 " : "") + color.name }).buildElement().addDiv({ "class": "bm-flex-between", "style": "gap: 1.5ch;" }).addSmall({ "textContent": `#${color.id}` }).buildElement().addSmall({ "textContent": `${colorCorrectLocalized} / ${colorTotalLocalized}` }).buildElement().buildElement().addP({ "textContent": `${typeof colorIncorrect == "number" && !isNaN(colorIncorrect) ? colorIncorrect : "???"} incorrect pixels. Completed: ${colorPercent}` }).buildElement().buildElement().buildElement(); } else {
colorList.addDiv({
"class": "bm-container bm-filter-color bm-flex-between",
"data-id": color.id,
"data-name": color.name,
"data-premium": +color.premium,
"data-correct": !Number.isNaN(parseInt(colorCorrect)) ? colorCorrect : "0",
"data-total": colorTotal,
"data-percent": colorPercent.slice(-1) == "%" ? colorPercent.slice(0, -1) : "0",
"data-incorrect": colorIncorrect || 0
}).addDiv({ "class": "bm-flex-center", "style": "flex-direction: column;" }).addDiv({ "class": "bm-filter-container-rgb", "style": `background-color: rgb(${color.rgb?.map((channel) => Number(channel) || 0).join(",")});` }).addButton(
{
"class": "bm-button-trans " + bgEffectForButtons,
"data-state": isColorHidden ? "hidden" : "shown",
"aria-label": isColorHidden ? `Show the color ${color.name || ""} on templates.` : `Hide the color ${color.name || ""} on templates.`,
"innerHTML": isColorHidden ? this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`)
},
(instance, button) => {
button.onclick = () => {
button.style.textDecoration = "none";
button.disabled = true;
if (button.dataset["state"] == "shown") {
button.innerHTML = this.eyeClosed.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`);
button.dataset["state"] = "hidden";
button.ariaLabel = `Show the color ${color.name || ""} on templates.`;
this.templateManager.shouldFilterColor.set(color.id, true);
} else {
button.innerHTML = this.eyeOpen.replace("<svg", `<svg fill="${textColorForPaletteColorBackground}"`);
button.dataset["state"] = "shown";
button.ariaLabel = `Hide the color ${color.name || ""} on templates.`;
this.templateManager.shouldFilterColor.delete(color.id);
}
button.disabled = false;
button.style.textDecoration = "";
};
if (!color.id) {
button.disabled = true;
}
}
).buildElement().buildElement().addSmall({ "textContent": color.id == -2 ? "???????" : colorValueHex }).buildElement().buildElement().addDiv({ "class": "bm-flex-between" }).addHeader(2, { "textContent": (color.premium ? "\u2605 " : "") + color.name }).buildElement().addDiv({ "class": "bm-flex-between", "style": "gap: 1.5ch;" }).addSmall({ "textContent": `#${color.id.toString().padStart(2, 0)}` }).buildElement().addSmall({ "textContent": `${colorCorrectLocalized} / ${colorTotalLocalized}` }).buildElement().buildElement().addP({ "textContent": `${typeof colorIncorrect == "number" && !isNaN(colorIncorrect) ? colorIncorrect : "???"} incorrect pixels. Completed: ${colorPercent}` }).buildElement().buildElement().buildElement();
}
} }
colorList.buildOverlay(parentElement); colorList.buildOverlay(parentElement);
}; };

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://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="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="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-1077-black?style=flat"></a> <a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1098-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 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="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> <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", "name": "wplace-bluemarble",
"version": "0.90.38", "version": "0.90.59",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "wplace-bluemarble", "name": "wplace-bluemarble",
"version": "0.90.38", "version": "0.90.59",
"devDependencies": { "devDependencies": {
"esbuild": "^0.25.0", "esbuild": "^0.25.0",
"jsdoc": "^4.0.5", "jsdoc": "^4.0.5",

2
package.json
View file

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

2
src/BlueMarble.meta.js
View file

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

41
src/WindowFilter.css
View file

@ -94,4 +94,45 @@
/* Filter window hide unused colors */ /* Filter window hide unused colors */
#bm-window-filter .bm-filter-color.bm-color-hide { #bm-window-filter .bm-filter-color.bm-color-hide {
display: none; display: none;
}
/* WINDOWED MODE */
/* Filter flex in windowed mode */
.bm-windowed .bm-filter-flex {
flex-direction: column;
gap: 0.25em;
}
/* Filter color in windowed mode */
.bm-windowed .bm-filter-color {
width: auto;
margin: 0;
padding: 0;
}
/* Filter window container for RGB color display in windowed mode */
.bm-windowed .bm-filter-container-rgb {
display: flex;
width: 100%;
gap: 0.5ch;
align-items: center;
padding: 0.1em 0.5ch;
border: none;
border-radius: 1em;
}
/* Filter window hide color button */
#bm-window-filter.bm-windowed .bm-filter-container-rgb button {
padding: 0.5em 0.25ch;
}
/* Filter window hide color button SVG in windowed mode */
.bm-windowed .bm-filter-container-rgb svg {
width: 3ch;
}
/* Filter window header 2 in windowed mode */
.bm-windowed .bm-filter-color h2 {
font-size: 0.75em;
} }

204
src/WindowFilter.js
View file

@ -173,6 +173,8 @@ export default class WindowFilter extends Overlay {
// Obtains the scrollable container to put the color filter in // Obtains the scrollable container to put the color filter in
const scrollableContainer = document.querySelector(`#${this.windowID} .bm-container.bm-scrollable`); const scrollableContainer = document.querySelector(`#${this.windowID} .bm-container.bm-scrollable`);
// Calculates the pixel statistics
// E.g. correct pixels per color
this.#calculatePixelStatistics(); this.#calculatePixelStatistics();
// Displays some template statistics to the user // Displays some template statistics to the user
@ -184,7 +186,7 @@ export default class WindowFilter extends Overlay {
// These run when the user opens the Color Filter window // These run when the user opens the Color Filter window
this.#buildColorList(scrollableContainer); this.#buildColorList(scrollableContainer);
this.#sortColorList('id', 'ascending', false); this.#sortColorList(this.sortPrimary, this.sortSecondary, this.showUnused);
} }
/** Spawns a windowed Color Filter window. /** Spawns a windowed Color Filter window.
@ -209,10 +211,10 @@ export default class WindowFilter extends Overlay {
}).buildElement() }).buildElement()
.addDiv().buildElement() // Contains the minimized h1 element .addDiv().buildElement() // Contains the minimized h1 element
.addDiv({'class': 'bm-flex-center'}) .addDiv({'class': 'bm-flex-center'})
.addButton({'class': 'bm-button-circle', 'textContent': '🗗', 'aria-label': 'Switch to windowed mode for "Color Filter"'}, (instance, button) => { .addButton({'class': 'bm-button-circle', 'textContent': '🗖', 'aria-label': 'Switch to fullscreen mode for "Color Filter"'}, (instance, button) => {
button.onclick = () => { button.onclick = () => {
document.querySelector(`#${this.windowID}`)?.remove(); document.querySelector(`#${this.windowID}`)?.remove();
this.buildWindowed(); this.buildWindow();
}; };
button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar button.ontouchend = () => {button.click();}; // Needed only to negate weird interaction with dragbar
}).buildElement() }).buildElement()
@ -223,9 +225,40 @@ export default class WindowFilter extends Overlay {
.buildElement() .buildElement()
.buildElement() .buildElement()
.addDiv({'class': 'bm-window-content'}) .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': 'None'}, (instance, button) => {
button.onclick = () => this.#selectColorList(false);
}).buildElement()
.addButton({'textContent': 'Refresh'}, (instance, button) => {
button.onclick = () => {};
}).buildElement()
.addButton({'textContent': 'All'}, (instance, button) => {
button.onclick = () => this.#selectColorList(true);
}).buildElement()
.buildElement()
.addDiv({'class': 'bm-container bm-scrollable'})
// Color list will appear here
.buildElement()
.buildElement() .buildElement()
.buildElement().buildOverlay(this.windowParent); .buildElement().buildOverlay(this.windowParent);
// Creates dragging capability on the drag bar for dragging the window
this.handleDrag(`#${this.windowID}.bm-window`, `#${this.windowID} .bm-dragbar`);
// Obtains the scrollable container to put the color filter in
const scrollableContainer = document.querySelector(`#${this.windowID} .bm-container.bm-scrollable`);
// Calculates the pixel statistics
// E.g. correct pixels per color
this.#calculatePixelStatistics();
// These run when the user opens the Color Filter window
this.#buildColorList(scrollableContainer);
this.#sortColorList(this.sortPrimary, this.sortSecondary, this.showUnused);
} }
/** Creates the color list container. /** Creates the color list container.
@ -234,6 +267,12 @@ export default class WindowFilter extends Overlay {
*/ */
#buildColorList(parentElement) { #buildColorList(parentElement) {
// Figures out if this window is fullscreen or windowed mode
const isWindowedMode = parentElement.closest(`#${this.windowID}`)?.classList.contains('bm-windowed');
// Note: `undefined` is expected to behave as if `false`
console.log(`Is Windowed Mode: ${isWindowedMode}`);
const colorList = new Overlay(this.name, this.version); const colorList = new Overlay(this.name, this.version);
colorList.addDiv({'class': 'bm-filter-flex'}) colorList.addDiv({'class': 'bm-filter-flex'})
// We leave it open so we can add children to the grid // We leave it open so we can add children to the grid
@ -292,60 +331,115 @@ export default class WindowFilter extends Overlay {
const isColorHidden = !!(this.templateManager.shouldFilterColor.get(color.id) || false); const isColorHidden = !!(this.templateManager.shouldFilterColor.get(color.id) || false);
// Construct the DOM tree for color in color list // Add the color to the color list DOM
colorList.addDiv({'class': 'bm-container bm-filter-color bm-flex-between', if (isWindowedMode) {
'data-id': color.id,
'data-name': color.name,
'data-premium': +color.premium,
'data-correct': !Number.isNaN(parseInt(colorCorrect)) ? colorCorrect : '0',
'data-total': colorTotal,
'data-percent': (colorPercent.slice(-1) == '%') ? colorPercent.slice(0, -1) : '0',
'data-incorrect': colorIncorrect || 0
})
.addDiv({'class': 'bm-flex-center', 'style': 'flex-direction: column;'})
.addDiv({'class': 'bm-filter-container-rgb', 'style': `background-color: rgb(${color.rgb?.map(channel => Number(channel) || 0).join(',')});`})
.addButton({
'class': 'bm-button-trans ' + bgEffectForButtons,
'data-state': isColorHidden ? 'hidden' : 'shown',
'aria-label': isColorHidden ? `Show the color ${color.name || ''} on templates.` : `Hide the color ${color.name || ''} on templates.`,
'innerHTML': isColorHidden ? this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`)},
(instance, button) => {
// When the button is clicked // The star pattern for premium colors
button.onclick = () => { const styleBackgroundStar = `background-size: auto 100%; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50,5L79,91L2,39L98,39L21,91' fill='${textColorForPaletteColorBackground}' fill-opacity='.1'/></svg>");`;
button.style.textDecoration = 'none';
button.disabled = true; // Add windowed mode color DOM to color list
if (button.dataset['state'] == 'shown') { colorList.addDiv({'class': 'bm-container bm-filter-color bm-flex-between',
button.innerHTML = this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`); // Dataset
button.dataset['state'] = 'hidden'; 'data-id': color.id,
button.ariaLabel = `Show the color ${color.name || ''} on templates.`; 'data-name': color.name,
this.templateManager.shouldFilterColor.set(color.id, true); 'data-premium': +color.premium,
} else { 'data-correct': !Number.isNaN(parseInt(colorCorrect)) ? colorCorrect : '0',
button.innerHTML = this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`); 'data-total': colorTotal,
button.dataset['state'] = 'shown'; 'data-percent': (colorPercent.slice(-1) == '%') ? colorPercent.slice(0, -1) : '0',
button.ariaLabel = `Hide the color ${color.name || ''} on templates.`; 'data-incorrect': colorIncorrect || 0
this.templateManager.shouldFilterColor.delete(color.id); }).addDiv({'class': 'bm-filter-container-rgb', 'style': `background-color: rgb(${color.rgb?.map(channel => Number(channel) || 0).join(',')});${color.premium ? styleBackgroundStar : ''}`})
.addButton({
'class': 'bm-button-trans ' + bgEffectForButtons,
'data-state': isColorHidden ? 'hidden' : 'shown',
'aria-label': isColorHidden ? `Show the color ${color.name || ''} on templates.` : `Hide the color ${color.name || ''} on templates.`,
'innerHTML': isColorHidden ? this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`)},
(instance, button) => {
// When the button is clicked
button.onclick = () => {
button.style.textDecoration = 'none';
button.disabled = true;
if (button.dataset['state'] == 'shown') {
button.innerHTML = this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`);
button.dataset['state'] = 'hidden';
button.ariaLabel = `Show the color ${color.name || ''} on templates.`;
this.templateManager.shouldFilterColor.set(color.id, true);
} else {
button.innerHTML = this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`);
button.dataset['state'] = 'shown';
button.ariaLabel = `Hide the color ${color.name || ''} on templates.`;
this.templateManager.shouldFilterColor.delete(color.id);
}
button.disabled = false;
button.style.textDecoration = '';
} }
button.disabled = false;
button.style.textDecoration = '';
}
// Disables the "hide color" button if the color is "Transparent" (or no ID exists) // Disables the "hide color" button if the color is "Transparent" (or no ID exists)
if (!color.id) {button.disabled = true;} if (!color.id) {button.disabled = true;}
} }
).buildElement() ).buildElement()
.buildElement() .addSmall({'textContent': `#${color.id.toString().padStart(2, 0)}`, 'style': `color: ${((color.id == -1) || (color.id == 0)) ? 'white' : textColorForPaletteColorBackground}`}).buildElement()
.addSmall({'textContent': (color.id == -2) ? '???????' : colorValueHex}).buildElement() .addHeader(2, {'textContent': color.name, 'style': `color: ${((color.id == -1) || (color.id == 0)) ? 'white' : textColorForPaletteColorBackground}`}).buildElement()
.buildElement() .addSmall({'textContent': `${colorCorrectLocalized} / ${colorTotalLocalized}`, 'style': `color: ${((color.id == -1) || (color.id == 0)) ? 'white' : textColorForPaletteColorBackground}; flex: 1 1 auto; text-align: right;`}).buildElement()
.addDiv({'class': 'bm-flex-between'}) .buildElement()
.addHeader(2, {'textContent': (color.premium ? '★ ' : '') + color.name}).buildElement() .buildElement();
.addDiv({'class': 'bm-flex-between', 'style': 'gap: 1.5ch;'}) } else {
.addSmall({'textContent': `#${color.id}`}).buildElement() // Else we are in fullscreen mode.
.addSmall({'textContent': `${colorCorrectLocalized} / ${colorTotalLocalized}`}).buildElement()
.buildElement() // Add fullscreen mode color DOM to color list
.addP({'textContent': `${((typeof colorIncorrect == 'number') && !isNaN(colorIncorrect)) ? colorIncorrect : '???'} incorrect pixels. Completed: ${colorPercent}`}).buildElement() colorList.addDiv({'class': 'bm-container bm-filter-color bm-flex-between',
.buildElement() 'data-id': color.id,
.buildElement() 'data-name': color.name,
'data-premium': +color.premium,
'data-correct': !Number.isNaN(parseInt(colorCorrect)) ? colorCorrect : '0',
'data-total': colorTotal,
'data-percent': (colorPercent.slice(-1) == '%') ? colorPercent.slice(0, -1) : '0',
'data-incorrect': colorIncorrect || 0
}).addDiv({'class': 'bm-flex-center', 'style': 'flex-direction: column;'})
.addDiv({'class': 'bm-filter-container-rgb', 'style': `background-color: rgb(${color.rgb?.map(channel => Number(channel) || 0).join(',')});`})
.addButton({
'class': 'bm-button-trans ' + bgEffectForButtons,
'data-state': isColorHidden ? 'hidden' : 'shown',
'aria-label': isColorHidden ? `Show the color ${color.name || ''} on templates.` : `Hide the color ${color.name || ''} on templates.`,
'innerHTML': isColorHidden ? this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`) : this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`)},
(instance, button) => {
// When the button is clicked
button.onclick = () => {
button.style.textDecoration = 'none';
button.disabled = true;
if (button.dataset['state'] == 'shown') {
button.innerHTML = this.eyeClosed.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`);
button.dataset['state'] = 'hidden';
button.ariaLabel = `Show the color ${color.name || ''} on templates.`;
this.templateManager.shouldFilterColor.set(color.id, true);
} else {
button.innerHTML = this.eyeOpen.replace('<svg', `<svg fill="${textColorForPaletteColorBackground}"`);
button.dataset['state'] = 'shown';
button.ariaLabel = `Hide the color ${color.name || ''} on templates.`;
this.templateManager.shouldFilterColor.delete(color.id);
}
button.disabled = false;
button.style.textDecoration = '';
}
// Disables the "hide color" button if the color is "Transparent" (or no ID exists)
if (!color.id) {button.disabled = true;}
}
).buildElement()
.buildElement()
.addSmall({'textContent': (color.id == -2) ? '???????' : colorValueHex}).buildElement()
.buildElement()
.addDiv({'class': 'bm-flex-between'})
.addHeader(2, {'textContent': (color.premium ? '★ ' : '') + color.name}).buildElement()
.addDiv({'class': 'bm-flex-between', 'style': 'gap: 1.5ch;'})
.addSmall({'textContent': `#${color.id.toString().padStart(2, 0)}`}).buildElement()
.addSmall({'textContent': `${colorCorrectLocalized} / ${colorTotalLocalized}`}).buildElement()
.buildElement()
.addP({'textContent': `${((typeof colorIncorrect == 'number') && !isNaN(colorIncorrect)) ? colorIncorrect : '???'} incorrect pixels. Completed: ${colorPercent}`}).buildElement()
.buildElement()
.buildElement();
}
} }
// Adds the colors to the color container in the filter window // Adds the colors to the color container in the filter window

14
src/overlay.css
View file

@ -338,4 +338,16 @@ input[type="file"] {
line-height: 1 !important; line-height: 1 !important;
font-size: 1.6em; font-size: 1.6em;
font-family: monospace; font-family: monospace;
} }
/* WINDOWED MODE */
/* Containers for "sections" of elements in windowed mode */
.bm-container {
margin: 0.25em 0;
}
/* Header 1 in windowed mode */
.bm-windowed h1 {
font-size: 1em;
}