refactor: move missing texture into context

src/components/canvas/Blocks.tsx

@@ -1,17 +1,17 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useRef } from "react";
 
 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;
 
 interface Props {
 	blocks: Block[];
 	setBlocks: React.Dispatch<React.SetStateAction<Block[]>>;
+	missingTexture: PIXI.Texture | undefined;
 	textures: Record<string, PIXI.Texture>;
 	solidTextures: Record<string, PIXI.Texture>;
 	image: HTMLImageElement | undefined;
@@ -24,7 +24,7 @@ interface Props {
 // Lifts 16,000 tiles limit
 settings.use32bitIndex = true;
 
-function Blocks({ blocks, setBlocks, textures, solidTextures, image, imageDimensions, coords, scale, setLoading }: Props) {
+function Blocks({ blocks, setBlocks, missingTexture, textures, solidTextures, image, imageDimensions, coords, scale, setLoading }: Props) {
 	const app = useApp();
 	const tilemapRef = useRef<CompositeTilemap>();
 
@@ -36,11 +36,11 @@ 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`] ?? constants.MISSING_TEXTURE, block.x * 16, block.y * 16);
+				tilemap.tile(textures[`${block.name}.png`] ?? missingTexture, block.x * 16, block.y * 16);
 			});
 		} else {
 			blocks.forEach((block) => {
-				tilemap.tile(solidTextures[`${block.name}`] ?? constants.MISSING_TEXTURE, block.x * 16, block.y * 16);
+				tilemap.tile(solidTextures[`${block.name}`] ?? missingTexture, block.x * 16, block.y * 16);
 			});
 		}
 	};

src/components/canvas/Canvas.tsx

@@ -28,7 +28,7 @@ function Canvas() {
 	const { image, imageDimensions } = useContext(ImageContext);
 	const { setLoading } = useContext(LoadingContext);
 	const { settings } = useContext(SettingsContext);
-	const { textures, solidTextures } = useContext(TexturesContext);
+	const { missingTexture, textures, solidTextures } = useContext(TexturesContext);
 	const { tool, selectedBlock, cssCursor, setTool, setCssCursor } = useContext(ToolContext);
 
 	const stageContainerRef = useRef<HTMLDivElement>(null);
@@ -249,6 +249,7 @@ function Canvas() {
 				<Blocks
 					blocks={visibleBlocks}
 					setBlocks={setBlocks}
+					missingTexture={missingTexture}
 					textures={textures}
 					solidTextures={solidTextures}
 					image={image}

src/constants.ts

@@ -1,4 +0,0 @@
-export default {
-	MISSING_TEXTURE:
-		"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGUlEQVR42mPABX4w/MCKaKJhVMPgcOuoBgDZRfgBVl5QdQAAAABJRU5ErkJggg==",
-};

src/context/Textures.tsx

@@ -12,6 +12,7 @@ interface Props {
 }
 
 export const TexturesContext = createContext({
+	missingTexture: {} as PIXI.Texture | undefined,
 	textures: {} as Record<string, PIXI.Texture>,
 	solidTextures: {} as Record<string, PIXI.Texture>,
 });
@@ -19,10 +20,18 @@ export const TexturesContext = createContext({
 export const TexturesProvider = ({ children }: Props) => {
 	const { setLoading } = useContext(LoadingContext);
 
+	const [missingTexture, setMissingTexture] = useState<PIXI.Texture>();
 	const [textures, setTextures] = useState<Record<string, PIXI.Texture>>({});
 	const [solidTextures, setSolidTextures] = useState<Record<string, PIXI.Texture>>({});
 
 	useEffect(() => {
+		// Load missing texture
+		const baseTexture = new PIXI.BaseTexture(
+			"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGUlEQVR42mPABX4w/MCKaKJhVMPgcOuoBgDZRfgBVl5QdQAAAABJRU5ErkJggg=="
+		);
+		setMissingTexture(new PIXI.Texture(baseTexture));
+
+		// Load textures
 		const sheet = new PIXI.Spritesheet(PIXI.BaseTexture.from("/blocks/programmer-art/spritesheet.png"), spritesheet);
 		sheet.parse().then((t) => {
 			setTextures(t);
@@ -54,5 +63,5 @@ export const TexturesProvider = ({ children }: Props) => {
 		setLoading(false);
 	}, []);
 
-	return <TexturesContext.Provider value={{ textures, solidTextures }}>{children}</TexturesContext.Provider>;
+	return <TexturesContext.Provider value={{ missingTexture, textures, solidTextures }}>{children}</TexturesContext.Provider>;
 };