From 7a705c4f1c069e09d13630c9707346f11063c7aa Mon Sep 17 00:00:00 2001 From: vishnuvardhan33 <93069382+vishnuvardhan33@users.noreply.github.com> Date: Wed, 13 Aug 2025 02:13:28 +0530 Subject: [PATCH] updated color palette and counts for transparent pixels --- src/Template.js | 17 ++- src/templateManager.js | 22 ++- src/utils.js | 331 ++++++++--------------------------------- 3 files changed, 95 insertions(+), 275 deletions(-) diff --git a/src/Template.js b/src/Template.js index f858f9e..b28d8ad 100644 --- a/src/Template.js +++ b/src/Template.js @@ -52,12 +52,22 @@ export default class Template { .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. @@ -102,12 +112,9 @@ export default class Template { const b = inspectData[idx + 2]; const a = inspectData[idx + 3]; if (a === 0) { continue; } // Ignored transparent pixel - if (r === 222 && g === 250 && b === 206) { // #deface - deface++; - continue; // Do not include in required count so progress reflects paintable pixels - } const key = `${r},${g},${b}`; - if (!this.allowedColorsSet.has(key)) { continue; } // Skip non-palette colors + 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); } diff --git a/src/templateManager.js b/src/templateManager.js index 299daf2..729d667 100644 --- a/src/templateManager.js +++ b/src/templateManager.js @@ -339,10 +339,24 @@ export default class TemplateManager { const tg = tData[tIdx + 1]; const tb = tData[tIdx + 2]; const ta = tData[tIdx + 3]; - // Ignore transparent and semi-transparent (deface checkerboard uses alpha 32) - if (ta < 64) { continue; } - // Ignore #deface explicitly if it sneaks through with higher alpha - if (tr === 222 && tg === 250 && tb === 206) { continue; } + // 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]; diff --git a/src/utils.js b/src/utils.js index 5b522be..5c7c41a 100644 --- a/src/utils.js +++ b/src/utils.js @@ -135,271 +135,70 @@ 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] } ]; -// Annotate palette entries with ID (index) and premium flag. -try { - for (let i = 0; i < colorpalette.length; i++) { - const c = colorpalette[i]; - if (c && typeof c === 'object') { - c.id = i; - c.premium = i >= 32; // Premium colors are indices 32–63 (0-based) - } - } -} catch (_) { /* no-op */ } \ No newline at end of file +// All entries include fixed id (index-based) and premium flag by design. \ No newline at end of file