chore: better data to troubleshoot flood fill issues

public/ocr/calibration.js

@@ -4,8 +4,13 @@ export function flood(
 	color = [0, 0, 0],
 	tolerance = 25
 ) {
-	console.log(startX, startY);
-	tolerance *= tolerance;
+	console.log({
+		msg: 'Initiating flood-fill',
+		startX,
+		startY,
+	});
+
+	const squared_tolerance = tolerance * tolerance;
 
 	const seen = new Array(img_data.width)
 		.fill()
@@ -15,9 +20,9 @@ export function flood(
 		const start_index = 4 * (y * img_data.width + x);
 		const data = img_data.data;
 		return (
-			Math.pow(data[start_index + 0] - color[0], 2) < tolerance &&
-			Math.pow(data[start_index + 1] - color[1], 2) < tolerance &&
-			Math.pow(data[start_index + 2] - color[2], 2) < tolerance
+			Math.pow(data[start_index + 0] - color[0], 2) < squared_tolerance &&
+			Math.pow(data[start_index + 1] - color[1], 2) < squared_tolerance &&
+			Math.pow(data[start_index + 2] - color[2], 2) < squared_tolerance
 		);
 	}
 
@@ -26,7 +31,36 @@ export function flood(
 	}
 
 	if (!check(startX, startY)) {
-		throw new Error('Starting point does not match color');
+		// Unfortunate failure to even start the flood-fill T_T
+		// Let's gather more information to make the errors more descriptive, and thus troubleshooting easier
+
+		const start_index = 4 * (startY * img_data.width + startX);
+		const data = img_data.data;
+		const distances = [
+			data[start_index + 0] - color[0],
+			data[start_index + 1] - color[1],
+			data[start_index + 2] - color[2],
+		];
+		const squared_distances = distances.map(d => d * d);
+
+		const error_data = {
+			msg: 'Starting point does not match color',
+			target: color,
+			selected: [
+				data[start_index + 0],
+				data[start_index + 1],
+				data[start_index + 2],
+			],
+			tolerance,
+			distances,
+			euclidian_distance: Math.sqrt(
+				squared_distances.reduce((acc, v) => acc + v, 0)
+			),
+			squared_tolerance,
+			squared_distances,
+		};
+
+		throw new Error(error_data);
 	}
 
 	function maybeAddToQueue(tx, ty) {

public/ocr/ocr_main.js

@@ -554,12 +554,13 @@ video.addEventListener('click', async evt => {
 		video.videoHeight
 	);
 
-	// get field coordinates via flood-fill (includes borders on all sides)
+	// Get field coordinates via flood-fill (includes borders on all sides)
+	// Question: instead of targetting black, should we just take the selected color as reference?
 	const field_w_borders_xywh = getFieldCoordinates(
 		img_data,
 		floodStartPoint,
 		[0, 0, 0], // targeting black
-		40 // 40 is a very high tolerance, but this is to work around a "washed out colors" bug in chrome
+		42 // 42 is a very high tolerance, but this is to work around a "washed out colors" bug in chrome
 	);
 	console.log('field coordinates', field_w_borders_xywh);