feat: blocks replacer

src/components/menubar/ViewMenu.tsx

@@ -29,6 +29,9 @@ function ViewMenu() {
 				<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
 					Color Picker
 				</MenubarCheckboxItem>
+				<MenubarCheckboxItem checked={settings.blocksReplacer} onCheckedChange={onCheckedChange("blocksReplacer")}>
+					Blocks Replacer
+				</MenubarCheckboxItem>
 				<MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}>
 					Radius Changer
 				</MenubarCheckboxItem>

src/components/tool-settings/Radius.tsx

@@ -2,13 +2,13 @@ import { useContext } from "react";
 
 import { ToolContext } from "@/context/Tool";
 import { Input } from "@/components/ui/input";
-import { Label } from "../ui/label";
+import { Label } from "@/components/ui/label";
 
 function Radius() {
 	const { radius, setRadius } = useContext(ToolContext);
 
 	return (
-		<div className="grid grid-cols-2 items-center">
+		<div className="grid grid-cols-2 items-center gap-2">
 			<Label htmlFor="radius">Radius</Label>
 			<Input
 				name="radius"

src/components/tool-settings/Replace.tsx

@@ -0,0 +1,78 @@
+import { useContext, useEffect, useState } from "react";
+import { Container, Sprite, Stage } from "@pixi/react";
+
+import { CanvasContext } from "@/context/Canvas";
+import { ToolContext } from "@/context/Tool";
+import { TexturesContext } from "@/context/Textures";
+
+import { Label } from "@/components/ui/label";
+import { Button } from "../ui/button";
+
+function Replace() {
+	const { setBlocks } = useContext(CanvasContext);
+	const { selectedBlock, tool, setTool } = useContext(ToolContext);
+	const { missingTexture, textures } = useContext(TexturesContext);
+
+	const [oldTool, setOldTool] = useState<Tool>("hand");
+	const [waitingId, setWaitingId] = useState<number | null>(null);
+	const [block1, setBlock1] = useState<string>("");
+	const [block2, setBlock2] = useState<string>("");
+
+	const onClickBlockButton = (id: number) => {
+		setWaitingId(id);
+		setOldTool(tool);
+		setTool("eyedropper");
+	};
+
+	const onClickReplace = () => {
+		setBlocks((prevBlocks) => prevBlocks.map((block) => (block.name === block1 ? { ...block, name: block2 } : block)));
+	};
+
+	useEffect(() => {
+		if (!waitingId) return;
+
+		if (waitingId == 1) {
+			setBlock1(selectedBlock);
+		} else if (waitingId == 2) {
+			setBlock2(selectedBlock);
+		}
+
+		setTool(oldTool);
+		setWaitingId(null);
+	}, [selectedBlock]);
+
+	return (
+		<div className="grid grid-cols-2 items-center gap-2">
+			<Label htmlFor="radius">Block 1</Label>
+			<button
+				onClick={() => onClickBlockButton(1)}
+				className="h-10 rounded-md border border-zinc-200 dark:border-zinc-800 dark:bg-zinc-950 flex justify-center items-center"
+			>
+				<Stage width={32} height={32} options={{ backgroundAlpha: 0 }}>
+					<Container>
+						<Sprite texture={textures[`${block1}.png`] ?? missingTexture} scale={2} />
+					</Container>
+				</Stage>
+			</button>
+
+			<Label htmlFor="radius">Block 2</Label>
+			<button
+				onClick={() => onClickBlockButton(2)}
+				className="h-10 rounded-md border border-zinc-200 dark:border-zinc-800 dark:bg-zinc-950 flex justify-center items-center"
+			>
+				<Stage width={32} height={32} options={{ backgroundAlpha: 0 }}>
+					<Container>
+						<Sprite texture={textures[`${block2}.png`] ?? missingTexture} scale={2} />
+					</Container>
+				</Stage>
+			</button>
+
+			<br />
+			<Button variant="outline" onClick={onClickReplace} className="h-8">
+				Replace
+			</Button>
+		</div>
+	);
+}
+
+export default Replace;

src/components/tool-settings/index.tsx

@@ -6,6 +6,7 @@ import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 
 import ColorPicker from "./ColorPicker";
+import Replace from "./Replace";
 import Radius from "./Radius";
 import SelectorBlocks from "./SelectorBlocks";
 
@@ -24,7 +25,7 @@ function ToolSettings() {
 
 	return (
 		<>
-			{(settings.colorPicker || settings.radiusChanger || settings.blockSelector) && (
+			{(settings.colorPicker || settings.blocksReplacer || settings.radiusChanger || settings.blockSelector) && (
 				<div className="w-72 border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-2 pb-0 flex flex-col h-full gap-2">
 					{settings.colorPicker && (
 						<>
@@ -33,6 +34,13 @@ function ToolSettings() {
 						</>
 					)}
 
+					{settings.blocksReplacer && (
+						<>
+							<Replace />
+							<Separator />
+						</>
+					)}
+
 					{settings.radiusChanger && (
 						<>
 							<Radius />

src/context/Settings.tsx

@@ -13,6 +13,7 @@ const defaultSettings: Settings = {
 	grid: true,
 	canvasBorder: false,
 	colorPicker: false,
+	blocksReplacer: true,
 	radiusChanger: true,
 	blockSelector: true,
 };

src/types.d.ts

@@ -27,6 +27,7 @@ interface Settings {
 	grid: boolean;
 	canvasBorder: boolean;
 	colorPicker: boolean;
+	blocksReplacer: boolean;
 	radiusChanger: boolean;
 	blockSelector: boolean;
 }