diff --git a/src/components/canvas/Blocks.tsx b/src/components/canvas/Blocks.tsx index 6d9b51e..993f082 100644 --- a/src/components/canvas/Blocks.tsx +++ b/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>; + missingTexture: PIXI.Texture | undefined; textures: Record; solidTextures: Record; 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(); @@ -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); }); } }; diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx index 3c663bd..38cc3ff 100644 --- a/src/components/canvas/Canvas.tsx +++ b/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(null); @@ -249,6 +249,7 @@ function Canvas() { , solidTextures: {} as Record, }); @@ -19,10 +20,18 @@ export const TexturesContext = createContext({ export const TexturesProvider = ({ children }: Props) => { const { setLoading } = useContext(LoadingContext); + const [missingTexture, setMissingTexture] = useState(); const [textures, setTextures] = useState>({}); const [solidTextures, setSolidTextures] = useState>({}); 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 {children}; + return {children}; };