From 6ddcd1bbdfc2ed608866dd2567c45716c3a9e64c Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Thu, 26 Dec 2024 20:00:35 +0000
Subject: [PATCH] fix: findBlockFromRgb()

---
 src/components/canvas/Blocks.tsx | 22 ++--------------------
 src/components/canvas/Canvas.tsx |  2 +-
 src/utils/findBlockFromRgb.ts    | 14 ++++++++++++++
 3 files changed, 17 insertions(+), 21 deletions(-)
 create mode 100644 src/utils/findBlockFromRgb.ts

diff --git a/src/components/canvas/Blocks.tsx b/src/components/canvas/Blocks.tsx
index 993f082..cf24512 100644
--- a/src/components/canvas/Blocks.tsx
+++ b/src/components/canvas/Blocks.tsx
@@ -5,8 +5,7 @@ import * as PIXI from "pixi.js";
 import { useApp } from "@pixi/react";
 import { CompositeTilemap, settings } from "@pixi/tilemap";
 
-import _blockData from "@/data/blocks/programmer-art/data.json";
-const blockData: BlockData = _blockData;
+import { findBlockFromRgb } from "@/utils/findBlockFromRgb";
 
 interface Props {
 	blocks: Block[];
@@ -66,23 +65,6 @@ function Blocks({ blocks, setBlocks, missingTexture, textures, solidTextures, im
 		tilemapRef.current.scale.set(scale, scale);
 	}, [coords, scale]);
 
-	const findClosestBlock = (r: number, g: number, b: number, a: number) => {
-		let closestBlock = "";
-		let closestDistance = Infinity;
-
-		Object.entries(blockData).forEach(([block, data]) => {
-			const distance = Math.sqrt(
-				Math.pow(r - data.color[0], 2) + Math.pow(g - data.color[1], 2) + Math.pow(b - data.color[2], 2) + Math.pow(a - data.color[3], 3)
-			);
-			if (distance < closestDistance) {
-				closestDistance = distance;
-				closestBlock = block;
-			}
-		});
-
-		return closestBlock;
-	};
-
 	useEffect(() => {
 		if (!image) return;
 
@@ -98,7 +80,7 @@ function Blocks({ blocks, setBlocks, missingTexture, textures, solidTextures, im
 			const newBlocks: Block[] = [];
 
 			for (let i = 0; i < imageData.data.length; i += 4) {
-				const block = findClosestBlock(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2], imageData.data[i + 3]);
+				const block = findBlockFromRgb(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2], imageData.data[i + 3]);
 
 				const x = Math.floor((i / 4) % imageData.width);
 				const y = Math.floor(i / 4 / imageData.width);
diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx
index 56f6364..2d1d5ee 100644
--- a/src/components/canvas/Canvas.tsx
+++ b/src/components/canvas/Canvas.tsx
@@ -206,7 +206,7 @@ function Canvas() {
 			default:
 				break;
 		}
-	}, [tool, holdingAlt, scale, zoomToMousePosition, setScale]);
+	}, [tool, holdingAlt, scale, mouseCoords, blocks, zoomToMousePosition, setScale, setSelectedBlock]);
 
 	const onKeyDown = (e: KeyboardEvent) => {
 		switch (e.key) {
diff --git a/src/utils/findBlockFromRgb.ts b/src/utils/findBlockFromRgb.ts
new file mode 100644
index 0000000..78b057f
--- /dev/null
+++ b/src/utils/findBlockFromRgb.ts
@@ -0,0 +1,14 @@
+import _blockData from "@/data/blocks/programmer-art/data.json";
+const blockData: BlockData = _blockData;
+
+export const findBlockFromRgb = (r: number, g: number, b: number, a: number): string => {
+	return Object.entries(blockData).reduce(
+		(closestBlock, [block, data]) => {
+			const distance = Math.sqrt(
+				Math.pow(r - data.color[0], 2) + Math.pow(g - data.color[1], 2) + Math.pow(b - data.color[2], 2) + Math.pow(a - data.color[3], 2)
+			);
+			return distance < closestBlock.distance ? { block, distance } : closestBlock;
+		},
+		{ block: "", distance: Infinity }
+	).block;
+};