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

39
src/components/blocks.tsx
View file

@ -1,27 +1,34 @@
import { useState } from "react";
import { Image } from "react-konva";
import useImage from "use-image";
import { useEffect, useState } from "react";
import { Image as KonvaImage } from "react-konva";
import blocksData from "@/lib/blocks/programmer-art/average_colors.json";
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[]>([
{
name: "stone",
x: 0,
y: 0
},
{
name: "stone",
x: 1,
y: 1
},
useEffect(() => {
const loadedImages: { [key: string]: HTMLImageElement } = {};
for (const name of Object.keys(blocksData)) {
const image = new Image();
image.src = `/blocks/programmer-art/${name}.png`;
loadedImages[name] = image;
}
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 (
<>
{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} />
))}
</>
);