refactor: rewrite and organize project

still need to add other features from before rewrite

src/components/Blocks.tsx

@@ -0,0 +1,82 @@
+import { useEffect } from "react";
+import { Sprite } from "@pixi/react";
+
+import blocksData from "@/data/blocks/programmer-art/average_colors.json";
+import welcomeBlocksData from "@/data/welcome.json";
+import { Texture } from "pixi.js";
+
+interface Props {
+	blocks: Block[];
+	setBlocks: React.Dispatch<React.SetStateAction<Block[]>>;
+	textures: Record<string, Texture>;
+}
+
+function Blocks({ blocks, setBlocks, textures }:  Props) {
+	const findClosestBlock = (r: number, g: number, b: number, a: number) => {
+		let closestBlock = "";
+		let closestDistance = Infinity;
+
+		Object.entries(blocksData).forEach(([block, rgba]) => {
+			const distance = Math.sqrt(Math.pow(r - rgba[0], 2) + Math.pow(g - rgba[1], 2) + Math.pow(b - rgba[2], 2) + Math.pow(a - rgba[3], 3));
+			if (distance < closestDistance) {
+				closestDistance = distance;
+				closestBlock = block;
+			}
+		});
+
+		return closestBlock;
+	};
+
+	useEffect(() => {
+		// // TESTING: convert image to blocks
+		// const image = new Image();
+		// image.src = "/bliss.png";
+		// image.addEventListener("load", () => {
+		// 	const canvas = document.createElement("canvas");
+		// 	const ctx = canvas.getContext("2d");
+
+		// 	if (ctx) {
+		// 		canvas.width = image.width;
+		// 		canvas.height = image.height;
+		// 		ctx.drawImage(image, 0, 0, image.width / 4, image.height / 4);
+
+		// 		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) {
+		// 			const block = findClosestBlock(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2], imageData.data[i + 3]);
+
+		// 			const x = Math.floor((i / 4) % imageData.width);
+		// 			const y = Math.floor(i / 4 / imageData.width);
+
+		// 			newBlocks.push({
+		// 				name: block,
+		// 				x,
+		// 				y,
+		// 			});
+		// 		}
+
+		// 		setBlocks(newBlocks);
+		// 	}
+		// });
+
+		setBlocks(welcomeBlocksData);
+		console.log(textures)
+	}, [textures]);
+
+	return (
+		<>
+			{blocks.map((block, index) => {
+				const texture = textures[block.name];
+				if (!texture) {
+					console.warn(`Texture not found for block: ${block.name}`);
+					return null;
+				}
+
+				return <Sprite key={index} texture={texture} x={block.x * 16} y={block.y * 16} />;
+			})}
+		</>
+	);
+}
+
+export default Blocks;

src/components/Canvas.tsx

