@react-chess-tools/react-chess-puzzle 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @react-chess-tools/react-chess-puzzle
+
+## 0.2.0
+
+### Minor Changes
+
+- ea0eafb: Add changesets versioning
+  setup `changesets` and created the first changeset for the available packages. Removed release-it
+
+### Patch Changes
+
+- Updated dependencies [ea0eafb]
+  - @react-chess-tools/react-chess-game@0.2.0

package/dist/index.mjs

@@ -4,7 +4,7 @@ import React3 from "react";
 // src/utils/index.ts
 import { Chess } from "chess.js";
 import React from "react";
-import { last } from "lodash";
+import _ from "lodash";
 var FAIL_COLOR = "rgba(201, 52, 48, 0.5)";
 var SUCCESS_COLOR = "rgba(172, 206, 89, 0.5)";
 var HINT_COLOR = "rgba(27, 172, 166, 0.5)";
@@ -19,7 +19,7 @@ var getOrientation = (puzzle) => {
 var isClickableElement = (element) => React.isValidElement(element);
 var getCustomSquareStyles = (status, hint, isPlayerTurn, game, nextMove) => {
   const customSquareStyles = {};
-  const lastMove = last(game.history({ verbose: true }));
+  const lastMove = _.last(game.history({ verbose: true }));
   if (status === "failed" && lastMove) {
     customSquareStyles[lastMove.from] = {
       backgroundColor: FAIL_COLOR

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 { useChessPuzzle } 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?: (changePuzzle: (puzzle: Puzzle) => void) => void;\n  onFail?: (changePuzzle: (puzzle: Puzzle) => void) => 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 { last } 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 { type Puzzle } from \"../utils\";\nimport { useChessGameContext } from \"@react-chess-tools/react-chess-game\";\n\nexport const useChessPuzzle = (\n  puzzle: Puzzle,\n  onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void,\n  onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void,\n) => {\n  const gameContext = useChessGameContext();\n\n  const [state, dispatch] = useReducer(\n    reducer,\n    { puzzle, setPosition: gameContext?.methods.setPosition ?? (() => {}) },\n    initializePuzzle,\n  );\n\n  const {\n    game,\n    methods: { makeMove, setPosition },\n  } = gameContext;\n\n  useEffect(() => {\n    if (gameContext && game.fen() === puzzle.fen && state.needCpuMove) {\n      setTimeout(\n        () =>\n          dispatch({\n            type: \"CPU_MOVE\",\n            payload: {\n              makeMove,\n            },\n          }),\n        0,\n      );\n    }\n  }, [gameContext, state.needCpuMove]);\n\n  if (!gameContext) {\n    throw new Error(\"useChessPuzzle must be used within a ChessGameContext\");\n  }\n\n  const changePuzzle = (puzzle: Puzzle) => {\n    dispatch({ type: \"INITIALIZE\", payload: { puzzle, setPosition } });\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          changePuzzle,\n          game: game,\n        },\n      });\n\n      dispatch({\n        type: \"CPU_MOVE\",\n        payload: {\n          makeMove,\n        },\n      });\n    }\n  }, [game?.history()?.length]);\n\n  const onHint = () => {\n    dispatch({ type: \"TOGGLE_HINT\" });\n  };\n\n  return {\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","import { Chess, Move } from \"chess.js\";\nimport { useChessGame } from \"@react-chess-tools/react-chess-game\";\nimport { getOrientation, type Puzzle, type Hint, type Status } from \"../utils\";\n\nexport type State = {\n  puzzle: Puzzle;\n  currentMoveIndex: number;\n  status: Status;\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        setPosition: ReturnType<typeof useChessGame>[\"methods\"][\"setPosition\"];\n      };\n    }\n  | {\n      type: \"RESET\";\n      payload: {\n        setPosition: ReturnType<typeof useChessGame>[\"methods\"][\"setPosition\"];\n      };\n    }\n  | { type: \"TOGGLE_HINT\" }\n  | {\n      type: \"CPU_MOVE\";\n      payload: {\n        makeMove?: ReturnType<typeof useChessGame>[\"methods\"][\"makeMove\"];\n      };\n    }\n  | {\n      type: \"PLAYER_MOVE\";\n      payload: {\n        move?: Move | null;\n        onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void;\n        onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void;\n        changePuzzle: (puzzle: Puzzle) => void;\n        game: Chess;\n      };\n    };\n\nexport const initializePuzzle = ({\n  puzzle,\n  setPosition,\n}: {\n  puzzle: Puzzle;\n  setPosition: ReturnType<typeof useChessGame>[\"methods\"][\"setPosition\"];\n}): State => {\n  setPosition(puzzle.fen, getOrientation(puzzle));\n  return {\n    puzzle,\n    currentMoveIndex: 0,\n    status: \"not-started\",\n    nextMove: puzzle.moves[0],\n    hint: \"none\",\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          setPosition: action.payload.setPosition,\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      if (state.nextMove) {\n        action.payload.makeMove?.(state.nextMove);\n      }\n\n      return {\n        ...state,\n        currentMoveIndex: state.currentMoveIndex + 1,\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, changePuzzle } = 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(changePuzzle);\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(changePuzzle);\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 { useChessPuzzle } 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?: (changePuzzle: (puzzle: Puzzle) => void) => void;\n  onFail?: (changePuzzle: (puzzle: Puzzle) => void) => 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 { type Puzzle } from \"../utils\";\nimport { useChessGameContext } from \"@react-chess-tools/react-chess-game\";\n\nexport const useChessPuzzle = (\n  puzzle: Puzzle,\n  onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void,\n  onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void,\n) => {\n  const gameContext = useChessGameContext();\n\n  const [state, dispatch] = useReducer(\n    reducer,\n    { puzzle, setPosition: gameContext?.methods.setPosition ?? (() => {}) },\n    initializePuzzle,\n  );\n\n  const {\n    game,\n    methods: { makeMove, setPosition },\n  } = gameContext;\n\n  useEffect(() => {\n    if (gameContext && game.fen() === puzzle.fen && state.needCpuMove) {\n      setTimeout(\n        () =>\n          dispatch({\n            type: \"CPU_MOVE\",\n            payload: {\n              makeMove,\n            },\n          }),\n        0,\n      );\n    }\n  }, [gameContext, state.needCpuMove]);\n\n  if (!gameContext) {\n    throw new Error(\"useChessPuzzle must be used within a ChessGameContext\");\n  }\n\n  const changePuzzle = (puzzle: Puzzle) => {\n    dispatch({ type: \"INITIALIZE\", payload: { puzzle, setPosition } });\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          changePuzzle,\n          game: game,\n        },\n      });\n\n      dispatch({\n        type: \"CPU_MOVE\",\n        payload: {\n          makeMove,\n        },\n      });\n    }\n  }, [game?.history()?.length]);\n\n  const onHint = () => {\n    dispatch({ type: \"TOGGLE_HINT\" });\n  };\n\n  return {\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","import { Chess, Move } from \"chess.js\";\nimport { useChessGame } from \"@react-chess-tools/react-chess-game\";\nimport { getOrientation, type Puzzle, type Hint, type Status } from \"../utils\";\n\nexport type State = {\n  puzzle: Puzzle;\n  currentMoveIndex: number;\n  status: Status;\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        setPosition: ReturnType<typeof useChessGame>[\"methods\"][\"setPosition\"];\n      };\n    }\n  | {\n      type: \"RESET\";\n      payload: {\n        setPosition: ReturnType<typeof useChessGame>[\"methods\"][\"setPosition\"];\n      };\n    }\n  | { type: \"TOGGLE_HINT\" }\n  | {\n      type: \"CPU_MOVE\";\n      payload: {\n        makeMove?: ReturnType<typeof useChessGame>[\"methods\"][\"makeMove\"];\n      };\n    }\n  | {\n      type: \"PLAYER_MOVE\";\n      payload: {\n        move?: Move | null;\n        onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void;\n        onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void;\n        changePuzzle: (puzzle: Puzzle) => void;\n        game: Chess;\n      };\n    };\n\nexport const initializePuzzle = ({\n  puzzle,\n  setPosition,\n}: {\n  puzzle: Puzzle;\n  setPosition: ReturnType<typeof useChessGame>[\"methods\"][\"setPosition\"];\n}): State => {\n  setPosition(puzzle.fen, getOrientation(puzzle));\n  return {\n    puzzle,\n    currentMoveIndex: 0,\n    status: \"not-started\",\n    nextMove: puzzle.moves[0],\n    hint: \"none\",\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          setPosition: action.payload.setPosition,\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      if (state.nextMove) {\n        action.payload.makeMove?.(state.nextMove);\n      }\n\n      return {\n        ...state,\n        currentMoveIndex: state.currentMoveIndex + 1,\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, changePuzzle } = 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(changePuzzle);\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(changePuzzle);\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"]}

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@react-chess-tools/react-chess-puzzle",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "A lightweight, customizable React component library for rendering and interacting with chess puzzles.",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",
   "scripts": {
     "build": "tsup src/index.ts",
-    "release": "npm run build && release-it --npm.publish=true",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -33,7 +32,7 @@
   "author": "Daniele Cammareri <daniele.cammareri@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "@react-chess-tools/react-chess-game": "0.1.3",
+    "@react-chess-tools/react-chess-game": "0.2.0",
     "chess.js": "^1.0.0-beta.6",
     "lodash": "^4.17.21"
   },

package/src/components/ChessPuzzle/ChessPuzzle.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta } from "@storybook/react";
+
+import React from "react";
+import { RootProps } from "./parts/Root";
+import { ChessPuzzle } from ".";
+
+const puzzles = [
+  {
+    fen: "4kb1r/p2r1ppp/4qn2/1B2p1B1/4P3/1Q6/PPP2PPP/2KR4 w k - 0 1",
+    moves: ["Bxd7+", "Nxd7", "Qb8+", "Nxb8", "Rd8#"],
+    makeFirstMove: false,
+  },
+  {
+    fen: "6k1/5p1p/p1q1p1p1/1pB1P3/1Pr3Pn/P4P1P/4Q3/3R2K1 b - - 0 31",
+    moves: ["h4f3", "e2f3", "c4c5", "d1d8", "g8g7", "f3f6"],
+    makeFirstMove: true,
+  },
+];
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: "react-chess-puzzle/Components/Puzzle",
+  component: ChessPuzzle.Root,
+  tags: ["components", "puzzle"],
+  argTypes: {
+    onSolve: { action: "onSolve" },
+    onFail: { action: "onFail" },
+  },
+  parameters: {
+    actions: { argTypesRegex: "^_on.*" },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "400px" }}>
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ChessPuzzle.Root>;
+
+export default meta;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+export const Example = (args: RootProps) => {
+  const [puzzleIndex, setPuzzleIndex] = React.useState(0);
+  const puzzle = puzzles[puzzleIndex];
+  return (
+    <div>
+      <ChessPuzzle.Root {...args} puzzle={puzzle}>
+        <ChessPuzzle.Board />
+        <ChessPuzzle.Reset asChild>
+          <button>restart</button>
+        </ChessPuzzle.Reset>
+        <ChessPuzzle.Reset
+          asChild
+          puzzle={puzzles[(puzzleIndex + 1) % puzzles.length]}
+          onReset={() => setPuzzleIndex((puzzleIndex + 1) % puzzles.length)}
+        >
+          <button>next</button>
+        </ChessPuzzle.Reset>
+        <ChessPuzzle.Hint>hint</ChessPuzzle.Hint>
+      </ChessPuzzle.Root>
+    </div>
+  );
+};
+
+export const Underpromotion = (args: RootProps) => {
+  const puzzle = {
+    fen: "8/8/5R1p/8/3pb1P1/kpKp4/8/8 w - - 0 54",
+    moves: ["c3d4", "d3d2", "d4c3", "d2d1n"],
+    makeFirstMove: true,
+  };
+  return (
+    <div>
+      <ChessPuzzle.Root {...args} puzzle={puzzle}>
+        <ChessPuzzle.Board />
+        <ChessPuzzle.Reset asChild>
+          <button>done! Restart</button>
+        </ChessPuzzle.Reset>
+      </ChessPuzzle.Root>
+    </div>
+  );
+};

