diff --git a/src/components/responsive/homePC/index.tsx b/src/components/responsive/homePC/index.tsx index 38bad05..d921698 100644 --- a/src/components/responsive/homePC/index.tsx +++ b/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 ( diff --git a/src/components/responsive/homeSP/index.tsx b/src/components/responsive/homeSP/index.tsx index 58fee29..92fdcbd 100644 --- a/src/components/responsive/homeSP/index.tsx +++ b/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 ( diff --git a/src/pages/shooter/index.tsx b/src/pages/shooter/index.tsx index 2697422..cfba797 100644 --- a/src/pages/shooter/index.tsx +++ b/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 = (event) => { @@ -43,19 +68,21 @@ function Shooter() {
- {images.map((src) => ( - コルクの残量を表示しています + {images.map((src, i) => ( + // biome-ignore lint/suspicious/noArrayIndexKey: + コルクの残量を表示しています ))}
); -} +}; type ModalContentProps = { setIsOpen: (isOpen: boolean) => void; }; const ModalContent: React.FC = ({ setIsOpen }) => { + const { reset } = useOrientation(); return (
= ({ setIsOpen }) => { variant="outlined" color="red" size="md" - onClick={() => setIsOpen(false)} + onClick={() => { + reset(); + setIsOpen(false); + }} > 置いたよ！ diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx index 707f13a..5dfdd9f 100644 --- a/src/pages/yatai/index.tsx +++ b/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]; diff --git a/src/type/schema.ts b/src/type/schema.ts index b2ca2f0..9c08724 100644 --- a/src/type/schema.ts +++ b/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", +} diff --git a/src/utils/parmission.ts b/src/utils/permission.ts similarity index 100% rename from src/utils/parmission.ts rename to src/utils/permission.ts