feat: WebSocket繋ぎ込み

src/pages/home/index.tsx

@@ -1,12 +1,15 @@
 import { useEffect, useState } from "react";
 import { DefaultButton } from "../../components/ui/Button";
+import { useSocketRefStore } from "../../store";
 import { device } from "../../utils/device";
+import { requestPermission } from "../../utils/parmission";
 import styles from "./index.module.css";
 
 function Home() {
 	const [isPcScreen, setIsPcScreen] = useState(
 		window.matchMedia(device.pc).matches,
 	);
+	const setRef = useSocketRefStore((state) => state.setRef);
 
 	useEffect(() => {
 		const mediaQuery = window.matchMedia(device.pc);
@@ -24,6 +27,11 @@ function Home() {
 	}, []);
 
 	const handleClick = () => {
+		requestPermission();
+		const socketRef = new WebSocket(
+			`wss://${import.meta.env.VITE_HOST_NAME}/ws`,
+		);
+		setRef({ current: socketRef });
 		window.location.href = isPcScreen ? "/yatai" : "/shooter";
 	};
 
@@ -55,7 +63,9 @@ function Home() {
 				/>
 			</div>
 			<div
-				className={`${styles["go-game"]} ${isPcScreen ? styles["go-game-pc"] : ""}`}
+				className={`${styles["go-game"]} ${
+					isPcScreen ? styles["go-game-pc"] : ""
+				}`}
 			>
 				<DefaultButton color="red" size="lg" onClick={handleClick}>
 					射的へ向かう

src/pages/shooter/index.tsx

@@ -2,10 +2,15 @@ import { type KeyboardEventHandler, 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 { useSocketRefStore } from "../../store";
+import { type Schema, message_type } from "../../type/schema";
 import style from "./index.module.css";
 
-function Shooter() {
+const Shooter = () => {
 	const [isOpen, setIsOpen] = useState(true);
+	const { orientationDiff } = useOrientation();
+	const socketRef = useSocketRefStore((state) => state.socketRef);
 
 	const initialImages = [
 		"/2D_material/cork.webp",
@@ -16,6 +21,26 @@ function Shooter() {
 	const [images, setImages] = useState(initialImages);
 
 	const handleClick = () => {
+		const data: Schema = {
+			id: "shooter",
+			interval: 0,
+			angle: {
+				x: orientationDiff.beta,
+				y: orientationDiff.gamma,
+			},
+			acceleration: {
+				x: 0,
+				y: 0,
+				z: 0,
+			},
+			distance: {
+				x: 0,
+				y: 0,
+				z: 0,
+			},
+			message_type: message_type.action,
+		};
+		socketRef?.current?.send(JSON.stringify(data));
 		setImages((prevImages) => prevImages.slice(1));
 	};
 
@@ -34,19 +59,21 @@ function Shooter() {
 				<ShooterButton onClick={handleClick} onKeyUp={handleKeyUp} />
 			</div>
 			<div className={style.cork}>
-				{images.map((src) => (
-					<img key={src} src={src} alt="コルクの残量を表示しています" />
+				{images.map((src, i) => (
+					// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+					<img key={i} src={src} alt="コルクの残量を表示しています" />
 				))}
 			</div>
 		</div>
 	);
-}
+};
 
 type ModalContentProps = {
 	setIsOpen: (isOpen: boolean) => void;
 };
 
 const ModalContent: React.FC<ModalContentProps> = ({ setIsOpen }) => {
+	const { reset } = useOrientation();
 	return (
 		<div className={style["modal-wrapper"]}>
 			<img
@@ -67,7 +94,10 @@ const ModalContent: React.FC<ModalContentProps> = ({ setIsOpen }) => {
 					variant="outlined"
 					color="red"
 					size="md"
-					onClick={() => setIsOpen(false)}
+					onClick={() => {
+						reset();
+						setIsOpen(false);
+					}}
 				>
 					置いたよ！
 				</DefaultButton>

src/pages/yatai/index.tsx

@@ -1,5 +1,6 @@
 import { Physics, useBox } from "@react-three/cannon";
 import { Canvas, type ThreeElements, useThree } from "@react-three/fiber";
+import { useEffect } from "react";
 import type {
 	BufferGeometry,
 	Material,
@@ -8,9 +9,25 @@ import type {
 	Object3DEventMap,
 } from "three";
 import { randFloat } from "three/src/math/MathUtils.js";
+import { useSocketRefStore } from "../../store";
 import styles from "./index.module.css";
 
 function Yatai() {
+	const socketRef = useSocketRefStore((state) => state.socketRef);
+
+	useEffect(() => {
+		const onMessage = (event: MessageEvent) => {
+			const data = JSON.parse(event.data);
+			// サーバーから受け取ったデータを使って処理をする
+			console.log(data);
+		};
+		const currentSocketRef = socketRef?.current;
+		currentSocketRef?.addEventListener("message", onMessage);
+		return () => {
+			currentSocketRef?.removeEventListener("message", onMessage);
+		};
+	}, [socketRef]);
+
 	// 土台
 	const Foundation = (props: ThreeElements["mesh"]) => {
 		const args: [number, number, number] = [10, 2, 2];