From dfd33e58a5e6f830d60e978afad7348f7a16068d Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Thu, 22 Aug 2024 13:27:44 +0900
Subject: feat(frontend): add minimal style to watch with audio play request

---
 frontend/app/components/GolfWatchApp.client.tsx    |  8 +----
 .../GolfWatchAppWithAudioPlayRequest.client.tsx    | 38 ++++++++++------------
 2 files changed, 19 insertions(+), 27 deletions(-)

(limited to 'frontend/app/components')

diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx
index 7ea2ced..c8b1d53 100644
--- a/frontend/app/components/GolfWatchApp.client.tsx
+++ b/frontend/app/components/GolfWatchApp.client.tsx
@@ -1,7 +1,6 @@
 import { useAtomValue, useSetAtom } from "jotai";
 import { useCallback, useEffect } from "react";
 import { useTimer } from "react-use-precision-timer";
-import { AudioController } from "../.client/audio/AudioController";
 import type { components } from "../.server/api/schema";
 import useWebSocket, { ReadyState } from "../hooks/useWebSocket";
 import {
@@ -29,14 +28,9 @@ type Game = components["schemas"]["Game"];
 export type Props = {
 	game: Game;
 	sockToken: string;
-	audioController: AudioController;
 };
 
-export default function GolfWatchApp({
-	game,
-	sockToken,
-	audioController,
-}: Props) {
+export default function GolfWatchApp({ game, sockToken }: Props) {
 	const socketUrl =
 		process.env.NODE_ENV === "development"
 			? `ws://localhost:8002/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/watch?token=${sockToken}`
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>
 		);
 	}
-- 
cgit v1.2.3-70-g09d2