feat: ✨ add sound effects option to the game

.gitignore

@@ -20,3 +20,5 @@ tsconfig.tsbuildinfo
 .cdk.staging
 cdk.out
 cdk.context.json
+
+._*

public/sound/futuristic/Checkmate.mp3

@@ -0,0 +1 @@
+Check.mp3

public/sound/futuristic/Confirmation.mp3

@@ -0,0 +1 @@
+../sfx/GenericNotify.mp3

public/sound/futuristic/Error.mp3

@@ -0,0 +1 @@
+../standard/Error.mp3

public/sound/futuristic/OutOfBound.mp3

@@ -0,0 +1 @@
+../standard/OutOfBound.mp3

public/sound/lisp/Checkmate.mp3

@@ -0,0 +1 @@
+Check.mp3

public/sound/lisp/OutOfBound.mp3

@@ -0,0 +1 @@
+../standard/OutOfBound.mp3

public/sound/nes/Checkmate.mp3

@@ -0,0 +1 @@
+Check.mp3

public/sound/nes/Confirmation.mp3

@@ -0,0 +1 @@
+../sfx/GenericNotify.mp3

public/sound/nes/Error.mp3

@@ -0,0 +1 @@
+../standard/Error.mp3

public/sound/nes/OutOfBound.mp3

@@ -0,0 +1 @@
+../standard/OutOfBound.mp3

public/sound/piano/Checkmate.mp3

@@ -0,0 +1 @@
+Check.mp3

public/sound/piano/Confirmation.mp3

@@ -0,0 +1 @@
+../sfx/GenericNotify.mp3

public/sound/piano/Error.mp3

@@ -0,0 +1 @@
+../standard/Error.mp3

public/sound/piano/OutOfBound.mp3

@@ -0,0 +1 @@
+../standard/OutOfBound.mp3

public/sound/robot/Confirmation.mp3

@@ -0,0 +1 @@
+../sfx/GenericNotify.mp3

public/sound/robot/Error.mp3

@@ -0,0 +1 @@
+../standard/Error.mp3

public/sound/robot/Move.mp3

@@ -0,0 +1 @@
+../standard/Move.mp3

public/sound/robot/OutOfBound.mp3

@@ -0,0 +1 @@
+../standard/OutOfBound.mp3

public/sound/robot/TournamentOther.mp3

@@ -0,0 +1 @@
+../piano/TournamentOther.mp3

public/sound/sfx/Checkmate.mp3

@@ -0,0 +1 @@
+Check.mp3

public/sound/sfx/Confirmation.mp3

@@ -0,0 +1 @@
+GenericNotify.mp3

public/sound/sfx/Error.mp3

@@ -0,0 +1 @@
+../standard/Error.mp3

public/sound/sfx/OutOfBound.mp3

@@ -0,0 +1 @@
+../standard/OutOfBound.mp3

public/sound/standard/Check.mp3

@@ -0,0 +1 @@
+../Silence.mp3

public/sound/standard/Checkmate.mp3

@@ -0,0 +1 @@
+Check.mp3

public/sound/standard/Defeat.mp3

@@ -0,0 +1 @@
+GenericNotify.mp3

public/sound/standard/Draw.mp3

@@ -0,0 +1 @@
+GenericNotify.mp3

public/sound/standard/NewChallenge.mp3

@@ -0,0 +1 @@
+SocialNotify.mp3

public/sound/standard/NewPM.mp3

@@ -0,0 +1 @@
+SocialNotify.mp3

public/sound/standard/TournamentOther.mp3

@@ -0,0 +1 @@
+../piano/TournamentOther.mp3

public/sound/standard/Victory.mp3

@@ -0,0 +1 @@
+GenericNotify.mp3

public/sound/woodland/Checkmate.mp3

@@ -0,0 +1 @@
+Check.mp3

public/sound/woodland/Error.mp3

@@ -0,0 +1 @@
+../standard/Error.mp3

src/hooks/useGameSound.ts

@@ -0,0 +1,43 @@
+import { Chess } from "chess.js";
+import { PrimitiveAtom, useAtomValue } from "jotai";
+import { useEffect, useRef } from "react";
+import { soundThemeAtom } from "@/sections/play/states";
+
+export const useGameSound = (gameAtom: PrimitiveAtom<Chess>) => {
+  const game = useAtomValue(gameAtom);
+  const soundTheme = useAtomValue(soundThemeAtom);
+  const previousMoveCount = useRef(game.history().length);
+
+  useEffect(() => {
+    const history = game.history({ verbose: true });
+    const currentMoveCount = history.length;
+
+    if (currentMoveCount === previousMoveCount.current) {
+      return;
+    }
+
+    previousMoveCount.current = currentMoveCount;
+
+    const lastMove = history.at(-1);
+    if (!lastMove) return;
+
+    let soundFile = "Move.mp3";
+
+    if (game.isGameOver()) {
+      if (game.isCheckmate()) {
+        soundFile = "Checkmate.mp3";
+      } else if (game.isDraw()) {
+        soundFile = "Draw.mp3";
+      } else {
+        soundFile = "Error.mp3";
+      }
+    } else if (game.inCheck()) {
+      soundFile = "Check.mp3";
+    } else if (lastMove.captured || lastMove.promotion) {
+      soundFile = "Capture.mp3";
+    }
+
+    const audio = new Audio(`/sound/${soundTheme}/${soundFile}`);
+    audio.play().catch((e) => console.error("Error playing sound:", e));
+  }, [game, soundTheme]);
+};

src/sections/analysis/board/index.tsx

@@ -12,6 +12,7 @@ import { useScreenSize } from "@/hooks/useScreenSize";
 import { Color } from "@/types/enums";
 import Board from "@/components/board";
 import { usePlayersData } from "@/hooks/usePlayersData";
