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}本倒した!

@@ -50,6 +52,6 @@ function Result() {
); -} +}; 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 })), +}));