diff --git a/public/drink/bottle0.webp b/public/drink/bottle0.webp
index a9949b1..218f688 100644
Binary files a/public/drink/bottle0.webp and b/public/drink/bottle0.webp differ
diff --git a/public/drink/bottle2.webp b/public/drink/bottle2.webp
index 218f688..9cfdafa 100644
Binary files a/public/drink/bottle2.webp and b/public/drink/bottle2.webp differ
diff --git a/public/drink/bottle3.webp b/public/drink/bottle3.webp
index 9cfdafa..a9949b1 100644
Binary files a/public/drink/bottle3.webp and b/public/drink/bottle3.webp differ
diff --git a/src/App.tsx b/src/App.tsx
index d2b23a8..40406a9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,14 +6,12 @@ import Yatai from "./pages/yatai";
const AppRoutes = () => {
return (
- <>
-
- } />
- } />
- } />
- } />
-
- >
+
+ } />
+ } />
+ } />
+ } />
+
);
};
diff --git a/src/pages/result/index.tsx b/src/pages/result/index.tsx
index aa90a4e..7c04145 100644
--- a/src/pages/result/index.tsx
+++ b/src/pages/result/index.tsx
@@ -2,13 +2,15 @@ import GetImage from "../../components/GetImage";
import { DefaultButton } from "../../components/ui/Button";
import styles from "./index.module.css";
-function Result() {
- const images = [
- "/drink/bottle0.webp",
- "/drink/bottle1.webp",
- "/drink/bottle2.webp",
- "/drink/bottle3.webp",
- ];
+type ResultProps = {
+ score: number;
+};
+
+const Result = ({ score }: ResultProps) => {
+ const image =
+ score >= 0 && score <= 3
+ ? `/drink/bottle${score}.webp`
+ : "/drink/bottle0.webp";
return (
@@ -17,8 +19,8 @@ function Result() {
@@ -32,11 +34,11 @@ function Result() {
/>
-
Bottle Get!
+
{score}本倒した!
);
-}
+};
export default Result;
diff --git a/src/pages/shooter/index.tsx b/src/pages/shooter/index.tsx
index e858016..e19d598 100644
--- a/src/pages/shooter/index.tsx
+++ b/src/pages/shooter/index.tsx
@@ -1,4 +1,5 @@
import { type KeyboardEventHandler, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
import { DefaultButton } from "../../components/ui/Button";
import { Modal } from "../../components/ui/Modal";
import { ShooterButton } from "../../components/ui/ShooterButton";
@@ -6,25 +7,27 @@ import { useOrientation } from "../../hooks/useOrientation";
import { useSocketReceiver } from "../../hooks/useSocketReceiver";
import { useSocketSender } from "../../hooks/useSocketSender";
import { useUUIDStore } from "../../store";
+import { useScoreStore } from "../../store/useScoreStore";
import { message_type } from "../../type/schema";
import { MessageType } from "../../type/shooting";
import style from "./index.module.css";
const Shooter = () => {
const [isOpen, setIsOpen] = useState(true);
- const [score, setScore] = useState(0);
const { orientationDiff } = useOrientation();
const { sendData } = useSocketSender();
const { onMessage } = useSocketReceiver();
+ const uuid = useUUIDStore((state) => state.uuid);
+ const navigate = useNavigate();
+ const score = useScoreStore((state) => state.score);
+ const addOneScore = useScoreStore((state) => state.addOneScore);
const initialImages = [
"/2D_material/cork.webp",
"/2D_material/cork.webp",
"/2D_material/cork.webp",
];
-
const [images, setImages] = useState(initialImages);
- const uuid = useUUIDStore((state) => state.uuid);
useEffect(() => {
let intervalId: number | null = null;
@@ -33,30 +36,28 @@ const Shooter = () => {
sendData(message_type.status, uuid, orientationDiff);
}, 100);
- return () => {
- if (intervalId !== null) {
- clearInterval(intervalId);
- }
- };
+ return () => clearInterval(intervalId);
}, [uuid, orientationDiff, sendData]);
useEffect(() => {
onMessage((data) => {
if (data.message_type === MessageType.Hit && data.id === uuid) {
- setScore((prevScore) => prevScore + 1);
- console.log(score);
+ addOneScore();
}
});
- }, [onMessage, uuid, score]);
+ }, [onMessage, uuid, addOneScore]);
+
+ useEffect(() => {
+ if (images.length === 0) {
+ navigate("/result", { state: { score } });
+ }
+ }, [images, navigate, score]);
const handleClick = () => {
const audio = new Audio("/sound/cork_sound.mp3");
- audio
- .play()
- .then(() => {})
- .catch((error) => {
- console.error("オーディオの音が出なかった", error);
- });
+ audio.play().catch((error) => {
+ console.error("オーディオの音が出なかった", error);
+ });
sendData(message_type.action, uuid, orientationDiff);
setImages((prevImages) => prevImages.slice(1));
};
@@ -76,10 +77,14 @@ const Shooter = () => {
- {images.map((src, i) => (
- // biome-ignore lint/suspicious/noArrayIndexKey:
-
- ))}
+ {images.length > 0 ? (
+ images.map((src, i) => (
+ // biome-ignore lint/suspicious/noArrayIndexKey:
+
+ ))
+ ) : (
+ コルクがなくなりました!
+ )}
);
diff --git a/src/store/useScoreStore.ts b/src/store/useScoreStore.ts
new file mode 100644
index 0000000..c493a24
--- /dev/null
+++ b/src/store/useScoreStore.ts
@@ -0,0 +1,16 @@
+import create from "zustand";
+
+type Store = {
+ score: number;
+};
+
+type Action = {
+ setScore: (score: number) => void;
+ addOneScore: () => void;
+};
+
+export const useScoreStore = create((set) => ({
+ score: 0,
+ setScore: (score) => set(() => ({ score: score })),
+ addOneScore: () => set((state) => ({ score: state.score + 1 })),
+}));