Add: スコアを表示して、resultに遷移するまでの機能

src/App.tsx

@@ -6,7 +6,7 @@ import Shooter from "./pages/shooter";
 import Yatai from "./pages/yatai";
 
 const AppRoutes = () => {
-	const [score, setScore] = useState<number>(0);
+	const [score, setScore] = useState(0);
 
 	return (
 		<Routes>

src/pages/result/index.tsx

@@ -14,7 +14,7 @@ const Result = ({ score }: ResultProps) => {
 		"/drink/bottle3.webp",
 	];
 
-	const image = images[score];
+	const image = images[score] || images[0];
 
 	return (
 		<div>
@@ -38,11 +38,11 @@ const Result = ({ score }: ResultProps) => {
 				/>
 			</div>
 			<div className={styles["get-text"]}>
-				<p>${score}本倒した！</p>
+				<p>{score}本倒した！</p>
 			</div>
 			<div className={styles["share-btn"]}>
 				<a
-					href="https://twitter.com/intent/tweet?text=Webの射的で遊んだよ.${score}本倒した！%20%23virtualnatsumatsuri"
+					href={`https://twitter.com/intent/tweet?text=Webの射的で遊んだよ。${score}本倒した！%20%23virtualnatsumatsuri`}
 					target="_blank"
 					rel="noopener noreferrer"
 				>

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";
@@ -21,6 +22,7 @@ const Shooter = ({ setScore }: ShooterProps) => {
 	const { sendData } = useSocketSender();
 	const { onMessage } = useSocketReceiver();
 	const uuid = useUUIDStore((state) => state.uuid);
+	const navigate = useNavigate();
 
 	const initialImages = [
 		"/2D_material/cork.webp",
@@ -46,12 +48,19 @@ const Shooter = ({ setScore }: ShooterProps) => {
 	useEffect(() => {
 		onMessage((data) => {
 			if (data.message_type === MessageType.Hit && data.id === uuid) {
-				setLocalScore((prevScore) => prevScore + 1);
-				setScore(score);
+				const newScore = score + 1;
+				setLocalScore(newScore);
+				setScore(newScore);
 			}
 		});
 	}, [onMessage, uuid, score, setScore]);
 
+	useEffect(() => {
+		if (images.length === 0) {
+			navigate("/result", { state: { score } });
+		}
+	}, [images, navigate, score]);
+
 	const handleClick = () => {
 		const audio = new Audio("/sound/cork_sound.mp3");
 		audio.play().catch((error) => {
@@ -77,8 +86,9 @@ const Shooter = ({ setScore }: ShooterProps) => {
 			</div>
 			<div className={style.cork}>
 				{images.length > 0 ? (
-					images.map((src) => (
-						<img key={src} src={src} alt="コルクの残量を表示しています" />
+					images.map((src, i) => (
+						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+						<img key={i} src={src} alt="コルクの残量を表示しています" />
 					))
 				) : (
 					<p>コルクがなくなりました!</p>