package/src/components/ChessPuzzle/index.ts

@@ -0,0 +1,11 @@
+import { Root } from "./parts/Root";
+import { PuzzleBoard } from "./parts/PuzzleBoard";
+import { Reset } from "./parts/Reset";
+import { Hint } from "./parts/Hint";
+
+export const ChessPuzzle = {
+  Root,
+  Board: PuzzleBoard,
+  Reset,
+  Hint,
+};

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

@@ -0,0 +1,46 @@
+import React from "react";
+import { Status, isClickableElement } from "../../../utils";
+import { useChessPuzzleContext } from "../../..";
+
+export interface HintProps {
+  asChild?: boolean;
+  showOn?: Status[];
+}
+
+const defaultShowOn: Status[] = ["not-started", "in-progress"];
+
+export const Hint: React.FC<React.PropsWithChildren<HintProps>> = ({
+  children,
+  asChild,
+  showOn = defaultShowOn,
+}) => {
+  const puzzleContext = useChessPuzzleContext();
+  if (!puzzleContext) {
+    throw new Error("PuzzleContext not found");
+  }
+  const { onHint, status } = puzzleContext;
+  const handleClick = () => {
+    onHint();
+  };
+
+  if (!showOn.includes(status)) {
+    return null;
+  }
+
+  if (asChild) {
+    const child = React.Children.only(children);
+    if (isClickableElement(child)) {
+      return React.cloneElement(child, {
+        onClick: handleClick,
+      });
+    } else {
+      throw new Error("Change child must be a clickable element");
+    }
+  }
+
+  return (
+    <button type="button" onClick={handleClick}>
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,37 @@
+import React from "react";
+import {
+  ChessGame,
+  useChessGameContext,
+} from "@react-chess-tools/react-chess-game";
+import { getCustomSquareStyles, stringToMove } from "../../../utils";
+import { useChessPuzzleContext } from "../../..";
+
+export interface PuzzleBoardProps
+  extends React.ComponentProps<typeof ChessGame.Board> {}
+export const PuzzleBoard: React.FC<PuzzleBoardProps> = ({ ...rest }) => {
+  const puzzleContext = useChessPuzzleContext();
+  const gameContext = useChessGameContext();
+
+  if (!puzzleContext) {
+    throw new Error("PuzzleContext not found");
+  }
+  if (!gameContext) {
+    throw new Error("ChessGameContext not found");
+  }
+
+  const { game } = gameContext;
+  const { status, hint, isPlayerTurn, nextMove } = puzzleContext;
+
+  return (
+    <ChessGame.Board
+      customSquareStyles={getCustomSquareStyles(
+        status,
+        hint,
+        isPlayerTurn,
+        game,
+        stringToMove(game, nextMove),
+      )}
+      {...rest}
+    />
+  );
+};

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { isClickableElement, type Puzzle, type Status } from "../../../utils";
+import { useChessPuzzleContext } from "../../..";
+
+export interface ResetProps {
+  asChild?: boolean;
+  puzzle?: Puzzle;
+  onReset?: () => void;
+  showOn?: Status[];
+}
+
+const defaultShowOn: Status[] = ["failed", "solved"];
+
+export const Reset: React.FC<React.PropsWithChildren<ResetProps>> = ({
+  children,
+  asChild,
+  puzzle,
+  onReset,
+  showOn = defaultShowOn,
+}) => {
+  const puzzleContext = useChessPuzzleContext();
+  if (!puzzleContext) {
+    throw new Error("PuzzleContext not found");
+  }
+  const { changePuzzle, status } = puzzleContext;
+  const handleClick = () => {
+    changePuzzle(puzzle || puzzleContext.puzzle);
+    onReset?.();
+  };
+
+  if (!showOn.includes(status)) {
+    return null;
+  }
+
+  if (asChild) {
+    const child = React.Children.only(children);
+    if (isClickableElement(child)) {
+      return React.cloneElement(child, {
+        onClick: handleClick,
+      });
+    } else {
+      throw new Error("Change child must be a clickable element");
+    }
+  }
+
+  return (
+    <button type="button" onClick={handleClick}>
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Puzzle, getOrientation } from "../../../utils";
+import { useChessPuzzle } from "../../../hooks/useChessPuzzle";
+import { ChessGame } from "@react-chess-tools/react-chess-game";
+import { ChessPuzzleContext } from "../../../hooks/useChessPuzzleContext";
+
+export interface RootProps {
+  puzzle: Puzzle;
+  onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void;
+  onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void;
+}
+
+const PuzzleRoot: React.FC<React.PropsWithChildren<RootProps>> = ({
+  puzzle,
+  onSolve,
+  onFail,
+  children,
+}) => {
+  const context = useChessPuzzle(puzzle, onSolve, onFail);
+
+  return (
+    <ChessPuzzleContext.Provider value={context}>
+      {children}
+    </ChessPuzzleContext.Provider>
+  );
+};
+
+export const Root: React.FC<React.PropsWithChildren<RootProps>> = ({
+  puzzle,
+  onSolve,
+  onFail,
+  children,
+}) => {
+  return (
+    <ChessGame.Root fen={puzzle.fen} orientation={getOrientation(puzzle)}>
+      <PuzzleRoot puzzle={puzzle} onSolve={onSolve} onFail={onFail}>
+        {children}
+      </PuzzleRoot>
+    </ChessGame.Root>
+  );
+};

package/src/hooks/reducer.ts

@@ -0,0 +1,160 @@
+import { Chess, Move } from "chess.js";
+import { useChessGame } from "@react-chess-tools/react-chess-game";
+import { getOrientation, type Puzzle, type Hint, type Status } from "../utils";
+
+export type State = {
+  puzzle: Puzzle;
+  currentMoveIndex: number;
+  status: Status;
+  nextMove?: string | null;
+  hint: Hint;
+  needCpuMove: boolean;
+  isPlayerTurn: boolean;
+};
+
+export type Action =
+  | {
+      type: "INITIALIZE";
+      payload: {
+        puzzle: Puzzle;
+        setPosition: ReturnType<typeof useChessGame>["methods"]["setPosition"];
+      };
+    }
+  | {
+      type: "RESET";
+      payload: {
+        setPosition: ReturnType<typeof useChessGame>["methods"]["setPosition"];
+      };
+    }
+  | { type: "TOGGLE_HINT" }
+  | {
+      type: "CPU_MOVE";
+      payload: {
+        makeMove?: ReturnType<typeof useChessGame>["methods"]["makeMove"];
+      };
+    }
+  | {
+      type: "PLAYER_MOVE";
+      payload: {
+        move?: Move | null;
+        onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void;
+        onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void;
+        changePuzzle: (puzzle: Puzzle) => void;
+        game: Chess;
+      };
+    };
+
+export const initializePuzzle = ({
+  puzzle,
+  setPosition,
+}: {
+  puzzle: Puzzle;
+  setPosition: ReturnType<typeof useChessGame>["methods"]["setPosition"];
+}): State => {
+  setPosition(puzzle.fen, getOrientation(puzzle));
+  return {
+    puzzle,
+    currentMoveIndex: 0,
+    status: "not-started",
+    nextMove: puzzle.moves[0],
+    hint: "none",
+    needCpuMove: !!puzzle.makeFirstMove,
+    isPlayerTurn: !puzzle.makeFirstMove,
+  };
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "INITIALIZE":
+      return {
+        ...state,
+        ...initializePuzzle(action.payload),
+      };
+    case "RESET":
+      return {
+        ...state,
+        ...initializePuzzle({
+          puzzle: state.puzzle,
+          setPosition: action.payload.setPosition,
+        }),
+      };
+    case "TOGGLE_HINT":
+      if (state.hint === "none") {
+        return { ...state, hint: "piece" };
+      }
+      return { ...state, hint: "move" };
+    case "CPU_MOVE":
+      if (state.isPlayerTurn) {
+        return state;
+      }
+      if (["solved", "failed"].includes(state.status)) {
+        return state;
+      }
+
+      if (state.nextMove) {
+        action.payload.makeMove?.(state.nextMove);
+      }
+
+      return {
+        ...state,
+        currentMoveIndex: state.currentMoveIndex + 1,
+        nextMove:
+          state.currentMoveIndex < state.puzzle.moves.length - 1
+            ? state.puzzle.moves[state.currentMoveIndex + 1]
+            : null,
+        needCpuMove: false,
+        isPlayerTurn: true,
+        status: "in-progress",
+      };
+
+    case "PLAYER_MOVE": {
+      const { move, onSolve, onFail, changePuzzle } = action.payload;
+
+      const isMoveRight = [move?.san, move?.lan].includes(
+        state?.nextMove || "",
+      );
+      const isPuzzleSolved =
+        state.currentMoveIndex === state.puzzle.moves.length - 1;
+
+      if (!isMoveRight) {
+        if (onFail) {
+          onFail(changePuzzle);
+        }
+        return {
+          ...state,
+          status: "failed",
+          nextMove: null,
+          hint: "none",
+          isPlayerTurn: false,
+        };
+      }
+
+      if (isPuzzleSolved) {
+        if (onSolve) {
+          onSolve(changePuzzle);
+        }
+
+        return {
+          ...state,
+          status: "solved",
+          nextMove: null,
+          hint: "none",
+          isPlayerTurn: false,
+        };
+      }
+
+      return {
+        ...state,
+        hint: "none",
+        currentMoveIndex: state.currentMoveIndex + 1,
+        nextMove: state.puzzle.moves[state.currentMoveIndex + 1],
+        status: "in-progress",
+        needCpuMove: true,
+        isPlayerTurn: false,
+      };
+    }
+
+    default:
+      return state;
+  }
+};

package/src/hooks/useChessPuzzle.ts

@@ -0,0 +1,85 @@
+import { useEffect, useReducer } from "react";
+import { initializePuzzle, reducer } from "./reducer";
+import { type Puzzle } from "../utils";
+import { useChessGameContext } from "@react-chess-tools/react-chess-game";
+
+export const useChessPuzzle = (
+  puzzle: Puzzle,
+  onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void,
+  onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void,
+) => {
+  const gameContext = useChessGameContext();
+
+  const [state, dispatch] = useReducer(
+    reducer,
+    { puzzle, setPosition: gameContext?.methods.setPosition ?? (() => {}) },
+    initializePuzzle,
+  );
+
+  const {
+    game,
+    methods: { makeMove, setPosition },
+  } = gameContext;
+
+  useEffect(() => {
+    if (gameContext && game.fen() === puzzle.fen && state.needCpuMove) {
+      setTimeout(
+        () =>
+          dispatch({
+            type: "CPU_MOVE",
+            payload: {
+              makeMove,
+            },
+          }),
+        0,
+      );
+    }
+  }, [gameContext, state.needCpuMove]);
+
+  if (!gameContext) {
+    throw new Error("useChessPuzzle must be used within a ChessGameContext");
+  }
+
+  const changePuzzle = (puzzle: Puzzle) => {
+    dispatch({ type: "INITIALIZE", payload: { puzzle, setPosition } });
+  };
+
+  useEffect(() => {
+    if (game?.history()?.length <= 0 + (puzzle.makeFirstMove ? 1 : 0)) {
+      return;
+    }
+    if (game.history().length % 2 === (puzzle.makeFirstMove ? 0 : 1)) {
+      dispatch({
+        type: "PLAYER_MOVE",
+        payload: {
+          move: gameContext?.game?.history({ verbose: true })?.pop() ?? null,
+          onSolve,
+          onFail,
+          changePuzzle,
+          game: game,
+        },
+      });
+
+      dispatch({
+        type: "CPU_MOVE",
+        payload: {
+          makeMove,
+        },
+      });
+    }
+  }, [game?.history()?.length]);
+
+  const onHint = () => {
+    dispatch({ type: "TOGGLE_HINT" });
+  };
+
+  return {
+    status: state.status,
+    changePuzzle,
+    puzzle,
+    hint: state.hint,
+    onHint,
+    nextMove: state.nextMove,
+    isPlayerTurn: state.isPlayerTurn,
+  };
+};

package/src/hooks/useChessPuzzleContext.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { useChessPuzzle } from "./useChessPuzzle";
+
+export const ChessPuzzleContext = React.createContext<ReturnType<
+  typeof useChessPuzzle
+> | null>(null);
+
+export const useChessPuzzleContext = () => {
+  const context = React.useContext(ChessPuzzleContext);
+  if (!context) {
+    throw new Error(
+      "useChessGameContext must be used within a ChessGameProvider",
+    );
+  }
+  return context;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export { ChessPuzzle } from "./components/ChessPuzzle";
+export { useChessPuzzleContext } from "./hooks/useChessPuzzleContext";

package/src/utils/index.ts

@@ -0,0 +1,103 @@
+import { type Color, Chess, Move } from "chess.js";
+import React, { CSSProperties, ReactElement, ReactNode } from "react";
+import _ from "lodash";
+
+export type Status = "not-started" | "in-progress" | "solved" | "failed";
+
+export type Hint = "none" | "piece" | "move";
+
+export type Puzzle = {
+  fen: string;
+  moves: string[];
+  // if the first move of the puzzle has to be made by the cpu, as in chess.com puzzles
+  makeFirstMove?: boolean;
+};
+
+const FAIL_COLOR = "rgba(201, 52, 48, 0.5)";
+const SUCCESS_COLOR = "rgba(172, 206, 89, 0.5)";
+const HINT_COLOR = "rgba(27, 172, 166, 0.5)";
+
+export const getOrientation = (puzzle: Puzzle): Color => {
+  const fen = puzzle.fen;
+  const game = new Chess(fen);
+  if (puzzle.makeFirstMove) {
+    game.move(puzzle.moves[0]);
+  }
+  return game.turn();
+};
+
+interface ClickableElement extends ReactElement {
+  props: {
+    onClick?: () => void;
+  };
+}
+
+export const isClickableElement = (
+  element: ReactNode,
+): element is ClickableElement => React.isValidElement(element);
+
+export const getCustomSquareStyles = (
+  status: Status,
+  hint: Hint,
+  isPlayerTurn: boolean,
+  game: Chess,
+  nextMove?: Move | null,
+) => {
+  const customSquareStyles: Record<string, CSSProperties> = {};
+
+  const lastMove = _.last(game.history({ verbose: true }));
+
+  if (status === "failed" && lastMove) {
+    customSquareStyles[lastMove.from] = {
+      backgroundColor: FAIL_COLOR,
+    };
+    customSquareStyles[lastMove.to] = {
+      backgroundColor: FAIL_COLOR,
+    };
+  }
+
+  if (
+    lastMove &&
+    (status === "solved" || (status !== "failed" && !isPlayerTurn))
+  ) {
+    customSquareStyles[lastMove.from] = {
+      backgroundColor: SUCCESS_COLOR,
+    };
+    customSquareStyles[lastMove.to] = {
+      backgroundColor: SUCCESS_COLOR,
+    };
+  }
+
+  if (hint === "piece") {
+    if (nextMove) {
+      customSquareStyles[nextMove.from] = {
+        backgroundColor: HINT_COLOR,
+      };
+    }
+  }
+
+  if (hint === "move") {
+    if (nextMove) {
+      customSquareStyles[nextMove.from] = {
+        backgroundColor: HINT_COLOR,
+      };
+      customSquareStyles[nextMove.to] = {
+        backgroundColor: HINT_COLOR,
+      };
+    }
+  }
+
+  return customSquareStyles;
+};
+
+export const stringToMove = (game: Chess, move: string | null | undefined) => {
+  const copy = new Chess(game.fen());
+  if (move === null || move === undefined) {
+    return null;
+  }
+  try {
+    return copy.move(move);
+  } catch (e) {
+    return null;
+  }
+};