Filter dragbar shows correct/total pixels

dist/BlueMarble-For-GreasyFork.user.css

@@ -94,7 +94,8 @@ confetti-piece {
   font-weight: bold;
   vertical-align: middle;
 }
-.bm-dragbar h1 {
+.bm-dragbar h1,
+.bm-dragbar-text {
   font-size: 1.2em;
   user-select: none;
   overflow: hidden;

dist/BlueMarble-For-GreasyFork.user.js

@@ -2,7 +2,7 @@
 // @name            Blue Marble
 // @name:en         Blue Marble
 // @namespace       https://github.com/SwingTheVine/
-// @version         0.91.3
+// @version         0.91.8
 // @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
@@ -2818,11 +2818,17 @@ Did you try clicking the canvas first?`);
         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.onclick = () => {
+          const windowedColorTotals = document.querySelector("#bm-filter-windowed-color-totals");
+          if (windowedColorTotals) {
+            windowedColorTotals.style.display = button.dataset["status"] == "expanded" ? "none" : "";
+          }
+          instance.handleMinimization(button);
+        };
         button.ontouchend = () => {
           button.click();
         };
-      }).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) => {
+      }).buildElement().addDiv().addSpan({ "id": "bm-filter-windowed-color-totals", "class": "bm-dragbar-text", "style": "font-weight: 700;" }).buildElement().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 = () => {
           document.querySelector(`#${this.windowID}`)?.remove();
           this.buildWindow();
@@ -2894,6 +2900,12 @@ Did you try clicking the canvas first?`);
           colorIncorrect
         };
       }
+      const windowedColorTotals = document.querySelector("#bm-filter-windowed-color-totals");
+      if (windowedColorTotals) {
+        const allCorrect = this.allPixelsCorrectTotal.toString().length > 7 ? this.allPixelsCorrectTotal.toString().slice(0, 2) + "\u2026" + this.allPixelsCorrectTotal.toString().slice(-3) : this.allPixelsCorrectTotal.toString();
+        const allTotal = this.allPixelsTotal.toString().length > 7 ? this.allPixelsTotal.toString().slice(0, 2) + "\u2026" + this.allPixelsTotal.toString().slice(-3) : this.allPixelsTotal.toString();
+        this.updateInnerHTML("#bm-filter-windowed-color-totals", `${allCorrect}/${allTotal}`, true);
+      }
       if (!colorList) {
         return colorStatistics;
       }

docs/README.md

@@ -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-1118-black?style=flat"></a>
+<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1123-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-6620-blue?style=flat"></a>
 <a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Comments" src="https://img.shields.io/badge/Lines_Of_Comments-5414-blue?style=flat"></a>
 <a href="" target="_blank" rel="noopener noreferrer"><img alt="Compression" src="https://img.shields.io/badge/Compression-71.85%25-blue"></a>

package-lock.json

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

package.json

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

src/BlueMarble.meta.js

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

src/WindowFilter.js

@@ -210,10 +210,19 @@ export default class WindowFilter extends Overlay {
     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.onclick = () => {
+            const windowedColorTotals = document.querySelector('#bm-filter-windowed-color-totals');
+            if (windowedColorTotals) {
+              windowedColorTotals.style.display = (button.dataset['status'] == 'expanded') ? 'none' : '';
+            }
+            instance.handleMinimization(button);
+          };
           button.ontouchend = () => {button.click()}; // Needed only to negate weird interaction with dragbar
         }).buildElement()
-        .addDiv().buildElement() // Contains the minimized h1 element
+        .addDiv()
+          .addSpan({'id': 'bm-filter-windowed-color-totals', 'class': 'bm-dragbar-text', 'style': 'font-weight: 700;'}).buildElement() // Contains correct / total pixel values
+          // Minimized h1 element will appear here
+        .buildElement() 
         .addDiv({'class': 'bm-flex-center'})
           .addButton({'class': 'bm-button-circle', 'textContent': '🗖', 'aria-label': 'Switch to fullscreen mode for "Color Filter"'}, (instance, button) => {
             button.onclick = () => {
@@ -577,6 +586,22 @@ export default class WindowFilter extends Overlay {
       }
     }
 
+    // Obtains the correct / total pixels display element, or `undefined` if in fullscreen mode
+    const windowedColorTotals = document.querySelector('#bm-filter-windowed-color-totals');
+
+    // If the element exists...
+    if (windowedColorTotals) {
+
+      // Returns the number, unlocalized (no space to localize)
+      // OR returns the three characters on either end of the string, with the middle replaced with an ellipse.
+      // E.g. '1234567' or '123…678'
+      const allCorrect = (this.allPixelsCorrectTotal.toString().length > 7) ? this.allPixelsCorrectTotal.toString().slice(0, 2) + '…' + this.allPixelsCorrectTotal.toString().slice(-3) : this.allPixelsCorrectTotal.toString();
+      const allTotal = (this.allPixelsTotal.toString().length > 7) ? this.allPixelsTotal.toString().slice(0, 2) + '…' + this.allPixelsTotal.toString().slice(-3) : this.allPixelsTotal.toString();
+
+      // Updates the display with XSS protection enabled (because why not)
+      this.updateInnerHTML('#bm-filter-windowed-color-totals', `${allCorrect}/${allTotal}`, true);
+    }
+
     // Return early if the color list does not exist.
     // We can't update DOM elements that don't exist, so we exit now.
     if (!colorList) {return colorStatistics;}

src/overlay.css

@@ -92,7 +92,9 @@
 }
 
 /* Header 1 when inside dragbar */
-.bm-dragbar h1 {
+/* Or, when the custom class is used */
+.bm-dragbar h1,
+.bm-dragbar-text {
   font-size: 1.2em;
   user-select: none;
   overflow: hidden;