dupes n merging

Author: doublemover

README.md

@@ -1,8 +1,11 @@
 # Water Sort Screenshot Solver
 
+[Live on Github Pages](https://doublemover.github.io/WaterSortScreenshotSolver/)
+
 This is a **static single-page app** that:
 
 1. Parses a Water-Sort style puzzle screenshot in the browser using OpenCV.js (WASM) in a Web Worker
 2. Reads the bottom powerup badges (retries / shuffles / add-bottles) using Tesseract.js (WASM OCR)
 3. Runs a BFS solver to separate colors into single-color bottles
 
+<img width="1885" height="930" alt="image" src="https://github.com/user-attachments/assets/89cf8e67-e4e2-49e2-90c8-9a1d5d62a6f9" />

colors.js

@@ -105,6 +105,54 @@ export function buildColorLabels(colorsById) {
   const rawNames = new Map();
   for (const id of ids) rawNames.set(id, guessColorName(colorsById[String(id)]));
 
+// Resolve the only two "legit" near-duplicate naming cases we expect in this game:
+//   - Blue vs Periwinkle
+//   - Green vs Lime
+// Everything else should ideally be unique; if not, we still fall back to numbering.
+const hsvById = new Map();
+for (const id of ids) {
+  const { r, g, b } = hexToRgb(colorsById[String(id)]);
+  hsvById.set(id, rgbToHsv(r, g, b));
+}
+
+const blueGroup = ids.filter((id) => {
+  const n = rawNames.get(id);
+  return n === 'Blue' || n === 'Periwinkle';
+});
+
+if (blueGroup.length >= 2) {
+  // Least saturated => Periwinkle, most saturated => Blue
+  blueGroup.sort((a, b) => (hsvById.get(a).s - hsvById.get(b).s) || (hsvById.get(b).v - hsvById.get(a).v));
+  const perId = blueGroup[0];
+  const blueId = blueGroup[blueGroup.length - 1];
+  rawNames.set(perId, 'Periwinkle');
+  rawNames.set(blueId, 'Blue');
+  for (let i = 1; i < blueGroup.length - 1; i++) {
+    const id = blueGroup[i];
+    const { s } = hsvById.get(id);
+    rawNames.set(id, s <= 0.55 ? 'Periwinkle' : 'Blue');
+  }
+}
+
+const greenGroup = ids.filter((id) => {
+  const n = rawNames.get(id);
+  return n === 'Green' || n === 'Lime';
+});
+
+if (greenGroup.length >= 2) {
+  // Brightest => Lime, darkest => Green
+  greenGroup.sort((a, b) => (hsvById.get(b).v - hsvById.get(a).v) || (hsvById.get(a).h - hsvById.get(b).h));
+  const limeId = greenGroup[0];
+  const greenId = greenGroup[greenGroup.length - 1];
+  rawNames.set(limeId, 'Lime');
+  rawNames.set(greenId, 'Green');
+  for (let i = 1; i < greenGroup.length - 1; i++) {
+    const id = greenGroup[i];
+    const { v } = hsvById.get(id);
+    rawNames.set(id, v >= 0.6 ? 'Lime' : 'Green');
+  }
+}
+
   // ensure uniqueness: if duplicates, append numbers
   const counts = new Map();
   for (const id of ids) {

index.html

@@ -12,7 +12,7 @@
   <header>
     <h1>Water Sort Screenshot Solver (WASM)</h1>
     <p class="subtle">
-      Client-side bottle parsing with OpenCV.js (WASM), then BFS solver.
+      Client-side bottle parsing with OpenCV.js (WASM), then BFS solver. Code available on <a href="https://github.com/doublemover/WaterSortScreenshotSolver">Github</a>.
     </p>
   </header>