@react-chess-tools/react-chess-puzzle 0.4.0 → 0.5.1

package/src/hooks/useChessPuzzle.ts

@@ -1,13 +1,26 @@
-import { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useCallback, useMemo } from "react";
 import { initializePuzzle, reducer } from "./reducer";
-import { getOrientation, type Puzzle } from "../utils";
+import { getOrientation, type Puzzle, type Hint, type Status } from "../utils";
 import { useChessGameContext } from "@react-chess-tools/react-chess-game";
 
+export type ChessPuzzleContextType = {
+  status: Status;
+  changePuzzle: (puzzle: Puzzle) => void;
+  puzzle: Puzzle;
+  hint: Hint;
+  nextMove?: string | null;
+  isPlayerTurn: boolean;
+  onHint: () => void;
+  puzzleState: Status;
+  movesPlayed: number;
+  totalMoves: number;
+};
+
 export const useChessPuzzle = (
   puzzle: Puzzle,
-  onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void,
-  onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void,
-) => {
+  onSolve?: (puzzleContext: ChessPuzzleContextType) => void,
+  onFail?: (puzzleContext: ChessPuzzleContextType) => void,
+): ChessPuzzleContextType => {
   const gameContext = useChessGameContext();
 
   const [state, dispatch] = useReducer(reducer, { puzzle }, initializePuzzle);
@@ -17,16 +30,17 @@ export const useChessPuzzle = (
     methods: { makeMove, setPosition },
   } = gameContext;
 
-  useEffect(() => {
-    if (gameContext && game.fen() !== puzzle.fen) {
+  const changePuzzle = useCallback(
+    (puzzle: Puzzle) => {
       setPosition(puzzle.fen, getOrientation(puzzle));
-    }
-  }, []);
+      dispatch({ type: "INITIALIZE", payload: { puzzle } });
+    },
+    [setPosition],
+  );
 
-  const changePuzzle = (puzzle: Puzzle) => {
-    dispatch({ type: "INITIALIZE", payload: { puzzle } });
-    setPosition(puzzle.fen, getOrientation(puzzle));
-  };
+  useEffect(() => {
+    changePuzzle(puzzle);
+  }, [JSON.stringify(puzzle), changePuzzle]);
 
   useEffect(() => {
     if (gameContext && game.fen() === puzzle.fen && state.needCpuMove) {
@@ -46,6 +60,39 @@ export const useChessPuzzle = (
     }
   }, [state.cpuMove]);
 
+  if (!gameContext) {
+    throw new Error("useChessPuzzle must be used within a ChessGameContext");
+  }
+
+  const onHint = useCallback(() => {
+    dispatch({ type: "TOGGLE_HINT" });
+  }, []);
+
+  const puzzleContext: ChessPuzzleContextType = useMemo(
+    () => ({
+      status: state.status,
+      changePuzzle,
+      puzzle,
+      hint: state.hint,
+      onHint,
+      nextMove: state.nextMove,
+      isPlayerTurn: state.isPlayerTurn,
+      puzzleState: state.status,
+      movesPlayed: state.currentMoveIndex,
+      totalMoves: puzzle.moves.length,
+    }),
+    [
+      state.status,
+      changePuzzle,
+      puzzle,
+      state.hint,
+      onHint,
+      state.nextMove,
+      state.isPlayerTurn,
+      state.currentMoveIndex,
+    ],
+  );
+
   useEffect(() => {
     if (game?.history()?.length <= 0 + (puzzle.makeFirstMove ? 1 : 0)) {
       return;
@@ -55,9 +102,7 @@ export const useChessPuzzle = (
         type: "PLAYER_MOVE",
         payload: {
           move: gameContext?.game?.history({ verbose: true })?.pop() ?? null,
-          onSolve,
-          onFail,
-          changePuzzle,
+          puzzleContext,
           game: game,
         },
       });
@@ -68,21 +113,19 @@ export const useChessPuzzle = (
     }
   }, [game?.history()?.length]);
 
-  if (!gameContext) {
-    throw new Error("useChessPuzzle must be used within a ChessGameContext");
-  }
+  useEffect(() => {
+    if (state.status === "solved" && !state.onSolveInvoked && onSolve) {
+      onSolve(puzzleContext);
+      dispatch({ type: "MARK_SOLVE_INVOKED" });
+    }
+  }, [state.status, state.onSolveInvoked]);
 
-  const onHint = () => {
-    dispatch({ type: "TOGGLE_HINT" });
-  };
-
-  return {
-    status: state.status,
-    changePuzzle,
-    puzzle,
-    hint: state.hint,
-    onHint,
-    nextMove: state.nextMove,
-    isPlayerTurn: state.isPlayerTurn,
-  };
+  useEffect(() => {
+    if (state.status === "failed" && !state.onFailInvoked && onFail) {
+      onFail(puzzleContext);
+      dispatch({ type: "MARK_FAIL_INVOKED" });
+    }
+  }, [state.status, state.onFailInvoked]);
+
+  return puzzleContext;
 };

package/src/index.ts

@@ -1,2 +1,15 @@
+// Components
 export { ChessPuzzle } from "./components/ChessPuzzle";
+
+// Hooks & Context
 export { useChessPuzzleContext } from "./hooks/useChessPuzzleContext";
+export type { ChessPuzzleContextType } from "./hooks/useChessPuzzle";
+
+// Core Types
+export type { Status, Hint, Puzzle } from "./utils";
+
+// Component Props
+export type { HintProps } from "./components/ChessPuzzle/parts/Hint";
+export type { ResetProps } from "./components/ChessPuzzle/parts/Reset";
+export type { PuzzleBoardProps } from "./components/ChessPuzzle/parts/PuzzleBoard";
+export type { RootProps } from "./components/ChessPuzzle/parts/Root";

package/src/utils/__tests__/index.test.ts

@@ -0,0 +1,192 @@
+import { Chess, Move } from "chess.js";
+import React from "react";
+import {
+  getOrientation,
+  isClickableElement,
+  getCustomSquareStyles,
+  stringToMove,
+  Puzzle,
+} from "../index";
+
+describe("Puzzle Utilities", () => {
+  describe("getOrientation", () => {
+    it("should return white when it's white's turn", () => {
+      const puzzle: Puzzle = {
+        fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+        moves: ["e4", "e5", "Nf3"],
+      };
+
+      expect(getOrientation(puzzle)).toBe("w");
+    });
+
+    it("should return black when it's black's turn", () => {
+      const puzzle: Puzzle = {
+        fen: "rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1",
+        moves: ["e5", "Nf3", "Nc6"],
+      };
+
+      expect(getOrientation(puzzle)).toBe("b");
+    });
+
+    it("should make first move if makeFirstMove is true", () => {
+      const puzzle: Puzzle = {
+        fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+        moves: ["e4", "e5", "Nf3"],
+        makeFirstMove: true,
+      };
+
+      // After e4, it should be black's turn
+      expect(getOrientation(puzzle)).toBe("b");
+    });
+  });
+
+  describe("isClickableElement", () => {
+    it("should return true for valid clickable elements", () => {
+      const clickableElement = React.createElement("button", {
+        onClick: () => {},
+      });
+      expect(isClickableElement(clickableElement)).toBe(true);
+    });
+
+    it("should return false for non-React elements", () => {
+      expect(isClickableElement("not an element")).toBe(false);
+      expect(isClickableElement(null)).toBe(false);
+      expect(isClickableElement(undefined)).toBe(false);
+    });
+  });
+
+  describe("getCustomSquareStyles", () => {
+    const game = new Chess();
+
+    it("should return empty object when no conditions are met", () => {
+      const styles = getCustomSquareStyles("not-started", "none", true, game);
+      expect(styles).toEqual({});
+    });
+
+    it("should highlight last move with fail color when status is failed", () => {
+      const testGame = new Chess();
+      testGame.move("e4");
+
+      const styles = getCustomSquareStyles("failed", "none", true, testGame);
+
+      expect(styles["e2"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(201, 52, 48, 0.5)",
+      );
+      expect(styles["e4"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(201, 52, 48, 0.5)",
+      );
+    });
+
+    it("should highlight last move with success color when status is solved", () => {
+      const testGame = new Chess();
+      testGame.move("e4");
+
+      const styles = getCustomSquareStyles("solved", "none", true, testGame);
+
+      expect(styles["e2"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(172, 206, 89, 0.5)",
+      );
+      expect(styles["e4"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(172, 206, 89, 0.5)",
+      );
+    });
+
+    it("should highlight move source square when hint is piece", () => {
+      const testGame = new Chess();
+      testGame.move("e4");
+      const nextMove = testGame.history({ verbose: true })[0] as Move;
+
+      const styles = getCustomSquareStyles(
+        "in-progress",
+        "piece",
+        true,
+        game,
+        nextMove,
+      );
+
+      expect(styles["e2"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(27, 172, 166, 0.5)",
+      );
+      expect(styles["e4"]).toBeUndefined();
+    });
+
+    it("should highlight move source and destination when hint is move", () => {
+      const testGame = new Chess();
+      testGame.move("e4");
+      const nextMove = testGame.history({ verbose: true })[0] as Move;
+
+      const styles = getCustomSquareStyles(
+        "in-progress",
+        "move",
+        true,
+        game,
+        nextMove,
+      );
+
+      expect(styles["e2"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(27, 172, 166, 0.5)",
+      );
+      expect(styles["e4"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(27, 172, 166, 0.5)",
+      );
+    });
+
+    it("should highlight with success color when not failed and not player turn", () => {
+      const testGame = new Chess();
+      testGame.move("e4");
+
+      const styles = getCustomSquareStyles(
+        "in-progress",
+        "none",
+        false,
+        testGame,
+      );
+
+      expect(styles["e2"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(172, 206, 89, 0.5)",
+      );
+      expect(styles["e4"]).toHaveProperty(
+        "backgroundColor",
+        "rgba(172, 206, 89, 0.5)",
+      );
+    });
+  });
+
+  describe("stringToMove", () => {
+    const game = new Chess();
+
+    it("should return null for null or undefined input", () => {
+      expect(stringToMove(game, null)).toBeNull();
+      expect(stringToMove(game, undefined)).toBeNull();
+    });
+
+    it("should return a valid move object for legal moves", () => {
+      const move = stringToMove(game, "e4");
+
+      expect(move).not.toBeNull();
+      expect(move?.from).toBe("e2");
+      expect(move?.to).toBe("e4");
+      expect(move?.piece).toBe("p");
+    });
+
+    it("should return null for illegal moves", () => {
+      expect(stringToMove(game, "e5")).toBeNull();
+      expect(stringToMove(game, "invalid")).toBeNull();
+    });
+
+    it("should not modify the original game", () => {
+      const originalFen = game.fen();
+      stringToMove(game, "e4");
+
+      expect(game.fen()).toBe(originalFen);
+    });
+  });
+});