@@ -0,0 +1,146 @@
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Container, Stage } from "@pixi/react";
+import * as PIXI from "pixi.js";
+
+import { ToolContext } from "@/context/ToolContext";
+import { TexturesContext } from "@/context/TexturesContext";
+
+import Blocks from "./Blocks";
+import Cursor from "./Cursor";
+import CursorInformation from "./CursorInformation";
+
+// Set scale mode to NEAREST
+PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
+
+function Canvas() {
+	const { tool, selectedBlock } = useContext(ToolContext);
+	const textures = useContext(TexturesContext);
+
+	const stageContainerRef = useRef<HTMLDivElement>(null);
+	const [stageSize, setStageSize] = useState({ width: 0, height: 0 });
+
+	const [coords, setCoords] = useState<Position>({ x: 0, y: 0 });
+	const [scale, setScale] = useState(1);
+
+	const [mouseCoords, setMouseCoords] = useState<Position>({ x: 0, y: 0 });
+	const [dragging, setDragging] = useState(false);
+
+	const [blocks, setBlocks] = useState<Block[]>([]);
+
+	const updatedBlocks = useMemo(() => {
+		return blocks.filter((b) => !(b.x === mouseCoords.x && b.y === mouseCoords.y));
+	}, [blocks, mouseCoords]);
+
+	const onToolUse = useCallback(() => {
+		switch (tool) {
+			case "pencil": {
+				setBlocks([
+					...updatedBlocks,
+					{
+						name: selectedBlock,
+						x: mouseCoords.x,
+						y: mouseCoords.y,
+					},
+				]);
+				break;
+			}
+			case "eraser":
+				setBlocks(updatedBlocks);
+				break;
+		}
+	}, [tool, mouseCoords, selectedBlock, updatedBlocks]);
+
+	const onMouseMove = useCallback(
+		(e: React.MouseEvent) => {
+			if (dragging) {
+				if (tool === "hand") {
+					setCoords((prevCoords) => ({
+						x: prevCoords.x + e.movementX,
+						y: prevCoords.y + e.movementY,
+					}));
+				}
+				onToolUse();
+			}
+
+			if (!stageContainerRef.current) return;
+
+			const rect = stageContainerRef.current.getBoundingClientRect();
+			const mouseX = e.clientX - rect.left;
+			const mouseY = e.clientY - rect.top;
+
+			setMouseCoords({
+				x: Math.floor((mouseX - coords.x) / (16 * scale)),
+				y: Math.floor((mouseY - coords.y) / (16 * scale)),
+			});
+		},
+		[dragging, coords, scale, tool, onToolUse]
+	);
+
+	const onMouseDown = useCallback(() => {
+		setDragging(true);
+		onToolUse();
+	}, [onToolUse]);
+
+	const onMouseUp = () => {
+		setDragging(false);
+	};
+
+	const onWheel = useCallback(
+		(e: React.WheelEvent) => {
+			e.preventDefault();
+
+			// if (!stageContainerRef.current) return;
+
+			// const rect = stageContainerRef.current.getBoundingClientRect();
+			// const mouseX = e.clientX - rect.left;
+			// const mouseY = e.clientY - rect.top;
+
+			const scaleChange = e.deltaY > 0 ? -0.1 : 0.1;
+			const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.25), 32);
+
+			setScale(newScale);
+			// setCoords({
+			// 	x: -(mouseX * scale) + e.clientX,
+			// 	y: -(mouseY * scale) + e.clientY,
+			// });
+		},
+		[scale]
+	);
+
+	useEffect(() => {
+		const resizeCanvas = () => {
+			if (stageContainerRef.current) {
+				setStageSize({
+					width: stageContainerRef.current.offsetWidth,
+					height: stageContainerRef.current.offsetHeight,
+				});
+			}
+		};
+
+		resizeCanvas();
+		window.addEventListener("resize", resizeCanvas);
+		return () => window.removeEventListener("resize", resizeCanvas);
+	}, []);
+
+	return (
+		<div ref={stageContainerRef} className="relative w-full h-full">
+			<Stage
+				width={stageSize.width}
+				height={stageSize.height}
+				onMouseMove={onMouseMove}
+				onMouseDown={onMouseDown}
+				onMouseUp={onMouseUp}
+				onWheel={onWheel}
+			>
+				<Container x={coords.x} y={coords.y} scale={scale}>
+					<Blocks blocks={blocks} setBlocks={setBlocks} textures={textures} />
+					<Cursor mouseCoords={mouseCoords} />
+				</Container>
+			</Stage>
+
+			<CursorInformation mouseCoords={mouseCoords} blocks={blocks} />
+		</div>
+	);
+}
+
+export default Canvas;

src/components/Cursor.tsx

@@ -0,0 +1,21 @@
+import { Graphics } from "@pixi/react";
+
+interface Props {
+	mouseCoords: Position
+}
+
+function Cursor({ mouseCoords }: Props) {
+	return (
+		<Graphics
+			x={mouseCoords.x * 16}
+			y={mouseCoords.y * 16}
+			draw={(g) => {
+				g.clear();
+				g.lineStyle(1, 0xffffff, 1);
+				g.drawRect(0, 0, 16, 16);
+			}}
+		/>
+	);
+}
+
+export default Cursor;

src/components/CursorInformation.tsx

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

src/components/Toolbar.tsx

