feat(frontend): add minimal style to watch with audio play request

1 files changed, 18 insertions, 20 deletions

diff --git a/frontend/app/components/GolfWatchAppWithAudioPlayRequest.client.tsx b/frontend/app/components/GolfWatchAppWithAudioPlayRequest.client.tsx
index e299f4b..ce5a59c 100644
--- a/frontend/app/components/GolfWatchAppWithAudioPlayRequest.client.tsx
+++ b/frontend/app/components/GolfWatchAppWithAudioPlayRequest.client.tsx
@@ -1,35 +1,33 @@
-import { useState } from "react";
+import { useAtom } from "jotai";
 import { AudioController } from "../.client/audio/AudioController";
+import { audioControllerAtom } from "../states/watch";
 import GolfWatchApp, { type Props } from "./GolfWatchApp.client";
+import SubmitButton from "./SubmitButton";
 
 export default function GolfWatchAppWithAudioPlayRequest({
 	game,
 	sockToken,
 }: Omit<Props, "audioController">) {
-	const [audioController, setAudioController] =
-		useState<AudioController | null>(null);
+	const [audioController, setAudioController] = useAtom(audioControllerAtom);
 	const audioPlayPermitted = audioController !== null;
 
 	if (audioPlayPermitted) {
-		return (
-			<GolfWatchApp
-				game={game}
-				sockToken={sockToken}
-				audioController={audioController}
-			/>
-		);
+		return <GolfWatchApp game={game} sockToken={sockToken} />;
 	} else {
 		return (
-			<div>
-				<button
-					onClick={async () => {
-						const audioController = new AudioController();
-						await audioController.loadAll();
-						setAudioController(audioController);
-					}}
-				>
-					Enable Audio Play
-				</button>
+			<div className="min-h-screen bg-gray-100 flex items-center justify-center">
+				<div className="text-center">
+					<SubmitButton
+						onClick={async () => {
+							const audioController = new AudioController();
+							await audioController.loadAll();
+							await audioController.playDummySoundEffect();
+							setAudioController(audioController);
+						}}
+					>
+						開始
+					</SubmitButton>
+				</div>
 			</div>
 		);
 	}