trafficlunar/blockmatic
1
0
Fork 0
mirror of https://github.com/trafficlunar/blockmatic.git synced 2026-06-28 14:44:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: pixi.js rewrite

Browse source
This commit is contained in:
trafficlunar 2024-12-06 15:45:58 +00:00
parent a5bc500553
commit b30ba187e9
6 changed files with 780 additions and 152 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/blocks.tsx
View file

@ -1,7 +1,7 @@
import { useEffect, useState } from "react";
import { Image as KonvaImage } from "react-konva";
import blocksData from "@/lib/blocks/programmer-art/average_colors.json";
import { Sprite } from "@pixi/react";
function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispatch<React.SetStateAction<Block[]>> }) {
const [images, setImages] = useState<{ [key: string]: HTMLImageElement }>({});
@ -43,9 +43,9 @@ function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispa
if (ctx) {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0, image.width / 8, image.height / 8);
ctx.drawImage(image, 0, 0, image.width / 4, image.height / 4);
const imageData = ctx.getImageData(0, 0, image.width / 8, image.height / 8);
const imageData = ctx.getImageData(0, 0, image.width / 4, image.height / 4);
const newBlocks: Block[] = [];
for (let i = 0; i < imageData.data.length; i += 4) {
@ -76,7 +76,7 @@ function Blocks({ blocks, setBlocks }: { blocks: Block[]; setBlocks: React.Dispa
return (
<>
{blocks.map((block, index) => (
<KonvaImage key={index} image={images[block.name]} x={block.x * 16} y={block.y * 16} />
<Sprite key={index} image={images[block.name]} x={block.x * 16} y={block.y * 16} />
))}
</>
);

16
src/components/cursor-information.tsx
View file

@ -1,22 +1,22 @@
import { useEffect, useState } from "react";
function CursorInformation({ mousePosition, blocks }: { mousePosition: Position; blocks: Block[] }) {
function CursorInformation({ localMousePosition, blocks }: { localMousePosition: Position; blocks: Block[] }) {
const [position, setPosition] = useState({ x: 0, y: 0 });
const [block, setBlock] = useState<Block>();
useEffect(() => {
if (mousePosition) {
const snappedX = Math.floor(mousePosition.x / 16);
const snappedY = Math.floor(mousePosition.y / 16);
if (localMousePosition) {
const x = Math.floor(localMousePosition.x / 16);
const y = Math.floor(localMousePosition.y / 16);
setPosition({
x: snappedX,
y: snappedY,
x,
y,
});
setBlock(blocks.find((b) => b.x === snappedX && b.y === snappedY));
setBlock(blocks.find((b) => b.x === x && b.y === y));
}
}, [mousePosition]);
}, [localMousePosition]);
return (
<div className="absolute left-4 bottom-4 flex flex-col gap-1">

29
src/components/cursor.tsx
View file

@ -1,22 +1,29 @@
import { useEffect, useState } from "react";
import { Rect } from "react-konva";
import { Graphics } from "@pixi/react";
function Cursor({ mousePosition }: { mousePosition: Position }) {
function Cursor({ localMousePosition }: { localMousePosition: Position }) {
const [position, setPosition] = useState({ x: 0, y: 0 });
useEffect(() => {
if (mousePosition) {
const snappedX = Math.floor(mousePosition.x / 16) * 16;
const snappedY = Math.floor(mousePosition.y / 16) * 16;
if (localMousePosition) {
const x = Math.floor(localMousePosition.x / 16) * 16;
const y = Math.floor(localMousePosition.y / 16) * 16;
setPosition({
x: snappedX,
y: snappedY,
});
setPosition({ x, y });
}
}, [mousePosition]);
}, [localMousePosition]);
return <Rect x={position.x} y={position.y} width={16} height={16} stroke={"white"} strokeWidth={0.5} dash={[2.5]} />;
return (
<Graphics
x={position.x}
y={position.y}
draw={(g) => {
g.clear();
g.lineStyle(1, 0xffffff, 1);
g.drawRect(0, 0, 16, 16);
}}
/>
);
}
export default Cursor;