websocket繋ぎこみ

src/components/responsive/homePC/index.tsx

@@ -1,21 +1,30 @@
+import { useNavigate } from "react-router-dom";
+import { useSocketRefStore } from "../../../store";
+import { requestPermission } from "../../../utils/permission";
 import { DefaultButton } from "../../ui/Button";
 import TextButton from "../../ui/TextButton";
 import styles from "./index.module.css";
 
 function HomePC() {
+	const navigate = useNavigate();
+	const setRef = useSocketRefStore((state) => state.setRef);
+
 	const handleClick = () => {
+		requestPermission();
+		const socketRef = new WebSocket(
+			`wss://${import.meta.env.VITE_HOST_NAME || "virtual-natsumatsuri-3jpy6th4da-an.a.run.app"}/ws?room_id=2`,
+		);
+		setRef({ current: socketRef });
 		const audio = new Audio("/sound/wadaiko.mp3");
 		audio
 			.play()
 			.then(() => {
-				setTimeout(() => {
-					window.location.href = "/yatai";
-				}, 500);
+				setTimeout(() => {}, 500);
 			})
 			.catch((error) => {
 				console.error("オーディオの音が出なかった", error);
-				window.location.href = "/yatai";
 			});
+		navigate("/yatai");
 	};
 
 	return (

src/components/responsive/homeSP/index.tsx

@@ -1,20 +1,29 @@
+import { useNavigate } from "react-router-dom";
+import { useSocketRefStore } from "../../../store";
+import { requestPermission } from "../../../utils/permission";
 import { DefaultButton } from "../../ui/Button";
 import styles from "./index.module.css";
 
 function HomeSP() {
+	const navigate = useNavigate();
+	const setRef = useSocketRefStore((state) => state.setRef);
+
 	const handleClick = () => {
+		requestPermission();
+		const socketRef = new WebSocket(
+			`wss://${import.meta.env.VITE_HOST_NAME || "virtual-natsumatsuri-3jpy6th4da-an.a.run.app"}/ws?room_id=2`,
+		);
+		setRef({ current: socketRef });
 		const audio = new Audio("/sound/wadaiko.mp3");
 		audio
 			.play()
 			.then(() => {
-				setTimeout(() => {
-					window.location.href = "/shooter";
-				}, 500);
+				setTimeout(() => {}, 500);
 			})
 			.catch((error) => {
 				console.error("オーディオの音が出なかった", error);
-				window.location.href = "/shooter";
 			});
+		navigate("/shooter");
 	};
 
 	return (

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, useUUIDStore } from "../../store";
+import { type Schema, event_type, 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",
@@ -14,18 +19,38 @@ function Shooter() {
 	];
 
 	const [images, setImages] = useState(initialImages);
+	const uuid = useUUIDStore((state) => state.uuid);
 
 	const handleClick = () => {
 		const audio = new Audio("/sound/cork_sound.mp3");
 		audio
 			.play()
-			.then(() => {
-				setImages((prevImages) => prevImages.slice(1));
-			})
+			.then(() => {})
 			.catch((error) => {
 				console.error("オーディオの音が出なかった", error);
-				setImages((prevImages) => prevImages.slice(1));
 			});
+		const data: Schema = {
+			id: uuid,
+			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,
+			event_type: event_type.shooter,
+		};
+		socketRef?.current?.send(JSON.stringify(data));
+		setImages((prevImages) => prevImages.slice(1));
 	};
 
 	const handleKeyUp: KeyboardEventHandler<HTMLDivElement> = (event) => {
@@ -43,19 +68,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
@@ -76,7 +103,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];

src/type/schema.ts

@@ -5,6 +5,7 @@ export interface Schema {
 	acceleration: acceleration;
 	distance: distance;
 	message_type: message_type;
+	event_type: event_type;
 }
 
 interface angle {
@@ -28,3 +29,9 @@ export enum message_type {
 	pointer = "pointer",
 	action = "action",
 }
+
+export enum event_type {
+	shooter = "shooter",
+	ringToss = "ring_toss",
+	fireFlower = "fire_flower",
+}