diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 0ca19b9..4e4bc5e 100644 --- a/src/pages/home/index.tsx +++ b/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/permission"; 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); @@ -36,6 +39,12 @@ function Home() { console.error("オーディオの音が出なかった", error); window.location.href = isPcScreen ? "/yatai" : "/shooter"; }); + requestPermission(); + const socketRef = new WebSocket( + `wss://${import.meta.env.VITE_HOST_NAME}/ws`, + ); + setRef({ current: socketRef }); + window.location.href = isPcScreen ? "/yatai" : "/shooter"; }; return ( @@ -66,7 +75,9 @@ function Home() { />
射的へ向かう diff --git a/src/pages/shooter/index.tsx b/src/pages/shooter/index.tsx index 2697422..6e482e7 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, 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,37 @@ 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, + }; + socketRef?.current?.send(JSON.stringify(data)); + setImages((prevImages) => prevImages.slice(1)); }; const handleKeyUp: KeyboardEventHandler = (event) => { @@ -43,19 +67,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/utils/parmission.ts b/src/utils/permission.ts similarity index 100% rename from src/utils/parmission.ts rename to src/utils/permission.ts