From 98b901ca75f07b7bc0522925597afb6e017c0fd5 Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Wed, 4 Dec 2024 18:25:44 +0000
Subject: [PATCH] feat: add block tiles

---
 src/App.tsx               | 14 ++++----------
 src/components/blocks.tsx | 30 ++++++++++++++++++++++++++++++
 src/types.d.ts            |  8 ++++++++
 3 files changed, 42 insertions(+), 10 deletions(-)
 create mode 100644 src/components/blocks.tsx
 create mode 100644 src/types.d.ts

diff --git a/src/App.tsx b/src/App.tsx
index 3bca107..f595dce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { Image, Layer, Stage, Text } from "react-konva";
+import { Layer, Stage } from "react-konva";
 
 import {
 	Menubar,
@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/menubar";
 
 import ThemeChanger from "./components/menubar/theme-changer";
-import useImage from "use-image";
+import Blocks from "./components/blocks";
 
 function App() {
 	const stageContainerRef = useRef<HTMLDivElement>(null);
@@ -26,12 +26,7 @@ function App() {
 	});
 
 	const [stageScale, setStageScale] = useState(1);
-	const [stageCoords, setStageCoords] = useState({
-		x: 0,
-		y: 0,
-	});
-
-	const [image] = useImage("/blocks/programmer-art/stone.png");
+	const [stageCoords, setStageCoords] = useState<Position>({ x: 0, y: 0 });
 
 	const onWheel = (e) => {
 		const stage = e.target.getStage();
@@ -104,8 +99,7 @@ function App() {
 					onWheel={onWheel}
 				>
 					<Layer imageSmoothingEnabled={false}>
-						<Text text="test" fontSize={20} fill="white" />
-						<Image image={image} />
+						<Blocks />
 					</Layer>
 				</Stage>
 			</div>
diff --git a/src/components/blocks.tsx b/src/components/blocks.tsx
new file mode 100644
index 0000000..829965e
--- /dev/null
+++ b/src/components/blocks.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { Image } from "react-konva";
+import useImage from "use-image";
+
+function Blocks() {
+	const [image] = useImage("/blocks/programmer-art/stone.png");
+
+	const [blocks, setBlocks] = useState<Block[]>([
+		{
+			name: "stone",
+			x: 0,
+			y: 0
+		},
+    {
+			name: "stone",
+			x: 1,
+			y: 1
+		},
+	]);
+
+	return (
+		<>
+			{blocks.map((block, index) => (
+				<Image key={index} image={image} x={block.x * 16} y={block.y * 16} />
+			))}
+		</>
+	);
+}
+
+export default Blocks;
diff --git a/src/types.d.ts b/src/types.d.ts
new file mode 100644
index 0000000..ba64a58
--- /dev/null
+++ b/src/types.d.ts
@@ -0,0 +1,8 @@
+interface Position {
+    x: number;
+    y: number
+}
+
+interface Block extends Position {
+    name: string;
+}
\ No newline at end of file