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