feat(frontend): partially implement sound effect

2 files changed, 47 insertions, 5 deletions

diff --git a/frontend/app/components/GolfWatchApp.client.tsx b/frontend/app/components/GolfWatchApp.client.tsx
index 22f87fa..d09a4ae 100644
--- a/frontend/app/components/GolfWatchApp.client.tsx
+++ b/frontend/app/components/GolfWatchApp.client.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { AudioController } from "../.client/audio/AudioController";
 import type { components } from "../.server/api/schema";
 import useWebSocket, { ReadyState } from "../hooks/useWebSocket";
 import type { PlayerInfo } from "../models/PlayerInfo";
@@ -14,13 +15,17 @@ type Game = components["schemas"]["Game"];
 
 type GameState = "connecting" | "waiting" | "starting" | "gaming" | "finished";
 
+export type Props = {
+	game: Game;
+	sockToken: string;
+	audioController: AudioController;
+};
+
 export default function GolfWatchApp({
 	game,
 	sockToken,
-}: {
-	game: Game;
-	sockToken: string;
-}) {
+	audioController,
+}: Props) {
 	const socketUrl =
 		process.env.NODE_ENV === "development"
 			? `ws://localhost:8002/iosdc-japan/2024/code-battle/sock/golf/${game.game_id}/watch?token=${sockToken}`
@@ -53,6 +58,7 @@ export default function GolfWatchApp({
 						if (nowSec >= finishedAt) {
 							clearInterval(timer);
 							setGameState("finished");
+							audioController.playSoundEffectFinish();
 						} else {
 							setGameState("gaming");
 						}
@@ -65,7 +71,7 @@ export default function GolfWatchApp({
 				clearInterval(timer);
 			};
 		}
-	}, [gameState, startedAt, game.duration_seconds]);
+	}, [gameState, startedAt, game.duration_seconds, audioController]);
 
 	const playerA = game.players[0];
 	const playerB = game.players[1];
diff --git a/frontend/app/components/GolfWatchAppWithAudioPlayRequest.client.tsx b/frontend/app/components/GolfWatchAppWithAudioPlayRequest.client.tsx
new file mode 100644
index 0000000..e299f4b
--- /dev/null
+++ b/frontend/app/components/GolfWatchAppWithAudioPlayRequest.client.tsx
@@ -0,0 +1,36 @@
+import { useState } from "react";
+import { AudioController } from "../.client/audio/AudioController";
+import GolfWatchApp, { type Props } from "./GolfWatchApp.client";
+
+export default function GolfWatchAppWithAudioPlayRequest({
+	game,
+	sockToken,
+}: Omit<Props, "audioController">) {
+	const [audioController, setAudioController] =
+		useState<AudioController | null>(null);
+	const audioPlayPermitted = audioController !== null;
+
+	if (audioPlayPermitted) {
+		return (
+			<GolfWatchApp
+				game={game}
+				sockToken={sockToken}
+				audioController={audioController}
+			/>
+		);
+	} else {
+		return (
+			<div>
+				<button
+					onClick={async () => {
+						const audioController = new AudioController();
+						await audioController.loadAll();
+						setAudioController(audioController);
+					}}
+				>
+					Enable Audio Play
+				</button>
+			</div>
+		);
+	}
+}