+import { useGameSound } from "@/hooks/useGameSound";
 
 export default function BoardContainer() {
   const screenSize = useScreenSize();
@@ -31,6 +32,8 @@ export default function BoardContainer() {
     return Math.min(width - 700, height * 0.92);
   }, [screenSize]);
 
+  useGameSound(boardAtom);
+
   return (
     <Board
       id="AnalysisBoard"

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -1,5 +1,5 @@
 import Slider from "@/components/slider";
-import { EngineName } from "@/types/enums";
+import { EngineName, SoundTheme } from "@/types/enums";
 import {
   MenuItem,
   Select,
@@ -37,6 +37,7 @@ import {
   STRONGEST_ENGINE,
 } from "@/constants";
 import { getRecommendedWorkersNb } from "@/lib/engine/worker";
+import { soundThemeAtom } from "../play/states";
 
 interface Props {
   open: boolean;
@@ -63,6 +64,11 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
 
+  const [soundTheme, setSoundTheme] = useAtomLocalStorage(
+    "sound-theme",
+    soundThemeAtom
+  );
+
   useEffect(() => {
     if (!isEngineSupported(engineName)) {
       if (Stockfish16_1.isSupported()) {
@@ -202,6 +208,25 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
                 ))}
               </Select>
             </FormControl>
+
+            <FormControl variant="outlined">
+              <InputLabel id="sound-theme-select-label">Sound Theme</InputLabel>
+              <Select
+                labelId="sound-theme-select-label"
+                id="sound-theme-select"
+                displayEmpty
+                input={<OutlinedInput label="Sound Theme" />}
+                value={soundTheme}
+                onChange={(e) => setSoundTheme(e.target.value as SoundTheme)}
+                sx={{ width: 280, maxWidth: "100%" }}
+              >
+                {Object.values(SoundTheme).map((theme) => (
+                  <MenuItem key={theme} value={theme}>
+                    {theme.charAt(0).toUpperCase() + theme.slice(1)}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
           </Grid>
 
           <Grid

src/sections/play/board.tsx

@@ -16,6 +16,7 @@ import Board from "@/components/board";
 import { useGameData } from "@/hooks/useGameData";
 import { usePlayersData } from "@/hooks/usePlayersData";
 import { sleep } from "@/lib/helpers";
+import { useGameSound } from "@/hooks/useGameSound";
 
 export default function BoardContainer() {
   const screenSize = useScreenSize();
@@ -68,6 +69,7 @@ export default function BoardContainer() {
   }, [screenSize]);
 
   useGameData(gameAtom, gameDataAtom);
+  useGameSound(gameAtom);
 
   return (
     <Board

src/sections/play/gameSettings/gameSettingsDialog.tsx

@@ -1,5 +1,5 @@
 import Slider from "@/components/slider";
-import { Color, EngineName } from "@/types/enums";
+import { Color, EngineName, SoundTheme } from "@/types/enums";
 import {
   MenuItem,
   Select,
@@ -26,6 +26,7 @@ import {
   isGameInProgressAtom,
   gameAtom,
   enginePlayNameAtom,
+  soundThemeAtom,
 } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";
 import { logAnalyticsEvent } from "@/lib/firebase";
@@ -49,6 +50,11 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
     "engine-play-name",
     enginePlayNameAtom
   );
+  const [soundTheme, setSoundTheme] = useAtomLocalStorage(
+    "sound-theme",
+    soundThemeAtom
+  );
+
   const [playerColor, setPlayerColor] = useAtom(playerColorAtom);
   const setIsGameInProgress = useSetAtom(isGameInProgressAtom);
   const { reset: resetGame } = useChessActions(gameAtom);
@@ -211,6 +217,27 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
               </Typography>
             </FormControl>
           )}
+
+          <Grid container justifyContent="center" size={12}>
+            <FormControl variant="outlined">
+              <InputLabel id="sound-theme-select-label">Sound Theme</InputLabel>
+              <Select
+                labelId="sound-theme-select-label"
+                id="sound-theme-select"
+                displayEmpty
+                input={<OutlinedInput label="Sound Theme" />}
+                value={soundTheme}
+                onChange={(e) => setSoundTheme(e.target.value as SoundTheme)}
+                sx={{ width: 280, maxWidth: "100%" }}
+              >
+                {Object.values(SoundTheme).map((theme) => (
+                  <MenuItem key={theme} value={theme}>
+                    {theme.charAt(0).toUpperCase() + theme.slice(1)}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
         </Grid>
       </DialogContent>
       <DialogActions sx={{ m: 2 }}>

src/sections/play/states.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_ENGINE } from "@/constants";
-import { Color, EngineName } from "@/types/enums";
+import { Color, EngineName, SoundTheme } from "@/types/enums";
 import { CurrentPosition } from "@/types/eval";
 import { Chess } from "chess.js";
 import { atom } from "jotai";
@@ -10,3 +10,4 @@ export const playerColorAtom = atom<Color>(Color.White);
 export const enginePlayNameAtom = atom<EngineName>(DEFAULT_ENGINE);
 export const engineEloAtom = atom(1320);
 export const isGameInProgressAtom = atom(false);
+export const soundThemeAtom = atom<SoundTheme>(SoundTheme.Standard);

src/types/enums.ts

@@ -31,3 +31,14 @@ export enum Color {
   White = "w",
   Black = "b",
 }
+
+export enum SoundTheme {
+  Standard = "standard",
+  Piano = "piano",
+  NES = "nes",
+  SFX = "sfx",
+  Futuristic = "futuristic",
+  Lisp = "lisp",
+  Woodland = "woodland",
+  Robot = "robot",
+}