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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @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
+
+- 3060132: Pass the whole puzzle context to onSolve and onFail callbacks
+
 ## 0.4.0
 
 ### Minor Changes

package/README.MD

@@ -1,4 +1,5 @@
 <div align="center">
+    <h1>react-chess-puzzle</h1>
     A lightweight, customizable React component library for rendering and interacting with chess puzzles.
 </div>
 
@@ -26,50 +27,166 @@ To use the `react-chess-puzzle` package, you can import the `ChessPuzzle` compon
 import { ChessPuzzle } from "@react-chess-tools/react-chess-puzzle";
 
 const App = () => {
-  <ChessPuzzle.Root puzzle={...}>
-    <ChessPuzzle.Board />
-  </ChessPuzzle.Root>;
+  const puzzle = {
+    fen: "r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3",
+    moves: ["d2d4", "e5d4", "f3d4"],
+    makeFirstMove: false,
+  };
+
+  return (
+    <ChessPuzzle.Root puzzle={puzzle}>
+      <ChessPuzzle.Board />
+      <div className="controls">
+        <ChessPuzzle.Reset>Restart Puzzle</ChessPuzzle.Reset>
+        <ChessPuzzle.Hint showOn={["in-progress"]}>Get Hint</ChessPuzzle.Hint>
+      </div>
+    </ChessPuzzle.Root>
+  );
 };
 ```
 
+## Puzzle Solving Flow
+
+The puzzle-solving flow follows these steps:
+
+1. **Initial Setup**: The board is set up using the provided FEN string
+2. **First Move**: If `makeFirstMove` is `true`, the component automatically makes the first move in the solution sequence
+3. **User Interaction**: The user attempts to solve the puzzle by making the correct moves
+4. **Feedback**: The component validates each move and provides feedback:
+   - If the move is correct, the puzzle continues
+   - If the move is incorrect, the puzzle is marked as failed
+5. **Completion**: When all correct moves have been made, the puzzle is marked as solved
+
 ## Documentation
 
 The `react-chess-puzzle` package provides a set of components that you can use to build your chess app. The following sections describe the components and their usage.
 
 ### ChessPuzzle.Root
 
-The `ChessPuzzle.Root` component is the root component of the `react-chess-puzzle` package. It is used to provide the `ChessPuzzleContext` to the rest of the components. It accept a `puzzle` prop that is used to instantiate the puzzle.
+The `ChessPuzzle.Root` component is the root component of the `react-chess-puzzle` package. It is used to provide the `ChessPuzzleContext` to the rest of the components. It accepts a `puzzle` prop that is used to instantiate the puzzle.
 
 #### Props
 
 The `ChessPuzzle.Root` component accepts the following props:
 
-| Name        | Type        | Default | Description                 |
-| ----------- | ----------- | ------- | --------------------------- |
-| `puzzle`    | `Puzzle`    |         | The puzzle to be solved     |
-| `children?` | `ReactNode` |         | The children to be rendered |
+| Name        | Type                                              | Default     | Description                                                                                                          |
+| ----------- | ------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------- |
+| `puzzle`    | `Puzzle`                                          |             | The puzzle to be solved                                                                                              |
+| `onSolve`   | `(puzzleContext: ChessPuzzleContextType) => void` | `undefined` | Callback function that is triggered when the puzzle is successfully solved, receives the puzzle context as parameter |
+| `onFail`    | `(puzzleContext: ChessPuzzleContextType) => void` | `undefined` | Callback function that is triggered when an incorrect move is played, receives the puzzle context as parameter       |
+| `children?` | `ReactNode`                                       |             | The children to be rendered                                                                                          |
 
-the `puzzle` prop contains the following properties:
+The `puzzle` prop contains the following properties:
 
 | Name            | Type       | Default | Description                                                                |
 | --------------- | ---------- | ------- | -------------------------------------------------------------------------- |
-| `fen`           | `string`   |         | The FEN string of the puzzle                                               |
-| `moves`         | `string[]` |         | The moves of the puzzle                                                    |
+| `fen`           | `string`   |         | The FEN string representing the initial position of the puzzle             |
+| `moves`         | `string[]` |         | The sequence of moves (in algebraic notation) that solve the puzzle        |
 | `makeFirstMove` | `boolean`  | `false` | Whether the first move is part of the problem or must be played by the CPU |
 
 ### ChessPuzzle.Board
 
 The `ChessPuzzle.Board` component is used to render the chess board. It is a wrapper around the `ChessGame.Board` component and accepts the same props.
 
-### Using react-chess-game Components
+#### Props
+
+Inherits all props from `ChessGame.Board` with these additional options:
+
+| Name             | Type                 | Default   | Description                                  |
+| ---------------- | -------------------- | --------- | -------------------------------------------- |
+| `showHighlights` | `boolean`            | `true`    | Show highlights for legal moves on the board |
+| `orientation`    | `"white" \| "black"` | `"white"` | Board orientation                            |
+
+### ChessPuzzle.Reset
+
+A button component that resets the current puzzle or loads a new one.
+
+#### Props
+
+| Name      | Type                  | Default                                              | Description                                                                                                                                                                                                   |
+| --------- | --------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `puzzle`  | `Puzzle \| undefined` | `undefined`                                          | The puzzle object for a new puzzle. If not provided, the current puzzle is reset.                                                                                                                             |
+| `onReset` | `() => void`          | `undefined`                                          | A callback function that is called when the puzzle is reset.                                                                                                                                                  |
+| `showOn`  | `PuzzleState[]`       | `["not-started", "in-progress", "solved", "failed"]` | The state(s) in which the button is shown. Valid states are: "not-started", "in-progress", "solved", "failed"                                                                                                 |
+| `asChild` | `boolean`             | `false`                                              | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. |
 
-Since `react-chess-puzzle` is built on top of `react-chess-game`, you can use any of its components within your puzzle interface. This includes:
+### ChessPuzzle.Hint
 
-- `ChessGame.Sounds` - Add sound effects for moves/captures
-- `ChessGame.KeyboardControls` - Add keyboard navigation
-- `useChessGameContext` - Access game state and methods
+A button component that provides a hint by highlighting the next move in the solution.
 
-Example usage with sounds and keyboard controls:
+#### Props
+
+| Name      | Type            | Default           | Description                                                                                                                                                                                                   |
+| --------- | --------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `showOn`  | `PuzzleState[]` | `["in-progress"]` | The state(s) in which the button is shown. Valid states are: "not-started", "in-progress", "solved", "failed"                                                                                                 |
+| `asChild` | `boolean`       | `false`           | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. |
+
+## Hooks and Context
+
+### useChessPuzzleContext
+
+A hook that provides access to the puzzle state and methods.
+
+```tsx
+import { useChessPuzzleContext } from "@react-chess-tools/react-chess-puzzle";
+
+const MyComponent = () => {
+  const {
+    puzzleState, // "not-started" | "in-progress" | "solved" | "failed"
+    resetPuzzle, // Function to reset the current puzzle
+    showHint, // Function to show a hint
+    movesPlayed, // Number of moves played so far
+    totalMoves, // Total number of moves in the solution
+  } = useChessPuzzleContext();
+
+  return (
+    <div>
+      <p>Puzzle state: {puzzleState}</p>
+      <p>
+        Progress: {movesPlayed}/{totalMoves} moves
+      </p>
+      <button onClick={resetPuzzle}>Reset</button>
+    </div>
+  );
+};
+```
+
+### useChessGameContext
+
+Since `react-chess-puzzle` is built on top of `react-chess-game`, you can also use the `useChessGameContext` hook to access the underlying game state and methods.
+
+```tsx
+import { useChessGameContext } from "@react-chess-tools/react-chess-game";
+
+const MyComponent = () => {
+  const {
+    fen, // Current FEN string
+    gameState, // Game state (playing, checkmate, etc.)
+    turn, // Current turn ("w" | "b")
+    moves, // List of legal moves
+    makeMove, // Function to make a move
+    history, // Game move history
+    selectedSquare, // Currently selected square
+    setSelectedSquare, // Function to select a square
+    checkSquare, // Square with the king in check (if any)
+  } = useChessGameContext();
+
+  return (
+    <div>
+      <p>Current FEN: {fen}</p>
+      <p>Current turn: {turn === "w" ? "White" : "Black"}</p>
+    </div>
+  );
+};
+```
+
+## Using react-chess-game Components
+
+Since `react-chess-puzzle` is built on top of `react-chess-game`, you can use any of its components within your puzzle interface:
+
+### ChessGame.Sounds
+
+Add sound effects for moves, captures, and other chess events.
 
 ```tsx
 import { ChessPuzzle } from "@react-chess-tools/react-chess-puzzle";
