Add: shooter_scoreを元にresultへの遷移

claustra01 · Aug 17, 2024 · 8ebd3a1 · 8ebd3a1
1 parent f168a75
commit 8ebd3a1
Show file tree

Hide file tree

Showing 3 changed files with 162 additions and 129 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,18 +3,25 @@ import Home from "./pages/home";
 import Result from "./pages/result";
 import Shooter from "./pages/shooter";
 import Yatai from "./pages/yatai";
+import { useState } from "react";
 
 const AppRoutes = () => {
-	return (
-		<>
-			<Routes>
-				<Route path="/" element={<Home />} />
-				<Route path="/shooter" element={<Shooter />} />
-				<Route path="/yatai" element={<Yatai />} />
-				<Route path="/result" element={<Result />} />
-			</Routes>
-		</>
-	);
+  const [score, setScore] = useState<number>(0);
+
+  return (
+    <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>
+  );
 };
 
 export default AppRoutes;
diff --git a/src/pages/result/index.tsx b/src/pages/result/index.tsx
@@ -1,55 +1,62 @@
-import GetImage from "../../components/GetImage";
 import { DefaultButton } from "../../components/ui/Button";
+import GetImage from "../../components/GetImage";
 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 images = [
+    "/drink/bottle0.webp",
+    "/drink/bottle1.webp",
+    "/drink/bottle2.webp",
+    "/drink/bottle3.webp",
+  ];
+
+
+  const image = images[score] ; 
 
-	return (
-		<div>
-			<div className={styles["result-text"]}>
-				<p>結果発表!</p>
-			</div>
-			<div className={styles["get-image-container"]}>
-				<GetImage
-					images={images}
-					alt="ランダムに表示されるボトル画像"
-					width={160}
-					height={160}
-				/>
-			</div>
-			<div className={styles["background-logo"]}>
-				<img
-					src="/logo.webp"
-					alt="背景にばーちゃるなつまつりのロゴ"
-					width="350"
-					height="350"
-				/>
-			</div>
-			<div className={styles["get-text"]}>
-				<p>Bottle Get!</p>
-			</div>
-			<div className={styles["share-btn"]}>
-				<a
-					href="https://twitter.com/intent/tweet?text=Webの射的で遊んだよ.%20%23virtualnatsumatsuri%20%23炎上開発%20%23鹿児島ハッカソン"
-					target="_blank"
-					rel="noopener noreferrer"
-				>
-					<DefaultButton variant="contained" color="black" size="md">
-						Xで共有する
-					</DefaultButton>
-				</a>
-			</div>
-			<div className={styles["replay-text"]}>
-				<p>また遊びにきてや〜</p>
-			</div>
-		</div>
-	);
-}
+  return (
+    <div>
+      <div className={styles["result-text"]}>
+        <p>結果発表!</p>
+      </div>
+      <div className={styles["get-image-container"]}>
+        <GetImage
+          images={[image]} 
+          alt={`スコア ${score} に対応するボトル画像`}
+          width={160}
+          height={160}
+        />
+      </div>
+      <div className={styles["background-logo"]}>
+        <img
+          src="/logo.webp"
+          alt="背景にばーちゃるなつまつりのロゴ"
+          width="350"
+          height="350"
+        />
+      </div>
+      <div className={styles["get-text"]}>
+        <p>${score}本倒した！</p>
+      </div>
+      <div className={styles["share-btn"]}>
+        <a
+          href="https://twitter.com/intent/tweet?text=Webの射的で遊んだよ.${score}本倒した！%20%23virtualnatsumatsuri"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <DefaultButton variant="contained" color="black" size="md">
+            Xで共有する
+          </DefaultButton>
+        </a>
+      </div>
+      <div className={styles["replay-text"]}>
+        <p>また遊びにきてや〜</p>
+      </div>
+    </div>
+  );
+};
 
 export default Result;
diff --git a/src/pages/shooter/index.tsx b/src/pages/shooter/index.tsx
@@ -1,88 +1,107 @@
-import { type KeyboardEventHandler, useState } from "react";
+import { type KeyboardEventHandler, useEffect, useState } from "react";
 import { DefaultButton } from "../../components/ui/Button";
 import { Modal } from "../../components/ui/Modal";
 import { ShooterButton } from "../../components/ui/ShooterButton";
 import style from "./index.module.css";
 