@@ -0,0 +1,32 @@
+import { useContext } from "react";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Eraser, Hand, Pencil } from "lucide-react";
+
+import { ToolContext } from "@/context/ToolContext";
+
+function Toolbar() {
+	const { tool, setTool } = useContext(ToolContext);
+
+	const onToolChange = (value: string) => setTool(value as Tool);
+
+	return (
+		<ToggleGroup
+			type="single"
+			value={tool}
+			onValueChange={onToolChange}
+			className="flex flex-col justify-start py-1 border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950"
+		>
+			<ToggleGroupItem value="hand" className="!p-0 !h-8 !min-w-8">
+				<Hand />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="pencil" className="!p-0 !h-8 !min-w-8">
+				<Pencil />
+			</ToggleGroupItem>
+			<ToggleGroupItem value="eraser" className="!p-0 !h-8 !min-w-8">
+				<Eraser />
+			</ToggleGroupItem>
+		</ToggleGroup>
+	);
+}
+
+export default Toolbar;

src/components/blocks.tsx

@@ -1,83 +0,0 @@
-import { useEffect } from "react";
-import { Texture } from "pixi.js";
-import { Sprite } from "@pixi/react";
-
-import blocksData from "@/lib/data/blocks/programmer-art/average_colors.json";
-import welcomeBlocksData from "@/lib/data/welcome.json";
-
-function Blocks({
-	blocks,
-	setBlocks,
-	textures,
-}: {
-	blocks: Block[];
-	setBlocks: React.Dispatch<React.SetStateAction<Block[]>>;
-	textures: Record<string, Texture>;
-}) {
-	const findClosestBlock = (r: number, g: number, b: number, a: number) => {
-		let closestBlock = "";
-		let closestDistance = Infinity;
-
-		Object.entries(blocksData).forEach(([block, rgba]) => {
-			const distance = Math.sqrt(Math.pow(r - rgba[0], 2) + Math.pow(g - rgba[1], 2) + Math.pow(b - rgba[2], 2) + Math.pow(a - rgba[3], 3));
-			if (distance < closestDistance) {
-				closestDistance = distance;
-				closestBlock = block;
-			}
-		});
-
-		return closestBlock;
-	};
-
-	useEffect(() => {
-		// TESTING: convert image to blocks
-		const image = new Image();
-		image.src = "/bliss.png";
-		image.addEventListener("load", () => {
-			const canvas = document.createElement("canvas");
-			const ctx = canvas.getContext("2d");
-
-			if (ctx) {
-				canvas.width = image.width;
-				canvas.height = image.height;
-				ctx.drawImage(image, 0, 0, image.width / 4, image.height / 4);
-
-				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) {
-					const block = findClosestBlock(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2], imageData.data[i + 3]);
-
-					const x = Math.floor((i / 4) % imageData.width);
-					const y = Math.floor(i / 4 / imageData.width);
-
-					newBlocks.push({
-						name: block,
-						x,
-						y,
-					});
-				}
-
-				setBlocks(newBlocks);
-			}
-		});
-
-		setBlocks(welcomeBlocksData);
-	}, []);
-
-	return (
-		<>
-			{blocks.map((block, index) => {
-				const texture = textures[block.name];
-				if (!texture) {
-					console.warn(`Texture not found for block: ${block.name}`);
-					return null;
-				}
-
-				return <Sprite key={index} texture={texture} x={block.x * 16} y={block.y * 16} />;
-			})}
-		</>
-	);
-}
-
-export default Blocks;

src/components/cursor.tsx

