claustra01 · K-Kizuku · Aug 19, 2024 · Aug 17, 2024 · Aug 17, 2024 · Aug 17, 2024
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
 # ばーちゃる夏祭り frontend
-https://virtual-natsumatsuri.web.app/
+https://virtual-natsumatsuri.web.app/
+
+## topazLink
+https://topaz.dev/projects/4505516cee6f487ac360
diff --git a/index.html b/index.html
@@ -1,11 +1,14 @@
-<!doctype html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="ja">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/webp" href="/logo.webp" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Yuji+Syuku&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Yuji+Syuku&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>VIRTUAL_NATSUMATSURI</title>
   </head>

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/components/Yatai/TargetOverlay.module.css b/src/components/Yatai/TargetOverlay.module.css
@@ -1,12 +1,13 @@
 .target {
-    position: absolute;
-    z-index: 1;
-    width: 100px;
-    height: 100px;
-    transform: translate(calc(-50%+50px), calc(-50%+50px));
+  position: absolute;
+  z-index: 1;
+  width: 100px;
+  height: 100px;
+  transform: translate(calc(-50%+50px), calc(-50%+50px));
+  transition: all 0.1s linear;
 }
 
 .image {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
diff --git a/src/components/Yatai/TargetOverlay.tsx b/src/components/Yatai/TargetOverlay.tsx
@@ -1,40 +1,29 @@
 import { useEffect, useState } from "react";
 import { useSocketReceiver } from "../../hooks/useSocketReceiver";
-import {
-	type ActionSchema,
-	MessageType,
-	type Target,
-} from "../../type/shooting";
+import type { ActionSchema, PointerSchema, Target } from "../../type/shooting";
+import { MessageType } from "../../type/shooting";
 import styles from "./TargetOverlay.module.css";
 
 export const TargetOverlay = () => {
 	const { onMessage } = useSocketReceiver();
 
 	useEffect(() => {
 		onMessage((data) => {
-			// ここも本来はPointerSchemaになる
-			if (data.message_type === MessageType.Action) {
-				shotTarget(data);
+			if (
+				data.message_type === MessageType.Action ||
+				data.message_type === MessageType.Pointer
+			) {
+				aimTarget(data);
 			}
 		});
 	}, [onMessage]);
 
 	// TODO: これらは一人用,いつかマルチプレイヤー対応する
 	const [aim, setAim] = useState<Target | undefined>(undefined);
-	// TODO: エイム照準の実装
-	// const aimTarget = (data: PointerSchema) => {
-	// 	const x = window.innerWidth * data.target.x + window.innerWidth / 2;
-	// 	const y = window.innerHeight * data.target.y + window.innerHeight / 2;
-	// 	setAim({ x, y });
-	// };
-
-	// const [target, setTarget] = useState<Target | undefined>(undefined);
-	const shotTarget = (data: ActionSchema) => {
+	const aimTarget = (data: PointerSchema | ActionSchema) => {
 		const x = window.innerWidth / 2 + data.target.x * 1200;
 		const y = window.innerHeight / 2 + data.target.y * 1200;
-		// TODO: エイム実装ができたらここのsetAimは削除する
 		setAim({ x, y });
-		// setTarget({ x, y });
 	};
 
 	return (

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`