@@ -78,35 +195,132 @@ import { ChessGame } from "@react-chess-tools/react-chess-game";
 const App = () => (
   <ChessPuzzle.Root puzzle={...}>
     <ChessGame.Sounds />
-    <ChessGame.KeyboardControls />
     <ChessPuzzle.Board />
   </ChessPuzzle.Root>
 );
 ```
 
-### `Puzzle.Reset`
+### ChessGame.KeyboardControls
 
-A button that changes the puzzle. It can be used, for example, to restart the puzzle or move to the next puzzle.
+Add keyboard navigation for accessible play.
 
-#### Props
+```tsx
+import { ChessPuzzle } from "@react-chess-tools/react-chess-puzzle";
+import { ChessGame } from "@react-chess-tools/react-chess-game";
 
-| Name      | Type                                                       | Default | Description                                                                                                                                                                                                   |
-| --------- | ---------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `puzzle`  | `Puzzle`                                                   |         | The puzzle object containing the FEN string and moves sequence. If not provided, the current puzzle is reset.                                                                                                 |
-| `onReset` | `() => void`                                               |         | A callback function that is called when the puzzle is reset.                                                                                                                                                  |
-| `showOn`  | `"not-started" \| "in-progress" \| "solved" \| "failed"[]` |         | The state(s) in which the button is shown.                                                                                                                                                                    |
-| `asChild` | `boolean`                                                  | `false` | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. |
+const App = () => (
+  <ChessPuzzle.Root puzzle={...}>
+    <ChessGame.KeyboardControls />
+    <ChessPuzzle.Board />
+  </ChessPuzzle.Root>
+);
+```
 
-### `Puzzle.Hint`
+## Complete Example
 
-A button that shows the next move of the puzzle.
+Here's a complete example of a chess puzzle component with sounds, keyboard controls, and custom styling:
 
-#### Props
+```tsx
+import { ChessPuzzle } from "@react-chess-tools/react-chess-puzzle";
+import { ChessGame } from "@react-chess-tools/react-chess-game";
+import { useState } from "react";
+import "./ChessPuzzleStyles.css"; // Your custom CSS
+
+export const PuzzleSolver = () => {
+  // Example puzzles
+  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,
+    },
+  ];
+
+  const [currentPuzzle, setCurrentPuzzle] = useState(0);
+  const [score, setScore] = useState(0);
+
+  const nextPuzzle = () => {
+    const nextPuzzle = (currentPuzzle + 1) % puzzles.length;
+    setCurrentPuzzle(nextPuzzle);
+  };
+
+  const handleSolve = (puzzleContext: ChessPuzzleContextType) => {
+    setScore((prev) => prev + 10);
+    console.log(`Puzzle solved in ${puzzleContext.movesPlayed} moves`);
+    nextPuzzle();
+  };
+
+  const handleFail = (puzzleContext: ChessPuzzleContextType) => {
+    setScore((prev) => Math.max(0, prev - 5));
+    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]!}
+        onSolve={handleSolve}
+        onFail={handleFail}
+      >
+        <ChessGame.Sounds />
+        <ChessGame.KeyboardControls />
+
+        <div className="board-container">
+          <ChessPuzzle.Board />
+        </div>
+
+        <div className="controls">
+          <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={handleReset}
+            >
+              Next Puzzle
+            </ChessPuzzle.Reset>
+          </div>
+        </div>
+      </ChessPuzzle.Root>
+    </div>
+  );
+};
 