-function Shooter() {
-	const [isOpen, setIsOpen] = useState(true);
+type ShooterProps = {
+  setScore: (score: number) => void;
+};
+
+const Shooter = ({ setScore }: ShooterProps) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [score, setLocalScore] = useState<number>(0);
+
+  const initialImages = [
+    "/2D_material/cork.webp",
+    "/2D_material/cork.webp",
+    "/2D_material/cork.webp",
+  ];
+  const [images, setImages] = useState(initialImages);
 
-	const initialImages = [
-		"/2D_material/cork.webp",
-		"/2D_material/cork.webp",
-		"/2D_material/cork.webp",
-	];
+  // Update score only when it changes
+  useEffect(() => {
+    setScore(score);
+  }, [score, setScore]);
 
-	const [images, setImages] = useState(initialImages);
+  const handleClick = () => {
+    const audio = new Audio("/sound/cork_sound.mp3");
+    audio.play().catch((error) => {
+      console.error("オーディオの音が出なかった", error);
+    });
 
-	const handleClick = () => {
-		const audio = new Audio("/sound/cork_sound.mp3");
-		audio
-			.play()
-			.then(() => {
-				setImages((prevImages) => prevImages.slice(1));
-			})
-			.catch((error) => {
-				console.error("オーディオの音が出なかった", error);
-				setImages((prevImages) => prevImages.slice(1));
-			});
-	};
+    setImages((prevImages) => {
+      if (prevImages.length > 0) {
+        return prevImages.slice(1);
+      }
+      return prevImages;
+    });
 
-	const handleKeyUp: KeyboardEventHandler<HTMLDivElement> = (event) => {
-		if (event.key === "Enter" || event.key === " ") {
-			handleClick();
-		}
-	};
+    setLocalScore((prevScore) => {
+      const newScore = prevScore + 1; // Increment score or adjust as needed
+      return newScore;
+    });
+  };
 
-	return (
-		<div>
-			<Modal open={isOpen} onClose={() => setIsOpen(false)}>
-				<ModalContent setIsOpen={setIsOpen} />
-			</Modal>
-			<div className={style.trigger}>
-				<ShooterButton onClick={handleClick} onKeyUp={handleKeyUp} />
-			</div>
-			<div className={style.cork}>
-				{images.map((src) => (
-					<img key={src} src={src} alt="コルクの残量を表示しています" />
-				))}
-			</div>
-		</div>
-	);
-}
+  const handleKeyUp: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      handleClick();
+    }
+  };
+
+  return (
+    <div>
+      <Modal open={isOpen} onClose={() => setIsOpen(false)}>
+        <ModalContent setIsOpen={setIsOpen} />
+      </Modal>
+      <div className={style.trigger}>
+        <ShooterButton onClick={handleClick} onKeyUp={handleKeyUp} />
+      </div>
+      <div className={style.cork}>
+        {images.length > 0 ? (
+          images.map((src) => (
+            <img key={src} src={src} alt="コルクの残量を表示しています" />
+          ))
+        ) : (
+          <p>コルクがなくなりました!</p>
+        )}
+      </div>
+    </div>
+  );
+};
 
 type ModalContentProps = {
-	setIsOpen: (isOpen: boolean) => void;
+  setIsOpen: (isOpen: boolean) => void;
 };
 
 const ModalContent: React.FC<ModalContentProps> = ({ setIsOpen }) => {
-	return (
-		<div className={style["modal-wrapper"]}>
-			<img
-				src="/2D_material/modal.webp"
-				alt="スマホを画面に向かって垂直におく図"
-				width="100"
-				height="100"
-			/>
-			<div className={style["modal-row"]}>
-				<p className={style["modal-description"]}>
-					スマホを画面に向かって
-					<br />
-					垂直に机の上に置いてね
-				</p>
-			</div>
-			<div className={style["modal-selection-wrapper"]}>
-				<DefaultButton
-					variant="outlined"
-					color="red"
-					size="md"
-					onClick={() => setIsOpen(false)}
-				>
-					置いたよ！
-				</DefaultButton>
-			</div>
-		</div>
-	);
+  return (
+    <div className={style["modal-wrapper"]}>
+      <img
+        src="/2D_material/modal.webp"
+        alt="スマホを画面に向かって垂直におく図"
+        width="100"
+        height="100"
+      />
+      <div className={style["modal-row"]}>
+        <p className={style["modal-description"]}>
+          スマホを画面に向かって
+          <br />
+          垂直に机の上に置いてね
+        </p>
+      </div>
+      <div className={style["modal-selection-wrapper"]}>
+        <DefaultButton
+          variant="outlined"
+          color="red"
+          size="md"
+          onClick={() => setIsOpen(false)}
+        >
+          置いたよ！
+        </DefaultButton>
+      </div>
+    </div>
+  );
 };
 
 export default Shooter;