Added hex codes to color filter (#463)

dist/BlueMarble-For-GreasyFork.user.js

@@ -2,7 +2,7 @@
 // @name            Blue Marble
 // @name:en         Blue Marble
 // @namespace       https://github.com/SwingTheVine/
-// @version         0.90.30
+// @version         0.90.33
 // @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
@@ -217,6 +217,12 @@
     });
     return 0.2126 * srgb[0] + 0.7152 * srgb[1] + 0.0722 * srgb[2];
   }
+  function rgbToHex(red, green, blue) {
+    if (Array.isArray(red)) {
+      [red, green, blue] = red;
+    }
+    return (1 << 24 | red << 16 | green << 8 | blue).toString(16).slice(1);
+  }
   function colorpaletteForBlueMarble(tolerance) {
     const colorpaletteBM = colorpalette;
     colorpaletteBM.unshift({ "id": -1, "premium": false, "name": "Erased", "rgb": [222, 250, 206] });
@@ -2797,6 +2803,7 @@ Did you try clicking the canvas first?`);
     const colorList = new Overlay(this.name, this.version);
     colorList.addDiv({ "class": "bm-filter-flex" });
     for (const color of this.palette) {
+      const colorValueHex = "#" + rgbToHex(color.rgb).toUpperCase();
       const lumin = calculateRelativeLuminance(color.rgb);
       let textColorForPaletteColorBackground = 1.05 / (lumin + 0.05) > (lumin + 0.05) / 0.05 ? "white" : "black";
       if (!color.id) {
@@ -2827,7 +2834,7 @@ Did you try clicking the canvas first?`);
         "data-total": colorTotal,
         "data-percent": colorPercent.slice(-1) == "%" ? colorPercent.slice(0, -1) : "0",
         "data-incorrect": colorIncorrect || 0
-      }).addDiv({ "class": "bm-filter-container-rgb", "style": `background-color: rgb(${color.rgb?.map((channel) => Number(channel) || 0).join(",")});` }).addButton(
+      }).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",
@@ -2856,7 +2863,7 @@ Did you try clicking the canvas first?`);
             button.disabled = true;
           }
         }
-      ).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();
+      ).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();
     }
     colorList.buildOverlay(parentElement);
   };

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-1069-black?style=flat"></a>
+<a href="" target="_blank" rel="noopener noreferrer"><img alt="Total Patches" src="https://img.shields.io/badge/Total_Patches-1072-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>

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wplace-bluemarble",
-  "version": "0.90.30",
+  "version": "0.90.33",
   "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.90.30
+// @version         0.90.33
 // @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

@@ -1,6 +1,6 @@
 import ConfettiManager from "./confetttiManager";
 import Overlay from "./Overlay";
-import { calculateRelativeLuminance, localizeDate, localizeNumber, localizePercent } from "./utils";
+import { calculateRelativeLuminance, localizeDate, localizeNumber, localizePercent, rgbToHex } from "./utils";
 
 /** The overlay builder for the color filter Blue Marble window.
  * @description This class handles the overlay UI for the color filter window of the Blue Marble userscript.
@@ -232,6 +232,9 @@ export default class WindowFilter extends Overlay {
     // For each color in the palette...
     for (const color of this.palette) {
 
+      // Converts the RGB color to hexdecimal
+      const colorValueHex = '#' + rgbToHex(color.rgb).toUpperCase();
+
       // Relative Luminance
       const lumin = calculateRelativeLuminance(color.rgb);
 
@@ -289,7 +292,9 @@ export default class WindowFilter extends Overlay {
         'data-total': colorTotal,
         'data-percent': (colorPercent.slice(-1) == '%') ? colorPercent.slice(0, -1) : '0',
         'data-incorrect': colorIncorrect || 0
-      }).addDiv({'class': 'bm-filter-container-rgb', 'style': `background-color: rgb(${color.rgb?.map(channel => Number(channel) || 0).join(',')});`})
+      })
+      .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',
@@ -321,15 +326,17 @@ export default class WindowFilter extends Overlay {
             }
           ).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}`}).buildElement()
-            .addSmall({'textContent': `${colorCorrectLocalized} / ${colorTotalLocalized}`}).buildElement()
-          .buildElement()
-          .addP({'textContent': `${((typeof colorIncorrect == 'number') && !isNaN(colorIncorrect)) ? colorIncorrect : '???'} incorrect pixels. Completed: ${colorPercent}`}).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}`}).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

src/utils.js

@@ -315,6 +315,31 @@ export function calculateRelativeLuminance(array) {
   return (0.2126 * srgb[0]) + (0.7152 * srgb[1]) + (0.0722 * srgb[2]);
 }
 
+/** Converts an RGB color to hexdecimal color.
+ * Octothorpe not included.
+ * @param {number | Array<number, number, number>} red - The Red channel of the RGB color, or all three channels as an Array
+ * @param {number} [green] - The Green channel of the RGB color
+ * @param {number} [blue] - The Blue channel of the RGB color
+ * @returns {string} Hex color code as string
+ * @since 0.90.31
+ */
+export function rgbToHex(red, green, blue) {
+  if (Array.isArray(red)) {[red, green, blue] = red;} // Deconstruct the Array if an Array was passed in
+  return ((1 << 24) | (red << 16) | (green << 8) | blue).toString(16).slice(1); // Packs it into a 24-bit integer, then converts it to base16.
+}
+
+/** Converts a hexdecimal color to an RGB color.
+ * Alpha channel not supported.
+ * @param {string} hex - Hex color code as string
+ * @returns {Array<number, number, number>} RGB color as an Array
+ * @since 0.90.31
+ */
+export function hexToRGB(hex) {
+  hex = (hex[0] == '#') ? hex.slice(1) : hex; // Removes the octothorpe, if any
+  const packedIntRGB = parseInt(hex, 16); // Converts (base16) into an integer
+  return [(packedIntRGB >> 16 & 255), (packedIntRGB >> 8 & 255), (packedIntRGB & 255)]; // Unpacks the integer into the RGB channels
+}
+
 /** Returns the coordinate input fields
  * @returns {Element[]} The 4 coordinate Inputs
  * @since 0.74.0