feat: add cursor onto tiles

This commit is contained in:
trafficlunar 2024-12-04 18:26:03 +00:00
parent 98b901ca75
commit e1b3f3a091
2 changed files with 39 additions and 7 deletions

22
src/components/cursor.tsx Normal file
View file

@ -0,0 +1,22 @@
import { useEffect, useState } from "react";
import { Rect } from "react-konva";
function Cursor({ mousePosition }: { mousePosition: 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;
setPosition({
x: snappedX,
y: snappedY,
});
}
}, [mousePosition]);
return <Rect x={position.x} y={position.y} width={16} height={16} stroke={"white"} strokeWidth={0.5} dash={[2.5]} />;
}
export default Cursor;