mirror of
https://github.com/SwingTheVine/Wplace-BlueMarble.git
synced 2026-05-09 06:19:54 +00:00
Merge branch 'code' into documentation
This commit is contained in:
SwingTheVine
GitHub
commit
1fc0b90590
12 changed files with 825 additions and 352 deletions
2
dist/BlueMarble.user.css
vendored
2
dist/BlueMarble.user.css
vendored
|
|
@ -1 +1 @@
|
|||
#bm-n{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease,transform 0s;max-width:300px;width:auto;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}#bm-4,#bm-n hr,#bm-3,#bm-1{transition:opacity .2s ease,height .2s ease}div#bm-n{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-i{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-i.dragging{cursor:grabbing}#bm-n:has(#bm-i.dragging){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#bm-i.dragging{pointer-events:auto}#bm-7{margin-bottom:.5em}#bm-7[style*="text-align: center"]{display:flex;flex-direction:column;align-items:center;justify-content:center}#bm-n[style*="padding: 5px"]{width:auto!important;max-width:300px;min-width:200px}#bm-n img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle;transition:opacity .2s ease}#bm-7[style*="text-align: center"] img{display:block;margin:0 auto}#bm-i{transition:margin-bottom .2s ease}#bm-n h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-3 input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-3 label{margin-right:.5ch}.bm-q{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-d{vertical-align:middle}#bm-d svg{width:50%;margin:0 auto;fill:#111}div:has(>#bm-button-teleport){display:flex;gap:.5ch}#bm-button-favorite svg,#bm-button-template svg{height:1em;margin:2px auto 0;text-align:center;line-height:1em;vertical-align:bottom}#bm-8 input[type=number]{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-8 input[type=number]::-webkit-outer-spin-button,#bm-8 input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bm-0{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}div:has(>#bm-2)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#bm-2,input[type=file][id*=template]{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;opacity:0!important;z-index:-9999!important;pointer-events:none!important}#bm-b{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-1{display:flex;justify-content:space-between}#bm-n small{font-size:x-small;color:#d3d3d3}#bm-4,#bm-3,#bm-8,#bm-0,div:has(>#bm-2),#bm-b{margin-top:.5em}#bm-n button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-n button:hover,#bm-n button:focus-visible{background-color:#1061e5}#bm-n button:active,#bm-n button:disabled{background-color:#2e97ff}#bm-n button:disabled{text-decoration:line-through}
|
||||
#bm-s,#bm-s-telemetry{position:fixed;background-color:#153063e6;color:#fff;padding:10px;border-radius:8px;z-index:9000;transition:all .3s ease,transform 0s;max-width:300px;width:auto;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}#bm-8,#bm-s hr,#bm-s-telemetry hr,#bm-7,#bm-3{transition:opacity .2s ease,height .2s ease}div#bm-s,div#bm-s-telemetry{font-family:Roboto Mono,Courier New,Monaco,DejaVu Sans Mono,monospace,Arial;letter-spacing:.05em}#bm-r,#bm-r-telemetry{margin-bottom:.5em;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;cursor:grab;width:100%;height:1em}#bm-r.dragging,#bm-r-telemetry.dragging{cursor:grabbing}#bm-s:has(#bm-r.dragging),#bm-s-telemetry:has(#bm-r-telemetry.dragging){pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#bm-r.dragging,#bm-r-telemetry.dragging{pointer-events:auto}#bm-c,#bm-c-telemetry{margin-bottom:.5em}#bm-c[style*="text-align: center"],#bm-c-telemetry[style*="text-align: center"]{display:flex;flex-direction:column;align-items:center;justify-content:center}#bm-s[style*="padding: 5px"],#bm-s-telemetry[style*="padding: 5px"]{width:auto!important;max-width:300px;min-width:200px}#bm-s img{display:inline-block;height:2.5em;margin-right:1ch;vertical-align:middle;transition:opacity .2s ease}#bm-c[style*="text-align: center"] img{display:block;margin:0 auto}#bm-r,#bm-r-telemetry{transition:margin-bottom .2s ease}#bm-s h1,#bm-s-telemetry h1{display:inline-block;font-size:x-large;font-weight:700;vertical-align:middle}#bm-7 input[type=checkbox]{vertical-align:middle;margin-right:.5ch}#bm-7 label{margin-right:.5ch}.bm-v{border:white 1px solid;height:1.5em;width:1.5em;margin-top:2px;text-align:center;line-height:1em;padding:0!important}#bm-i{vertical-align:middle}#bm-i svg{width:50%;margin:0 auto;fill:#111}div:has(>#bm-button-teleport){display:flex;gap:.5ch}#bm-button-favorite svg,#bm-button-template svg{height:1em;margin:2px auto 0;text-align:center;line-height:1em;vertical-align:bottom}#bm-d input[type=number]{appearance:auto;-moz-appearance:textfield;width:5.5ch;margin-left:1ch;background-color:#0003;padding:0 .5ch;font-size:small}#bm-d input[type=number]::-webkit-outer-spin-button,#bm-d input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#bm-2{display:flex;flex-direction:row;flex-wrap:wrap;align-content:center;justify-content:center;align-items:center;gap:1ch}div:has(>#bm-5)>button{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#bm-5,input[type=file][id*=template]{display:none!important;visibility:hidden!important;position:absolute!important;left:-9999px!important;top:-9999px!important;width:0!important;height:0!important;opacity:0!important;z-index:-9999!important;pointer-events:none!important}#bm-g{font-size:small;background-color:#0003;padding:0 .5ch;height:3.75em;width:100%}#bm-3{display:flex;justify-content:space-between}#bm-s small{font-size:x-small;color:#d3d3d3}#bm-8,#bm-7,#bm-d,#bm-2,div:has(>#bm-5),#bm-g{margin-top:.5em}#bm-s button,#bm-s-telemetry button{background-color:#144eb9;border-radius:1em;padding:0 .75ch}#bm-s button:hover,#bm-s button:focus-visible,#bm-s-telemetry button:hover,#bm-s-telemetry button:focus-visible{background-color:#1061e5}#bm-s button:active,#bm-s-telemetry button:active #bm-s button:disabled,#bm-s-telemetry button:disabled{background-color:#2e97ff}#bm-s button:disabled,#bm-s-telemetry button:disabled{text-decoration:line-through}
|
||||
|
|
|
|||
61
dist/BlueMarble.user.css.map.json
vendored
61
dist/BlueMarble.user.css.map.json
vendored
|
|
@ -1,30 +1,35 @@
|
|||
{
|
||||
"bm-contain-buttons-template": "bm-0",
|
||||
"bm-contain-buttons-action": "bm-1",
|
||||
"bm-input-file-template": "bm-2",
|
||||
"bm-contain-automation": "bm-3",
|
||||
"bm-contain-userinfo": "bm-4",
|
||||
"bm-display-coords": "bm-5",
|
||||
"bm-user-nextlevel": "bm-6",
|
||||
"bm-contain-header": "bm-7",
|
||||
"bm-contain-coords": "bm-8",
|
||||
"bm-button-disable": "bm-9",
|
||||
"bm-button-convert": "bm-a",
|
||||
"bm-output-status": "bm-b",
|
||||
"bm-user-droplets": "bm-c",
|
||||
"bm-button-coords": "bm-d",
|
||||
"bm-button-create": "bm-e",
|
||||
"bm-button-enable": "bm-f",
|
||||
"bm-button-move": "bm-g",
|
||||
"bm-user-name": "bm-h",
|
||||
"bm-bar-drag": "bm-i",
|
||||
"bm-input-tx": "bm-j",
|
||||
"bm-input-ty": "bm-k",
|
||||
"bm-input-px": "bm-l",
|
||||
"bm-input-py": "bm-m",
|
||||
"bm-overlay": "bm-n",
|
||||
"bm-cStyle": "bm-o",
|
||||
"bm-canvas": "bm-p",
|
||||
"bm-help": "bm-q",
|
||||
"bm-name": "bm-r"
|
||||
"bm-button-colors-disable-all": "bm-0",
|
||||
"bm-button-colors-enable-all": "bm-1",
|
||||
"bm-contain-buttons-template": "bm-2",
|
||||
"bm-contain-buttons-action": "bm-3",
|
||||
"bm-contain-colorfilter": "bm-4",
|
||||
"bm-input-file-template": "bm-5",
|
||||
"bm-rebuild-color-list": "bm-6",
|
||||
"bm-contain-automation": "bm-7",
|
||||
"bm-contain-userinfo": "bm-8",
|
||||
"bm-colorfilter-list": "bm-9",
|
||||
"bm-display-coords": "bm-a",
|
||||
"bm-user-nextlevel": "bm-b",
|
||||
"bm-contain-header": "bm-c",
|
||||
"bm-contain-coords": "bm-d",
|
||||
"bm-button-disable": "bm-e",
|
||||
"bm-button-convert": "bm-f",
|
||||
"bm-output-status": "bm-g",
|
||||
"bm-user-droplets": "bm-h",
|
||||
"bm-button-coords": "bm-i",
|
||||
"bm-button-create": "bm-j",
|
||||
"bm-button-enable": "bm-k",
|
||||
"bm-button-move": "bm-l",
|
||||
"bm-user-name": "bm-m",
|
||||
"bm-input-tx": "bm-n",
|
||||
"bm-input-ty": "bm-o",
|
||||
"bm-input-px": "bm-p",
|
||||
"bm-input-py": "bm-q",
|
||||
"bm-bar-drag": "bm-r",
|
||||
"bm-overlay": "bm-s",
|
||||
"bm-cStyle": "bm-t",
|
||||
"bm-canvas": "bm-u",
|
||||
"bm-help": "bm-v",
|
||||
"bm-name": "bm-w"
|
||||
}
|
||||
8
dist/BlueMarble.user.js
vendored
8
dist/BlueMarble.user.js
vendored
File diff suppressed because one or more lines are too long
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.78.0",
|
||||
"version": "0.81.54",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.78.0",
|
||||
"version": "0.81.54",
|
||||
"devDependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"jsdoc": "^4.0.4",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "wplace-bluemarble",
|
||||
"version": "0.82.0",
|
||||
"version": "0.82.54",
|
||||
"type": "module",
|
||||
"homepage": "https://bluemarble.camilledaguin.fr/",
|
||||
"repository": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// ==UserScript==
|
||||
// @name Blue Marble
|
||||
// @namespace https://github.com/SwingTheVine/
|
||||
// @version 0.82.0
|
||||
// @version 0.82.54
|
||||
// @description A userscript to automate and/or enhance the user experience on Wplace.live. Make sure to comply with the site's Terms of Service, and rules! This script is not affiliated with Wplace.live in any way, use at your own risk. This script is not affiliated with TamperMonkey. The author of this userscript is not responsible for any damages, issues, loss of data, or punishment that may occur as a result of using this script. This script is provided "as is" under the MPL-2.0 license. The "Blue Marble" icon is licensed under CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. The image is owned by NASA.
|
||||
// @author SwingTheVine
|
||||
// @license MPL-2.0
|
||||
|
|
@ -16,7 +16,9 @@
|
|||
// @grant GM_addStyle
|
||||
// @grant GM.setValue
|
||||
// @grant GM_getValue
|
||||
// @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/e936688dc67a3f7aefd65afc8b96c23530674605/dist/BlueMarble.user.css
|
||||
// @grant GM_xmlhttpRequest
|
||||
// @connect telemetry.thebluecorner.net
|
||||
// @resource CSS-BM-File https://raw.githubusercontent.com/SwingTheVine/Wplace-BlueMarble/1b71f0f8403b459cec0e1e298b73823570ed6016/dist/BlueMarble.user.css
|
||||
// ==/UserScript==
|
||||
|
||||
// Wplace --> https://wplace.live
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { uint8ToBase64 } from "./utils";
|
||||
import { uint8ToBase64, colorpalette } from "./utils";
|
||||
|
||||
/** An instance of a template.
|
||||
* Handles all mathematics, manipulation, and analysis regarding a single template.
|
||||
|
|
@ -39,6 +39,35 @@ export default class Template {
|
|||
this.chunked = chunked;
|
||||
this.tileSize = tileSize;
|
||||
this.pixelCount = 0; // Total pixel count in template
|
||||
this.requiredPixelCount = 0; // Total number of non-transparent, non-#deface pixels
|
||||
this.defacePixelCount = 0; // Number of #deface pixels (represents Transparent color in-game)
|
||||
this.colorPalette = {}; // key: "r,g,b" -> { count: number, enabled: boolean }
|
||||
this.tilePrefixes = new Set(); // Set of "xxxx,yyyy" tiles this template touches
|
||||
this.storageKey = null; // Key used inside templatesJSON to persist settings
|
||||
|
||||
// Build allowed color set from site palette (exclude special Transparent entry by name)
|
||||
const allowed = Array.isArray(colorpalette) ? colorpalette : [];
|
||||
this.allowedColorsSet = new Set(
|
||||
allowed
|
||||
.filter(c => (c?.name || '').toLowerCase() !== 'transparent' && Array.isArray(c?.rgb))
|
||||
.map(c => `${c.rgb[0]},${c.rgb[1]},${c.rgb[2]}`)
|
||||
);
|
||||
// Ensure template #deface marker is treated as allowed (maps to Transparent color)
|
||||
const defaceKey = '222,250,206';
|
||||
this.allowedColorsSet.add(defaceKey);
|
||||
// Map rgb-> {id, premium}
|
||||
this.rgbToMeta = new Map(
|
||||
allowed
|
||||
.filter(c => Array.isArray(c?.rgb))
|
||||
.map(c => [ `${c.rgb[0]},${c.rgb[1]},${c.rgb[2]}`, { id: c.id, premium: !!c.premium, name: c.name } ])
|
||||
);
|
||||
// Map #deface to Transparent meta for UI naming and ID continuity
|
||||
try {
|
||||
const transparent = allowed.find(c => (c?.name || '').toLowerCase() === 'transparent');
|
||||
if (transparent && Array.isArray(transparent.rgb)) {
|
||||
this.rgbToMeta.set(defaceKey, { id: transparent.id, premium: !!transparent.premium, name: transparent.name });
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
/** Creates chunks of the template for each tile.
|
||||
|
|
@ -62,6 +91,51 @@ export default class Template {
|
|||
// Store pixel count in instance property for access by template manager and UI components
|
||||
this.pixelCount = totalPixels;
|
||||
|
||||
// ==================== REQUIRED/DEFACE PIXEL COUNTING ====================
|
||||
// Build a 1× scale canvas to inspect original pixels and count required vs deface
|
||||
try {
|
||||
const inspectCanvas = new OffscreenCanvas(imageWidth, imageHeight);
|
||||
const inspectCtx = inspectCanvas.getContext('2d', { willReadFrequently: true });
|
||||
inspectCtx.imageSmoothingEnabled = false;
|
||||
inspectCtx.clearRect(0, 0, imageWidth, imageHeight);
|
||||
inspectCtx.drawImage(bitmap, 0, 0);
|
||||
const inspectData = inspectCtx.getImageData(0, 0, imageWidth, imageHeight).data;
|
||||
|
||||
let required = 0;
|
||||
let deface = 0;
|
||||
const paletteMap = new Map();
|
||||
for (let y = 0; y < imageHeight; y++) {
|
||||
for (let x = 0; x < imageWidth; x++) {
|
||||
const idx = (y * imageWidth + x) * 4;
|
||||
const r = inspectData[idx];
|
||||
const g = inspectData[idx + 1];
|
||||
const b = inspectData[idx + 2];
|
||||
const a = inspectData[idx + 3];
|
||||
if (a === 0) { continue; } // Ignored transparent pixel
|
||||
const key = `${r},${g},${b}`;
|
||||
if (r === 222 && g === 250 && b === 206) { deface++; }
|
||||
if (!this.allowedColorsSet.has(key)) { continue; } // Skip non-palette colors (but #deface added to allowed)
|
||||
required++;
|
||||
paletteMap.set(key, (paletteMap.get(key) || 0) + 1);
|
||||
}
|
||||
}
|
||||
|
||||
this.requiredPixelCount = required;
|
||||
this.defacePixelCount = deface;
|
||||
|
||||
// Persist palette with all colors enabled by default
|
||||
const paletteObj = {};
|
||||
for (const [key, count] of paletteMap.entries()) {
|
||||
paletteObj[key] = { count, enabled: true };
|
||||
}
|
||||
this.colorPalette = paletteObj;
|
||||
} catch (err) {
|
||||
// Fail-safe: if OffscreenCanvas not available or any error, fall back to width×height
|
||||
this.requiredPixelCount = Math.max(0, this.pixelCount);
|
||||
this.defacePixelCount = 0;
|
||||
console.warn('Failed to compute required/deface counts. Falling back to total pixels.', err);
|
||||
}
|
||||
|
||||
const templateTiles = {}; // Holds the template tiles
|
||||
const templateTilesBuffers = {}; // Holds the buffers of the template tiles
|
||||
|
||||
|
|
@ -140,12 +214,22 @@ export default class Template {
|
|||
imageData.data[pixelIndex] = 0;
|
||||
imageData.data[pixelIndex + 1] = 0;
|
||||
imageData.data[pixelIndex + 2] = 0;
|
||||
imageData.data[pixelIndex + 3] = 32; // Translucent black
|
||||
} else { // Transparent negative space
|
||||
imageData.data[pixelIndex + 3] = 0;
|
||||
} else {
|
||||
imageData.data[pixelIndex] = 255;
|
||||
imageData.data[pixelIndex + 1] = 255;
|
||||
imageData.data[pixelIndex + 2] = 255;
|
||||
}
|
||||
imageData.data[pixelIndex + 3] = 32; // Make it translucent
|
||||
} else if (x % shreadSize !== 1 || y % shreadSize !== 1) { // Otherwise only draw the middle pixel
|
||||
imageData.data[pixelIndex + 3] = 0; // Make the pixel transparent on the alpha channel
|
||||
} else {
|
||||
// Center pixel: keep only if in allowed site palette
|
||||
const r = imageData.data[pixelIndex];
|
||||
const g = imageData.data[pixelIndex + 1];
|
||||
const b = imageData.data[pixelIndex + 2];
|
||||
if (!this.allowedColorsSet.has(`${r},${g},${b}`)) {
|
||||
imageData.data[pixelIndex + 3] = 0; // hide non-palette colors
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -164,6 +248,8 @@ export default class Template {
|
|||
.padStart(3, '0')},${(pixelY % 1000).toString().padStart(3, '0')}`;
|
||||
|
||||
templateTiles[templateTileName] = await createImageBitmap(canvas); // Creates the bitmap
|
||||
// Record tile prefix for fast lookup later
|
||||
this.tilePrefixes.add(templateTileName.split(',').slice(0,2).join(','));
|
||||
|
||||
const canvasBlob = await canvas.convertToBlob();
|
||||
const canvasBuffer = await canvasBlob.arrayBuffer();
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
import TemplateManager from "./templateManager.js";
|
||||
import { escapeHTML, numberToEncoded, serverTPtoDisplayTP } from "./utils.js";
|
||||
import { consoleError, escapeHTML, numberToEncoded, serverTPtoDisplayTP } from "./utils.js";
|
||||
|
||||
export default class ApiManager {
|
||||
|
||||
|
|
@ -141,4 +141,110 @@ export default class ApiManager {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Sends a heartbeat to the telemetry server
|
||||
async sendHeartbeat(version) {
|
||||
|
||||
console.log('Sending heartbeat to telemetry server...');
|
||||
|
||||
let userSettings = GM_getValue('bmUserSettings', '{}')
|
||||
userSettings = JSON.parse(userSettings);
|
||||
|
||||
if (!userSettings || !userSettings.telemetry || !userSettings.uuid) {
|
||||
console.log('Telemetry is disabled, not sending heartbeat.');
|
||||
return; // If telemetry is disabled, do not send heartbeat
|
||||
}
|
||||
|
||||
const ua = navigator.userAgent;
|
||||
let browser = await this.#getBrowserFromUA(ua);
|
||||
let os = this.#getOS(ua);
|
||||
|
||||
GM_xmlhttpRequest({
|
||||
method: 'POST',
|
||||
url: 'https://telemetry.thebluecorner.net/heartbeat',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
data: JSON.stringify({
|
||||
uuid: userSettings.uuid,
|
||||
version: version,
|
||||
browser: browser,
|
||||
os: os,
|
||||
}),
|
||||
onload: (response) => {
|
||||
if (response.status !== 200) {
|
||||
consoleError('Failed to send heartbeat:', response.statusText);
|
||||
}
|
||||
},
|
||||
onerror: (error) => {
|
||||
consoleError('Error sending heartbeat:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async #getBrowserFromUA(ua = navigator.userAgent) {
|
||||
ua = ua || "";
|
||||
|
||||
// Opera
|
||||
if (ua.includes("OPR/") || ua.includes("Opera")) return "Opera";
|
||||
|
||||
// Edge (Chromium-based uses "Edg/")
|
||||
if (ua.includes("Edg/")) return "Edge";
|
||||
|
||||
// Vivaldi
|
||||
if (ua.includes("Vivaldi")) return "Vivaldi";
|
||||
|
||||
// Yandex
|
||||
if (ua.includes("YaBrowser")) return "Yandex";
|
||||
|
||||
// Kiwi (not guaranteed, but typically shows "Kiwi")
|
||||
if (ua.includes("Kiwi")) return "Kiwi";
|
||||
|
||||
// Brave (doesn't expose in UA by default; heuristic via Brave/ token in some versions)
|
||||
if (ua.includes("Brave")) return "Brave";
|
||||
|
||||
// Firefox
|
||||
if (ua.includes("Firefox/")) return "Firefox";
|
||||
|
||||
// Chrome (catch-all for Chromium browsers)
|
||||
if (ua.includes("Chrome/")) return "Chrome";
|
||||
|
||||
// Safari (must be after Chrome check)
|
||||
if (ua.includes("Safari/")) return "Safari";
|
||||
|
||||
// Brave special check
|
||||
if (navigator.brave && typeof navigator.brave.isBrave === "function") {
|
||||
if (await navigator.brave.isBrave()) return "Brave";
|
||||
}
|
||||
|
||||
// Fallback
|
||||
return 'Unknown';
|
||||
}
|
||||
|
||||
#getOS(ua = navigator.userAgent) {
|
||||
ua = ua || "";
|
||||
|
||||
if (/Windows NT 11/i.test(ua)) return "Windows 11";
|
||||
if (/Windows NT 10/i.test(ua)) return "Windows 10";
|
||||
if (/Windows NT 6\.3/i.test(ua)) return "Windows 8.1";
|
||||
if (/Windows NT 6\.2/i.test(ua)) return "Windows 8";
|
||||
if (/Windows NT 6\.1/i.test(ua)) return "Windows 7";
|
||||
if (/Windows NT 6\.0/i.test(ua)) return "Windows Vista";
|
||||
if (/Windows NT 5\.1|Windows XP/i.test(ua)) return "Windows XP";
|
||||
|
||||
if (/Mac OS X 10[_\.]15/i.test(ua)) return "macOS Catalina";
|
||||
if (/Mac OS X 10[_\.]14/i.test(ua)) return "macOS Mojave";
|
||||
if (/Mac OS X 10[_\.]13/i.test(ua)) return "macOS High Sierra";
|
||||
if (/Mac OS X 10[_\.]12/i.test(ua)) return "macOS Sierra";
|
||||
if (/Mac OS X 10[_\.]11/i.test(ua)) return "OS X El Capitan";
|
||||
if (/Mac OS X 10[_\.]10/i.test(ua)) return "OS X Yosemite";
|
||||
if (/Mac OS X 10[_\.]/i.test(ua)) return "macOS"; // Generic fallback
|
||||
|
||||
if (/Android/i.test(ua)) return "Android";
|
||||
if (/iPhone|iPad|iPod/i.test(ua)) return "iOS";
|
||||
|
||||
if (/Linux/i.test(ua)) return "Linux";
|
||||
|
||||
return "Unknown";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
237
src/main.js
237
src/main.js
|
|
@ -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 { consoleLog, consoleWarn, selectAllCoordinateInputs } from './utils.js';
|
||||
|
||||
const name = GM_info.script.name.toString(); // Name of userscript
|
||||
const version = GM_info.script.version.toString(); // Version of userscript
|
||||
|
|
@ -185,6 +185,25 @@ const storageTemplates = JSON.parse(GM_getValue('bmTemplates', '{}'));
|
|||
console.log(storageTemplates);
|
||||
templateManager.importJSON(storageTemplates); // Loads the templates
|
||||
|
||||
const userSettings = JSON.parse(GM_getValue('bmUserSettings', '{}')); // Loads the user settings
|
||||
console.log(userSettings);
|
||||
console.log(Object.keys(userSettings).length);
|
||||
if (Object.keys(userSettings).length == 0) {
|
||||
const uuid = crypto.randomUUID(); // Generates a random UUID
|
||||
console.log(uuid);
|
||||
GM.setValue('bmUserSettings', JSON.stringify({
|
||||
'uuid': uuid
|
||||
}));
|
||||
}
|
||||
setInterval(() => apiManager.sendHeartbeat(version), 1000 * 60 * 30); // Sends a heartbeat every 30 minutes
|
||||
|
||||
console.log(`Telemetry is ${!(userSettings?.telemetry == undefined)}`);
|
||||
if ((userSettings?.telemetry == undefined) || (userSettings?.telemetry > 1)) { // Increment 1 to retrigger telemetry notice
|
||||
const telemetryOverlay = new Overlay(name, version);
|
||||
telemetryOverlay.setApiManager(apiManager); // Sets the API manager for the telemetry overlay
|
||||
buildTelemetryOverlay(telemetryOverlay); // Notifies the user about telemetry
|
||||
}
|
||||
|
||||
buildOverlayMain(); // Builds the main overlay
|
||||
|
||||
overlayMain.handleDrag('#bm-overlay', '#bm-bar-drag'); // Creates dragging capability on the drag bar for dragging the overlay
|
||||
|
|
@ -242,6 +261,19 @@ function observeBlack() {
|
|||
*/
|
||||
function buildOverlayMain() {
|
||||
let isMinimized = false; // Overlay state tracker (false = maximized, true = minimized)
|
||||
// Load last saved coordinates (if any)
|
||||
let savedCoords = {};
|
||||
try { savedCoords = JSON.parse(GM_getValue('bmCoords', '{}')) || {}; } catch (_) { savedCoords = {}; }
|
||||
const persistCoords = () => {
|
||||
try {
|
||||
const tx = Number(document.querySelector('#bm-input-tx')?.value || '');
|
||||
const ty = Number(document.querySelector('#bm-input-ty')?.value || '');
|
||||
const px = Number(document.querySelector('#bm-input-px')?.value || '');
|
||||
const py = Number(document.querySelector('#bm-input-py')?.value || '');
|
||||
const data = { tx, ty, px, py };
|
||||
GM.setValue('bmCoords', JSON.stringify(data));
|
||||
} catch (_) {}
|
||||
};
|
||||
|
||||
overlayMain.addDiv({'id': 'bm-overlay', 'style': 'top: 10px; right: 75px;'})
|
||||
.addDiv({'id': 'bm-contain-header'})
|
||||
|
|
@ -296,7 +328,8 @@ function buildOverlayMain() {
|
|||
'#bm-contain-automation > *:not(#bm-contain-coords)', // Automation section excluding coordinates
|
||||
'#bm-input-file-template', // Template file upload interface
|
||||
'#bm-contain-buttons-action', // Action buttons container
|
||||
`#${instance.outputStatusId}` // Status log textarea for user feedback
|
||||
`#${instance.outputStatusId}`, // Status log textarea for user feedback
|
||||
'#bm-contain-colorfilter' // Color filter UI
|
||||
];
|
||||
|
||||
// Apply visibility changes to all toggleable elements
|
||||
|
|
@ -475,13 +508,70 @@ function buildOverlayMain() {
|
|||
instance.updateInnerHTML('bm-input-ty', coords?.[1] || '');
|
||||
instance.updateInnerHTML('bm-input-px', coords?.[2] || '');
|
||||
instance.updateInnerHTML('bm-input-py', coords?.[3] || '');
|
||||
persistCoords();
|
||||
}
|
||||
}
|
||||
).buildElement()
|
||||
.addInput({'type': 'number', 'id': 'bm-input-tx', 'placeholder': 'Tl X', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement()
|
||||
.addInput({'type': 'number', 'id': 'bm-input-ty', 'placeholder': 'Tl Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement()
|
||||
.addInput({'type': 'number', 'id': 'bm-input-px', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement()
|
||||
.addInput({'type': 'number', 'id': 'bm-input-py', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true}).buildElement()
|
||||
.addInput({'type': 'number', 'id': 'bm-input-tx', 'placeholder': 'Tl X', 'min': 0, 'max': 2047, 'step': 1, 'required': true, 'value': (savedCoords.tx ?? '')}, (instance, input) => {
|
||||
//if a paste happens on tx, split and format it into other coordinates if possible
|
||||
input.addEventListener("paste", (event) => {
|
||||
let splitText = (event.clipboardData || window.clipboardData).getData("text").split(" ").filter(n => n).map(Number).filter(n => !isNaN(n)); //split and filter all Non Numbers
|
||||
|
||||
if (splitText.length !== 4 ) { //if we dont have 4 clean coordinates end the function
|
||||
return;
|
||||
}
|
||||
|
||||
let coords = selectAllCoordinateInputs(document);
|
||||
|
||||
for (let i = 0; i < coords.length; i++) {
|
||||
coords[i].value = splitText[i]; //add the split vales
|
||||
}
|
||||
|
||||
event.preventDefault(); //prevent the pasting of the original paste that would overide the split value
|
||||
})
|
||||
const handler = () => persistCoords();
|
||||
input.addEventListener('input', handler);
|
||||
input.addEventListener('change', handler);
|
||||
}).buildElement()
|
||||
.addInput({'type': 'number', 'id': 'bm-input-ty', 'placeholder': 'Tl Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true, 'value': (savedCoords.ty ?? '')}, (instance, input) => {
|
||||
const handler = () => persistCoords();
|
||||
input.addEventListener('input', handler);
|
||||
input.addEventListener('change', handler);
|
||||
}).buildElement()
|
||||
.addInput({'type': 'number', 'id': 'bm-input-px', 'placeholder': 'Px X', 'min': 0, 'max': 2047, 'step': 1, 'required': true, 'value': (savedCoords.px ?? '')}, (instance, input) => {
|
||||
const handler = () => persistCoords();
|
||||
input.addEventListener('input', handler);
|
||||
input.addEventListener('change', handler);
|
||||
}).buildElement()
|
||||
.addInput({'type': 'number', 'id': 'bm-input-py', 'placeholder': 'Px Y', 'min': 0, 'max': 2047, 'step': 1, 'required': true, 'value': (savedCoords.py ?? '')}, (instance, input) => {
|
||||
const handler = () => persistCoords();
|
||||
input.addEventListener('input', handler);
|
||||
input.addEventListener('change', handler);
|
||||
}).buildElement()
|
||||
.buildElement()
|
||||
// Color filter UI
|
||||
.addDiv({'id': 'bm-contain-colorfilter', 'style': 'max-height: 140px; overflow: auto; border: 1px solid rgba(255,255,255,0.1); padding: 4px; border-radius: 4px; display: none;'})
|
||||
.addDiv({'style': 'display: flex; gap: 6px; margin-bottom: 6px;'})
|
||||
.addButton({'id': 'bm-button-colors-enable-all', 'textContent': 'Enable All'}, (instance, button) => {
|
||||
button.onclick = () => {
|
||||
const t = templateManager.templatesArray[0];
|
||||
if (!t?.colorPalette) { return; }
|
||||
Object.values(t.colorPalette).forEach(v => v.enabled = true);
|
||||
buildColorFilterList();
|
||||
instance.handleDisplayStatus('Enabled all colors');
|
||||
};
|
||||
}).buildElement()
|
||||
.addButton({'id': 'bm-button-colors-disable-all', 'textContent': 'Disable All'}, (instance, button) => {
|
||||
button.onclick = () => {
|
||||
const t = templateManager.templatesArray[0];
|
||||
if (!t?.colorPalette) { return; }
|
||||
Object.values(t.colorPalette).forEach(v => v.enabled = false);
|
||||
buildColorFilterList();
|
||||
instance.handleDisplayStatus('Disabled all colors');
|
||||
};
|
||||
}).buildElement()
|
||||
.buildElement()
|
||||
.addDiv({'id': 'bm-colorfilter-list'}).buildElement()
|
||||
.buildElement()
|
||||
.addInputFile({'id': 'bm-input-file-template', 'textContent': 'Upload Template', 'accept': 'image/png, image/jpeg, image/webp, image/bmp, image/gif'}).buildElement()
|
||||
.addDiv({'id': 'bm-contain-buttons-template'})
|
||||
|
|
@ -547,6 +637,139 @@ function buildOverlayMain() {
|
|||
.buildElement()
|
||||
.buildElement()
|
||||
.buildOverlay(document.body);
|
||||
|
||||
// ------- Helper: Build the color filter list -------
|
||||
window.buildColorFilterList = function buildColorFilterList() {
|
||||
const listContainer = document.querySelector('#bm-colorfilter-list');
|
||||
const t = templateManager.templatesArray?.[0];
|
||||
if (!listContainer || !t?.colorPalette) {
|
||||
if (listContainer) { listContainer.innerHTML = '<small>No template colors to display.</small>'; }
|
||||
return;
|
||||
}
|
||||
|
||||
listContainer.innerHTML = '';
|
||||
const entries = Object.entries(t.colorPalette)
|
||||
.sort((a,b) => b[1].count - a[1].count); // sort by frequency desc
|
||||
|
||||
for (const [rgb, meta] of entries) {
|
||||
const [r,g,b] = rgb.split(',').map(Number);
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.style.display = 'flex';
|
||||
row.style.alignItems = 'center';
|
||||
row.style.gap = '8px';
|
||||
row.style.margin = '4px 0';
|
||||
|
||||
const swatch = document.createElement('div');
|
||||
swatch.style.width = '14px';
|
||||
swatch.style.height = '14px';
|
||||
swatch.style.border = '1px solid rgba(255,255,255,0.5)';
|
||||
swatch.style.background = `rgb(${r},${g},${b})`;
|
||||
|
||||
const label = document.createElement('span');
|
||||
label.style.fontSize = '12px';
|
||||
let labelText = `${meta.count.toLocaleString()}`;
|
||||
try {
|
||||
const tMeta = templateManager.templatesArray?.[0]?.rgbToMeta?.get(rgb);
|
||||
if (tMeta && typeof tMeta.id === 'number') {
|
||||
const displayName = tMeta?.name || `rgb(${r},${g},${b})`;
|
||||
const starLeft = tMeta.premium ? '★ ' : '';
|
||||
labelText = `#${tMeta.id} ${starLeft}${displayName} • ${labelText}`;
|
||||
}
|
||||
} catch (_) {}
|
||||
label.textContent = labelText;
|
||||
|
||||
const toggle = document.createElement('input');
|
||||
toggle.type = 'checkbox';
|
||||
toggle.checked = !!meta.enabled;
|
||||
toggle.addEventListener('change', () => {
|
||||
meta.enabled = toggle.checked;
|
||||
overlayMain.handleDisplayStatus(`${toggle.checked ? 'Enabled' : 'Disabled'} ${rgb}`);
|
||||
try {
|
||||
const t = templateManager.templatesArray?.[0];
|
||||
const key = t?.storageKey;
|
||||
if (t && key && templateManager.templatesJSON?.templates?.[key]) {
|
||||
templateManager.templatesJSON.templates[key].palette = t.colorPalette;
|
||||
// persist immediately
|
||||
GM.setValue('bmTemplates', JSON.stringify(templateManager.templatesJSON));
|
||||
}
|
||||
} catch (_) {}
|
||||
});
|
||||
|
||||
row.appendChild(toggle);
|
||||
row.appendChild(swatch);
|
||||
row.appendChild(label);
|
||||
listContainer.appendChild(row);
|
||||
}
|
||||
};
|
||||
|
||||
// Listen for template creation/import completion to (re)build palette list
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event?.data?.bmEvent === 'bm-rebuild-color-list') {
|
||||
try { buildColorFilterList(); } catch (_) {}
|
||||
}
|
||||
});
|
||||
|
||||
// If a template was already loaded from storage, show the color UI and build list
|
||||
setTimeout(() => {
|
||||
try {
|
||||
if (templateManager.templatesArray?.length > 0) {
|
||||
const colorUI = document.querySelector('#bm-contain-colorfilter');
|
||||
if (colorUI) { colorUI.style.display = ''; }
|
||||
buildColorFilterList();
|
||||
}
|
||||
} catch (_) {}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
function buildTelemetryOverlay(overlay) {
|
||||
overlay.addDiv({'id': 'bm-overlay-telemetry', style: 'top: 0px; left: 0px; width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; z-index: 9999;'})
|
||||
.addDiv({'id': 'bm-contain-all-telemetry', style: 'display: flex; flex-direction: column; align-items: center;'})
|
||||
.addDiv({'id': 'bm-contain-header-telemetry', style: 'margin-top: 10%;'})
|
||||
.addHeader(1, {'textContent': `${name} Telemetry`}).buildElement()
|
||||
.buildElement()
|
||||
|
||||
.addDiv({'id': 'bm-contain-telemetry', style: 'max-width: 50%; overflow-y: auto; max-height: 80vh;'})
|
||||
.addHr().buildElement()
|
||||
.addBr().buildElement()
|
||||
.addDiv({'style': 'width: fit-content; margin: auto; text-align: center;'})
|
||||
.addButton({'id': 'bm-button-telemetry-more', 'textContent': 'More Information'}, (instance, button) => {
|
||||
button.onclick = () => {
|
||||
window.open('https://github.com/SwingTheVine/Wplace-TelemetryServer#telemetry-data', '_blank', 'noopener noreferrer');
|
||||
}
|
||||
}).buildElement()
|
||||
.buildElement()
|
||||
.addBr().buildElement()
|
||||
.addDiv({style: 'width: fit-content; margin: auto; text-align: center;'})
|
||||
.addButton({'id': 'bm-button-telemetry-enable', 'textContent': 'Enable Telemetry', 'style': 'margin-right: 2ch;'}, (instance, button) => {
|
||||
button.onclick = () => {
|
||||
const userSettings = JSON.parse(GM_getValue('bmUserSettings', '{}'));
|
||||
userSettings.telemetry = 1;
|
||||
GM.setValue('bmUserSettings', JSON.stringify(userSettings));
|
||||
const element = document.getElementById('bm-overlay-telemetry');
|
||||
if (element) {
|
||||
element.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}).buildElement()
|
||||
.addButton({'id': 'bm-button-telemetry-disable', 'textContent': 'Disable Telemetry'}, (instance, button) => {
|
||||
button.onclick = () => {
|
||||
const userSettings = JSON.parse(GM_getValue('bmUserSettings', '{}'));
|
||||
userSettings.telemetry = 0;
|
||||
GM.setValue('bmUserSettings', JSON.stringify(userSettings));
|
||||
const element = document.getElementById('bm-overlay-telemetry');
|
||||
if (element) {
|
||||
element.style.display = 'none';
|
||||
}
|
||||
}
|
||||
}).buildElement()
|
||||
.buildElement()
|
||||
.addBr().buildElement()
|
||||
.addP({'textContent': 'We collect anonymous telemetry data such as your browser, OS, and script version to make the experience better for everyone. The data is never shared personally. The data is never sold. You can turn this off by pressing the \'Disable\' button, but keeping it on helps us improve features and reliability faster. Thank you for supporting the Blue Marble!'}).buildElement()
|
||||
.addP({'textContent': 'You can disable telemetry by pressing the "Disable" button below.'}).buildElement()
|
||||
.buildElement()
|
||||
.buildElement()
|
||||
.buildOverlay(document.body);
|
||||
}
|
||||
|
||||
function buildOverlayTabTemplate() {
|
||||
|
|
@ -571,4 +794,4 @@ function buildOverlayTabTemplate() {
|
|||
.buildElement()
|
||||
.buildElement()
|
||||
.buildOverlay();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/* @since 0.5.1 */
|
||||
|
||||
/* The entire overlay */
|
||||
#bm-overlay {
|
||||
#bm-overlay, #bm-overlay-telemetry {
|
||||
position: fixed;
|
||||
background-color: rgba(21, 48, 99, 0.9);
|
||||
color: white;
|
||||
|
|
@ -21,14 +21,14 @@
|
|||
|
||||
/* Smooth transitions for minimize/maximize functionality */
|
||||
#bm-contain-userinfo,
|
||||
#bm-overlay hr,
|
||||
#bm-overlay hr, #bm-overlay-telemetry hr,
|
||||
#bm-contain-automation,
|
||||
#bm-contain-buttons-action {
|
||||
transition: opacity 0.2s ease, height 0.2s ease;
|
||||
}
|
||||
|
||||
/* The entire overlay BUT it is cascading */
|
||||
div#bm-overlay {
|
||||
div#bm-overlay, div#bm-overlay-telemetry {
|
||||
/* Font stack is as follows:
|
||||
* Highest Priority (Roboto Mono)
|
||||
* Windows fallback (Courier New)
|
||||
|
|
@ -41,7 +41,7 @@ div#bm-overlay {
|
|||
}
|
||||
|
||||
/* The drag bar */
|
||||
#bm-bar-drag {
|
||||
#bm-bar-drag, #bm-bar-drag-telemetry {
|
||||
margin-bottom: 0.5em;
|
||||
/* For background circles, width & height should be odd, cx & cy should be half of width & height, and r should be less than or equal to cx & cy */
|
||||
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="5"><circle cx="3" cy="3" r="1.5" fill="CornflowerBlue" /></svg>') repeat;
|
||||
|
|
@ -51,12 +51,12 @@ div#bm-overlay {
|
|||
}
|
||||
|
||||
/* When the overlay is being dragged */
|
||||
#bm-bar-drag.dragging {
|
||||
#bm-bar-drag.dragging, #bm-bar-drag-telemetry.dragging {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Disable interactions during drag for better performance */
|
||||
#bm-overlay:has(#bm-bar-drag.dragging) {
|
||||
#bm-overlay:has(#bm-bar-drag.dragging), #bm-overlay-telemetry:has(#bm-bar-drag-telemetry.dragging) {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -65,17 +65,17 @@ div#bm-overlay {
|
|||
}
|
||||
|
||||
/* Keep drag bar interactive when dragging */
|
||||
#bm-bar-drag.dragging {
|
||||
#bm-bar-drag.dragging, #bm-bar-drag-telemetry.dragging {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* The container for the overlay header */
|
||||
#bm-contain-header {
|
||||
#bm-contain-header, #bm-contain-header-telemetry {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* When minimized, adjust header container */
|
||||
#bm-contain-header[style*="text-align: center"] {
|
||||
#bm-contain-header[style*="text-align: center"], #bm-contain-header-telemetry[style*="text-align: center"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -83,7 +83,7 @@ div#bm-overlay {
|
|||
}
|
||||
|
||||
/* Ensure overlay maintains consistent width when minimized */
|
||||
#bm-overlay[style*="padding: 5px"] {
|
||||
#bm-overlay[style*="padding: 5px"], #bm-overlay-telemetry[style*="padding: 5px"] {
|
||||
width: auto !important;
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
|
|
@ -107,12 +107,12 @@ div#bm-overlay {
|
|||
}
|
||||
|
||||
/* Ensure drag bar remains functional when minimized */
|
||||
#bm-bar-drag {
|
||||
#bm-bar-drag, #bm-bar-drag-telemetry {
|
||||
transition: margin-bottom 0.2s ease;
|
||||
}
|
||||
|
||||
/* The Blue Marble header */
|
||||
#bm-overlay h1 {
|
||||
#bm-overlay h1, #bm-overlay-telemetry h1 {
|
||||
display: inline-block;
|
||||
font-size: x-large;
|
||||
font-weight: bold;
|
||||
|
|
@ -255,24 +255,24 @@ div:has(> #bm-input-file-template),
|
|||
}
|
||||
|
||||
/* All overlay buttons */
|
||||
#bm-overlay button {
|
||||
#bm-overlay button, #bm-overlay-telemetry button {
|
||||
background-color: #144eb9;
|
||||
border-radius: 1em;
|
||||
padding: 0 0.75ch;
|
||||
}
|
||||
|
||||
/* All overlay buttons when hovered/focused */
|
||||
#bm-overlay button:hover, #bm-overlay button:focus-visible {
|
||||
#bm-overlay button:hover, #bm-overlay button:focus-visible, #bm-overlay-telemetry button:hover, #bm-overlay-telemetry button:focus-visible {
|
||||
background-color: #1061e5;
|
||||
}
|
||||
|
||||
/* All overlay buttons when pressed (plus disabled color) */
|
||||
#bm-overlay button:active,
|
||||
#bm-overlay button:disabled {
|
||||
#bm-overlay button:active, #bm-overlay-telemetry button:active
|
||||
#bm-overlay button:disabled, #bm-overlay-telemetry button:disabled {
|
||||
background-color: #2e97ff;
|
||||
}
|
||||
|
||||
/* All overlay buttons when disabled */
|
||||
#bm-overlay button:disabled {
|
||||
#bm-overlay button:disabled, #bm-overlay-telemetry button:disabled {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
|
@ -61,6 +61,7 @@ export default class TemplateManager {
|
|||
this.templatesArray = []; // All Template instnaces currently loaded (Template)
|
||||
this.templatesJSON = null; // All templates currently loaded (JSON)
|
||||
this.templatesShouldBeDrawn = true; // Should ALL templates be drawn to the canvas?
|
||||
this.tileProgress = new Map(); // Tracks per-tile progress stats {painted, required, wrong}
|
||||
}
|
||||
|
||||
/** Retrieves the pixel art canvas.
|
||||
|
|
@ -143,11 +144,14 @@ export default class TemplateManager {
|
|||
|
||||
// Appends a child into the templates object
|
||||
// The child's name is the number of templates already in the list (sort order) plus the encoded player ID
|
||||
this.templatesJSON.templates[`${template.sortID} ${template.authorID}`] = {
|
||||
const storageKey = `${template.sortID} ${template.authorID}`;
|
||||
template.storageKey = storageKey;
|
||||
this.templatesJSON.templates[storageKey] = {
|
||||
"name": template.displayName, // Display name of template
|
||||
"coords": coords.join(', '), // The coords of the template
|
||||
"enabled": true,
|
||||
"tiles": templateTilesBuffers // Stores the chunked tile buffers
|
||||
"tiles": templateTilesBuffers, // Stores the chunked tile buffers
|
||||
"palette": template.colorPalette // Persist palette and enabled flags
|
||||
};
|
||||
|
||||
this.templatesArray = []; // Remove this to enable multiple templates (2/2)
|
||||
|
|
@ -159,6 +163,14 @@ export default class TemplateManager {
|
|||
const pixelCountFormatted = new Intl.NumberFormat().format(template.pixelCount);
|
||||
this.overlay.handleDisplayStatus(`Template created at ${coords.join(', ')}! Total pixels: ${pixelCountFormatted}`);
|
||||
|
||||
// Ensure color filter UI is visible when a template is created
|
||||
try {
|
||||
const colorUI = document.querySelector('#bm-contain-colorfilter');
|
||||
if (colorUI) { colorUI.style.display = ''; }
|
||||
// Deferred palette list rendering; actual DOM is built in main via helper
|
||||
window.postMessage({ source: 'blue-marble', bmEvent: 'bm-rebuild-color-list' }, '*');
|
||||
} catch (_) { /* no-op */ }
|
||||
|
||||
console.log(Object.keys(this.templatesJSON.templates).length);
|
||||
console.log(this.templatesJSON);
|
||||
console.log(this.templatesArray);
|
||||
|
|
@ -223,6 +235,18 @@ export default class TemplateManager {
|
|||
|
||||
console.log(templateArray);
|
||||
|
||||
// Early exit if none of the active templates touch this tile
|
||||
const anyTouches = templateArray.some(t => {
|
||||
if (!t?.chunked) { return false; }
|
||||
// Fast path via recorded tile prefixes if available
|
||||
if (t.tilePrefixes && t.tilePrefixes.size > 0) {
|
||||
return t.tilePrefixes.has(tileCoords);
|
||||
}
|
||||
// Fallback: scan chunked keys
|
||||
return Object.keys(t.chunked).some(k => k.startsWith(tileCoords));
|
||||
});
|
||||
if (!anyTouches) { return tileBlob; }
|
||||
|
||||
// Retrieves the relavent template tile blobs
|
||||
const templatesToDraw = templateArray
|
||||
.map(template => {
|
||||
|
|
@ -253,31 +277,10 @@ export default class TemplateManager {
|
|||
const templateCount = templatesToDraw?.length || 0; // Number of templates to draw on this tile
|
||||
console.log(`templateCount = ${templateCount}`);
|
||||
|
||||
if (templateCount > 0) {
|
||||
|
||||
// Calculate total pixel count for templates actively being displayed in this tile
|
||||
const totalPixels = templateArray
|
||||
.filter(template => {
|
||||
// Filter templates to include only those with tiles matching current coordinates
|
||||
// This ensures we count pixels only for templates actually being rendered
|
||||
const matchingTiles = Object.keys(template.chunked).filter(tile =>
|
||||
tile.startsWith(tileCoords)
|
||||
);
|
||||
return matchingTiles.length > 0;
|
||||
})
|
||||
.reduce((sum, template) => sum + (template.pixelCount || 0), 0);
|
||||
|
||||
// Format pixel count with locale-appropriate thousands separators for better readability
|
||||
// Examples: "1,234,567" (US), "1.234.567" (DE), "1 234 567" (FR)
|
||||
const pixelCountFormatted = new Intl.NumberFormat().format(totalPixels);
|
||||
|
||||
// Display status information about the templates being rendered
|
||||
this.overlay.handleDisplayStatus(
|
||||
`Displaying ${templateCount} template${templateCount == 1 ? '' : 's'}.\nTotal pixels: ${pixelCountFormatted}`
|
||||
);
|
||||
} else {
|
||||
this.overlay.handleDisplayStatus(`Displaying ${templateCount} templates.`);
|
||||
}
|
||||
// We'll compute per-tile painted/wrong/required counts when templates exist for this tile
|
||||
let paintedCount = 0;
|
||||
let wrongCount = 0;
|
||||
let requiredCount = 0;
|
||||
|
||||
const tileBitmap = await createImageBitmap(tileBlob);
|
||||
|
||||
|
|
@ -294,13 +297,175 @@ export default class TemplateManager {
|
|||
context.clearRect(0, 0, drawSize, drawSize); // Draws transparent background
|
||||
context.drawImage(tileBitmap, 0, 0, drawSize, drawSize);
|
||||
|
||||
// Grab a snapshot of the tile pixels BEFORE we draw any template overlays
|
||||
let tilePixels = null;
|
||||
try {
|
||||
tilePixels = context.getImageData(0, 0, drawSize, drawSize).data;
|
||||
} catch (_) {
|
||||
// If reading fails for any reason, we will skip stats
|
||||
}
|
||||
|
||||
// For each template in this tile, draw them.
|
||||
for (const template of templatesToDraw) {
|
||||
console.log(`Template:`);
|
||||
console.log(template);
|
||||
|
||||
// Draws the each template on the tile based on it's relative position
|
||||
context.drawImage(template.bitmap, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult);
|
||||
// Compute stats by sampling template center pixels against tile pixels,
|
||||
// honoring color enable/disable from the active template's palette
|
||||
if (tilePixels) {
|
||||
try {
|
||||
const tempW = template.bitmap.width;
|
||||
const tempH = template.bitmap.height;
|
||||
const tempCanvas = new OffscreenCanvas(tempW, tempH);
|
||||
const tempCtx = tempCanvas.getContext('2d', { willReadFrequently: true });
|
||||
tempCtx.imageSmoothingEnabled = false;
|
||||
tempCtx.clearRect(0, 0, tempW, tempH);
|
||||
tempCtx.drawImage(template.bitmap, 0, 0);
|
||||
const tImg = tempCtx.getImageData(0, 0, tempW, tempH);
|
||||
const tData = tImg.data;
|
||||
|
||||
const offsetX = Number(template.pixelCoords[0]) * this.drawMult;
|
||||
const offsetY = Number(template.pixelCoords[1]) * this.drawMult;
|
||||
|
||||
for (let y = 0; y < tempH; y++) {
|
||||
for (let x = 0; x < tempW; x++) {
|
||||
// Only evaluate the center pixel of each shread block
|
||||
if ((x % this.drawMult) !== 1 || (y % this.drawMult) !== 1) { continue; }
|
||||
const gx = x + offsetX;
|
||||
const gy = y + offsetY;
|
||||
if (gx < 0 || gy < 0 || gx >= drawSize || gy >= drawSize) { continue; }
|
||||
const tIdx = (y * tempW + x) * 4;
|
||||
const tr = tData[tIdx];
|
||||
const tg = tData[tIdx + 1];
|
||||
const tb = tData[tIdx + 2];
|
||||
const ta = tData[tIdx + 3];
|
||||
// Handle template transparent pixel (alpha < 64): wrong if board has any site palette color here
|
||||
if (ta < 64) {
|
||||
try {
|
||||
const activeTemplate = this.templatesArray?.[0];
|
||||
const tileIdx = (gy * drawSize + gx) * 4;
|
||||
const pr = tilePixels[tileIdx];
|
||||
const pg = tilePixels[tileIdx + 1];
|
||||
const pb = tilePixels[tileIdx + 2];
|
||||
const pa = tilePixels[tileIdx + 3];
|
||||
const key = `${pr},${pg},${pb}`;
|
||||
const isSiteColor = activeTemplate?.allowedColorsSet ? activeTemplate.allowedColorsSet.has(key) : false;
|
||||
if (pa >= 64 && isSiteColor) {
|
||||
wrongCount++;
|
||||
}
|
||||
} catch (_) {}
|
||||
continue;
|
||||
}
|
||||
// Treat #deface as Transparent palette color (required and paintable)
|
||||
// Ignore non-palette colors (match against allowed set when available)
|
||||
try {
|
||||
const activeTemplate = this.templatesArray?.[0];
|
||||
if (activeTemplate?.allowedColorsSet && !activeTemplate.allowedColorsSet.has(`${tr},${tg},${tb}`)) {
|
||||
continue;
|
||||
}
|
||||
} catch (_) {}
|
||||
|
||||
requiredCount++;
|
||||
|
||||
// Strict center-pixel matching. Treat transparent tile pixels as unpainted (not wrong)
|
||||
const tileIdx = (gy * drawSize + gx) * 4;
|
||||
const pr = tilePixels[tileIdx];
|
||||
const pg = tilePixels[tileIdx + 1];
|
||||
const pb = tilePixels[tileIdx + 2];
|
||||
const pa = tilePixels[tileIdx + 3];
|
||||
|
||||
if (pa < 64) {
|
||||
// Unpainted -> neither painted nor wrong
|
||||
} else if (pr === tr && pg === tg && pb === tb) {
|
||||
paintedCount++;
|
||||
} else {
|
||||
wrongCount++;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to compute per-tile painted/wrong stats:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// Draw the template overlay for visual guidance, honoring color filter
|
||||
try {
|
||||
const activeTemplate = this.templatesArray?.[0];
|
||||
const palette = activeTemplate?.colorPalette || {};
|
||||
const hasDisabled = Object.values(palette).some(v => v?.enabled === false);
|
||||
if (!hasDisabled) {
|
||||
context.drawImage(template.bitmap, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult);
|
||||
} else {
|
||||
const tempW = template.bitmap.width;
|
||||
const tempH = template.bitmap.height;
|
||||
const filterCanvas = new OffscreenCanvas(tempW, tempH);
|
||||
const filterCtx = filterCanvas.getContext('2d', { willReadFrequently: true });
|
||||
filterCtx.imageSmoothingEnabled = false;
|
||||
filterCtx.clearRect(0, 0, tempW, tempH);
|
||||
filterCtx.drawImage(template.bitmap, 0, 0);
|
||||
const img = filterCtx.getImageData(0, 0, tempW, tempH);
|
||||
const data = img.data;
|
||||
for (let y = 0; y < tempH; y++) {
|
||||
for (let x = 0; x < tempW; x++) {
|
||||
if ((x % this.drawMult) !== 1 || (y % this.drawMult) !== 1) { continue; }
|
||||
const idx = (y * tempW + x) * 4;
|
||||
const r = data[idx];
|
||||
const g = data[idx + 1];
|
||||
const b = data[idx + 2];
|
||||
const a = data[idx + 3];
|
||||
if (a < 1) { continue; }
|
||||
const key = `${r},${g},${b}`;
|
||||
// Hide if color is not in allowed palette or explicitly disabled
|
||||
const inSitePalette = activeTemplate?.allowedColorsSet ? activeTemplate.allowedColorsSet.has(key) : true;
|
||||
const enabled = palette?.[key]?.enabled !== false;
|
||||
if (!inSitePalette || !enabled) {
|
||||
data[idx + 3] = 0; // hide disabled color center pixel
|
||||
}
|
||||
}
|
||||
}
|
||||
filterCtx.putImageData(img, 0, 0);
|
||||
context.drawImage(filterCanvas, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult);
|
||||
}
|
||||
} catch (_) {
|
||||
// Fallback to drawing raw bitmap if filtering fails
|
||||
context.drawImage(template.bitmap, Number(template.pixelCoords[0]) * this.drawMult, Number(template.pixelCoords[1]) * this.drawMult);
|
||||
}
|
||||
}
|
||||
|
||||
// Save per-tile stats and compute global aggregates across all processed tiles
|
||||
if (templateCount > 0) {
|
||||
const tileKey = tileCoords; // already padded string "xxxx,yyyy"
|
||||
this.tileProgress.set(tileKey, {
|
||||
painted: paintedCount,
|
||||
required: requiredCount,
|
||||
wrong: wrongCount,
|
||||
});
|
||||
|
||||
// Aggregate painted/wrong across tiles we've processed
|
||||
let aggPainted = 0;
|
||||
let aggRequiredTiles = 0;
|
||||
let aggWrong = 0;
|
||||
for (const stats of this.tileProgress.values()) {
|
||||
aggPainted += stats.painted || 0;
|
||||
aggRequiredTiles += stats.required || 0;
|
||||
aggWrong += stats.wrong || 0;
|
||||
}
|
||||
|
||||
// Determine total required across all templates
|
||||
// Prefer precomputed per-template required counts; fall back to sum of processed tiles
|
||||
const totalRequiredTemplates = this.templatesArray.reduce((sum, t) =>
|
||||
sum + (t.requiredPixelCount || t.pixelCount || 0), 0);
|
||||
const totalRequired = totalRequiredTemplates > 0 ? totalRequiredTemplates : aggRequiredTiles;
|
||||
|
||||
const paintedStr = new Intl.NumberFormat().format(aggPainted);
|
||||
const requiredStr = new Intl.NumberFormat().format(totalRequired);
|
||||
const wrongStr = new Intl.NumberFormat().format(totalRequired - aggPainted); // Used to be aggWrong, but that is bugged
|
||||
|
||||
this.overlay.handleDisplayStatus(
|
||||
`Displaying ${templateCount} template${templateCount == 1 ? '' : 's'}.\nPainted ${paintedStr} / ${requiredStr} • Wrong ${wrongStr}`
|
||||
);
|
||||
} else {
|
||||
this.overlay.handleDisplayStatus(`Displaying ${templateCount} templates.`);
|
||||
}
|
||||
|
||||
return await canvas.convertToBlob({ type: 'image/png' });
|
||||
|
|
@ -349,6 +514,8 @@ export default class TemplateManager {
|
|||
//const coords = templateValue?.coords?.split(',').map(Number); // "1,2,3,4" -> [1, 2, 3, 4]
|
||||
const tilesbase64 = templateValue.tiles;
|
||||
const templateTiles = {}; // Stores the template bitmap tiles for each tile.
|
||||
let requiredPixelCount = 0; // Global required pixel count for this imported template
|
||||
const paletteMap = new Map(); // Accumulates color counts across tiles (center pixels only)
|
||||
|
||||
for (const tile in tilesbase64) {
|
||||
console.log(tile);
|
||||
|
|
@ -359,6 +526,36 @@ export default class TemplateManager {
|
|||
const templateBlob = new Blob([templateUint8Array], { type: "image/png" }); // Uint8Array -> Blob
|
||||
const templateBitmap = await createImageBitmap(templateBlob) // Blob -> Bitmap
|
||||
templateTiles[tile] = templateBitmap;
|
||||
|
||||
// Count required pixels in this bitmap (center pixels with alpha >= 64 and not #deface)
|
||||
try {
|
||||
const w = templateBitmap.width;
|
||||
const h = templateBitmap.height;
|
||||
const c = new OffscreenCanvas(w, h);
|
||||
const cx = c.getContext('2d', { willReadFrequently: true });
|
||||
cx.imageSmoothingEnabled = false;
|
||||
cx.clearRect(0, 0, w, h);
|
||||
cx.drawImage(templateBitmap, 0, 0);
|
||||
const data = cx.getImageData(0, 0, w, h).data;
|
||||
for (let y = 0; y < h; y++) {
|
||||
for (let x = 0; x < w; x++) {
|
||||
// Only count center pixels of 3x blocks
|
||||
if ((x % this.drawMult) !== 1 || (y % this.drawMult) !== 1) { continue; }
|
||||
const idx = (y * w + x) * 4;
|
||||
const r = data[idx];
|
||||
const g = data[idx + 1];
|
||||
const b = data[idx + 2];
|
||||
const a = data[idx + 3];
|
||||
if (a < 64) { continue; }
|
||||
if (r === 222 && g === 250 && b === 206) { continue; }
|
||||
requiredPixelCount++;
|
||||
const key = `${r},${g},${b}`;
|
||||
paletteMap.set(key, (paletteMap.get(key) || 0) + 1);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to count required pixels for imported tile', e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -370,11 +567,39 @@ export default class TemplateManager {
|
|||
//coords: coords
|
||||
});
|
||||
template.chunked = templateTiles;
|
||||
template.requiredPixelCount = requiredPixelCount;
|
||||
// Construct colorPalette from paletteMap
|
||||
const paletteObj = {};
|
||||
for (const [key, count] of paletteMap.entries()) { paletteObj[key] = { count, enabled: true }; }
|
||||
template.colorPalette = paletteObj;
|
||||
// Populate tilePrefixes for fast-scoping
|
||||
try { Object.keys(templateTiles).forEach(k => { template.tilePrefixes?.add(k.split(',').slice(0,2).join(',')); }); } catch (_) {}
|
||||
// Merge persisted palette (enabled/disabled) if present
|
||||
try {
|
||||
const persisted = templates?.[templateKey]?.palette;
|
||||
if (persisted) {
|
||||
for (const [rgb, meta] of Object.entries(persisted)) {
|
||||
if (!template.colorPalette[rgb]) {
|
||||
template.colorPalette[rgb] = { count: meta?.count || 0, enabled: !!meta?.enabled };
|
||||
} else {
|
||||
template.colorPalette[rgb].enabled = !!meta?.enabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (_) {}
|
||||
// Store storageKey for later writes
|
||||
template.storageKey = templateKey;
|
||||
this.templatesArray.push(template);
|
||||
console.log(this.templatesArray);
|
||||
console.log(`^^^ This ^^^`);
|
||||
}
|
||||
}
|
||||
// After importing templates from storage, reveal color UI and request palette list build
|
||||
try {
|
||||
const colorUI = document.querySelector('#bm-contain-colorfilter');
|
||||
if (colorUI) { colorUI.style.display = ''; }
|
||||
window.postMessage({ source: 'blue-marble', bmEvent: 'bm-rebuild-color-list' }, '*');
|
||||
} catch (_) { /* no-op */ }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
338
src/utils.js
338
src/utils.js
|
|
@ -127,6 +127,21 @@ export function base64ToUint8(base64) {
|
|||
return array;
|
||||
}
|
||||
|
||||
/** Returns the coordinate input fields
|
||||
* @returns {Element[]} The 4 coordinate Inputs
|
||||
* @since 0.74.0
|
||||
*/
|
||||
export function selectAllCoordinateInputs(document) {
|
||||
coords = [];
|
||||
|
||||
coords.push(document.querySelector('#bm-input-tx'));
|
||||
coords.push(document.querySelector('#bm-input-ty'));
|
||||
coords.push(document.querySelector('#bm-input-px'));
|
||||
coords.push(document.querySelector('#bm-input-py'));
|
||||
|
||||
return coords;
|
||||
}
|
||||
|
||||
/** The color palette used by wplace.live
|
||||
* @since 0.78.0
|
||||
* @examples
|
||||
|
|
@ -135,260 +150,69 @@ export function base64ToUint8(base64) {
|
|||
* console.log(utils[5]?.rgb); // [255, 255, 255]
|
||||
*/
|
||||
export const colorpalette = [
|
||||
{
|
||||
"name": "Transparent",
|
||||
"rgb": [0, 0, 0]
|
||||
},
|
||||
{
|
||||
"name": "Black",
|
||||
"rgb": [0, 0, 0]
|
||||
},
|
||||
{
|
||||
"name": "Dark Gray",
|
||||
"rgb": [60, 60, 60]
|
||||
},
|
||||
{
|
||||
"name": "Gray",
|
||||
"rgb": [120, 120, 120]
|
||||
},
|
||||
{
|
||||
"name": "Light Gray",
|
||||
"rgb": [210, 210, 210]
|
||||
},
|
||||
{
|
||||
"name": "White",
|
||||
"rgb": [255, 255, 255]
|
||||
},
|
||||
{
|
||||
"name": "Deep Red",
|
||||
"rgb": [96, 0, 24]
|
||||
},
|
||||
{
|
||||
"name": "Red",
|
||||
"rgb": [237, 28, 36]
|
||||
},
|
||||
{
|
||||
"name": "Orange",
|
||||
"rgb": [255, 127, 39]
|
||||
},
|
||||
{
|
||||
"name": "Gold",
|
||||
"rgb": [246, 170, 9]
|
||||
},
|
||||
{
|
||||
"name": "Yellow",
|
||||
"rgb": [249, 221, 59]
|
||||
},
|
||||
{
|
||||
"name": "Light Yellow",
|
||||
"rgb": [255, 250, 188]
|
||||
},
|
||||
{
|
||||
"name": "Dark Green",
|
||||
"rgb": [14, 185, 104]
|
||||
},
|
||||
{
|
||||
"name": "Green",
|
||||
"rgb": [19, 230, 123]
|
||||
},
|
||||
{
|
||||
"name": "Light Green",
|
||||
"rgb": [135, 255, 94]
|
||||
},
|
||||
{
|
||||
"name": "Dark Teal",
|
||||
"rgb": [12, 129, 110]
|
||||
},
|
||||
{
|
||||
"name": "Teal",
|
||||
"rgb": [16, 174, 166]
|
||||
},
|
||||
{
|
||||
"name": "Light Teal",
|
||||
"rgb": [19, 225, 190]
|
||||
},
|
||||
{
|
||||
"name": "Dark Blue",
|
||||
"rgb": [40, 80, 158]
|
||||
},
|
||||
{
|
||||
"name": "Blue",
|
||||
"rgb": [64, 147, 228]
|
||||
},
|
||||
{
|
||||
"name": "Cyan",
|
||||
"rgb": [96, 247, 242]
|
||||
},
|
||||
{
|
||||
"name": "Indigo",
|
||||
"rgb": [107, 80, 246]
|
||||
},
|
||||
{
|
||||
"name": "Light Indigo",
|
||||
"rgb": [153, 177, 251]
|
||||
},
|
||||
{
|
||||
"name": "Dark Purple",
|
||||
"rgb": [120, 12, 153]
|
||||
},
|
||||
{
|
||||
"name": "Purple",
|
||||
"rgb": [170, 56, 185]
|
||||
},
|
||||
{
|
||||
"name": "Light Purple",
|
||||
"rgb": [224, 159, 249]
|
||||
},
|
||||
{
|
||||
"name": "Dark Pink",
|
||||
"rgb": [203, 0, 122]
|
||||
},
|
||||
{
|
||||
"name": "Pink",
|
||||
"rgb": [236, 31, 128]
|
||||
},
|
||||
{
|
||||
"name": "Light Pink",
|
||||
"rgb": [243, 141, 169]
|
||||
},
|
||||
{
|
||||
"name": "Dark Brown",
|
||||
"rgb": [104, 70, 52]
|
||||
},
|
||||
{
|
||||
"name": "Brown",
|
||||
"rgb": [149, 104, 42]
|
||||
},
|
||||
{
|
||||
"name": "Beige",
|
||||
"rgb": [248, 178, 119]
|
||||
},
|
||||
{
|
||||
"name": "Medium Gray",
|
||||
"rgb": [170, 170, 170]
|
||||
},
|
||||
{
|
||||
"name": "Dark Red",
|
||||
"rgb": [165, 14, 30]
|
||||
},
|
||||
{
|
||||
"name": "Light Red",
|
||||
"rgb": [250, 128, 114]
|
||||
},
|
||||
{
|
||||
"name": "Dark Orange",
|
||||
"rgb": [228, 92, 26]
|
||||
},
|
||||
{
|
||||
"name": "Light Tan",
|
||||
"rgb": [214, 181, 148]
|
||||
},
|
||||
{
|
||||
"name": "Dark Goldenrod",
|
||||
"rgb": [156, 132, 49]
|
||||
},
|
||||
{
|
||||
"name": "Goldenrod",
|
||||
"rgb": [197, 173, 49]
|
||||
},
|
||||
{
|
||||
"name": "Light Goldenrod",
|
||||
"rgb": [232, 212, 95]
|
||||
},
|
||||
{
|
||||
"name": "Dark Olive",
|
||||
"rgb": [74, 107, 58]
|
||||
},
|
||||
{
|
||||
"name": "Olive",
|
||||
"rgb": [90, 148, 74]
|
||||
},
|
||||
{
|
||||
"name": "Light Olive",
|
||||
"rgb": [132, 197, 115]
|
||||
},
|
||||
{
|
||||
"name": "Dark Cyan",
|
||||
"rgb": [15, 121, 159]
|
||||
},
|
||||
{
|
||||
"name": "Light Cyan",
|
||||
"rgb": [187, 250, 242]
|
||||
},
|
||||
{
|
||||
"name": "Light Blue",
|
||||
"rgb": [125, 199, 255]
|
||||
},
|
||||
{
|
||||
"name": "Dark Indigo",
|
||||
"rgb": [77, 49, 184]
|
||||
},
|
||||
{
|
||||
"name": "Dark Slate Blue",
|
||||
"rgb": [74, 66, 132]
|
||||
},
|
||||
{
|
||||
"name": "Slate Blue",
|
||||
"rgb": [122, 113, 196]
|
||||
},
|
||||
{
|
||||
"name": "Light Slate Blue",
|
||||
"rgb": [181, 174, 241]
|
||||
},
|
||||
{
|
||||
"name": "Light Brown",
|
||||
"rgb": [219, 164, 99]
|
||||
},
|
||||
{
|
||||
"name": "Dark Beige",
|
||||
"rgb": [209, 128, 81]
|
||||
},
|
||||
{
|
||||
"name": "Light Beige",
|
||||
"rgb": [255, 197, 165]
|
||||
},
|
||||
{
|
||||
"name": "Dark Peach",
|
||||
"rgb": [155, 82, 73]
|
||||
},
|
||||
{
|
||||
"name": "Peach",
|
||||
"rgb": [209, 128, 120]
|
||||
},
|
||||
{
|
||||
"name": "Light Peach",
|
||||
"rgb": [250, 182, 164]
|
||||
},
|
||||
{
|
||||
"name": "Dark Tan",
|
||||
"rgb": [123, 99, 82]
|
||||
},
|
||||
{
|
||||
"name": "Tan",
|
||||
"rgb": [156, 132, 107]
|
||||
},
|
||||
{
|
||||
"name": "Dark Slate",
|
||||
"rgb": [51, 57, 65]
|
||||
},
|
||||
{
|
||||
"name": "Slate",
|
||||
"rgb": [109, 117, 141]
|
||||
},
|
||||
{
|
||||
"name": "Light Slate",
|
||||
"rgb": [179, 185, 209]
|
||||
},
|
||||
{
|
||||
"name": "Dark Stone",
|
||||
"rgb": [109, 100, 63]
|
||||
},
|
||||
{
|
||||
"name": "Stone",
|
||||
"rgb": [148, 140, 107]
|
||||
},
|
||||
{
|
||||
"name": "Light Stone",
|
||||
"rgb": [205, 197, 158]
|
||||
}
|
||||
];
|
||||
{ "id": 0, "premium": false, "name": "Transparent", "rgb": [0, 0, 0] },
|
||||
{ "id": 1, "premium": false, "name": "Black", "rgb": [0, 0, 0] },
|
||||
{ "id": 2, "premium": false, "name": "Dark Gray", "rgb": [60, 60, 60] },
|
||||
{ "id": 3, "premium": false, "name": "Gray", "rgb": [120, 120, 120] },
|
||||
{ "id": 4, "premium": false, "name": "Light Gray", "rgb": [210, 210, 210] },
|
||||
{ "id": 5, "premium": false, "name": "White", "rgb": [255, 255, 255] },
|
||||
{ "id": 6, "premium": false, "name": "Deep Red", "rgb": [96, 0, 24] },
|
||||
{ "id": 7, "premium": false, "name": "Red", "rgb": [237, 28, 36] },
|
||||
{ "id": 8, "premium": false, "name": "Orange", "rgb": [255, 127, 39] },
|
||||
{ "id": 9, "premium": false, "name": "Gold", "rgb": [246, 170, 9] },
|
||||
{ "id": 10, "premium": false, "name": "Yellow", "rgb": [249, 221, 59] },
|
||||
{ "id": 11, "premium": false, "name": "Light Yellow", "rgb": [255, 250, 188] },
|
||||
{ "id": 12, "premium": false, "name": "Dark Green", "rgb": [14, 185, 104] },
|
||||
{ "id": 13, "premium": false, "name": "Green", "rgb": [19, 230, 123] },
|
||||
{ "id": 14, "premium": false, "name": "Light Green", "rgb": [135, 255, 94] },
|
||||
{ "id": 15, "premium": false, "name": "Dark Teal", "rgb": [12, 129, 110] },
|
||||
{ "id": 16, "premium": false, "name": "Teal", "rgb": [16, 174, 166] },
|
||||
{ "id": 17, "premium": false, "name": "Light Teal", "rgb": [19, 225, 190] },
|
||||
{ "id": 18, "premium": false, "name": "Dark Blue", "rgb": [40, 80, 158] },
|
||||
{ "id": 19, "premium": false, "name": "Blue", "rgb": [64, 147, 228] },
|
||||
{ "id": 20, "premium": false, "name": "Cyan", "rgb": [96, 247, 242] },
|
||||
{ "id": 21, "premium": false, "name": "Indigo", "rgb": [107, 80, 246] },
|
||||
{ "id": 22, "premium": false, "name": "Light Indigo", "rgb": [153, 177, 251] },
|
||||
{ "id": 23, "premium": false, "name": "Dark Purple", "rgb": [120, 12, 153] },
|
||||
{ "id": 24, "premium": false, "name": "Purple", "rgb": [170, 56, 185] },
|
||||
{ "id": 25, "premium": false, "name": "Light Purple", "rgb": [224, 159, 249] },
|
||||
{ "id": 26, "premium": false, "name": "Dark Pink", "rgb": [203, 0, 122] },
|
||||
{ "id": 27, "premium": false, "name": "Pink", "rgb": [236, 31, 128] },
|
||||
{ "id": 28, "premium": false, "name": "Light Pink", "rgb": [243, 141, 169] },
|
||||
{ "id": 29, "premium": false, "name": "Dark Brown", "rgb": [104, 70, 52] },
|
||||
{ "id": 30, "premium": false, "name": "Brown", "rgb": [149, 104, 42] },
|
||||
{ "id": 31, "premium": false, "name": "Beige", "rgb": [248, 178, 119] },
|
||||
{ "id": 32, "premium": true, "name": "Medium Gray", "rgb": [170, 170, 170] },
|
||||
{ "id": 33, "premium": true, "name": "Dark Red", "rgb": [165, 14, 30] },
|
||||
{ "id": 34, "premium": true, "name": "Light Red", "rgb": [250, 128, 114] },
|
||||
{ "id": 35, "premium": true, "name": "Dark Orange", "rgb": [228, 92, 26] },
|
||||
{ "id": 36, "premium": true, "name": "Light Tan", "rgb": [214, 181, 148] },
|
||||
{ "id": 37, "premium": true, "name": "Dark Goldenrod","rgb": [156, 132, 49] },
|
||||
{ "id": 38, "premium": true, "name": "Goldenrod", "rgb": [197, 173, 49] },
|
||||
{ "id": 39, "premium": true, "name": "Light Goldenrod","rgb": [232, 212, 95] },
|
||||
{ "id": 40, "premium": true, "name": "Dark Olive", "rgb": [74, 107, 58] },
|
||||
{ "id": 41, "premium": true, "name": "Olive", "rgb": [90, 148, 74] },
|
||||
{ "id": 42, "premium": true, "name": "Light Olive", "rgb": [132, 197, 115] },
|
||||
{ "id": 43, "premium": true, "name": "Dark Cyan", "rgb": [15, 121, 159] },
|
||||
{ "id": 44, "premium": true, "name": "Light Cyan", "rgb": [187, 250, 242] },
|
||||
{ "id": 45, "premium": true, "name": "Light Blue", "rgb": [125, 199, 255] },
|
||||
{ "id": 46, "premium": true, "name": "Dark Indigo", "rgb": [77, 49, 184] },
|
||||
{ "id": 47, "premium": true, "name": "Dark Slate Blue","rgb": [74, 66, 132] },
|
||||
{ "id": 48, "premium": true, "name": "Slate Blue", "rgb": [122, 113, 196] },
|
||||
{ "id": 49, "premium": true, "name": "Light Slate Blue","rgb": [181, 174, 241] },
|
||||
{ "id": 50, "premium": true, "name": "Light Brown", "rgb": [219, 164, 99] },
|
||||
{ "id": 51, "premium": true, "name": "Dark Beige", "rgb": [209, 128, 81] },
|
||||
{ "id": 52, "premium": true, "name": "Light Beige", "rgb": [255, 197, 165] },
|
||||
{ "id": 53, "premium": true, "name": "Dark Peach", "rgb": [155, 82, 73] },
|
||||
{ "id": 54, "premium": true, "name": "Peach", "rgb": [209, 128, 120] },
|
||||
{ "id": 55, "premium": true, "name": "Light Peach", "rgb": [250, 182, 164] },
|
||||
{ "id": 56, "premium": true, "name": "Dark Tan", "rgb": [123, 99, 82] },
|
||||
{ "id": 57, "premium": true, "name": "Tan", "rgb": [156, 132, 107] },
|
||||
{ "id": 58, "premium": true, "name": "Dark Slate", "rgb": [51, 57, 65] },
|
||||
{ "id": 59, "premium": true, "name": "Slate", "rgb": [109, 117, 141] },
|
||||
{ "id": 60, "premium": true, "name": "Light Slate", "rgb": [179, 185, 209] },
|
||||
{ "id": 61, "premium": true, "name": "Dark Stone", "rgb": [109, 100, 63] },
|
||||
{ "id": 62, "premium": true, "name": "Stone", "rgb": [148, 140, 107] },
|
||||
{ "id": 63, "premium": true, "name": "Light Stone", "rgb": [205, 197, 158] }
|
||||
];
|
||||
// All entries include fixed id (index-based) and premium flag by design.
|
||||
|
|
|
|||
Loading…
Reference in a new issue