fix: broken selected block component

src/components/toolbar/SelectedBlock.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 
 import constants from "@/constants";
 
@@ -7,28 +7,41 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { TexturesContext } from "@/context/Textures";
 import { ToolContext } from "@/context/Tool";
 
+import _blockData from "@/data/blocks/programmer-art/data.json";
+const blockData: BlockData = _blockData;
+
 function SelectedBlock() {
-	const textures = useContext(TexturesContext);
+	const { textures } = useContext(TexturesContext);
 	const { selectedBlock } = useContext(ToolContext);
 
-	const convertToDataUrl = (textureName: string): string => {
-		// Show missing texture if fail
-		const texture = textures[textureName];
-		if (!texture) return constants.MISSING_TEXTURE;
+	const [selectedBlockName, setSelectedBlockName] = useState("Stone");
+	const [selectedBlockTexture, setSelectedBlockTexture] = useState(constants.MISSING_TEXTURE);
+
+	useEffect(() => {
+		const blockInfo = blockData[selectedBlock];
+		setSelectedBlockName(blockInfo.name);
+
+		const texture = textures[`${selectedBlock}.png`];
+		if (!texture) {
+			setSelectedBlockTexture(constants.MISSING_TEXTURE);
+			return;
+		}
 
 		const canvas = document.createElement("canvas");
-		const context = canvas.getContext("2d");
+		const ctx = canvas.getContext("2d");
+		canvas.width = 16;
+		canvas.height = 16;
 
-		canvas.width = texture.frame.width;
-		canvas.height = texture.frame.height;
-
-		if (!context) return "";
+		if (!ctx) {
+			setSelectedBlockTexture(constants.MISSING_TEXTURE);
+			return;
+		}
 
 		const image = new Image();
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		image.src = (texture.baseTexture.resource as any).url;
-
-		context.drawImage(
+		image.onload = () => {
+			ctx.drawImage(
 				image,
 				texture.frame.x,
 				texture.frame.y,
@@ -40,21 +53,26 @@ function SelectedBlock() {
 				texture.frame.height
 			);
 
-		return canvas.toDataURL();
+			setSelectedBlockTexture(canvas.toDataURL());
 		};
 
+		image.onerror = () => {
+			setSelectedBlockTexture(constants.MISSING_TEXTURE);
+		};
+	}, [textures, selectedBlock]);
+
 	return (
 		<TooltipProvider>
 			<Tooltip delayDuration={0}>
 				<TooltipTrigger asChild>
 					<img
-						src={convertToDataUrl("stone")}
+						src={selectedBlockTexture}
 						className="absolute bottom-1 w-8 h-8 cursor-pointer border border-zinc-800 dark:border-zinc-200 rounded"
 						style={{ imageRendering: "pixelated" }}
 					/>
 				</TooltipTrigger>
 				<TooltipContent side="right" sideOffset={10}>
-					<p>{selectedBlock}</p>
+					<p>{selectedBlockName}</p>
 				</TooltipContent>
 			</Tooltip>
 		</TooltipProvider>