feat : add sounds

src/hooks/useChessActions.ts

@@ -1,4 +1,5 @@
 import { setGameHeaders } from "@/lib/chess";
+import { playIllegalMoveSound, playSoundFromMove } from "@/lib/sounds";
 import { Chess, Move } from "chess.js";
 import { PrimitiveAtom, useAtom } from "jotai";
 import { useCallback } from "react";
@@ -39,17 +40,23 @@ export const useChessActions = (chessAtom: PrimitiveAtom<Chess>) => {
   const makeMove = useCallback(
     (move: { from: string; to: string; promotion?: string }): Move | null => {
       const newGame = copyGame();
-      const result = newGame.move(move);
+      try {
-      setGame(newGame);
+        const result = newGame.move(move);
-
+        setGame(newGame);
-      return result;
+        playSoundFromMove(result);
+        return result;
+      } catch {
+        playIllegalMoveSound();
+        return null;
+      }
     },
     [copyGame, setGame]
   );
 
   const undoMove = useCallback(() => {
     const newGame = copyGame();
-    newGame.undo();
+    const move = newGame.undo();
+    if (move) playSoundFromMove(move);
     setGame(newGame);
   }, [copyGame, setGame]);
 

src/lib/chess.ts

@@ -247,3 +247,8 @@ export const getStartingFen = (
 
   return history[0].before;
 };
+
+export const isCheck = (fen: string): boolean => {
+  const game = new Chess(fen);
+  return game.inCheck();
+};

src/lib/sounds.ts

@@ -0,0 +1,35 @@
+import { Move } from "chess.js";
+import { getWhoIsCheckmated, isCheck } from "./chess";
+
+const playSound = async (url: string) => {
+  const audio = new Audio(url);
+  await audio.play();
+};
+
+export const playCaptureSound = () => playSound("/sounds/capture.webm");
+export const playCastleSound = () => playSound("/sounds/castle.webm");
+export const playGameEndSound = () => playSound("/sounds/game-end.webm");
+export const playGameStartSound = () => playSound("/sounds/game-start.webm");
+export const playIllegalMoveSound = () =>
+  playSound("/sounds/illegal-move.webm");
+export const playMoveCheckSound = () => playSound("/sounds/move-check.webm");
+export const playMoveSound = () => playSound("/sounds/move.webm");
+export const playPromoteSound = () => playSound("/sounds/promote.webm");
+
+export const playSoundFromMove = async (move: Move | null) => {
+  if (!move) {
+    playIllegalMoveSound();
+  } else if (getWhoIsCheckmated(move.after)) {
+    playGameEndSound();
+  } else if (isCheck(move.after)) {
+    playMoveCheckSound();
+  } else if (move.promotion) {
+    playPromoteSound();
+  } else if (move.captured) {
+    playCaptureSound();
+  } else if (move.flags.includes("k") || move.flags.includes("q")) {
+    playCastleSound();
+  } else {
+    playMoveSound();
+  }
+};

src/sections/analysis/board/index.tsx

@@ -40,17 +40,13 @@ export default function Board() {
     target: Square,
     piece: string
   ): boolean => {
-    try {
+    const result = makeBoardMove({
-      const result = makeBoardMove({
+      from: source,
-        from: source,
+      to: target,
-        to: target,
+      promotion: piece[1]?.toLowerCase() ?? "q",
-        promotion: piece[1]?.toLowerCase() ?? "q",
+    });
-      });
 
-      return !!result;
+    return !!result;
-    } catch {
-      return false;
-    }
   };
 
   const handleSquareLeftClick = () => {

src/sections/play/board/index.tsx

@@ -70,17 +70,14 @@ export default function Board() {
     piece: string
   ): boolean => {
     if (!piece || piece[0] !== playerColor || !isGameInProgress) return false;
-    try {
-      const result = makeGameMove({
-        from: source,
-        to: target,
-        promotion: piece[1]?.toLowerCase() ?? "q",
-      });
 
-      return !!result;
+    const result = makeGameMove({
-    } catch {
+      from: source,
-      return false;
+      to: target,
-    }
+      promotion: piece[1]?.toLowerCase() ?? "q",
+    });
+
+    return !!result;
   };
 
   const isPieceDraggable = ({ piece }: { piece: string }): boolean => {

src/sections/play/gameInProgress.tsx

@@ -2,6 +2,7 @@ import { Button, CircularProgress, Grid, Typography } from "@mui/material";
 import { useAtom, useAtomValue } from "jotai";
 import { gameAtom, isGameInProgressAtom } from "./states";
 import { useEffect } from "react";
+import { playGameEndSound } from "@/lib/sounds";
 
 export default function GameInProgress() {
   const game = useAtomValue(gameAtom);
@@ -11,6 +12,11 @@ export default function GameInProgress() {
     if (game.isGameOver()) setIsGameInProgress(false);
   }, [game, setIsGameInProgress]);
 
+  const handleResign = () => {
+    playGameEndSound();
+    setIsGameInProgress(false);
+  };
+
   if (!isGameInProgress) return null;
 
   return (
@@ -42,7 +48,7 @@ export default function GameInProgress() {
         xs={12}
         gap={2}
       >
-        <Button variant="outlined" onClick={() => setIsGameInProgress(false)}>
+        <Button variant="outlined" onClick={handleResign}>
           Resign
         </Button>
       </Grid>

src/sections/play/gameSettings/gameSettingsDialog.tsx

@@ -26,6 +26,7 @@ import {
   gameAtom,
 } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";
+import { playGameStartSound } from "@/lib/sounds";
 
 interface Props {
   open: boolean;
@@ -49,6 +50,7 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
       blackName:
         playerColor === Color.Black ? "You" : `Stockfish level ${skillLevel}`,
     });
+    playGameStartSound();
     setIsGameInProgress(true);
   };