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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @react-chess-tools/react-chess-puzzle
 
+## 0.5.1
+
+### Patch Changes
+
+- ca0a210: add missing properties to ChessPuzzleContextType
+- 755a85d: fix: export missing TypeScript types and component props
+- a9c69b5: test: add unit tests
+- 5ed0baf: fix: fix SSR compatibility and prevent unnecessary sound re-renders
+- c3ac738: fix: fix state management and lifecycle issues in chess components
+- Updated dependencies [755a85d]
+- Updated dependencies [a9c69b5]
+- Updated dependencies [5ed0baf]
+- Updated dependencies [c3ac738]
+  - @react-chess-tools/react-chess-game@0.4.1
+
 ## 0.5.0
 
 ### Minor Changes

package/README.MD

@@ -230,42 +230,47 @@ export const PuzzleSolver = () => {
   // Example puzzles
   const puzzles = [
     {
-      fen: "r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3",
-      moves: ["d2d4", "e5d4", "f3d4"],
+      fen: "4kb1r/p2r1ppp/4qn2/1B2p1B1/4P3/1Q6/PPP2PPP/2KR4 w k - 0 1",
+      moves: ["Bxd7+", "Nxd7", "Qb8+", "Nxb8", "Rd8#"],
       makeFirstMove: false,
     },
     {
-      fen: "r1bqkb1r/pppp1ppp/2n2n2/4p3/2B1P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 4 4",
-      moves: ["f3g5", "d7d5", "e4d5", "c6a5"],
-      makeFirstMove: false,
+      fen: "6k1/5p1p/p1q1p1p1/1pB1P3/1Pr3Pn/P4P1P/4Q3/3R2K1 b - - 0 31",
+      moves: ["h4f3", "e2f3", "c4c5", "d1d8", "g8g7", "f3f6"],
+      makeFirstMove: true,
     },
   ];
 
   const [currentPuzzle, setCurrentPuzzle] = useState(0);
   const [score, setScore] = useState(0);
 
-  // Function to load the next puzzle
   const nextPuzzle = () => {
-    setCurrentPuzzle((prev) => (prev + 1) % puzzles.length);
+    const nextPuzzle = (currentPuzzle + 1) % puzzles.length;
+    setCurrentPuzzle(nextPuzzle);
   };
 
-  const handleSolve = (puzzleContext) => {
+  const handleSolve = (puzzleContext: ChessPuzzleContextType) => {
     setScore((prev) => prev + 10);
     console.log(`Puzzle solved in ${puzzleContext.movesPlayed} moves`);
-    // Could automatically progress to next puzzle
-    // setTimeout(nextPuzzle, 1500);
+    nextPuzzle();
   };
 
-  const handleFail = (puzzleContext) => {
+  const handleFail = (puzzleContext: ChessPuzzleContextType) => {
     setScore((prev) => Math.max(0, prev - 5));
-    console.log(`Failed move: ${puzzleContext.lastMove}`);
+    console.log(`Puzzle failed in ${puzzleContext.movesPlayed} moves`);
+
+    nextPuzzle();
+  };
+
+  const handleReset = (puzzleContext: ChessPuzzleContextType) => {
+    puzzleContext.changePuzzle(puzzles[currentPuzzle]!);
   };
 
   return (
     <div className="puzzle-container">
       <div className="score">Score: {score}</div>
       <ChessPuzzle.Root
-        puzzle={puzzles[currentPuzzle]}
+        puzzle={puzzles[currentPuzzle]!}
         onSolve={handleSolve}
         onFail={handleFail}
       >
@@ -277,13 +282,12 @@ export const PuzzleSolver = () => {
         </div>
 
         <div className="controls">
-          <PuzzleStatus />
           <div className="buttons">
             <ChessPuzzle.Reset>Restart</ChessPuzzle.Reset>
             <ChessPuzzle.Hint showOn={["in-progress"]}>Hint</ChessPuzzle.Hint>
             <ChessPuzzle.Reset
               puzzle={puzzles[(currentPuzzle + 1) % puzzles.length]}
-              onReset={nextPuzzle}
+              onReset={handleReset}
             >
               Next Puzzle
             </ChessPuzzle.Reset>

package/dist/index.d.mts

@@ -18,7 +18,7 @@ interface HintProps {
 interface ResetProps {
     asChild?: boolean;
     puzzle?: Puzzle;
-    onReset?: () => void;
+    onReset?: (puzzleContext: ChessPuzzleContextType) => void;
     showOn?: Status[];
 }
 
@@ -33,6 +33,9 @@ type ChessPuzzleContextType = {
     nextMove?: string | null;
     isPlayerTurn: boolean;
     onHint: () => void;
+    puzzleState: Status;
+    movesPlayed: number;
+    totalMoves: number;
 };
 
 interface RootProps {
@@ -50,4 +53,4 @@ declare const ChessPuzzle: {
 
 declare const useChessPuzzleContext: () => ChessPuzzleContextType;
 
-export { ChessPuzzle, useChessPuzzleContext };
+export { ChessPuzzle, type ChessPuzzleContextType, type Hint, type HintProps, type Puzzle, type PuzzleBoardProps, type ResetProps, type RootProps, type Status, useChessPuzzleContext };

package/dist/index.mjs

@@ -68,7 +68,7 @@ var stringToMove = (game, move) => {
 };
 
 // src/hooks/useChessPuzzle.ts
-import { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useCallback, useMemo } from "react";
 
 // src/hooks/reducer.ts
 var initializePuzzle = ({ puzzle }) => {
@@ -80,7 +80,9 @@ var initializePuzzle = ({ puzzle }) => {
     hint: "none",
     cpuMove: null,
     needCpuMove: !!puzzle.makeFirstMove,
-    isPlayerTurn: !puzzle.makeFirstMove
+    isPlayerTurn: !puzzle.makeFirstMove,
+    onSolveInvoked: false,
+    onFailInvoked: false
   };
 };
 var reducer = (state, action) => {
@@ -119,33 +121,29 @@ var reducer = (state, action) => {
         status: "in-progress"
       };
     case "PLAYER_MOVE": {
-      const { move, onSolve, onFail, puzzleContext } = action.payload;
+      const { move } = action.payload;
       const isMoveRight = [move == null ? void 0 : move.san, move == null ? void 0 : move.lan].includes(
         (state == null ? void 0 : state.nextMove) || ""
       );
       const isPuzzleSolved = state.currentMoveIndex === state.puzzle.moves.length - 1;
       if (!isMoveRight) {
-        if (onFail) {
-          onFail(puzzleContext);
-        }
         return {
           ...state,
           status: "failed",
           nextMove: null,
           hint: "none",
-          isPlayerTurn: false
+          isPlayerTurn: false,
+          onFailInvoked: false
         };
       }
       if (isPuzzleSolved) {
-        if (onSolve) {
-          onSolve(puzzleContext);
-        }
         return {
           ...state,
           status: "solved",
           nextMove: null,
           hint: "none",
-          isPlayerTurn: false
+          isPlayerTurn: false,
+          onSolveInvoked: false
         };
       }
       return {
@@ -158,6 +156,16 @@ var reducer = (state, action) => {
         isPlayerTurn: false
       };
     }
+    case "MARK_SOLVE_INVOKED":
+      return {
+        ...state,
+        onSolveInvoked: true
+      };
+    case "MARK_FAIL_INVOKED":
+      return {
+        ...state,
+        onFailInvoked: true
+      };
     default:
       return state;
   }
@@ -173,15 +181,16 @@ var useChessPuzzle = (puzzle, onSolve, onFail) => {
     game,
     methods: { makeMove, setPosition }
   } = gameContext;
+  const changePuzzle = useCallback(
+    (puzzle2) => {
+      setPosition(puzzle2.fen, getOrientation(puzzle2));
+      dispatch({ type: "INITIALIZE", payload: { puzzle: puzzle2 } });
+    },
+    [setPosition]
+  );
   useEffect(() => {
-    if (gameContext && game.fen() !== puzzle.fen) {
-      setPosition(puzzle.fen, getOrientation(puzzle));
-    }
-  }, []);
-  const changePuzzle = (puzzle2) => {
-    dispatch({ type: "INITIALIZE", payload: { puzzle: puzzle2 } });
-    setPosition(puzzle2.fen, getOrientation(puzzle2));
-  };
+    changePuzzle(puzzle);
+  }, [JSON.stringify(puzzle), changePuzzle]);
   useEffect(() => {
     if (gameContext && game.fen() === puzzle.fen && state.needCpuMove) {
       setTimeout(
@@ -200,18 +209,33 @@ var useChessPuzzle = (puzzle, onSolve, onFail) => {
   if (!gameContext) {
     throw new Error("useChessPuzzle must be used within a ChessGameContext");
   }
-  const onHint = () => {
+  const onHint = useCallback(() => {
     dispatch({ type: "TOGGLE_HINT" });
-  };
-  const puzzleContext = {
-    status: state.status,
-    changePuzzle,
-    puzzle,
-    hint: state.hint,
-    onHint,
-    nextMove: state.nextMove,
-    isPlayerTurn: state.isPlayerTurn
-  };
+  }, []);
+  const puzzleContext = 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(() => {
     var _a2, _b, _c;
     if (((_a2 = game == null ? void 0 : game.history()) == null ? void 0 : _a2.length) <= 0 + (puzzle.makeFirstMove ? 1 : 0)) {
@@ -222,8 +246,6 @@ var useChessPuzzle = (puzzle, onSolve, onFail) => {
         type: "PLAYER_MOVE",
         payload: {
           move: ((_c = (_b = gameContext == null ? void 0 : gameContext.game) == null ? void 0 : _b.history({ verbose: true })) == null ? void 0 : _c.pop()) ?? null,
-          onSolve,
-          onFail,
           puzzleContext,
           game
         }
@@ -233,6 +255,18 @@ var useChessPuzzle = (puzzle, onSolve, onFail) => {
       });
     }
   }, [(_a = game == null ? void 0 : game.history()) == null ? void 0 : _a.length]);
+  useEffect(() => {
+    if (state.status === "solved" && !state.onSolveInvoked && onSolve) {
+      onSolve(puzzleContext);
+      dispatch({ type: "MARK_SOLVE_INVOKED" });
+    }
+  }, [state.status, state.onSolveInvoked]);
+  useEffect(() => {
+    if (state.status === "failed" && !state.onFailInvoked && onFail) {
+      onFail(puzzleContext);
+      dispatch({ type: "MARK_FAIL_INVOKED" });
+    }
+  }, [state.status, state.onFailInvoked]);
   return puzzleContext;
 };
 
@@ -320,7 +354,7 @@ var Reset = ({
   const { changePuzzle, status } = puzzleContext;
   const handleClick = () => {
     changePuzzle(puzzle || puzzleContext.puzzle);
-    onReset == null ? void 0 : onReset();
+    onReset == null ? void 0 : onReset(puzzleContext);
   };
   if (!showOn.includes(status)) {
     return null;

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ChessPuzzle/parts/Root.tsx","../src/utils/index.ts","../src/hooks/useChessPuzzle.ts","../src/hooks/reducer.ts","../src/hooks/useChessPuzzleContext.ts","../src/components/ChessPuzzle/parts/PuzzleBoard.tsx","../src/components/ChessPuzzle/parts/Reset.tsx","../src/components/ChessPuzzle/parts/Hint.tsx","../src/components/ChessPuzzle/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Puzzle, getOrientation } from \"../../../utils\";\nimport {\n  ChessPuzzleContextType,\n  useChessPuzzle,\n} from \"../../../hooks/useChessPuzzle\";\nimport { ChessGame } from \"@react-chess-tools/react-chess-game\";\nimport { ChessPuzzleContext } from \"../../../hooks/useChessPuzzleContext\";\n\nexport interface RootProps {\n  puzzle: Puzzle;\n  onSolve?: (puzzleContext: ChessPuzzleContextType) => void;\n  onFail?: (puzzleContext: ChessPuzzleContextType) => void;\n}\n\nconst PuzzleRoot: React.FC<React.PropsWithChildren<RootProps>> = ({\n  puzzle,\n  onSolve,\n  onFail,\n  children,\n}) => {\n  const context = useChessPuzzle(puzzle, onSolve, onFail);\n\n  return (\n    <ChessPuzzleContext.Provider value={context}>\n      {children}\n    </ChessPuzzleContext.Provider>\n  );\n};\n\nexport const Root: React.FC<React.PropsWithChildren<RootProps>> = ({\n  puzzle,\n  onSolve,\n  onFail,\n  children,\n}) => {\n  return (\n    <ChessGame.Root fen={puzzle.fen} orientation={getOrientation(puzzle)}>\n      <PuzzleRoot puzzle={puzzle} onSolve={onSolve} onFail={onFail}>\n        {children}\n      </PuzzleRoot>\n    </ChessGame.Root>\n  );\n};\n","import { type Color, Chess, Move } from \"chess.js\";\nimport React, { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport _ from \"lodash\";\n\nexport type Status = \"not-started\" | \"in-progress\" | \"solved\" | \"failed\";\n\nexport type Hint = \"none\" | \"piece\" | \"move\";\n\nexport type Puzzle = {\n  fen: string;\n  moves: string[];\n  // if the first move of the puzzle has to be made by the cpu, as in chess.com puzzles\n  makeFirstMove?: boolean;\n};\n\nconst FAIL_COLOR = \"rgba(201, 52, 48, 0.5)\";\nconst SUCCESS_COLOR = \"rgba(172, 206, 89, 0.5)\";\nconst HINT_COLOR = \"rgba(27, 172, 166, 0.5)\";\n\nexport const getOrientation = (puzzle: Puzzle): Color => {\n  const fen = puzzle.fen;\n  const game = new Chess(fen);\n  if (puzzle.makeFirstMove) {\n    game.move(puzzle.moves[0]);\n  }\n  return game.turn();\n};\n\ninterface ClickableElement extends ReactElement {\n  props: {\n    onClick?: () => void;\n  };\n}\n\nexport const isClickableElement = (\n  element: ReactNode,\n): element is ClickableElement => React.isValidElement(element);\n\nexport const getCustomSquareStyles = (\n  status: Status,\n  hint: Hint,\n  isPlayerTurn: boolean,\n  game: Chess,\n  nextMove?: Move | null,\n) => {\n  const customSquareStyles: Record<string, CSSProperties> = {};\n\n  const lastMove = _.last(game.history({ verbose: true }));\n\n  if (status === \"failed\" && lastMove) {\n    customSquareStyles[lastMove.from] = {\n      backgroundColor: FAIL_COLOR,\n    };\n    customSquareStyles[lastMove.to] = {\n      backgroundColor: FAIL_COLOR,\n    };\n  }\n\n  if (\n    lastMove &&\n    (status === \"solved\" || (status !== \"failed\" && !isPlayerTurn))\n  ) {\n    customSquareStyles[lastMove.from] = {\n      backgroundColor: SUCCESS_COLOR,\n    };\n    customSquareStyles[lastMove.to] = {\n      backgroundColor: SUCCESS_COLOR,\n    };\n  }\n\n  if (hint === \"piece\") {\n    if (nextMove) {\n      customSquareStyles[nextMove.from] = {\n        backgroundColor: HINT_COLOR,\n      };\n    }\n  }\n\n  if (hint === \"move\") {\n    if (nextMove) {\n      customSquareStyles[nextMove.from] = {\n        backgroundColor: HINT_COLOR,\n      };\n      customSquareStyles[nextMove.to] = {\n        backgroundColor: HINT_COLOR,\n      };\n    }\n  }\n\n  return customSquareStyles;\n};\n\nexport const stringToMove = (game: Chess, move: string | null | undefined) => {\n  const copy = new Chess(game.fen());\n  if (move === null || move === undefined) {\n    return null;\n  }\n  try {\n    return copy.move(move);\n  } catch (e) {\n    return null;\n  }\n};\n","import { useEffect, useReducer } from \"react\";\nimport { initializePuzzle, reducer } from \"./reducer\";\nimport { getOrientation, type Puzzle, type Hint, type Status } from \"../utils\";\nimport { useChessGameContext } from \"@react-chess-tools/react-chess-game\";\nimport { useChessPuzzleContext } from \"./useChessPuzzleContext\";\n\nexport type ChessPuzzleContextType = {\n  status: Status;\n  changePuzzle: (puzzle: Puzzle) => void;\n  puzzle: Puzzle;\n  hint: Hint;\n  nextMove?: string | null;\n  isPlayerTurn: boolean;\n  onHint: () => void;\n};\n\nexport const useChessPuzzle = (\n  puzzle: Puzzle,\n  onSolve?: (puzzleContext: ChessPuzzleContextType) => void,\n  onFail?: (puzzleContext: ChessPuzzleContextType) => void,\n): ChessPuzzleContextType => {\n  const gameContext = useChessGameContext();\n\n  const [state, dispatch] = useReducer(reducer, { puzzle }, initializePuzzle);\n\n  const {\n    game,\n    methods: { makeMove, setPosition },\n  } = gameContext;\n\n  useEffect(() => {\n    if (gameContext && game.fen() !== puzzle.fen) {\n      setPosition(puzzle.fen, getOrientation(puzzle));\n    }\n  }, []);\n\n  const changePuzzle = (puzzle: Puzzle) => {\n    dispatch({ type: \"INITIALIZE\", payload: { puzzle } });\n    setPosition(puzzle.fen, getOrientation(puzzle));\n  };\n\n  useEffect(() => {\n    if (gameContext && game.fen() === puzzle.fen && state.needCpuMove) {\n      setTimeout(\n        () =>\n          dispatch({\n            type: \"CPU_MOVE\",\n          }),\n        0,\n      );\n    }\n  }, [gameContext, state.needCpuMove]);\n\n  useEffect(() => {\n    if (state.cpuMove) {\n      makeMove(state.cpuMove);\n    }\n  }, [state.cpuMove]);\n\n  if (!gameContext) {\n    throw new Error(\"useChessPuzzle must be used within a ChessGameContext\");\n  }\n\n  const onHint = () => {\n    dispatch({ type: \"TOGGLE_HINT\" });\n  };\n\n  const puzzleContext: ChessPuzzleContextType = {\n    status: state.status,\n    changePuzzle,\n    puzzle,\n    hint: state.hint,\n    onHint,\n    nextMove: state.nextMove,\n    isPlayerTurn: state.isPlayerTurn,\n  };\n\n  useEffect(() => {\n    if (game?.history()?.length <= 0 + (puzzle.makeFirstMove ? 1 : 0)) {\n      return;\n    }\n    if (game.history().length % 2 === (puzzle.makeFirstMove ? 0 : 1)) {\n      dispatch({\n        type: \"PLAYER_MOVE\",\n        payload: {\n          move: gameContext?.game?.history({ verbose: true })?.pop() ?? null,\n          onSolve,\n          onFail,\n          puzzleContext,\n          game: game,\n        },\n      });\n\n      dispatch({\n        type: \"CPU_MOVE\",\n      });\n    }\n  }, [game?.history()?.length]);\n\n  return puzzleContext;\n};\n","import { Chess, Move } from \"chess.js\";\nimport { type Puzzle, type Hint, type Status } from \"../utils\";\nimport { ChessPuzzleContextType } from \"./useChessPuzzle\";\n\nexport type State = {\n  puzzle: Puzzle;\n  currentMoveIndex: number;\n  status: Status;\n  cpuMove?: string | null;\n  nextMove?: string | null;\n  hint: Hint;\n  needCpuMove: boolean;\n  isPlayerTurn: boolean;\n};\n\nexport type Action =\n  | {\n      type: \"INITIALIZE\";\n      payload: {\n        puzzle: Puzzle;\n      };\n    }\n  | {\n      type: \"RESET\";\n    }\n  | { type: \"TOGGLE_HINT\" }\n  | {\n      type: \"CPU_MOVE\";\n    }\n  | {\n      type: \"PLAYER_MOVE\";\n      payload: {\n        move?: Move | null;\n        onSolve?: (puzzleContext: ChessPuzzleContextType) => void;\n        onFail?: (puzzleContext: ChessPuzzleContextType) => void;\n        puzzleContext: ChessPuzzleContextType;\n        game: Chess;\n      };\n    };\n\nexport const initializePuzzle = ({ puzzle }: { puzzle: Puzzle }): State => {\n  return {\n    puzzle,\n    currentMoveIndex: 0,\n    status: \"not-started\",\n    nextMove: puzzle.moves[0],\n    hint: \"none\",\n    cpuMove: null,\n    needCpuMove: !!puzzle.makeFirstMove,\n    isPlayerTurn: !puzzle.makeFirstMove,\n  };\n};\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"INITIALIZE\":\n      return {\n        ...state,\n        ...initializePuzzle(action.payload),\n      };\n    case \"RESET\":\n      return {\n        ...state,\n        ...initializePuzzle({\n          puzzle: state.puzzle,\n        }),\n      };\n    case \"TOGGLE_HINT\":\n      if (state.hint === \"none\") {\n        return { ...state, hint: \"piece\" };\n      }\n      return { ...state, hint: \"move\" };\n    case \"CPU_MOVE\":\n      if (state.isPlayerTurn) {\n        return state;\n      }\n      if ([\"solved\", \"failed\"].includes(state.status)) {\n        return state;\n      }\n\n      return {\n        ...state,\n        currentMoveIndex: state.currentMoveIndex + 1,\n        cpuMove: state.puzzle.moves[state.currentMoveIndex],\n        nextMove:\n          state.currentMoveIndex < state.puzzle.moves.length - 1\n            ? state.puzzle.moves[state.currentMoveIndex + 1]\n            : null,\n        needCpuMove: false,\n        isPlayerTurn: true,\n        status: \"in-progress\",\n      };\n\n    case \"PLAYER_MOVE\": {\n      const { move, onSolve, onFail, puzzleContext } = action.payload;\n\n      const isMoveRight = [move?.san, move?.lan].includes(\n        state?.nextMove || \"\",\n      );\n      const isPuzzleSolved =\n        state.currentMoveIndex === state.puzzle.moves.length - 1;\n\n      if (!isMoveRight) {\n        if (onFail) {\n          onFail(puzzleContext);\n        }\n        return {\n          ...state,\n          status: \"failed\",\n          nextMove: null,\n          hint: \"none\",\n          isPlayerTurn: false,\n        };\n      }\n\n      if (isPuzzleSolved) {\n        if (onSolve) {\n          onSolve(puzzleContext);\n        }\n\n        return {\n          ...state,\n          status: \"solved\",\n          nextMove: null,\n          hint: \"none\",\n          isPlayerTurn: false,\n        };\n      }\n\n      return {\n        ...state,\n        hint: \"none\",\n        currentMoveIndex: state.currentMoveIndex + 1,\n        nextMove: state.puzzle.moves[state.currentMoveIndex + 1],\n        status: \"in-progress\",\n        needCpuMove: true,\n        isPlayerTurn: false,\n      };\n    }\n\n    default:\n      return state;\n  }\n};\n","import React from \"react\";\nimport { useChessPuzzle } from \"./useChessPuzzle\";\n\nexport const ChessPuzzleContext = React.createContext<ReturnType<\n  typeof useChessPuzzle\n> | null>(null);\n\nexport const useChessPuzzleContext = () => {\n  const context = React.useContext(ChessPuzzleContext);\n  if (!context) {\n    throw new Error(\n      \"useChessGameContext must be used within a ChessGameProvider\",\n    );\n  }\n  return context;\n};\n","import React from \"react\";\nimport {\n  ChessGame,\n  useChessGameContext,\n} from \"@react-chess-tools/react-chess-game\";\nimport { getCustomSquareStyles, stringToMove } from \"../../../utils\";\nimport { useChessPuzzleContext } from \"../../..\";\n\nexport interface PuzzleBoardProps\n  extends React.ComponentProps<typeof ChessGame.Board> {}\nexport const PuzzleBoard: React.FC<PuzzleBoardProps> = ({ ...rest }) => {\n  const puzzleContext = useChessPuzzleContext();\n  const gameContext = useChessGameContext();\n\n  if (!puzzleContext) {\n    throw new Error(\"PuzzleContext not found\");\n  }\n  if (!gameContext) {\n    throw new Error(\"ChessGameContext not found\");\n  }\n\n  const { game } = gameContext;\n  const { status, hint, isPlayerTurn, nextMove } = puzzleContext;\n\n  return (\n    <ChessGame.Board\n      customSquareStyles={getCustomSquareStyles(\n        status,\n        hint,\n        isPlayerTurn,\n        game,\n        stringToMove(game, nextMove),\n      )}\n      {...rest}\n    />\n  );\n};\n","import React from \"react\";\nimport { isClickableElement, type Puzzle, type Status } from \"../../../utils\";\nimport { useChessPuzzleContext } from \"../../..\";\n\nexport interface ResetProps {\n  asChild?: boolean;\n  puzzle?: Puzzle;\n  onReset?: () => void;\n  showOn?: Status[];\n}\n\nconst defaultShowOn: Status[] = [\"failed\", \"solved\"];\n\nexport const Reset: React.FC<React.PropsWithChildren<ResetProps>> = ({\n  children,\n  asChild,\n  puzzle,\n  onReset,\n  showOn = defaultShowOn,\n}) => {\n  const puzzleContext = useChessPuzzleContext();\n  if (!puzzleContext) {\n    throw new Error(\"PuzzleContext not found\");\n  }\n  const { changePuzzle, status } = puzzleContext;\n  const handleClick = () => {\n    changePuzzle(puzzle || puzzleContext.puzzle);\n    onReset?.();\n  };\n\n  if (!showOn.includes(status)) {\n    return null;\n  }\n\n  if (asChild) {\n    const child = React.Children.only(children);\n    if (isClickableElement(child)) {\n      return React.cloneElement(child, {\n        onClick: handleClick,\n      });\n    } else {\n      throw new Error(\"Change child must be a clickable element\");\n    }\n  }\n\n  return (\n    <button type=\"button\" onClick={handleClick}>\n      {children}\n    </button>\n  );\n};\n","import React from \"react\";\nimport { Status, isClickableElement } from \"../../../utils\";\nimport { useChessPuzzleContext } from \"../../..\";\n\nexport interface HintProps {\n  asChild?: boolean;\n  showOn?: Status[];\n}\n\nconst defaultShowOn: Status[] = [\"not-started\", \"in-progress\"];\n\nexport const Hint: React.FC<React.PropsWithChildren<HintProps>> = ({\n  children,\n  asChild,\n  showOn = defaultShowOn,\n}) => {\n  const puzzleContext = useChessPuzzleContext();\n  if (!puzzleContext) {\n    throw new Error(\"PuzzleContext not found\");\n  }\n  const { onHint, status } = puzzleContext;\n  const handleClick = () => {\n    onHint();\n  };\n\n  if (!showOn.includes(status)) {\n    return null;\n  }\n\n  if (asChild) {\n    const child = React.Children.only(children);\n    if (isClickableElement(child)) {\n      return React.cloneElement(child, {\n        onClick: handleClick,\n      });\n    } else {\n      throw new Error(\"Change child must be a clickable element\");\n    }\n  }\n\n  return (\n    <button type=\"button\" onClick={handleClick}>\n      {children}\n    </button>\n  );\n};\n","import { Root } from \"./parts/Root\";\nimport { PuzzleBoard } from \"./parts/PuzzleBoard\";\nimport { Reset } from \"./parts/Reset\";\nimport { Hint } from \"./parts/Hint\";\n\nexport const ChessPuzzle = {\n  Root,\n  Board: PuzzleBoard,\n  Reset,\n  Hint,\n};\n"],"mappings":"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","names":["React","puzzle","_a","React","React","React","ChessGame","useChessGameContext","useChessGameContext","React","ChessGame","React","React","React","defaultShowOn","React"]}
+{"version":3,"sources":["../src/components/ChessPuzzle/parts/Root.tsx","../src/utils/index.ts","../src/hooks/useChessPuzzle.ts","../src/hooks/reducer.ts","../src/hooks/useChessPuzzleContext.ts","../src/components/ChessPuzzle/parts/PuzzleBoard.tsx","../src/components/ChessPuzzle/parts/Reset.tsx","../src/components/ChessPuzzle/parts/Hint.tsx","../src/components/ChessPuzzle/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Puzzle, getOrientation } from \"../../../utils\";\nimport {\n  ChessPuzzleContextType,\n  useChessPuzzle,\n} from \"../../../hooks/useChessPuzzle\";\nimport { ChessGame } from \"@react-chess-tools/react-chess-game\";\nimport { ChessPuzzleContext } from \"../../../hooks/useChessPuzzleContext\";\n\nexport interface RootProps {\n  puzzle: Puzzle;\n  onSolve?: (puzzleContext: ChessPuzzleContextType) => void;\n  onFail?: (puzzleContext: ChessPuzzleContextType) => void;\n}\n\nconst PuzzleRoot: React.FC<React.PropsWithChildren<RootProps>> = ({\n  puzzle,\n  onSolve,\n  onFail,\n  children,\n}) => {\n  const context = useChessPuzzle(puzzle, onSolve, onFail);\n\n  return (\n    <ChessPuzzleContext.Provider value={context}>\n      {children}\n    </ChessPuzzleContext.Provider>\n  );\n};\n\nexport const Root: React.FC<React.PropsWithChildren<RootProps>> = ({\n  puzzle,\n  onSolve,\n  onFail,\n  children,\n}) => {\n  return (\n    <ChessGame.Root fen={puzzle.fen} orientation={getOrientation(puzzle)}>\n      <PuzzleRoot puzzle={puzzle} onSolve={onSolve} onFail={onFail}>\n        {children}\n      </PuzzleRoot>\n    </ChessGame.Root>\n  );\n};\n","import { type Color, Chess, Move } from \"chess.js\";\nimport React, { CSSProperties, ReactElement, ReactNode } from \"react\";\nimport _ from \"lodash\";\n\nexport type Status = \"not-started\" | \"in-progress\" | \"solved\" | \"failed\";\n\nexport type Hint = \"none\" | \"piece\" | \"move\";\n\nexport type Puzzle = {\n  fen: string;\n  moves: string[];\n  // if the first move of the puzzle has to be made by the cpu, as in chess.com puzzles\n  makeFirstMove?: boolean;\n};\n\nconst FAIL_COLOR = \"rgba(201, 52, 48, 0.5)\";\nconst SUCCESS_COLOR = \"rgba(172, 206, 89, 0.5)\";\nconst HINT_COLOR = \"rgba(27, 172, 166, 0.5)\";\n\nexport const getOrientation = (puzzle: Puzzle): Color => {\n  const fen = puzzle.fen;\n  const game = new Chess(fen);\n  if (puzzle.makeFirstMove) {\n    game.move(puzzle.moves[0]);\n  }\n  return game.turn();\n};\n\ninterface ClickableElement extends ReactElement {\n  props: {\n    onClick?: () => void;\n  };\n}\n\nexport const isClickableElement = (\n  element: ReactNode,\n): element is ClickableElement => React.isValidElement(element);\n\nexport const getCustomSquareStyles = (\n  status: Status,\n  hint: Hint,\n  isPlayerTurn: boolean,\n  game: Chess,\n  nextMove?: Move | null,\n) => {\n  const customSquareStyles: Record<string, CSSProperties> = {};\n\n  const lastMove = _.last(game.history({ verbose: true }));\n\n  if (status === \"failed\" && lastMove) {\n    customSquareStyles[lastMove.from] = {\n      backgroundColor: FAIL_COLOR,\n    };\n    customSquareStyles[lastMove.to] = {\n      backgroundColor: FAIL_COLOR,\n    };\n  }\n\n  if (\n    lastMove &&\n    (status === \"solved\" || (status !== \"failed\" && !isPlayerTurn))\n  ) {\n    customSquareStyles[lastMove.from] = {\n      backgroundColor: SUCCESS_COLOR,\n    };\n    customSquareStyles[lastMove.to] = {\n      backgroundColor: SUCCESS_COLOR,\n    };\n  }\n\n  if (hint === \"piece\") {\n    if (nextMove) {\n      customSquareStyles[nextMove.from] = {\n        backgroundColor: HINT_COLOR,\n      };\n    }\n  }\n\n  if (hint === \"move\") {\n    if (nextMove) {\n      customSquareStyles[nextMove.from] = {\n        backgroundColor: HINT_COLOR,\n      };\n      customSquareStyles[nextMove.to] = {\n        backgroundColor: HINT_COLOR,\n      };\n    }\n  }\n\n  return customSquareStyles;\n};\n\nexport const stringToMove = (game: Chess, move: string | null | undefined) => {\n  const copy = new Chess(game.fen());\n  if (move === null || move === undefined) {\n    return null;\n  }\n  try {\n    return copy.move(move);\n  } catch (e) {\n    return null;\n  }\n};\n","import { useEffect, useReducer, useCallback, useMemo } from \"react\";\nimport { initializePuzzle, reducer } from \"./reducer\";\nimport { getOrientation, type Puzzle, type Hint, type Status } from \"../utils\";\nimport { useChessGameContext } from \"@react-chess-tools/react-chess-game\";\n\nexport type ChessPuzzleContextType = {\n  status: Status;\n  changePuzzle: (puzzle: Puzzle) => void;\n  puzzle: Puzzle;\n  hint: Hint;\n  nextMove?: string | null;\n  isPlayerTurn: boolean;\n  onHint: () => void;\n  puzzleState: Status;\n  movesPlayed: number;\n  totalMoves: number;\n};\n\nexport const useChessPuzzle = (\n  puzzle: Puzzle,\n  onSolve?: (puzzleContext: ChessPuzzleContextType) => void,\n  onFail?: (puzzleContext: ChessPuzzleContextType) => void,\n): ChessPuzzleContextType => {\n  const gameContext = useChessGameContext();\n\n  const [state, dispatch] = useReducer(reducer, { puzzle }, initializePuzzle);\n\n  const {\n    game,\n    methods: { makeMove, setPosition },\n  } = gameContext;\n\n  const changePuzzle = useCallback(\n    (puzzle: Puzzle) => {\n      setPosition(puzzle.fen, getOrientation(puzzle));\n      dispatch({ type: \"INITIALIZE\", payload: { puzzle } });\n    },\n    [setPosition],\n  );\n\n  useEffect(() => {\n    changePuzzle(puzzle);\n  }, [JSON.stringify(puzzle), changePuzzle]);\n\n  useEffect(() => {\n    if (gameContext && game.fen() === puzzle.fen && state.needCpuMove) {\n      setTimeout(\n        () =>\n          dispatch({\n            type: \"CPU_MOVE\",\n          }),\n        0,\n      );\n    }\n  }, [gameContext, state.needCpuMove]);\n\n  useEffect(() => {\n    if (state.cpuMove) {\n      makeMove(state.cpuMove);\n    }\n  }, [state.cpuMove]);\n\n  if (!gameContext) {\n    throw new Error(\"useChessPuzzle must be used within a ChessGameContext\");\n  }\n\n  const onHint = useCallback(() => {\n    dispatch({ type: \"TOGGLE_HINT\" });\n  }, []);\n\n  const puzzleContext: ChessPuzzleContextType = useMemo(\n    () => ({\n      status: state.status,\n      changePuzzle,\n      puzzle,\n      hint: state.hint,\n      onHint,\n      nextMove: state.nextMove,\n      isPlayerTurn: state.isPlayerTurn,\n      puzzleState: state.status,\n      movesPlayed: state.currentMoveIndex,\n      totalMoves: puzzle.moves.length,\n    }),\n    [\n      state.status,\n      changePuzzle,\n      puzzle,\n      state.hint,\n      onHint,\n      state.nextMove,\n      state.isPlayerTurn,\n      state.currentMoveIndex,\n    ],\n  );\n\n  useEffect(() => {\n    if (game?.history()?.length <= 0 + (puzzle.makeFirstMove ? 1 : 0)) {\n      return;\n    }\n    if (game.history().length % 2 === (puzzle.makeFirstMove ? 0 : 1)) {\n      dispatch({\n        type: \"PLAYER_MOVE\",\n        payload: {\n          move: gameContext?.game?.history({ verbose: true })?.pop() ?? null,\n          puzzleContext,\n          game: game,\n        },\n      });\n\n      dispatch({\n        type: \"CPU_MOVE\",\n      });\n    }\n  }, [game?.history()?.length]);\n\n  useEffect(() => {\n    if (state.status === \"solved\" && !state.onSolveInvoked && onSolve) {\n      onSolve(puzzleContext);\n      dispatch({ type: \"MARK_SOLVE_INVOKED\" });\n    }\n  }, [state.status, state.onSolveInvoked]);\n\n  useEffect(() => {\n    if (state.status === \"failed\" && !state.onFailInvoked && onFail) {\n      onFail(puzzleContext);\n      dispatch({ type: \"MARK_FAIL_INVOKED\" });\n    }\n  }, [state.status, state.onFailInvoked]);\n\n  return puzzleContext;\n};\n","import { Chess, Move } from \"chess.js\";\nimport { type Puzzle, type Hint, type Status } from \"../utils\";\nimport { ChessPuzzleContextType } from \"./useChessPuzzle\";\n\nexport type State = {\n  puzzle: Puzzle;\n  currentMoveIndex: number;\n  status: Status;\n  cpuMove?: string | null;\n  nextMove?: string | null;\n  hint: Hint;\n  needCpuMove: boolean;\n  isPlayerTurn: boolean;\n  onSolveInvoked: boolean;\n  onFailInvoked: boolean;\n};\n\nexport type Action =\n  | {\n      type: \"INITIALIZE\";\n      payload: {\n        puzzle: Puzzle;\n      };\n    }\n  | {\n      type: \"RESET\";\n    }\n  | { type: \"TOGGLE_HINT\" }\n  | {\n      type: \"CPU_MOVE\";\n    }\n  | {\n      type: \"PLAYER_MOVE\";\n      payload: {\n        move?: Move | null;\n        puzzleContext: ChessPuzzleContextType;\n        game: Chess;\n      };\n    }\n  | { type: \"MARK_SOLVE_INVOKED\" }\n  | { type: \"MARK_FAIL_INVOKED\" };\n\nexport const initializePuzzle = ({ puzzle }: { puzzle: Puzzle }): State => {\n  return {\n    puzzle,\n    currentMoveIndex: 0,\n    status: \"not-started\",\n    nextMove: puzzle.moves[0],\n    hint: \"none\",\n    cpuMove: null,\n    needCpuMove: !!puzzle.makeFirstMove,\n    isPlayerTurn: !puzzle.makeFirstMove,\n    onSolveInvoked: false,\n    onFailInvoked: false,\n  };\n};\n\nexport const reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"INITIALIZE\":\n      return {\n        ...state,\n        ...initializePuzzle(action.payload),\n      };\n    case \"RESET\":\n      return {\n        ...state,\n        ...initializePuzzle({\n          puzzle: state.puzzle,\n        }),\n      };\n    case \"TOGGLE_HINT\":\n      if (state.hint === \"none\") {\n        return { ...state, hint: \"piece\" };\n      }\n      return { ...state, hint: \"move\" };\n    case \"CPU_MOVE\":\n      if (state.isPlayerTurn) {\n        return state;\n      }\n      if ([\"solved\", \"failed\"].includes(state.status)) {\n        return state;\n      }\n\n      return {\n        ...state,\n        currentMoveIndex: state.currentMoveIndex + 1,\n        cpuMove: state.puzzle.moves[state.currentMoveIndex],\n        nextMove:\n          state.currentMoveIndex < state.puzzle.moves.length - 1\n            ? state.puzzle.moves[state.currentMoveIndex + 1]\n            : null,\n        needCpuMove: false,\n        isPlayerTurn: true,\n        status: \"in-progress\",\n      };\n\n    case \"PLAYER_MOVE\": {\n      const { move } = action.payload;\n\n      const isMoveRight = [move?.san, move?.lan].includes(\n        state?.nextMove || \"\",\n      );\n      const isPuzzleSolved =\n        state.currentMoveIndex === state.puzzle.moves.length - 1;\n\n      if (!isMoveRight) {\n        return {\n          ...state,\n          status: \"failed\",\n          nextMove: null,\n          hint: \"none\",\n          isPlayerTurn: false,\n          onFailInvoked: false,\n        };\n      }\n\n      if (isPuzzleSolved) {\n        return {\n          ...state,\n          status: \"solved\",\n          nextMove: null,\n          hint: \"none\",\n          isPlayerTurn: false,\n          onSolveInvoked: false,\n        };\n      }\n\n      return {\n        ...state,\n        hint: \"none\",\n        currentMoveIndex: state.currentMoveIndex + 1,\n        nextMove: state.puzzle.moves[state.currentMoveIndex + 1],\n        status: \"in-progress\",\n        needCpuMove: true,\n        isPlayerTurn: false,\n      };\n    }\n\n    case \"MARK_SOLVE_INVOKED\":\n      return {\n        ...state,\n        onSolveInvoked: true,\n      };\n\n    case \"MARK_FAIL_INVOKED\":\n      return {\n        ...state,\n        onFailInvoked: true,\n      };\n\n    default:\n      return state;\n  }\n};\n","import React from \"react\";\nimport { useChessPuzzle } from \"./useChessPuzzle\";\n\nexport const ChessPuzzleContext = React.createContext<ReturnType<\n  typeof useChessPuzzle\n> | null>(null);\n\nexport const useChessPuzzleContext = () => {\n  const context = React.useContext(ChessPuzzleContext);\n  if (!context) {\n    throw new Error(\n      \"useChessGameContext must be used within a ChessGameProvider\",\n    );\n  }\n  return context;\n};\n","import React from \"react\";\nimport {\n  ChessGame,\n  useChessGameContext,\n} from \"@react-chess-tools/react-chess-game\";\nimport { getCustomSquareStyles, stringToMove } from \"../../../utils\";\nimport { useChessPuzzleContext } from \"../../..\";\n\nexport interface PuzzleBoardProps\n  extends React.ComponentProps<typeof ChessGame.Board> {}\nexport const PuzzleBoard: React.FC<PuzzleBoardProps> = ({ ...rest }) => {\n  const puzzleContext = useChessPuzzleContext();\n  const gameContext = useChessGameContext();\n\n  if (!puzzleContext) {\n    throw new Error(\"PuzzleContext not found\");\n  }\n  if (!gameContext) {\n    throw new Error(\"ChessGameContext not found\");\n  }\n\n  const { game } = gameContext;\n  const { status, hint, isPlayerTurn, nextMove } = puzzleContext;\n\n  return (\n    <ChessGame.Board\n      customSquareStyles={getCustomSquareStyles(\n        status,\n        hint,\n        isPlayerTurn,\n        game,\n        stringToMove(game, nextMove),\n      )}\n      {...rest}\n    />\n  );\n};\n","import React from \"react\";\nimport { isClickableElement, type Puzzle, type Status } from \"../../../utils\";\nimport { useChessPuzzleContext, type ChessPuzzleContextType } from \"../../..\";\n\nexport interface ResetProps {\n  asChild?: boolean;\n  puzzle?: Puzzle;\n  onReset?: (puzzleContext: ChessPuzzleContextType) => void;\n  showOn?: Status[];\n}\n\nconst defaultShowOn: Status[] = [\"failed\", \"solved\"];\n\nexport const Reset: React.FC<React.PropsWithChildren<ResetProps>> = ({\n  children,\n  asChild,\n  puzzle,\n  onReset,\n  showOn = defaultShowOn,\n}) => {\n  const puzzleContext = useChessPuzzleContext();\n  if (!puzzleContext) {\n    throw new Error(\"PuzzleContext not found\");\n  }\n  const { changePuzzle, status } = puzzleContext;\n  const handleClick = () => {\n    changePuzzle(puzzle || puzzleContext.puzzle);\n    onReset?.(puzzleContext);\n  };\n\n  if (!showOn.includes(status)) {\n    return null;\n  }\n\n  if (asChild) {\n    const child = React.Children.only(children);\n    if (isClickableElement(child)) {\n      return React.cloneElement(child, {\n        onClick: handleClick,\n      });\n    } else {\n      throw new Error(\"Change child must be a clickable element\");\n    }\n  }\n\n  return (\n    <button type=\"button\" onClick={handleClick}>\n      {children}\n    </button>\n  );\n};\n","import React from \"react\";\nimport { Status, isClickableElement } from \"../../../utils\";\nimport { useChessPuzzleContext } from \"../../..\";\n\nexport interface HintProps {\n  asChild?: boolean;\n  showOn?: Status[];\n}\n\nconst defaultShowOn: Status[] = [\"not-started\", \"in-progress\"];\n\nexport const Hint: React.FC<React.PropsWithChildren<HintProps>> = ({\n  children,\n  asChild,\n  showOn = defaultShowOn,\n}) => {\n  const puzzleContext = useChessPuzzleContext();\n  if (!puzzleContext) {\n    throw new Error(\"PuzzleContext not found\");\n  }\n  const { onHint, status } = puzzleContext;\n  const handleClick = () => {\n    onHint();\n  };\n\n  if (!showOn.includes(status)) {\n    return null;\n  }\n\n  if (asChild) {\n    const child = React.Children.only(children);\n    if (isClickableElement(child)) {\n      return React.cloneElement(child, {\n        onClick: handleClick,\n      });\n    } else {\n      throw new Error(\"Change child must be a clickable element\");\n    }\n  }\n\n  return (\n    <button type=\"button\" onClick={handleClick}>\n      {children}\n    </button>\n  );\n};\n","import { Root } from \"./parts/Root\";\nimport { PuzzleBoard } from \"./parts/PuzzleBoard\";\nimport { Reset } from \"./parts/Reset\";\nimport { Hint } from \"./parts/Hint\";\n\nexport const ChessPuzzle = {\n  Root,\n  Board: PuzzleBoard,\n  Reset,\n  Hint,\n};\n"],"mappings":"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","names":["React","puzzle","_a","React","React","React","ChessGame","useChessGameContext","useChessGameContext","React","ChessGame","React","React","React","defaultShowOn","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-chess-tools/react-chess-puzzle",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "A lightweight, customizable React component library for rendering and interacting with chess puzzles.",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -32,7 +32,7 @@
   "author": "Daniele Cammareri <daniele.cammareri@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@react-chess-tools/react-chess-game": "0.4.0",
+    "@react-chess-tools/react-chess-game": "0.4.1",
     "chess.js": "^1.0.0-beta.8",
     "lodash": "^4.17.21"
   },

package/src/components/ChessPuzzle/parts/Reset.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { isClickableElement, type Puzzle, type Status } from "../../../utils";
-import { useChessPuzzleContext } from "../../..";
+import { useChessPuzzleContext, type ChessPuzzleContextType } from "../../..";
 
 export interface ResetProps {
   asChild?: boolean;
   puzzle?: Puzzle;
-  onReset?: () => void;
+  onReset?: (puzzleContext: ChessPuzzleContextType) => void;
   showOn?: Status[];
 }
 
@@ -25,7 +25,7 @@ export const Reset: React.FC<React.PropsWithChildren<ResetProps>> = ({
   const { changePuzzle, status } = puzzleContext;
   const handleClick = () => {
     changePuzzle(puzzle || puzzleContext.puzzle);
-    onReset?.();
+    onReset?.(puzzleContext);
   };
 
   if (!showOn.includes(status)) {

package/src/hooks/__tests__/reducer.test.ts

@@ -0,0 +1,274 @@
+import { Chess, Move } from "chess.js";
+import { reducer, initializePuzzle, State, Action } from "../reducer";
+import { Puzzle } from "../../utils";
+import { ChessPuzzleContextType } from "../useChessPuzzle";
+
+describe("reducer", () => {
+  // Mock puzzle data
+  const mockPuzzle: Puzzle = {
+    fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bb5"],
+    makeFirstMove: false,
+  };
+
+  const mockPuzzleWithFirstMove: Puzzle = {
+    fen: "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1",
+    moves: ["e4", "e5", "Nf3", "Nc6", "Bb5"],
+    makeFirstMove: true,
+  };
+
+  // Initial state
+  const initialState: State = {
+    puzzle: mockPuzzle,
+    currentMoveIndex: 0,
+    status: "not-started",
+    nextMove: "e4",
+    hint: "none",
+    cpuMove: null,
+    needCpuMove: false,
+    isPlayerTurn: true,
+    onSolveInvoked: false,
+    onFailInvoked: false,
+  };
+
+  describe("initializePuzzle", () => {
+    it("should initialize a puzzle correctly", () => {
+      const state = initializePuzzle({ puzzle: mockPuzzle });
+
+      expect(state).toEqual({
+        puzzle: mockPuzzle,
+        currentMoveIndex: 0,
+        status: "not-started",
+        nextMove: "e4",
+        hint: "none",
+        cpuMove: null,
+        needCpuMove: false,
+        isPlayerTurn: true,
+        onSolveInvoked: false,
+        onFailInvoked: false,
+      });
+    });
+
+    it("should set needCpuMove to true if makeFirstMove is true", () => {
+      const state = initializePuzzle({ puzzle: mockPuzzleWithFirstMove });
+
+      expect(state.needCpuMove).toBe(true);
+      expect(state.isPlayerTurn).toBe(false);
+    });
+  });
+
+  describe("INITIALIZE action", () => {
+    it("should initialize with a new puzzle", () => {
+      const action: Action = {
+        type: "INITIALIZE",
+        payload: {
+          puzzle: mockPuzzle,
+        },
+      };
+
+      const newState = reducer(initialState, action);
+
+      expect(newState).toEqual(initialState);
+    });
+  });
+
+  describe("RESET action", () => {
+    it("should reset the puzzle to initial state", () => {
+      const modifiedState: State = {
+        ...initialState,
+        currentMoveIndex: 2,
+        status: "in-progress",
+        hint: "piece",
+      };
+
+      const action: Action = {
+        type: "RESET",
+      };
+
+      const newState = reducer(modifiedState, action);
+
+      expect(newState).toEqual(initialState);
+    });
+  });
+
+  describe("TOGGLE_HINT action", () => {
+    it("should change hint from none to piece", () => {
+      const action: Action = {
+        type: "TOGGLE_HINT",
+      };
+
+      const newState = reducer(initialState, action);
+
+      expect(newState.hint).toBe("piece");
+    });
+
+    it("should change hint from piece to move", () => {
+      const stateWithPieceHint: State = {
+        ...initialState,
+        hint: "piece",
+      };
+
+      const action: Action = {
+        type: "TOGGLE_HINT",
+      };
+
+      const newState = reducer(stateWithPieceHint, action);
+
+      expect(newState.hint).toBe("move");
+    });
+  });
+
+  describe("CPU_MOVE action", () => {
+    it("should process CPU move and update state", () => {
+      const state: State = {
+        ...initialState,
+        isPlayerTurn: false,
+        needCpuMove: true,
+      };
+
+      const action: Action = {
+        type: "CPU_MOVE",
+      };
+
+      const newState = reducer(state, action);
+
+      expect(newState.currentMoveIndex).toBe(1);
+      expect(newState.cpuMove).toBe("e4");
+      expect(newState.nextMove).toBe("e5");
+      expect(newState.needCpuMove).toBe(false);
+      expect(newState.isPlayerTurn).toBe(true);
+      expect(newState.status).toBe("in-progress");
+    });
+
+    it("should not change state if it's player's turn", () => {
+      const action: Action = {
+        type: "CPU_MOVE",
+      };
+
+      const newState = reducer(initialState, action);
+
+      expect(newState).toBe(initialState);
+    });
+
+    it("should not change state if puzzle is solved or failed", () => {
+      const solvedState: State = {
+        ...initialState,
+        isPlayerTurn: false,
+        status: "solved",
+      };
+
+      const action: Action = {
+        type: "CPU_MOVE",
+      };
+
+      const newState = reducer(solvedState, action);
+
+      expect(newState).toBe(solvedState);
+    });
+
+    it("should set nextMove to null when reaching last move", () => {
+      const state: State = {
+        ...initialState,
+        isPlayerTurn: false,
+        needCpuMove: true,
+        currentMoveIndex: 4, // Last move index
+      };
+
+      const action: Action = {
+        type: "CPU_MOVE",
+      };
+
+      const newState = reducer(state, action);
+
+      expect(newState.nextMove).toBe(null);
+    });
+  });
+
+  describe("PLAYER_MOVE action", () => {
+    const game = new Chess(mockPuzzle.fen);
+    const mockContext = {} as ChessPuzzleContextType; // Mock puzzle context
+
+    it("should handle correct player move", () => {
+      const move = { san: "e4", lan: "e2e4" } as Move;
+
+      const action: Action = {
+        type: "PLAYER_MOVE",
+        payload: {
+          move,
+          puzzleContext: mockContext,
+          game,
+        },
+      };
+
+      const newState = reducer(initialState, action);
+
+      expect(newState.currentMoveIndex).toBe(1);
+      expect(newState.nextMove).toBe("e5");
+      expect(newState.hint).toBe("none");
+      expect(newState.needCpuMove).toBe(true);
+      expect(newState.isPlayerTurn).toBe(false);
+      expect(newState.status).toBe("in-progress");
+    });
+
+    it("should handle incorrect player move", () => {
+      const move = { san: "d4", lan: "d2d4" } as Move;
+
+      const action: Action = {
+        type: "PLAYER_MOVE",
+        payload: {
+          move,
+          puzzleContext: mockContext,
+          game,
+        },
+      };
+
+      const newState = reducer(initialState, action);
+
+      expect(newState.status).toBe("failed");
+      expect(newState.nextMove).toBe(null);
+      expect(newState.hint).toBe("none");
+      expect(newState.isPlayerTurn).toBe(false);
+    });
+
+    it("should handle solving the puzzle", () => {
+      const move = { san: "Bb5", lan: "f1b5" } as Move;
+
+      const lastMoveState: State = {
+        ...initialState,
+        currentMoveIndex: 4,
+        nextMove: "Bb5",
+      };
+
+      const action: Action = {
+        type: "PLAYER_MOVE",
+        payload: {
+          move,
+          puzzleContext: mockContext,
+          game,
+        },
+      };
+
+      const newState = reducer(lastMoveState, action);
+
+      expect(newState.status).toBe("solved");
+      expect(newState.nextMove).toBe(null);
+      expect(newState.hint).toBe("none");
+      expect(newState.isPlayerTurn).toBe(false);
+    });
+
+    it("should handle null move", () => {
+      const action: Action = {
+        type: "PLAYER_MOVE",
+        payload: {
+          move: null,
+          puzzleContext: mockContext,
+          game,
+        },
+      };
+
+      const newState = reducer(initialState, action);
+
+      expect(newState.status).toBe("failed");
+    });
+  });
+});

package/src/hooks/reducer.ts

@@ -11,6 +11,8 @@ export type State = {
   hint: Hint;
   needCpuMove: boolean;
   isPlayerTurn: boolean;
+  onSolveInvoked: boolean;
+  onFailInvoked: boolean;
 };
 
 export type Action =
@@ -31,12 +33,12 @@ export type Action =
       type: "PLAYER_MOVE";
       payload: {
         move?: Move | null;
-        onSolve?: (puzzleContext: ChessPuzzleContextType) => void;
-        onFail?: (puzzleContext: ChessPuzzleContextType) => void;
         puzzleContext: ChessPuzzleContextType;
         game: Chess;
       };
-    };
+    }
+  | { type: "MARK_SOLVE_INVOKED" }
+  | { type: "MARK_FAIL_INVOKED" };
 
 export const initializePuzzle = ({ puzzle }: { puzzle: Puzzle }): State => {
   return {
@@ -48,6 +50,8 @@ export const initializePuzzle = ({ puzzle }: { puzzle: Puzzle }): State => {
     cpuMove: null,
     needCpuMove: !!puzzle.makeFirstMove,
     isPlayerTurn: !puzzle.makeFirstMove,
+    onSolveInvoked: false,
+    onFailInvoked: false,
   };
 };
 
@@ -92,7 +96,7 @@ export const reducer = (state: State, action: Action): State => {
       };
 
     case "PLAYER_MOVE": {
-      const { move, onSolve, onFail, puzzleContext } = action.payload;
+      const { move } = action.payload;
 
       const isMoveRight = [move?.san, move?.lan].includes(
         state?.nextMove || "",
@@ -101,29 +105,24 @@ export const reducer = (state: State, action: Action): State => {
         state.currentMoveIndex === state.puzzle.moves.length - 1;
 
       if (!isMoveRight) {
-        if (onFail) {
-          onFail(puzzleContext);
-        }
         return {
           ...state,
           status: "failed",
           nextMove: null,
           hint: "none",
           isPlayerTurn: false,
+          onFailInvoked: false,
         };
       }
 
       if (isPuzzleSolved) {
-        if (onSolve) {
-          onSolve(puzzleContext);
-        }
-
         return {
           ...state,
           status: "solved",
           nextMove: null,
           hint: "none",
           isPlayerTurn: false,
+          onSolveInvoked: false,
         };
       }
 
@@ -138,6 +137,18 @@ export const reducer = (state: State, action: Action): State => {
       };
     }
 
+    case "MARK_SOLVE_INVOKED":
+      return {
+        ...state,
+        onSolveInvoked: true,
+      };
+
+    case "MARK_FAIL_INVOKED":
+      return {
+        ...state,
+        onFailInvoked: true,
+      };
+
     default:
       return state;
   }

package/src/hooks/useChessPuzzle.ts

@@ -1,8 +1,7 @@
-import { useEffect, useReducer } from "react";
+import { useEffect, useReducer, useCallback, useMemo } from "react";
 import { initializePuzzle, reducer } from "./reducer";
 import { getOrientation, type Puzzle, type Hint, type Status } from "../utils";
 import { useChessGameContext } from "@react-chess-tools/react-chess-game";
-import { useChessPuzzleContext } from "./useChessPuzzleContext";
 
 export type ChessPuzzleContextType = {
   status: Status;
@@ -12,6 +11,9 @@ export type ChessPuzzleContextType = {
   nextMove?: string | null;
   isPlayerTurn: boolean;
   onHint: () => void;
+  puzzleState: Status;
+  movesPlayed: number;
+  totalMoves: number;
 };
 
 export const useChessPuzzle = (
@@ -28,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) {
@@ -61,19 +64,34 @@ export const useChessPuzzle = (
     throw new Error("useChessPuzzle must be used within a ChessGameContext");
   }
 
-  const onHint = () => {
+  const onHint = useCallback(() => {
     dispatch({ type: "TOGGLE_HINT" });
-  };
-
-  const puzzleContext: ChessPuzzleContextType = {
-    status: state.status,
-    changePuzzle,
-    puzzle,
-    hint: state.hint,
-    onHint,
-    nextMove: state.nextMove,
-    isPlayerTurn: state.isPlayerTurn,
-  };
+  }, []);
+
+  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)) {
@@ -84,8 +102,6 @@ export const useChessPuzzle = (
         type: "PLAYER_MOVE",
         payload: {
           move: gameContext?.game?.history({ verbose: true })?.pop() ?? null,
-          onSolve,
-          onFail,
           puzzleContext,
           game: game,
         },
@@ -97,5 +113,19 @@ export const useChessPuzzle = (
     }
   }, [game?.history()?.length]);
 
+  useEffect(() => {
+    if (state.status === "solved" && !state.onSolveInvoked && onSolve) {
+      onSolve(puzzleContext);
+      dispatch({ type: "MARK_SOLVE_INVOKED" });
+    }
+  }, [state.status, state.onSolveInvoked]);
+
+  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);
+    });
+  });
+});