Merge pull request #46 from claustra01/result_view

Add: shooter_scoreを元にresultへの遷移

src/App.tsx

@@ -6,14 +6,12 @@ import Yatai from "./pages/yatai";
 
 const AppRoutes = () => {
 	return (
-		<>
-			<Routes>
-				<Route path="/" element={<Home />} />
-				<Route path="/shooter" element={<Shooter />} />
-				<Route path="/yatai" element={<Yatai />} />
-				<Route path="/result" element={<Result />} />
-			</Routes>
-		</>
+		<Routes>
+			<Route path="/" element={<Home />} />
+			<Route path="/shooter" element={<Shooter />} />
+			<Route path="/result" element={<Result score={0} />} />
+			<Route path="/yatai" element={<Yatai />} />
+		</Routes>
 	);
 };
 

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 (
 		<div>
@@ -17,8 +19,8 @@ function Result() {
 			</div>
 			<div className={styles["get-image-container"]}>
 				<GetImage
-					images={images}
-					alt="ランダムに表示されるボトル画像"
+					images={[image]}
+					alt={`スコア ${score} に対応するボトル画像`}
 					width={160}
 					height={160}
 				/>
@@ -32,11 +34,11 @@ function Result() {
 				/>
 			</div>
 			<div className={styles["get-text"]}>
-				<p>Bottle Get!</p>
+				<p>{score}本倒した！</p>
 			</div>
 			<div className={styles["share-btn"]}>
 				<a
-					href="https://twitter.com/intent/tweet?text=Webの射的で遊んだよ.%20%23virtualnatsumatsuri%20%23炎上開発%20%23鹿児島ハッカソン"
+					href={`https://twitter.com/intent/tweet?text=Webの射的で遊んだよ。${score}本倒した！%20%23ハックツ夏祭り`}
 					target="_blank"
 					rel="noopener noreferrer"
 				>
@@ -50,6 +52,6 @@ function Result() {
 			</div>
 		</div>
 	);
-}
+};
 
 export default Result;

src/pages/shooter/index.tsx

@@ -1,30 +1,33 @@
 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";
 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<number>(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 = () => {
 				<ShooterButton onClick={handleClick} onKeyUp={handleKeyUp} />
 			</div>
 			<div className={style.cork}>
-				{images.map((src, i) => (
-					// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-					<img key={i} src={src} alt="コルクの残量を表示しています" />
-				))}
+				{images.length > 0 ? (
+					images.map((src, i) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+						<img key={i} src={src} alt="コルクの残量を表示しています" />
+					))
+				) : (
+					<p>コルクがなくなりました!</p>
+				)}
 			</div>
 		</div>
 	);

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<Store & Action>((set) => ({
+	score: 0,
+	setScore: (score) => set(() => ({ score: score })),
+	addOneScore: () => set((state) => ({ score: state.score + 1 })),
+}));