Add: shooter_scoreを元にresultへの遷移

src/App.tsx

@@ -1,19 +1,20 @@
+import { useState } from "react";
 import { Route, Routes } from "react-router-dom";
 import Home from "./pages/home";
 import Result from "./pages/result";
 import Shooter from "./pages/shooter";
 import Yatai from "./pages/yatai";
 
 const AppRoutes = () => {
+	const [score, setScore] = useState(0);
+
 	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 setScore={setScore} />} />
+			<Route path="/result" element={<Result score={score} />} />
+			<Route path="/yatai" element={<Yatai />} />
+		</Routes>
 	);
 };
 

src/pages/result/index.tsx

@@ -2,23 +2,29 @@ import GetImage from "../../components/GetImage";
 import { DefaultButton } from "../../components/ui/Button";
 import styles from "./index.module.css";
 
-function Result() {
+type ResultProps = {
+	score: number;
+};
+
+const Result = ({ score }: ResultProps) => {
 	const images = [
 		"/drink/bottle0.webp",
 		"/drink/bottle1.webp",
 		"/drink/bottle2.webp",
 		"/drink/bottle3.webp",
 	];
 
+	const image = images[score] || images[0];
+
 	return (
 		<div>
 			<div className={styles["result-text"]}>
 				<p>結果発表!</p>
 			</div>
 			<div className={styles["get-image-container"]}>
 				<GetImage
-					images={images}
-					alt="ランダムに表示されるボトル画像"
+					images={[image]}
+					alt={`スコア ${score} に対応するボトル画像`}
 					width={160}
 					height={160}
 				/>
@@ -32,11 +38,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%23virtualnatsumatsuri`}
 					target="_blank"
 					rel="noopener noreferrer"
 				>
@@ -50,6 +56,6 @@ function Result() {
 			</div>
 		</div>
 	);
-}
+};
 
 export default Result;

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";
@@ -10,21 +11,25 @@ import { message_type } from "../../type/schema";
 import { MessageType } from "../../type/shooting";
 import style from "./index.module.css";
 
-const Shooter = () => {
+type ShooterProps = {
+	setScore: (score: number) => void;
+};
+
+const Shooter = ({ setScore }: ShooterProps) => {
 	const [isOpen, setIsOpen] = useState(true);
-	const [score, setScore] = useState<number>(0);
+	const [score, setScoreState] = useState<number>(0);
 	const { orientationDiff } = useOrientation();
 	const { sendData } = useSocketSender();
 	const { onMessage } = useSocketReceiver();
+	const uuid = useUUIDStore((state) => state.uuid);
+	const navigate = useNavigate();
 
 	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;
@@ -43,20 +48,24 @@ const Shooter = () => {
 	useEffect(() => {
 		onMessage((data) => {
 			if (data.message_type === MessageType.Hit && data.id === uuid) {
-				setScore((prevScore) => prevScore + 1);
-				console.log(score);
+				const newScore = score + 1;
+				setScoreState(newScore);
 			}
 		});
 	}, [onMessage, uuid, score]);
 
+	useEffect(() => {
+		if (images.length === 0) {
+			setScore(score);
+			navigate("/result", { state: { score } });
+		}
+	}, [images, navigate, score, setScore]);
+
 	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 +85,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>
 	);