feat: リリース版

claustra01 · Aug 18, 2024 · 4dbf63c · 4dbf63c
1 parent a047105
commit 4dbf63c
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 119 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,7 @@ const AppRoutes = () => {
 		<Routes>
 			<Route path="/" element={<Home />} />
 			<Route path="/shooter" element={<Shooter />} />
-			<Route path="/result" element={<Result score={0} />} />
+			<Route path="/result" element={<Result />} />
 			<Route path="/yatai" element={<Yatai />} />
 		</Routes>
 	);

diff --git a/src/components/Gallery/index.module.css b/src/components/Gallery/index.module.css
@@ -1,61 +1,62 @@
-h1{
-    font-size: 40px;
+h1 {
+  font-size: 40px;
 }
 
-.title{
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    padding: 16px;
-    margin: 0;
-}
-.nobori img{
-    position: absolute;
-    bottom: 0;
-    left: -240px;
-    height: 80vh;
-    aspect-ratio: 1 / 1;
-    z-index: -1;
+.title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  padding: 16px;
+  margin: 0;
+  cursor: pointer;
+}
+.nobori img {
+  position: absolute;
+  bottom: 0;
+  left: -240px;
+  height: 80vh;
+  aspect-ratio: 1 / 1;
+  z-index: -1;
 }
 
-.light img{
-    position: absolute;
-    top: 0;
-    left: 0px;
-    height: 80vh;
-    aspect-ratio: 1 / 1;
-    z-index: -1;
+.light img {
+  position: absolute;
+  top: 0;
+  left: 0px;
+  height: 80vh;
+  aspect-ratio: 1 / 1;
+  z-index: -1;
 }
 
 .container {
-    display: flex;
-    align-items: flex-end; 
-    position: absolute;
-    bottom: 16px; 
-    left: 4vw; 
-    z-index: 1;
+  display: flex;
+  align-items: flex-end;
+  position: absolute;
+  bottom: 16px;
+  left: 4vw;
+  z-index: 1;
 }
 
 .logo img {
-    height: 16vh;
-    aspect-ratio: 1 / 1;
-    margin-right: 2vw;
+  height: 16vh;
+  aspect-ratio: 1 / 1;
+  margin-right: 2vw;
 }
 
 .shop {
-    color: var(--white);
-    font-size: 4vw;
-    padding: 16px;
-    margin: 0;
+  color: var(--white);
+  font-size: 4vw;
+  padding: 16px;
+  margin: 0;
 }
 
-.light-right img{
-    position: absolute;
-    top: 0;
-    right: 0px;
-    height: 80vh;
-    aspect-ratio: 1 / 1;
-    z-index: -1;
-    transform: scale(-1, 1);
-}
+.light-right img {
+  position: absolute;
+  top: 0;
+  right: 0px;
+  height: 80vh;
+  aspect-ratio: 1 / 1;
+  z-index: -1;
+  transform: scale(-1, 1);
+}
diff --git a/src/components/Gallery/index.tsx b/src/components/Gallery/index.tsx
@@ -1,6 +1,20 @@
+import { useNavigate } from "react-router-dom";
+import { useRoomIdStore, useTargetStatusStore } from "../../store";
 import styles from "./index.module.css";
 
 function Gallery() {
+	const navigate = useNavigate();
+	const updateUUID = useRoomIdStore((state) => state.updateUUID);
+	const resetTargetStatus = useTargetStatusStore(
+		(state) => state.resetTargetStatus,
+	);
+
+	const handleClick = () => {
+		resetTargetStatus();
+		updateUUID();
+		navigate("/");
+	};
+
 	return (
 		<div>
 			{/* biome-ignore lint/a11y/useMediaCaption: 夏祭りの音を再生します。 */}
@@ -10,7 +24,15 @@ function Gallery() {
 				loop
 				aria-label="夏祭りの音"
 			/>
-			<h1 className={styles.title}>VIRTUAL_NATSUMATSURI</h1>
+			<h1
+				onClick={() => {
+					handleClick();
+				}}
+				onKeyDown={() => {}}
+				className={styles.title}
+			>
+				VIRTUAL_NATSUMATSURI
+			</h1>
 			<div className={styles.nobori}>
 				<img src="/2D_material/nobori.webp" alt="夏祭り_のぼり" />
 			</div>

diff --git a/src/hooks/useSocketSender.ts b/src/hooks/useSocketSender.ts
@@ -31,7 +31,6 @@ export const useSocketSender = () => {
 				message_type: mes_type,
 				event_type: event_type.shooter,
 			};
-			console.log(data);
 			socketRef?.current?.send(JSON.stringify(data));
 		},
 		[socketRef],

diff --git a/src/pages/result/index.module.css b/src/pages/result/index.module.css
@@ -1,36 +1,36 @@
 .result-text {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 40px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 40px;
+  z-index: 1;
 }
 
-.background-logo{
-    opacity: 0.6;
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    justify-content: center;
-    align-items: center;
-
+.background-logo {
+  opacity: 0.6;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  justify-content: center;
+  align-items: center;
 }
 
 .get-text {
-    position: absolute;
-    top: 60%;
-    left: 50%;
-    transform: translateX(-50%);
-    font-size: 40px;
-    white-space: nowrap;
+  position: absolute;
+  top: 60%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 40px;
+  white-space: nowrap;
 }
 
-.share-btn{
-    position: absolute;
-    top: 80%;
-    left: 50%;
-    transform: translateX(-50%);
-    white-space: nowrap;
+.share-btn {
+  position: absolute;
+  top: 80%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
 }
 
 .replay-text {
@@ -39,30 +39,29 @@
   left: 50%;
   transform: translateX(-50%);
   white-space: nowrap;
-  font-family: 'Yuji Syuku', serif, sans-serif;
+  font-family: "Yuji Syuku", serif, sans-serif;
   line-height: 1.5;
   font-weight: 400;
   font-style: normal;
 }
 
 @keyframes rotate {
-    from {
-        transform: translate(-50%, -50%) rotate(0deg);
-    }
-    to {
-        transform: translate(-50%, -50%) rotate(360deg);
-    }
+  from {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
 }
 
 .get-image-container {
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1;
-    animation: rotate 16s linear infinite; 
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+  animation: rotate 16s linear infinite;
 }
-
diff --git a/src/pages/result/index.tsx b/src/pages/result/index.tsx
@@ -1,12 +1,10 @@
 import GetImage from "../../components/GetImage";
 import { DefaultButton } from "../../components/ui/Button";
+import { useScoreStore } from "../../store/useScoreStore";
 import styles from "./index.module.css";
 
-type ResultProps = {
-	score: number;
-};
-
-const Result = ({ score }: ResultProps) => {
+const Result = () => {
+	const score = useScoreStore((state) => state.score);
 	const image =
 		score >= 0 && score <= 3
 			? `/drink/bottle${score}.webp`