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

fix: preload all block images

Browse source
This commit is contained in:
trafficlunar 2024-12-04 20:00:33 +00:00
parent 6cbbddf7f6
commit f0b0f306e4
1 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/blocks.tsx
View file

@ -1,27 +1,34 @@
import { useState } from "react"; import { useEffect, useState } from "react";
import { Image } from "react-konva"; import { Image as KonvaImage } from "react-konva";
import useImage from "use-image";
import blocksData from "@/lib/blocks/programmer-art/average_colors.json";
function Blocks() { function Blocks() {
const [image] = useImage("/blocks/programmer-art/stone.png"); const [blocks, setBlocks] = useState<Block[]>([]);
const [images, setImages] = useState<{ [key: string]: HTMLImageElement }>({});
const [blocks, setBlocks] = useState<Block[]>([ useEffect(() => {
{ const loadedImages: { [key: string]: HTMLImageElement } = {};
name: "stone",
x: 0, for (const name of Object.keys(blocksData)) {
y: 0 const image = new Image();
}, image.src = `/blocks/programmer-art/${name}.png`;
{ loadedImages[name] = image;
name: "stone", }
x: 1,
y: 1 setImages(loadedImages);
}, setBlocks([
]); { name: "stone", x: 0, y: 0 },
{ name: "birch_log", x: 1, y: 1 },
{ name: "redstone_lamp", x: 2, y: 0 },
{ name: "dirt", x: 3, y: 1 }
]);
}, []);
return ( return (
<> <>
{blocks.map((block, index) => ( {blocks.map((block, index) => (
<Image key={index} image={image} x={block.x * 16} y={block.y * 16} /> <KonvaImage key={index} image={images[block.name]} x={block.x * 16} y={block.y * 16} />
))} ))}
</> </>
); );