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

4 files changed, 33 insertions, 27 deletions

diff --git a/frontend/app/.client/audio/AudioController.ts b/frontend/app/.client/audio/AudioController.ts
index 6ed6180..296f685 100644
--- a/frontend/app/.client/audio/AudioController.ts
+++ b/frontend/app/.client/audio/AudioController.ts
@@ -51,6 +51,17 @@ export class AudioController {
 		});
 	}
 
+	async playDummySoundEffect(): Promise<void> {
+		const audio = this.audioElements["good_1"];
+		if (!audio) {
+			return;
+		}
+		audio.muted = true;
+		audio.currentTime = 0;
+		await audio.play();
+		audio.muted = false;
+	}
+
 	async playSoundEffect(soundEffect: SoundEffect): Promise<void> {
 		const audio = this.audioElements[soundEffect];
 		if (!audio) {
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>
 		);
 	}
diff --git a/frontend/app/states/watch.ts b/frontend/app/states/watch.ts
index 3b80f2f..ba3dd2a 100644
--- a/frontend/app/states/watch.ts
+++ b/frontend/app/states/watch.ts
@@ -1,4 +1,5 @@
 import { atom } from "jotai";
+import { AudioController } from "../.client/audio/AudioController";
 import type { components } from "../.server/api/schema";
 import type { SubmitResult } from "../types/SubmitResult";
 
@@ -245,3 +246,5 @@ export const handleWsSubmitResultMessageAtom = atom(
 		callback(player_id, newResult, score);
 	},
 );
+
+export const audioControllerAtom = atom<AudioController | null>(null);