feat: rendering for block selector

src/components/block-selector/SelectorBlocks.tsx

@@ -0,0 +1,77 @@
+import { useContext, useMemo } from "react";
+import { Container, Graphics, Sprite, Stage } from "@pixi/react";
+import * as PIXI from "pixi.js";
+
+import { BlocksIcon } from "lucide-react";
+
+import constants from "@/constants";
+import { TexturesContext } from "@/context/Textures";
+
+import _blockData from "@/data/blocks/programmer-art/data.json";
+const blockData: BlockData = _blockData;
+
+interface Props {
+	stageWidth: number;
+	searchInput: string;
+}
+
+function SelectorBlocks({ stageWidth, searchInput }: Props) {
+	const { textures } = useContext(TexturesContext);
+
+	const blocksPerColumn = Math.floor(stageWidth / (32 + 1));
+	const blocks = useMemo(() => Object.keys(blockData).filter((value) => value.includes(searchInput)), [searchInput]);
+
+	const textureCache = useMemo(() => {
+		return (blockName: string) => {
+			let texture = textures[`${blockName}.png`];
+			if (!texture) {
+				const baseTexture = new PIXI.BaseTexture(constants.MISSING_TEXTURE);
+				texture = new PIXI.Texture(baseTexture);
+			}
+
+			return texture;
+		};
+	}, [textures]);
+
+	const onMouseMove = (e: React.MouseEvent) => {
+		console.log(e.clientX, e.clientY);
+	};
+
+	if (blocks.length == 0) {
+		return (
+			<div className="w-full h-full flex flex-col justify-center items-center gap-1 text-zinc-400">
+				<BlocksIcon size={40} />
+				<span>No blocks found</span>
+			</div>
+		);
+	}
+
+	return (
+		<Stage
+			width={stageWidth}
+			height={Math.ceil(Object.keys(blockData).length / blocksPerColumn) * (32 + 2)}
+			options={{ backgroundAlpha: 0 }}
+			onMouseMove={onMouseMove}
+		>
+			<Container>
+				{blocks.map((block, index) => {
+					const texture = textureCache(block);
+					const x = (index % blocksPerColumn) * (32 + 2);
+					const y = Math.floor(index / blocksPerColumn) * (32 + 2);
+
+					return <Sprite texture={texture} x={x} y={y} scale={2} />;
+				})}
+
+				<Graphics
+					draw={(g) => {
+						g.clear();
+						g.lineStyle(1, 0xffffff, 1);
+						g.drawRect(0, 0, 16, 16);
+					}}
+				/>
+			</Container>
+		</Stage>
+	);
+}
+
+export default SelectorBlocks;

src/components/block-selector/index.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useRef, useState } from "react";
+
+import { Input } from "@/components/ui/input";
+
+import SelectorBlocks from "./SelectorBlocks";
+
+function BlockSelector() {
+	const divRef = useRef<HTMLDivElement>(null);
+	const [stageWidth, setStageWidth] = useState(0);
+	const [searchInput, setSearchInput] = useState("");
+
+	useEffect(() => {
+		if (divRef.current) {
+			setStageWidth(divRef.current.clientWidth);
+		}
+	}, []);
+
+	return (
+		<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">
+			<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
+
+			<div ref={divRef} className="w-full flex-1 overflow-y-auto pb-2">
+				<SelectorBlocks stageWidth={stageWidth} searchInput={searchInput} />
+			</div>
+		</div>
+	);
+}
+
+export default BlockSelector;

src/components/canvas/Blocks.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 import * as PIXI from "pixi.js";
 import { useApp } from "@pixi/react";