fix: zstandの処理の追加

src/App.tsx

@@ -1,18 +1,15 @@
-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 setScore={setScore} />} />
-			<Route path="/result" element={<Result score={score} />} />
+			<Route path="/shooter" element={<Shooter />} />
+			<Route path="/result" element={<Result score={0} />} />
 			<Route path="/yatai" element={<Yatai />} />
 		</Routes>
 	);

src/pages/result/index.tsx

@@ -42,7 +42,7 @@ const Result = ({ score }: ResultProps) => {
 			</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%23ハックツ夏祭り`}
 					target="_blank"
 					rel="noopener noreferrer"
 				>

src/pages/shooter/index.tsx

@@ -7,22 +7,20 @@ 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";
 
-type ShooterProps = {
-	setScore: (score: number) => void;
-};
-
-const Shooter = ({ setScore }: ShooterProps) => {
+const Shooter = () => {
 	const [isOpen, setIsOpen] = useState(true);
-	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 score = useScoreStore((state) => state.score);
+	const setScore = useScoreStore((state) => state.setScore);
 
 	const initialImages = [
 		"/2D_material/cork.webp",
@@ -38,28 +36,22 @@ const Shooter = ({ setScore }: ShooterProps) => {
 			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) {
-				const newScore = score + 1;
-				setScoreState(newScore);
+				setScore((prevScore: number) => prevScore + 1);
 			}
 		});
-	}, [onMessage, uuid, score]);
+	}, [onMessage, uuid, setScore]);
 
 	useEffect(() => {
 		if (images.length === 0) {
-			setScore(score);
 			navigate("/result", { state: { score } });
 		}
-	}, [images, navigate, score, setScore]);
+	}, [images, navigate, score]);
 
 	const handleClick = () => {
 		const audio = new Audio("/sound/cork_sound.mp3");

src/store/useScoreStore.ts

@@ -0,0 +1,11 @@
+import create from "zustand";
+
+type Store = {
+	score: number;
+	setScore: (updater: (prevScore: number) => number) => void;
+};
+
+export const useScoreStore = create<Store>((set) => ({
+	score: 0,
+	setScore: (updater) => set((state) => ({ score: updater(state.score) })),
+}));