From c0158d6e2c38908a3bc8fa0a42f982d73f21589b Mon Sep 17 00:00:00 2001
From: claustra01 <shinya430.g@gmail.com>
Date: Sun, 11 Aug 2024 15:40:39 +0900
Subject: [PATCH 1/3] add: shot judge

---
 src/pages/yatai/index.tsx | 42 ++++++++++++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx
index 47fa8e2..9a0a41f 100644
--- a/src/pages/yatai/index.tsx
+++ b/src/pages/yatai/index.tsx
@@ -56,14 +56,43 @@ const YataiStage = memo(() => {
 			args: args,
 		}));
 
-		// 弾が当たった時はこれを呼び出す
-		const handleHit = () => {
-			api.applyImpulse(
-				[randFloat(-2, 2), 4, 8],
-				[randFloat(-1, 1), randFloat(-1, 1), randFloat(-1, 1)],
-			);
+		const socketRef = useSocketRefStore((state) => state.socketRef);
+
+		useEffect(() => {
+			const onMessage = (event: MessageEvent) => {
+				const data = JSON.parse(event.data);
+				if (data.message_type === MessageType.Action) {
+					shotTarget(data);
+				}
+			};
+			const currentSocketRef = socketRef?.current;
+			currentSocketRef?.addEventListener("message", onMessage);
+			return () => {
+				currentSocketRef?.removeEventListener("message", onMessage);
+			};
+		}, [socketRef]);
+
+		// TODO: これらは一人用,いつかマルチプレイヤー対応する
+		const [target, setTarget] = useState<Target | undefined>(undefined);
+		const shotTarget = (data: ActionSchema) => {
+			setTarget({ x: data.target.x, y: data.target.y });
 		};
 
+		useEffect(() => {
+			if (!target) return;
+			if (
+				target.x * 2 > (props.position as [number, number, number])[0] - args[0]/2 &&
+				target.x * 2 < (props.position as [number, number, number])[0] + args[0]/2 &&
+				target.y * 2 > (props.position as [number, number, number])[1] - args[1]/2 - 2 &&
+				target.y * 2 < (props.position as [number, number, number])[1] + args[1]/2 - 2
+			) {
+				api.applyImpulse(
+					[randFloat(-2, 2), 4, 8],
+					[randFloat(-1, 1), randFloat(-1, 1), randFloat(-1, 1)],
+				);
+			}
+		}, [target]);
+
 		return (
 			<mesh
 				ref={
@@ -78,7 +107,6 @@ const YataiStage = memo(() => {
 				{...props}
 				castShadow
 				receiveShadow
-				onPointerOver={() => handleHit()}
 			>
 				<boxGeometry args={[...args]} />
 				<meshStandardMaterial color={"yellow"} />

From 160cd0755c7ba9869fc06dea108ef0ef383dfed1 Mon Sep 17 00:00:00 2001
From: claustra01 <shinya430.g@gmail.com>
Date: Sun, 11 Aug 2024 15:40:57 +0900
Subject: [PATCH 2/3] chore: comment out debug funcs

---
 src/pages/yatai/index.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx
index 9a0a41f..2833aa8 100644
--- a/src/pages/yatai/index.tsx
+++ b/src/pages/yatai/index.tsx
@@ -181,18 +181,15 @@ const TargetOverlay = () => {
 	// 	setAim({ x, y });
 	// };
 
-	const [target, setTarget] = useState<Target | undefined>(undefined);
+	// const [target, setTarget] = useState<Target | undefined>(undefined);
 	const shotTarget = (data: ActionSchema) => {
 		const x = window.innerWidth / 2 + data.target.x * 300;
 		const y = window.innerHeight / 2 + data.target.y * 300;
 		// TODO: エイム実装ができたらここのsetAimは削除する
 		setAim({ x, y });
-		setTarget({ x, y });
+		// setTarget({ x, y });
 	};
 
-	// DEBUG: 後で消す
-	console.log(target);
-
 	return (
 		<div
 			className={styles.target}

From f874da82949a7e01c5cd53b59015aa706874036a Mon Sep 17 00:00:00 2001
From: claustra01 <shinya430.g@gmail.com>
Date: Sun, 11 Aug 2024 15:44:13 +0900
Subject: [PATCH 3/3] fix: lint

---
 src/pages/yatai/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx
index 2833aa8..0378c10 100644
--- a/src/pages/yatai/index.tsx
+++ b/src/pages/yatai/index.tsx
@@ -81,17 +81,21 @@ const YataiStage = memo(() => {
 		useEffect(() => {
 			if (!target) return;
 			if (
-				target.x * 2 > (props.position as [number, number, number])[0] - args[0]/2 &&
-				target.x * 2 < (props.position as [number, number, number])[0] + args[0]/2 &&
-				target.y * 2 > (props.position as [number, number, number])[1] - args[1]/2 - 2 &&
-				target.y * 2 < (props.position as [number, number, number])[1] + args[1]/2 - 2
+				target.x * 2 >
+					(props.position as [number, number, number])[0] - args[0] / 2 &&
+				target.x * 2 <
+					(props.position as [number, number, number])[0] + args[0] / 2 &&
+				target.y * 2 >
+					(props.position as [number, number, number])[1] - args[1] / 2 - 2 &&
+				target.y * 2 <
+					(props.position as [number, number, number])[1] + args[1] / 2 - 2
 			) {
 				api.applyImpulse(
 					[randFloat(-2, 2), 4, 8],
 					[randFloat(-1, 1), randFloat(-1, 1), randFloat(-1, 1)],
 				);
 			}
-		}, [target]);
+		}, [target, props.position, api]);
 
 		return (
 			<mesh