add simple sounds handling

src/App.tsx

@@ -46,6 +46,7 @@ export default function App() {
           lobbyState={scene.lobbyState}
           gameChannel={gameChannel}
           overlayRef={overlayRef}
+          muteSounds={settings.muteSounds}
         />
     }
   };

src/Components/Header.tsx

@@ -46,6 +46,10 @@ function Header({ scene, settings, connection }: HeaderProps) {
     }
   };
 
+  const handleToggleSounds = () => {
+    settings.setMuteSounds(value => !value);
+  };
+
   const closeMenuAnd = (fn: () => void) => {
     return () => {
       setIsMenuOpen(false);
@@ -77,8 +81,10 @@ function Header({ scene, settings, connection }: HeaderProps) {
           </button>
           { isMenuOpen &&
             <UserMenu username={settings.username} setUsername={username => handleEditUser(username, settings.propic)}>
-              { scene.type === 'game' && isLobbyOwner(scene.lobbyState) &&
-                <UserMenuItem onClick={closeMenuAnd(handleReturnLobby)}>{getLabel('ui', 'BUTTON_RETURN_LOBBY')}</UserMenuItem>}
+              { scene.type === 'game' && <>
+                <UserMenuItem onClick={handleToggleSounds}>{getLabel('ui', settings.muteSounds ? 'BUTTON_ENABLE_SOUNDS' : 'BUTTON_DISABLE_SOUNDS')}</UserMenuItem>
+                { isLobbyOwner(scene.lobbyState) && <UserMenuItem onClick={closeMenuAnd(handleReturnLobby)}>{getLabel('ui', 'BUTTON_RETURN_LOBBY')}</UserMenuItem>}
+              </>}
               { 'lobbyInfo' in scene
                 ? <UserMenuItem onClick={closeMenuAnd(handleLeaveLobby)}>{getLabel('ui', 'BUTTON_LEAVE_LOBBY')}</UserMenuItem>
                 : <UserMenuItem onClick={closeMenuAnd(handleDisconnect)}>{getLabel('ui', 'BUTTON_DISCONNECT')}</UserMenuItem> }

src/Locale/English/Labels.ts

@@ -72,6 +72,8 @@ export const LABELS_ENGLISH: LabelRegistry = {
         GAME_OPTIONS: "Game Options",
         BUTTON_CHAT_SEND: "Send",
         BUTTON_START_GAME: "Start Game",
+        BUTTON_ENABLE_SOUNDS: "Enable Sounds",
+        BUTTON_DISABLE_SOUNDS: "Disable Sounds",
         BUTTON_RETURN_LOBBY: "Return to Lobby",
         BUTTON_OK: "OK",
         BUTTON_UNDO: "Undo",

src/Locale/Italian/Labels.ts

@@ -72,6 +72,8 @@ export const LABELS_ITALIAN: LabelRegistry = {
         GAME_OPTIONS: "Opzioni di Partita",
         BUTTON_CHAT_SEND: "Invia",
         BUTTON_START_GAME: "Avvia Partita",
+        BUTTON_ENABLE_SOUNDS: "Abilita Souni",
+        BUTTON_DISABLE_SOUNDS: "Disabilita Suoni",
         BUTTON_RETURN_LOBBY: "Ritorna alla Lobby",
         BUTTON_OK: "OK",
         BUTTON_UNDO: "Annulla",

src/Model/AppSettings.ts

@@ -1,19 +1,22 @@
 import { GameOptions } from "../Scenes/Game/Model/GameUpdate";
-import { intConverter, jsonConverter, stringConverter, useLocalStorage, useSessionStorage } from "../Utils/UseLocalStorage";
+import { boolConverter, intConverter, jsonConverter, stringConverter, useLocalStorage, useSessionStorage } from "../Utils/UseLocalStorage";
 
 export function useSettings() {
     const [sessionId, setSessionId] = useSessionStorage('session_id', intConverter);
+
     const [username, setUsername] = useLocalStorage('username', stringConverter);
     const [propic, setPropic] = useLocalStorage('propic', stringConverter);
     const [lobbyName, setLobbyName] = useLocalStorage('lobby_name', stringConverter);
     const [gameOptions, setGameOptions] = useLocalStorage<GameOptions>('game_options', jsonConverter);
+    const [muteSounds, setMuteSounds] = useLocalStorage('mute_sounds', boolConverter);
 
     return {
         sessionId, setSessionId,
         username, setUsername,
         propic, setPropic,
         lobbyName, setLobbyName,
-        gameOptions, setGameOptions
+        gameOptions, setGameOptions,
+        muteSounds, setMuteSounds
     } as const;
 }
 

src/Scenes/Game/GameScene.tsx

@@ -38,13 +38,14 @@ export interface GameProps {
   lobbyState: LobbyState;
   gameChannel: GameChannel;
   overlayRef: RefObject<HTMLDivElement>;
+  muteSounds?: boolean;
 }
 
 const EMPTY_GAME_STATE = newGameState(0);
 export const GameStateContext = createContext(EMPTY_GAME_STATE);
 
-export default function GameScene({ connection, lobbyState, gameChannel, overlayRef }: GameProps) {
-  const { state, selectorDispatch, gameLogs, gameError, clearGameError } = useGameState(gameChannel, lobbyState.myUserId);
+export default function GameScene({ connection, lobbyState, gameChannel, overlayRef, muteSounds }: GameProps) {
+  const { state, selectorDispatch, gameLogs, gameError, clearGameError } = useGameState(gameChannel, lobbyState.myUserId, muteSounds ?? false);
   const { table, selector } = state;
 
   const pocketRefs = useMapRef<PocketType, PocketRef>();

src/Scenes/Game/Model/UseGameState.ts

@@ -7,6 +7,8 @@ import gameTableReducer from "./GameTableReducer";
 import { GameString, GameUpdate, TableUpdate } from "./GameUpdate";
 import targetSelectorReducer, { SelectorUpdate } from "./TargetSelectorReducer";
 import { newTargetSelector, TargetSelector } from "./TargetSelector";
+import { useMapRef } from "../../../Utils/UseMapRef";
+import useEvent from "react-use-event-hook";
 
 export interface GameState {
     table: GameTable;
@@ -33,13 +35,26 @@ export function newGameState(myUserId: UserId): GameState {
     };
 }
 
-export default function useGameState(gameChannel: GameChannel, myUserId: UserId) {
+export default function useGameState(gameChannel: GameChannel, myUserId: UserId, muteSounds: boolean) {
     const [state, stateDispatch] = useReducer(gameStateReducer, myUserId, newGameState);
 
     const [gameLogs, setGameLogs] = useState<GameString[]>([]);
     const [gameError, setGameError] = useState<GameString>();
     const gameUpdates = useRef<GameUpdate[]>([]);
 
+    const soundsMap = useMapRef<string, HTMLAudioElement>();
+
+    const playSound = useEvent((name: string) => {
+        let sound = soundsMap.get(name);
+        if (sound === null) {
+            sound = new Audio(`/sounds/${name}.wav`);
+            soundsMap.set(name, sound);
+        }
+        if (!muteSounds) {
+            sound.play();
+        }
+    });
+
     const clearGameError = useCallback(() => {
         if (gameError) setGameError(undefined);
     }, [gameError]);
@@ -88,7 +103,7 @@ export default function useGameState(gameChannel: GameChannel, myUserId: UserId)
             },
 
             play_sound(sound) {
-                // TODO
+                playSound(sound);
             },
 
             add_cards(update) {
@@ -221,7 +236,7 @@ export default function useGameState(gameChannel: GameChannel, myUserId: UserId)
             clearTimeout(timeout);
             gameChannel.unsubscribe();
         }
-    }, [gameChannel]);
+    }, [gameChannel, playSound]);
 
     return { state, selectorDispatch, gameLogs, gameError, clearGameError } as const;
 }