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

SVG shinanigans

Browse source
This commit is contained in:
SwingTheVine 2026-02-16 04:16:20 -05:00
parent 42da8020bf
commit 1f2d86f73c
2 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/main.js
View file

@ -6,7 +6,7 @@ import Overlay from './Overlay.js';
import Observers from './observers.js';
import ApiManager from './apiManager.js';
import TemplateManager from './templateManager.js';
import { consoleLog, consoleWarn } from './utils.js';
import { calculateRelativeLuminance, consoleLog, consoleWarn } from './utils.js';
const name = GM_info.script.name.toString(); // Name of userscript
const version = GM_info.script.version.toString(); // Version of userscript
@ -292,7 +292,7 @@ function buildWindowMain() {
.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>'},
.addButton({'class': 'bm-button-circle bm-button-pin', 'style': 'margin-top: 0;', 'innerHTML': '<svg viewBox="0 0 4 6"><path d="M.5,3.4A2,2 0 1 1 3.5,3.4L2,6"/><circle cx="2" cy="2" r=".7" fill="#fff"/></svg>'},
(instance, button) => {
button.onclick = () => {
const coords = instance.apiManager?.coordsTilePixel; // Retrieves the coords from the API manager
@ -509,9 +509,24 @@ function buildWindowFilter() {
const colorList = new Overlay(name, version);
colorList.addDiv({'id': 'bm-filter-container-colors', 'class': 'bm-container'})
// For each color in the palette, construct the DOM tree
// For each color in the palette...
for (const color of palette) {
colorList.addDiv({'class': 'bm-container'})
// Relative Luminance
const lumin = calculateRelativeLuminance(color.rgb);
// Calculates if white or black text would contrast better with the palette color
const textColorForPaletteColorBackground =
(((1.05) / (lumin + 0.05)) > ((lumin + 0.05) / 0.05))
? 'white' : 'black';
// <svg viewBox="0 1 12 6"><mask id="a"><path d="M0,0H12V8L0,2" fill="#fff"/></mask><path d="M0,4Q6-2 12,4Q6,10 0,4H4A2,2 0 1 0 6,2Q6,4 4,4ZM1,2L10,6.5L9.5,7L.5,2.5" mask="url(#a)"/></svg>
// Construct the DOM tree
colorList.addDiv({'class': 'bm-container flex-space-between'})
.addDiv({'class': '' + textColorForPaletteColorBackground, 'style': `border: thick double white`})
.addButton({'class': 'bm-button-trans', 'innerHTML': `<svg viewBox="0 .5 6 3"><path d="M0,2Q3-1 6,2Q3,5 0,2H2A1,1 0 1 0 3,1Q3,2 2,2"/></svg>`}).buildElement()
.buildElement()
.addP({'textContent': `Color ID: ${color.id?.toString()?.padStart(2, '0')}, Name: ${color.name}`}).buildElement()
.buildElement()
}

17
src/utils.js
View file

@ -127,6 +127,23 @@ export function base64ToUint8(base64) {
return array;
}
/** Calcualtes the relative luminance of an RGB value
* @param {Array<Number, Number, Number>} array - The RGB values as an array
* @returns {Number} The relative luminance as a Number
* @since 0.88.180
*/
export function calculateRelativeLuminance(array) {
// Convert the 0-255 range to 0-1
const srgb = array.map(channel => {
channel /= 255;
return (channel <= 0.03928) ? (channel / 12.92) : Math.pow((channel + 0.055) / 1.055, 2.4);
});
// https://en.wikipedia.org/wiki/Relative_luminance#Relative_luminance_and_%22gamma_encoded%22_colorspaces
return (0.2126 * srgb[0]) + (0.7152 * srgb[1]) + (0.0722 * srgb[2]);
}
/** Returns the coordinate input fields
* @returns {Element[]} The 4 coordinate Inputs
* @since 0.74.0