From 2c960ebd840c2493692fb23d812a933a0328f8f6 Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Sat, 7 Dec 2024 16:03:27 +0000
Subject: [PATCH] fix: resize canvas on window resize

---
 src/App.tsx | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9c0d05b..623e151 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -54,7 +54,7 @@ function App() {
 				}));
 			}
 
-			onMouseDown(e);
+			onMouseDown();
 		}
 
 		const stageRect = stageContainerRef.current?.getBoundingClientRect();
@@ -65,15 +65,15 @@ function App() {
 
 		setMousePosition({
 			x: mouseX,
-			y: mouseY
+			y: mouseY,
 		});
 		setLocalMousePosition({
 			x: (mouseX - coords.x) / scale,
-			y: (mouseY - coords.y) / scale
+			y: (mouseY - coords.y) / scale,
 		});
 	};
 
-	const onMouseDown = (e: React.MouseEvent) => {
+	const onMouseDown = () => {
 		setDragging(true);
 
 		const blockX = Math.floor(localMousePosition.x / 16);
@@ -120,11 +120,17 @@ function App() {
 	};
 
 	useEffect(() => {
-		if (stageContainerRef.current) {
-			setStageSize({
-				width: stageContainerRef.current.offsetWidth,
-				height: stageContainerRef.current.offsetHeight,
-			});
+		const resizeCanvas = () => {
+			if (stageContainerRef.current) {
+				setStageSize({
+					width: stageContainerRef.current.offsetWidth,
+					height: stageContainerRef.current.offsetHeight,
+				});
+			}
+		};
+
+		resizeCanvas();
+		window.addEventListener("resize", resizeCanvas);
 		}
 	}, []);