@react-chess-tools/react-chess-game 0.4.0 → 0.4.2

package/src/hooks/useBoardSounds.test.ts

@@ -0,0 +1,196 @@
+import { renderHook } from "@testing-library/react";
+import { type Move, type PieceSymbol } from "chess.js";
+import { useBoardSounds } from "./useBoardSounds";
+import { useChessGameContext } from "./useChessGameContext";
+import { type Sound } from "../assets/sounds";
+
+// Mock the context hook
+jest.mock("./useChessGameContext");
+const mockedUseChessGameContext = useChessGameContext as jest.MockedFunction<
+  typeof useChessGameContext
+>;
+
+// Helper to create mock audio elements
+const createMockSounds = (): Record<Sound, HTMLAudioElement> => ({
+  move: { play: jest.fn() } as unknown as HTMLAudioElement,
+  capture: { play: jest.fn() } as unknown as HTMLAudioElement,
+  gameOver: { play: jest.fn() } as unknown as HTMLAudioElement,
+  check: { play: jest.fn() } as unknown as HTMLAudioElement,
+});
+
+describe("useBoardSounds", () => {
+  let mockSounds: Record<Sound, HTMLAudioElement>;
+  let mockContextValue: {
+    info: {
+      lastMove?: Partial<Move> | null;
+      isCheckmate?: boolean;
+    };
+  };
+
+  beforeEach(() => {
+    // Reset mocks before each test
+    jest.clearAllMocks();
+    mockSounds = createMockSounds();
+    mockContextValue = {
+      info: {
+        lastMove: null,
+        isCheckmate: false,
+      },
+    };
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+  });
+
+  it("should not play any sound initially", () => {
+    renderHook(() => useBoardSounds(mockSounds));
+    expect(mockSounds.move.play).not.toHaveBeenCalled();
+    expect(mockSounds.capture.play).not.toHaveBeenCalled();
+    expect(mockSounds.gameOver.play).not.toHaveBeenCalled();
+  });
+
+  it("should play move sound when lastMove is present", () => {
+    mockContextValue.info.lastMove = {
+      from: "e2",
+      to: "e4",
+      piece: "P" as PieceSymbol,
+    } as unknown as Partial<Move>;
+    const { rerender } = renderHook(() => useBoardSounds(mockSounds));
+
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+    rerender();
+
+    expect(mockSounds.move.play).toHaveBeenCalledTimes(1);
+    expect(mockSounds.capture.play).not.toHaveBeenCalled();
+    expect(mockSounds.gameOver.play).not.toHaveBeenCalled();
+  });
+
+  it("should play capture sound when lastMove includes a capture", () => {
+    mockContextValue.info.lastMove = {
+      from: "e4",
+      to: "d5",
+      piece: "P" as PieceSymbol,
+      captured: "p" as PieceSymbol,
+    } as unknown as Partial<Move>;
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+
+    const { rerender } = renderHook(() => useBoardSounds(mockSounds));
+    rerender();
+
+    expect(mockSounds.capture.play).toHaveBeenCalledTimes(1);
+    expect(mockSounds.move.play).not.toHaveBeenCalled();
+    expect(mockSounds.gameOver.play).not.toHaveBeenCalled();
+  });
+
+  it("should play gameOver sound when isCheckmate is true", () => {
+    mockContextValue.info.isCheckmate = true;
+    mockContextValue.info.lastMove = {
+      from: "f3",
+      to: "g5",
+      piece: "Q" as PieceSymbol,
+    } as unknown as Partial<Move>;
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+
+    const { rerender } = renderHook(() => useBoardSounds(mockSounds));
+    rerender();
+
+    expect(mockSounds.gameOver.play).toHaveBeenCalledTimes(1);
+    expect(mockSounds.move.play).not.toHaveBeenCalled();
+    expect(mockSounds.capture.play).not.toHaveBeenCalled();
+  });
+
+  it("should play gameOver sound even if last move was a capture", () => {
+    mockContextValue.info.isCheckmate = true;
+    mockContextValue.info.lastMove = {
+      from: "f3",
+      to: "g7",
+      piece: "Q" as PieceSymbol,
+      captured: "p" as PieceSymbol,
+    } as unknown as Partial<Move>;
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+
+    const { rerender } = renderHook(() => useBoardSounds(mockSounds));
+    rerender();
+
+    expect(mockSounds.gameOver.play).toHaveBeenCalledTimes(1);
+    expect(mockSounds.capture.play).not.toHaveBeenCalled();
+    expect(mockSounds.move.play).not.toHaveBeenCalled();
+  });
+
+  it("should not play sound if lastMove becomes null", () => {
+    mockContextValue.info.lastMove = {
+      from: "e2",
+      to: "e4",
+      piece: "P" as PieceSymbol,
+    } as unknown as Partial<Move>;
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+    const { rerender } = renderHook(() => useBoardSounds(mockSounds));
+    rerender();
+    expect(mockSounds.move.play).toHaveBeenCalledTimes(1);
+
+    mockContextValue.info.lastMove = null;
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+    rerender();
+
+    expect(mockSounds.move.play).toHaveBeenCalledTimes(1);
+    expect(mockSounds.capture.play).not.toHaveBeenCalled();
+    expect(mockSounds.gameOver.play).not.toHaveBeenCalled();
+  });
+
+  it("should use updated sounds when they change", () => {
+    // Setup initial sounds and render hook
+    mockContextValue.info.lastMove = {
+      from: "e2",
+      to: "e4",
+      piece: "P" as PieceSymbol,
+    } as unknown as Partial<Move>;
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+
+    const { rerender } = renderHook((props) => useBoardSounds(props), {
+      initialProps: mockSounds,
+    });
+
+    // Verify initial sound played
+    expect(mockSounds.move.play).toHaveBeenCalledTimes(1);
+
+    // Create new set of mock sounds
+    const newMockSounds = createMockSounds();
+
+    // Re-render with new sounds and trigger a move
+    rerender(newMockSounds);
+
+    // Update lastMove to trigger sound effect with new sounds
+    mockContextValue.info.lastMove = {
+      from: "e7",
+      to: "e5",
+      piece: "P" as PieceSymbol,
+    } as unknown as Partial<Move>;
+    mockedUseChessGameContext.mockReturnValue(
+      mockContextValue as unknown as ReturnType<typeof useChessGameContext>,
+    );
+
+    rerender(newMockSounds);
+
+    // Original sounds should not be called again
+    expect(mockSounds.move.play).toHaveBeenCalledTimes(1);
+
+    // New sounds should be called
+    expect(newMockSounds.move.play).toHaveBeenCalledTimes(1);
+    expect(newMockSounds.capture.play).not.toHaveBeenCalled();
+    expect(newMockSounds.gameOver.play).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useBoardSounds.ts

@@ -6,17 +6,22 @@ export const useBoardSounds = (sounds: Record<Sound, HTMLAudioElement>) => {
   const {
     info: { lastMove, isCheckmate },
   } = useChessGameContext();
+
   useEffect(() => {
+    if (Object.keys(sounds).length === 0) {
+      return;
+    }
+
     if (isCheckmate) {
-      sounds.gameOver.play();
+      sounds.gameOver?.play();
       return;
     }
     if (lastMove?.captured) {
-      sounds.capture.play();
+      sounds.capture?.play();
       return;
     }
     if (lastMove) {
-      sounds.move.play();
+      sounds.move?.play();
       return;
     }
   }, [lastMove]);

package/src/hooks/useChessGame.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Chess, Color } from "chess.js";
 import { cloneGame, getCurrentFen, getGameInfo } from "../utils/chess";
 
@@ -12,63 +12,93 @@ export const useChessGame = ({
   orientation: initialOrientation,
 }: useChessGameProps = {}) => {
   const [game, setGame] = React.useState(new Chess(fen));
+
+  useEffect(() => {
+    setGame(new Chess(fen));
+  }, [fen]);
+
   const [orientation, setOrientation] = React.useState<Color>(
     initialOrientation ?? "w",
   );
   const [currentMoveIndex, setCurrentMoveIndex] = React.useState(-1);
 
   const history = React.useMemo(() => game.history(), [game]);
-  const isLatestMove =
-    currentMoveIndex === history.length - 1 || currentMoveIndex === -1;
+  const isLatestMove = React.useMemo(
+    () => currentMoveIndex === history.length - 1 || currentMoveIndex === -1,
+    [currentMoveIndex, history.length],
+  );
 
-  const setPosition = (fen: string, orientation: Color) => {
+  const info = React.useMemo(
+    () => getGameInfo(game, orientation),
+    [game, orientation],
+  );
+
+  const currentFen = React.useMemo(
+    () => getCurrentFen(fen, game, currentMoveIndex),
+    [game, currentMoveIndex],
+  );
+
+  const currentPosition = React.useMemo(
+    () => game.history()[currentMoveIndex],
+    [game, currentMoveIndex],
+  );
+
+  const setPosition = React.useCallback((fen: string, orientation: Color) => {
     const newGame = new Chess();
     newGame.load(fen);
     setOrientation(orientation);
     setGame(newGame);
     setCurrentMoveIndex(-1);
-  };
+  }, []);
 
-  const makeMove = (move: Parameters<Chess["move"]>[0]): boolean => {
-    // Only allow moves when we're at the latest position
-    if (!isLatestMove) {
-      return false;
-    }
-
-    try {
-      const copy = cloneGame(game);
-      copy.move(move);
-      setGame(copy);
-      setCurrentMoveIndex(copy.history().length - 1);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  };
+  const makeMove = React.useCallback(
+    (move: Parameters<Chess["move"]>[0]): boolean => {
+      // Only allow moves when we're at the latest position
+      if (!isLatestMove) {
+        return false;
+      }
 
-  const flipBoard = () => {
+      try {
+        const copy = cloneGame(game);
+        copy.move(move);
+        setGame(copy);
+        setCurrentMoveIndex(copy.history().length - 1);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+    [isLatestMove, game],
+  );
+
+  const flipBoard = React.useCallback(() => {
     setOrientation((orientation) => (orientation === "w" ? "b" : "w"));
-  };
+  }, []);
 
-  const goToMove = (moveIndex: number) => {
-    if (moveIndex < -1 || moveIndex >= history.length) return;
-    setCurrentMoveIndex(moveIndex);
-  };
+  const goToMove = React.useCallback(
+    (moveIndex: number) => {
+      if (moveIndex < -1 || moveIndex >= history.length) return;
+      setCurrentMoveIndex(moveIndex);
+    },
+    [history.length],
+  );
 
-  const goToStart = () => goToMove(-1);
-  const goToEnd = () => goToMove(history.length - 1);
-  const goToPreviousMove = () => goToMove(currentMoveIndex - 1);
-  const goToNextMove = () => goToMove(currentMoveIndex + 1);
+  const goToStart = React.useCallback(() => goToMove(-1), []);
+  const goToEnd = React.useCallback(
+    () => goToMove(history.length - 1),
+    [history.length],
+  );
+  const goToPreviousMove = React.useCallback(
+    () => goToMove(currentMoveIndex - 1),
+    [currentMoveIndex],
+  );
+  const goToNextMove = React.useCallback(
+    () => goToMove(currentMoveIndex + 1),
+    [currentMoveIndex],
+  );
 
-  return {
-    game,
-    currentFen: getCurrentFen(fen, game, currentMoveIndex),
-    currentPosition: game.history()[currentMoveIndex],
-    orientation,
-    currentMoveIndex,
-    isLatestMove,
-    info: getGameInfo(game, orientation),
-    methods: {
+  const methods = React.useMemo(
+    () => ({
       makeMove,
       setPosition,
       flipBoard,
@@ -77,6 +107,27 @@ export const useChessGame = ({
       goToEnd,
       goToPreviousMove,
       goToNextMove,
-    },
+    }),
+    [
+      makeMove,
+      setPosition,
+      flipBoard,
+      goToMove,
+      goToStart,
+      goToEnd,
+      goToPreviousMove,
+      goToNextMove,
+    ],
+  );
+
+  return {
+    game,
+    currentFen,
+    currentPosition,
+    orientation,
+    currentMoveIndex,
+    isLatestMove,
+    info,
+    methods,
   };
 };

package/src/hooks/useChessGameContext.ts

@@ -9,7 +9,7 @@ export const useChessGameContext = () => {
   const context = React.useContext(ChessGameContext);
   if (!context) {
     throw new Error(
-      "useChessGameContext must be used within a ChessGameProvider",
+      `useChessGameContext must be used within a ChessGame component. Make sure your component is wrapped with <ChessGame.Root> or ensure the ChessGame component is properly rendered in the component tree.`,
     );
   }
   return context;

package/src/hooks/useKeyboardControls.test.tsx

@@ -0,0 +1,171 @@
+import { renderHook, act } from "@testing-library/react";
+import { useKeyboardControls } from "./useKeyboardControls";
+import {
+  useChessGameContext,
+  ChessGameContextType,
+} from "./useChessGameContext";
+import { Chess, Color } from "chess.js";
+
+// Mock the context hook
+jest.mock("./useChessGameContext");
+const mockUseChessGameContext = useChessGameContext as jest.MockedFunction<
+  typeof useChessGameContext
+>;
+
+describe("useKeyboardControls", () => {
+  let mockGameContext: jest.Mocked<ChessGameContextType>;
+  let addEventListenerSpy: jest.SpyInstance;
+  let removeEventListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    // Reset mocks and spies
+    jest.clearAllMocks();
+    mockGameContext = {
+      game: {
+        /* Add minimal Chess mock properties/methods if needed */
+      } as jest.Mocked<Chess>,
+      currentFen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+      currentPosition: "",
+      orientation: "w" as Color,
+      currentMoveIndex: -1,
+      isLatestMove: true,
+      info: {
+        /* Add minimal GameInfo mock properties/methods if needed */
+      } as jest.Mocked<ChessGameContextType["info"]>,
+      methods: {
+        undo: jest.fn(),
+        redo: jest.fn(),
+        makeMove: jest.fn(),
+        setPosition: jest.fn(),
+        flipBoard: jest.fn(),
+        goToMove: jest.fn(),
+        goToStart: jest.fn(),
+        goToEnd: jest.fn(),
+        goToPreviousMove: jest.fn(),
+        goToNextMove: jest.fn(),
+      },
+    } as unknown as jest.Mocked<ChessGameContextType>;
+
+    mockUseChessGameContext.mockReturnValue(mockGameContext);
+
+    addEventListenerSpy = jest.spyOn(window, "addEventListener");
+    removeEventListenerSpy = jest.spyOn(window, "removeEventListener");
+  });
+
+  afterEach(() => {
+    // Restore original implementations
+    addEventListenerSpy.mockRestore();
+    removeEventListenerSpy.mockRestore();
+  });
+
+  it("should add keydown event listener on mount and remove on unmount", () => {
+    const { unmount } = renderHook(() => useKeyboardControls());
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      "keydown",
+      expect.any(Function),
+    );
+    expect(removeEventListenerSpy).not.toHaveBeenCalled();
+
+    unmount();
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      "keydown",
+      expect.any(Function),
+    );
+    // Ensure the listener functions are the same instance
+    expect(addEventListenerSpy.mock.calls[0][1]).toBe(
+      removeEventListenerSpy.mock.calls[0][1],
+    );
+  });
+
+  it("should call the default handler for a default key", () => {
+    renderHook(() => useKeyboardControls());
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    const preventDefaultSpy = jest.spyOn(event, "preventDefault");
+
+    act(() => {
+      window.dispatchEvent(event);
+    });
+
+    const undoHandler = mockGameContext.methods.goToPreviousMove;
+
+    expect(undoHandler).toHaveBeenCalledTimes(1);
+
+    expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call the custom handler if provided", () => {
+    const customHandler = jest.fn();
+    const customControls = { z: customHandler };
+
+    renderHook(() => useKeyboardControls(customControls));
+
+    const event = new KeyboardEvent("keydown", { key: "z" });
+    const preventDefaultSpy = jest.spyOn(event, "preventDefault");
+
+    act(() => {
+      window.dispatchEvent(event);
+    });
+
+    expect(customHandler).toHaveBeenCalledWith(mockGameContext);
+    expect(customHandler).toHaveBeenCalledTimes(1);
+    expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call the default handler if a custom handler for a different key is provided", () => {
+    const customHandler = jest.fn();
+    const customControls = { z: customHandler };
+
+    renderHook(() => useKeyboardControls(customControls));
+
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    const preventDefaultSpy = jest.spyOn(event, "preventDefault");
+
+    const redoHandler = mockGameContext.methods.goToNextMove;
+
+    act(() => {
+      window.dispatchEvent(event);
+    });
+
+    expect(redoHandler).toHaveBeenCalledTimes(1);
+
+    expect(customHandler).not.toHaveBeenCalled();
+    expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should override the default handler if a custom handler for the same key is provided", () => {
+    const customArrowLeftHandler = jest.fn();
+    const customControls = { ArrowLeft: customArrowLeftHandler };
+
+    renderHook(() => useKeyboardControls(customControls));
+
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    const preventDefaultSpy = jest.spyOn(event, "preventDefault");
+
+    act(() => {
+      window.dispatchEvent(event);
+    });
+
+    expect(customArrowLeftHandler).toHaveBeenCalledWith(mockGameContext);
+    expect(customArrowLeftHandler).toHaveBeenCalledTimes(1);
+    expect(mockGameContext.methods.goToPreviousMove).not.toHaveBeenCalled();
+    expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it("should do nothing if an unmapped key is pressed", () => {
+    renderHook(() => useKeyboardControls());
+    const event = new KeyboardEvent("keydown", { key: "UnmappedKey" });
+    const preventDefaultSpy = jest.spyOn(event, "preventDefault");
+
+    act(() => {
+      window.dispatchEvent(event);
+    });
+
+    // Check that no context functions were called
+    Object.values(mockGameContext.methods).forEach((mockFn) => {
+      if (jest.isMockFunction(mockFn)) {
+        expect(mockFn).not.toHaveBeenCalled();
+      }
+    });
+    expect(preventDefaultSpy).not.toHaveBeenCalled();
+  });
+});

package/src/index.ts

@@ -1,3 +1,22 @@
+// Components
 export { ChessGame } from "./components/ChessGame";
+
+// Hooks & Context
 export { useChessGameContext } from "./hooks/useChessGameContext";
 export { useChessGame } from "./hooks/useChessGame";
+export type { ChessGameContextType } from "./hooks/useChessGameContext";
+export type { useChessGameProps } from "./hooks/useChessGame";
+
+// Audio Types
+export type { Sound, Sounds } from "./assets/sounds";
+export type { SoundsProps } from "./components/ChessGame/parts/Sounds";
+
+// Keyboard Types
+export type { KeyboardControls } from "./components/ChessGame/parts/KeyboardControls";
+
+// Utility Types
+export type { GameInfo } from "./utils/chess";
+
+// Component Props
+export type { ChessGameProps } from "./components/ChessGame/parts/Board";
+export type { RootProps } from "./components/ChessGame/parts/Root";