From bea25fc1159b562dc7f3037a719bde90e85ee87e Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Mon, 23 Dec 2024 13:29:16 +0000
Subject: [PATCH] refactor: convert missing texture into a data url

---
 public/blocks/missing.png                | Bin 82 -> 0 bytes
 src/components/canvas/Blocks.tsx         |  16 ++++------------
 src/components/toolbar/SelectedBlock.tsx |   5 +++--
 src/constants.ts                         |   4 ++++
 4 files changed, 11 insertions(+), 14 deletions(-)
 delete mode 100644 public/blocks/missing.png
 create mode 100644 src/constants.ts

diff --git a/public/blocks/missing.png b/public/blocks/missing.png
deleted file mode 100644
index 37ba458c8e9cc29e181108570eedf8613c4b0e09..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 82
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|lAbP(Ar-fh53tr5{5jB-u_!U*
f@PmTaE7%xry8d7ciwh_PDq`?-^>bP0l+XkK5Dgby

diff --git a/src/components/canvas/Blocks.tsx b/src/components/canvas/Blocks.tsx
index 257776f..23107a8 100644
--- a/src/components/canvas/Blocks.tsx
+++ b/src/components/canvas/Blocks.tsx
@@ -4,6 +4,8 @@ import * as PIXI from "pixi.js";
 import { useApp } from "@pixi/react";
 import { CompositeTilemap, settings } from "@pixi/tilemap";
 
+import constants from "@/constants";
+
 import _blockData from "@/data/blocks/programmer-art/data.json";
 const blockData: BlockData = _blockData;
 
@@ -24,8 +26,6 @@ settings.use32bitIndex = true;
 
 function Blocks({ blocks, setBlocks, textures, solidTextures, image, imageDimensions, coords, scale, setLoading }: Props) {
 	const app = useApp();
-	const [missingTexture, setMissingTexture] = useState<PIXI.Texture>();
-
 	const tilemapRef = useRef<CompositeTilemap>();
 
 	const tileBlocks = () => {
@@ -36,24 +36,16 @@ function Blocks({ blocks, setBlocks, textures, solidTextures, image, imageDimens
 		// Tile solid colors at smaller scales
 		if (scale >= 0.5) {
 			blocks.forEach((block) => {
-				tilemap.tile(textures[`${block.name}.png`] ?? missingTexture, block.x * 16, block.y * 16);
+				tilemap.tile(textures[`${block.name}.png`] ?? constants.MISSING_TEXTURE, block.x * 16, block.y * 16);
 			});
 		} else {
 			blocks.forEach((block) => {
-				tilemap.tile(solidTextures[`${block.name}`] ?? missingTexture, block.x * 16, block.y * 16);
+				tilemap.tile(solidTextures[`${block.name}`] ?? constants.MISSING_TEXTURE, block.x * 16, block.y * 16);
 			});
 		}
 	};
 
 	useEffect(() => {
-		// Load the missing texture
-		const loadMissingTexture = async () => {
-			const mTexture = await PIXI.Texture.from("/blocks/missing.png");
-			setMissingTexture(mTexture);
-		};
-		loadMissingTexture();
-
-		// Create tilemap
 		const tilemap = new CompositeTilemap();
 		tilemapRef.current = tilemap;
 		tilemap.cullable = true;
diff --git a/src/components/toolbar/SelectedBlock.tsx b/src/components/toolbar/SelectedBlock.tsx
index 429a7cf..2c587dd 100644
--- a/src/components/toolbar/SelectedBlock.tsx
+++ b/src/components/toolbar/SelectedBlock.tsx
@@ -1,5 +1,7 @@
 import { useContext } from "react";
 
+import constants from "@/constants";
+
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 import { TexturesContext } from "@/context/Textures";
@@ -11,9 +13,8 @@ function SelectedBlock() {
 
 	const convertToDataUrl = (textureName: string): string => {
 		// Show missing texture if fail
-		if (!textures["stone"])
-			return "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGUlEQVR42mPABX4w/MCKaKJhVMPgcOuoBgDZRfgBVl5QdQAAAABJRU5ErkJggg==";
 		const texture = textures[textureName];
+		if (!texture) return constants.MISSING_TEXTURE;
 
 		const canvas = document.createElement("canvas");
 		const context = canvas.getContext("2d");
diff --git a/src/constants.ts b/src/constants.ts
new file mode 100644
index 0000000..b96c9dd
--- /dev/null
+++ b/src/constants.ts
@@ -0,0 +1,4 @@
+export default {
+	MISSING_TEXTURE:
+		"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGUlEQVR42mPABX4w/MCKaKJhVMPgcOuoBgDZRfgBVl5QdQAAAABJRU5ErkJggg==",
+};