From c836c26a05cab980f7a0a1c1dbd375d7d1f21c3f Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Thu, 5 Dec 2024 20:57:33 +0000
Subject: [PATCH] feat: add information of cursor into corner

---
 src/App.tsx                           |  9 ++++++--
 src/components/blocks.tsx             |  3 +--
 src/components/cursor-information.tsx | 31 +++++++++++++++++++++++++++
 3 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 src/components/cursor-information.tsx

diff --git a/src/App.tsx b/src/App.tsx
index f180fe6..0833581 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,6 +16,7 @@ import {
 import ThemeChanger from "./components/menubar/theme-changer";
 import Blocks from "./components/blocks";
 import Cursor from "./components/cursor";
+import CursorInformation from "./components/cursor-information";
 
 function App() {
 	const stageContainerRef = useRef<HTMLDivElement>(null);
@@ -30,6 +31,8 @@ function App() {
 	const [stageCoords, setStageCoords] = useState<Position>({ x: 0, y: 0 });
 	const [mousePosition, setMousePosition] = useState<Position>({ x: 0, y: 0 });
 
+	const [blocks, setBlocks] = useState<Block[]>([]);
+
 	const onMouseMove = (e) => {
 		const stage = e.target.getStage();
 		const oldScale = stage.scaleX();
@@ -96,7 +99,7 @@ function App() {
 				</MenubarMenu>
 			</Menubar>
 
-			<div ref={stageContainerRef} className="w-full h-full">
+			<div ref={stageContainerRef} className="relative w-full h-full">
 				<Stage
 					width={stageSize.width}
 					height={stageSize.height}
@@ -110,10 +113,12 @@ function App() {
 					onWheel={onWheel}
 				>
 					<Layer imageSmoothingEnabled={false}>
-						<Blocks />
+						<Blocks blocks={blocks} setBlocks={setBlocks} />
 						<Cursor mousePosition={mousePosition} />
 					</Layer>
 				</Stage>
+
+				<CursorInformation mousePosition={mousePosition} blocks={blocks} />
 			</div>
 		</main>
 	);
diff --git a/src/components/blocks.tsx b/src/components/blocks.tsx
index 414ca16..75bb28d 100644
--- a/src/components/blocks.tsx
+++ b/src/components/blocks.tsx
@@ -3,8 +3,7 @@ import { Image as KonvaImage } from "react-konva";
 
 import blocksData from "@/lib/blocks/programmer-art/average_colors.json";
 
-function Blocks() {
-	const [blocks, setBlocks] = useState<Block[]>([]);
+function Blocks({ blocks, setBlocks }: { blocks: Block[], setBlocks: React.Dispatch<React.SetStateAction<Block[]>> }) {
 	const [images, setImages] = useState<{ [key: string]: HTMLImageElement }>({});
 
 	const findClosestBlock = (r: number, g: number, b: number) => {
diff --git a/src/components/cursor-information.tsx b/src/components/cursor-information.tsx
new file mode 100644
index 0000000..9f3efcf
--- /dev/null
+++ b/src/components/cursor-information.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+function CursorInformation({ mousePosition, blocks }: { mousePosition: 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);
+
+			setPosition({
+				x: snappedX,
+				y: snappedY,
+			});
+
+			setBlock(blocks.find(b => b.x === snappedX && b.y === snappedY));
+		}
+	}, [mousePosition]);
+
+  return <div className="absolute left-4 bottom-4 flex flex-col gap-1">
+	<div className="bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit">{block?.name ?? "air"}</div>
+
+	<div className="flex gap-4 bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit">
+        <span>X: {position.x}</span>
+        <span>Y: {position.y}</span>
+    </div>
+  </div>
+}
+
+export default CursorInformation
\ No newline at end of file