refactor: move missing texture into context

This commit is contained in:
trafficlunar 2024-12-24 20:12:03 +00:00
parent 324f9569ce
commit 78b762a361
4 changed files with 17 additions and 11 deletions

View file

@ -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);
});
}
};

View file

@ -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}