-| Name      | Type                                                       | Default | Description                                                                                                                                                                                                   |
-| --------- | ---------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `showOn`  | `"not-started" \| "in-progress" \| "solved" \| "failed"[]` |         | The state(s) in which the button is shown.                                                                                                                                                                    |
-| `asChild` | `boolean`                                                  | `false` | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. |
+// Custom component using the context
+const PuzzleStatus = () => {
+  const { puzzleState, movesPlayed, totalMoves } = useChessPuzzleContext();
+
+  let message = "";
+  switch (puzzleState) {
+    case "not-started":
+      message = "Make your move to start the puzzle";
+      break;
+    case "in-progress":
+      message = `Progress: ${movesPlayed}/${totalMoves} moves`;
+      break;
+    case "solved":
+      message = "Puzzle solved! Well done!";
+      break;
+    case "failed":
+      message = "Incorrect move. Try again!";
+      break;
+  }
+
+  return <div className={`status ${puzzleState}`}>{message}</div>;
+};
+```
 
 ## 📝 License
 

package/dist/index.d.mts

@@ -18,17 +18,30 @@ interface HintProps {
 interface ResetProps {
     asChild?: boolean;
     puzzle?: Puzzle;
-    onReset?: () => void;
+    onReset?: (puzzleContext: ChessPuzzleContextType) => void;
     showOn?: Status[];
 }
 
 interface PuzzleBoardProps extends React__default.ComponentProps<typeof ChessGame.Board> {
 }
 
+type ChessPuzzleContextType = {
+    status: Status;
+    changePuzzle: (puzzle: Puzzle) => void;
+    puzzle: Puzzle;
+    hint: Hint;
+    nextMove?: string | null;
+    isPlayerTurn: boolean;
+    onHint: () => void;
+    puzzleState: Status;
+    movesPlayed: number;
+    totalMoves: number;
+};
+
 interface RootProps {
     puzzle: Puzzle;
-    onSolve?: (changePuzzle: (puzzle: Puzzle) => void) => void;
-    onFail?: (changePuzzle: (puzzle: Puzzle) => void) => void;
+    onSolve?: (puzzleContext: ChessPuzzleContextType) => void;
+    onFail?: (puzzleContext: ChessPuzzleContextType) => void;
 }
 
 declare const ChessPuzzle: {
@@ -38,14 +51,6 @@ declare const ChessPuzzle: {
     Hint: React.FC<React.PropsWithChildren<HintProps>>;
 };
 
-declare const useChessPuzzleContext: () => {
-    status: Status;
-    changePuzzle: (puzzle: Puzzle) => void;
-    puzzle: Puzzle;
-    hint: Hint;
-    onHint: () => void;
-    nextMove: string | null | undefined;
-    isPlayerTurn: boolean;
-};
+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, changePuzzle } = 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(changePuzzle);
-        }
         return {
           ...state,
           status: "failed",
           nextMove: null,
           hint: "none",
-          isPlayerTurn: false
+          isPlayerTurn: false,
+          onFailInvoked: false
         };
       }
       if (isPuzzleSolved) {
-        if (onSolve) {
-          onSolve(changePuzzle);
-        }
         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(
@@ -197,6 +206,36 @@ var useChessPuzzle = (puzzle, onSolve, onFail) => {
       makeMove(state.cpuMove);
     }
   }, [state.cpuMove]);
+  if (!gameContext) {
+    throw new Error("useChessPuzzle must be used within a ChessGameContext");
+  }
+  const onHint = useCallback(() => {
+    dispatch({ type: "TOGGLE_HINT" });
+  }, []);
+  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)) {
@@ -207,9 +246,7 @@ 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,
-          changePuzzle,
+          puzzleContext,
           game
         }
       });
@@ -218,21 +255,19 @@ var useChessPuzzle = (puzzle, onSolve, onFail) => {
       });
     }
   }, [(_a = game == null ? void 0 : game.history()) == null ? void 0 : _a.length]);
-  if (!gameContext) {
-    throw new Error("useChessPuzzle must be used within a ChessGameContext");
-  }
-  const onHint = () => {
-    dispatch({ type: "TOGGLE_HINT" });
-  };
-  return {
-    status: state.status,
-    changePuzzle,
-    puzzle,
-    hint: state.hint,
-    onHint,
-    nextMove: state.nextMove,
-    isPlayerTurn: state.isPlayerTurn
-  };
+  useEffect(() => {
+    if (state.status === "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;
 };
 
 // src/components/ChessPuzzle/parts/Root.tsx
@@ -319,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;