diff --git a/public/blocks/missing.png b/public/blocks/missing.png deleted file mode 100644 index 37ba458..0000000 Binary files a/public/blocks/missing.png and /dev/null differ 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(); - const tilemapRef = useRef(); 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==", +};