add: send hit data

src/hooks/useSocketSender.ts

@@ -1,12 +1,16 @@
 import { useCallback } from "react";
-import { event_type, message_type, Schema } from "../type/schema";
 import { useSocketRefStore } from "../store";
+import { type Schema, event_type, type message_type } from "../type/schema";
 
 export const useSocketSender = () => {
 	const socketRef = useSocketRefStore((state) => state.socketRef);
 
 	const sendData = useCallback(
-		(mes_type: message_type, uuid: string, orientationDiff: { alpha: number, beta: number }) => {
+		(
+			mes_type: message_type,
+			uuid: string,
+			orientationDiff: { alpha: number; beta: number },
+		) => {
 			const data: Schema = {
 				id: uuid,
 				interval: 0,
@@ -30,7 +34,7 @@ export const useSocketSender = () => {
 			console.log(data);
 			socketRef?.current?.send(JSON.stringify(data));
 		},
-		[socketRef]
+		[socketRef],
 	);
 
 	return { sendData };

src/pages/shooter/index.tsx

@@ -1,18 +1,14 @@
-import {
-	type KeyboardEventHandler,
-	useEffect,
-	useState,
-} from "react";
+import { type KeyboardEventHandler, useEffect, useState } from "react";
 import { DefaultButton } from "../../components/ui/Button";
 import { Modal } from "../../components/ui/Modal";
 import { ShooterButton } from "../../components/ui/ShooterButton";
 import { useOrientation } from "../../hooks/useOrientation";
 import { useSocketReceiver } from "../../hooks/useSocketReceiver";
+import { useSocketSender } from "../../hooks/useSocketSender";
 import { useUUIDStore } from "../../store";
 import { message_type } from "../../type/schema";
 import { MessageType } from "../../type/shooting";
 import style from "./index.module.css";
-import { useSocketSender } from "../../hooks/useSocketSender";
 
 const Shooter = () => {
 	const [isOpen, setIsOpen] = useState(true);
@@ -42,7 +38,7 @@ const Shooter = () => {
 				clearInterval(intervalId);
 			}
 		};
-	}, [sendData]);
+	}, [uuid, orientationDiff, sendData]);
 
 	useEffect(() => {
 		onMessage((data) => {

src/pages/yatai/index.tsx

@@ -10,7 +10,8 @@ import type {
 } from "three";
 import { randFloat } from "three/src/math/MathUtils.js";
 import { useSocketReceiver } from "../../hooks/useSocketReceiver";
-
+import { useSocketSender } from "../../hooks/useSocketSender";
+import { message_type } from "../../type/schema";
 import {
 	type ActionSchema,
 	MessageType,
@@ -50,6 +51,7 @@ const YataiStage = memo(() => {
 
 	// 的
 	const Target = (props: ThreeElements["mesh"]) => {
+		const { sendData } = useSocketSender();
 		const { onMessage } = useSocketReceiver();
 		const position = props.position as [number, number, number];
 
@@ -69,8 +71,10 @@ const YataiStage = memo(() => {
 		}, [onMessage]);
 
 		// TODO: これらは一人用,いつかマルチプレイヤー対応する
+		const [uuid, setUuid] = useState<string>("");
 		const [target, setTarget] = useState<Target | undefined>(undefined);
 		const shotTarget = (data: ActionSchema) => {
+			setUuid(data.id);
 			setTarget({ x: data.target.x, y: data.target.y });
 		};
 
@@ -86,8 +90,9 @@ const YataiStage = memo(() => {
 					[randFloat(-2, 2), 4, 8],
 					[randFloat(-1, 1), randFloat(-1, 1), randFloat(-1, 1)],
 				);
+				sendData(message_type.Hit, uuid, { alpha: 0, beta: 0 });
 			}
-		}, [target, position, api]);
+		}, [uuid, target, position, api, sendData]);
 
 		return (
 			<mesh

src/type/schema.ts

@@ -28,6 +28,7 @@ interface distance {
 export enum message_type {
 	status = "status",
 	action = "action",
+	Hit = "hit",
 }
 
 export enum event_type {