trafficlunar/blockmatic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: replace useState with useRef in textures context

Browse source
This commit is contained in:
trafficlunar 2025-01-21 19:53:04 +00:00
parent 85e865910f
commit dae3a88734
1 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/context/Textures.tsx
View file

@ -1,4 +1,4 @@
import { createContext, ReactNode, useContext, useEffect, useState } from "react";
import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
import * as PIXI from "pixi.js";
import { LoadingContext } from "./Loading";
@ -10,7 +10,7 @@ import _blockData from "@/data/blocks/data.json";
const blockData: BlockData = _blockData;
interface Context {
missingTexture: PIXI.Texture | undefined;
missingTexture: PIXI.Texture;
textures: Record<string, PIXI.Texture>;
programmerArtTextures: Record<string, PIXI.Texture>;
solidTextures: Record<string, PIXI.Texture>;
@ -25,31 +25,32 @@ export const TexturesContext = createContext<Context>({} as Context);
export const TexturesProvider = ({ children }: Props) => {
const { setLoading } = useContext(LoadingContext);
const [missingTexture, setMissingTexture] = useState<PIXI.Texture>();
const [textures, setTextures] = useState<Record<string, PIXI.Texture>>({});
const [programmerArtTextures, setProgrammerArtTextures] = useState<Record<string, PIXI.Texture>>({});
const [solidTextures, setSolidTextures] = useState<Record<string, PIXI.Texture>>({});
useEffect(() => {
// Load missing texture through data string just incase of network errors
const missingBaseTexture = new PIXI.BaseTexture(
const missingTextureRef = useRef<PIXI.Texture>(
new PIXI.Texture(
new PIXI.BaseTexture(
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGUlEQVR42mPABX4w/MCKaKJhVMPgcOuoBgDZRfgBVl5QdQAAAABJRU5ErkJggg=="
)
)
);
setMissingTexture(new PIXI.Texture(missingBaseTexture));
const texturesRef = useRef<Record<string, PIXI.Texture>>({});
const programmerArtTexturesRef = useRef<Record<string, PIXI.Texture>>({});
const solidTexturesRef = useRef<Record<string, PIXI.Texture>>({});
// Load textures
useEffect(() => {
// Add air texture
const airBaseTexture = new PIXI.BaseTexture("/blocks/air.png");
const airTexture = new PIXI.Texture(airBaseTexture);
const sheet = new PIXI.Spritesheet(PIXI.BaseTexture.from("/blocks/spritesheet.png"), spritesheet);
sheet.parse().then((t) => {
setTextures({ ...t, "air.png": airTexture });
texturesRef.current = { ...t, "air.png": airTexture };
});
const programmerArtSheet = new PIXI.Spritesheet(PIXI.BaseTexture.from("/blocks/programmer-art/spritesheet.png"), programmerArtSpritesheet);
programmerArtSheet.parse().then((t) => {
setProgrammerArtTextures({ ...t, "air.png": airTexture });
programmerArtTexturesRef.current = { ...t, "air.png": airTexture };
});
// Load solid textures
@ -74,9 +75,20 @@ export const TexturesProvider = ({ children }: Props) => {
solidTexturesCollection[blockName] = texture;
});
setSolidTextures(solidTexturesCollection);
solidTexturesRef.current = solidTexturesCollection;
setLoading(false);
}, []);
return <TexturesContext.Provider value={{ missingTexture, textures, programmerArtTextures, solidTextures }}>{children}</TexturesContext.Provider>;
return (
<TexturesContext.Provider
value={{
missingTexture: missingTextureRef.current,
textures: texturesRef.current,
programmerArtTextures: programmerArtTexturesRef.current,
solidTextures: solidTexturesRef.current,
}}
>
{children}
</TexturesContext.Provider>
);
};