@@ -1,29 +0,0 @@
-import { useEffect, useState } from "react";
-import { Graphics } from "@pixi/react";
-
-function Cursor({ localMousePosition }: { localMousePosition: Position }) {
-	const [position, setPosition] = useState({ x: 0, y: 0 });
-
-	useEffect(() => {
-		if (localMousePosition) {
-			const x = Math.floor(localMousePosition.x / 16) * 16;
-			const y = Math.floor(localMousePosition.y / 16) * 16;
-
-			setPosition({ x, y });
-		}
-	}, [localMousePosition]);
-
-	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;

src/components/menubar/ThemeChanger.tsx

@@ -1,5 +1,5 @@
 import { MenubarRadioGroup, MenubarRadioItem, MenubarSub, MenubarSubContent, MenubarSubTrigger } from '@/components/ui/menubar';
-import { useTheme } from '../theme-provider';
+import { useTheme } from '@/context/ThemeContext';
 
 function ThemeChanger() {
   const { setTheme, theme } = useTheme();
@@ -8,7 +8,7 @@ function ThemeChanger() {
     <MenubarSub>
       <MenubarSubTrigger>Set theme...</MenubarSubTrigger>
       <MenubarSubContent>
-        <MenubarRadioGroup value={theme} onValueChange={(value) => setTheme(value)}>
+        <MenubarRadioGroup value={theme} onValueChange={(value) => setTheme(value as Theme)}>
           <MenubarRadioItem value='light'>Light</MenubarRadioItem>
           <MenubarRadioItem value='dark'>Dark</MenubarRadioItem>
           <MenubarRadioItem value='system'>System</MenubarRadioItem>

src/components/menubar/index.tsx

@@ -0,0 +1,51 @@
+import {
+	Menubar as UIMenubar,
+	MenubarContent,
+	MenubarItem,
+	MenubarMenu,
+	MenubarSeparator,
+	MenubarSub,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarTrigger,
+} from "@/components/ui/menubar";
+
+import ThemeChanger from "./ThemeChanger";
+
+function Menubar() {
+	return (
+		<UIMenubar className="rounded-none border-t-0 border-x-0 col-span-2">
+			<MenubarMenu>
+				<a href="https://github.com/trafficlunar/blockmatic" className="ml-4 mr-2">
+					blockmatic
+				</a>
+
+				<MenubarTrigger>File</MenubarTrigger>
+				<MenubarContent>
+					<MenubarItem>Open Schematic</MenubarItem>
+					<MenubarItem>Open Image</MenubarItem>
+
+					<MenubarSeparator />
+
+					<MenubarSub>
+						<MenubarSubTrigger>Export to...</MenubarSubTrigger>
+						<MenubarSubContent>
+							<MenubarItem>.schematic</MenubarItem>
+							<MenubarItem>.litematic</MenubarItem>
+							<MenubarItem>image</MenubarItem>
+						</MenubarSubContent>
+					</MenubarSub>
+				</MenubarContent>
+			</MenubarMenu>
+
+			<MenubarMenu>
+				<MenubarTrigger>More</MenubarTrigger>
+				<MenubarContent>
+					<ThemeChanger />
+				</MenubarContent>
+			</MenubarMenu>
+		</UIMenubar>
+	);
+}
+
+export default Menubar;

src/components/theme-provider.tsx

@@ -1,62 +0,0 @@
-import { createContext, useContext, useEffect, useState } from "react";
-
-type Theme = "dark" | "light" | "system";
-
-type ThemeProviderProps = {
-	children: React.ReactNode;
-	defaultTheme?: Theme;
-	storageKey?: string;
-};
-
-type ThemeProviderState = {
-	theme: Theme;
-	setTheme: (theme: Theme) => void;
-};
-
-const initialState: ThemeProviderState = {
-	theme: "system",
-	setTheme: () => null,
-};
-
-const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
-
-export function ThemeProvider({ children, defaultTheme = "system", storageKey = "vite-ui-theme", ...props }: ThemeProviderProps) {
-	const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
-
-	useEffect(() => {
-		const root = window.document.documentElement;
-
-		root.classList.remove("light", "dark");
-
-		if (theme === "system") {
-			const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-
-			root.classList.add(systemTheme);
-			return;
-		}
-
-		root.classList.add(theme);
-	}, [theme]);
-
-	const value = {
-		theme,
-		setTheme: (theme: Theme) => {
-			localStorage.setItem(storageKey, theme);
-			setTheme(theme);
-		},
-	};
-
-	return (
-		<ThemeProviderContext.Provider {...props} value={value}>
-			{children}
-		</ThemeProviderContext.Provider>
-	);
-}
-
-export const useTheme = () => {
-	const context = useContext(ThemeProviderContext);
-
-	if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
-
-	return context;
-};