react-chess-puzzle-kit 1.0.1 → 1.0.3

package/dist/index.js

@@ -66,7 +66,9 @@ const PuzzlePlaySurface = ({ position, onFeedback, incInteractionNum, boardWidth
     var _a, _b, _c, _d, _e, _f, _g;
     const [showAnswerArrow, setShowAnswerArrow] = react.useState(false);
     const [incorrectActive, setIncorrectActive] = react.useState(false);
+    const attemptMissedRef = react.useRef(false);
     const { revision, bumpRevision } = reactChessCore.useBoardRevision();
+    const { correctMoveSquare, showCorrectMove, clearCorrectMoveFeedback, } = reactChessCore.useCorrectMoveFeedback();
     const boardOrientationRef = react.useRef('white');
     const boardFenRef = react.useRef(EMPTY_BOARD_FEN);
     const notifyHost = () => {
@@ -92,7 +94,9 @@ const PuzzlePlaySurface = ({ position, onFeedback, incInteractionNum, boardWidth
         expectedUci: expectedUci || null,
         positionFen,
         answerArrowColor,
-        autoShowWrongMoves,
+        // Refutation + answer-arrow flows must run the full wrong→refutation→answer
+        // sequence; the replay "retry without arrow" setting does not apply here.
+        autoShowWrongMoves: useRefutation ? true : autoShowWrongMoves,
         engineOptions: refutationEngine,
     });
     const missPhase = (_c = missBoard.missSequence.sequence) === null || _c === void 0 ? void 0 : _c.phase;
@@ -102,8 +106,10 @@ const PuzzlePlaySurface = ({ position, onFeedback, incInteractionNum, boardWidth
     react.useEffect(() => {
         setShowAnswerArrow(false);
         setIncorrectActive(false);
+        attemptMissedRef.current = false;
+        clearCorrectMoveFeedback();
         onMissFeedbackChange === null || onMissFeedbackChange === void 0 ? void 0 : onMissFeedbackChange(null);
-    }, [onMissFeedbackChange, position]);
+    }, [clearCorrectMoveFeedback, onMissFeedbackChange, position]);
     react.useEffect(() => {
         var _a, _b;
         if (!onMissFeedbackChange) {
@@ -161,7 +167,10 @@ const PuzzlePlaySurface = ({ position, onFeedback, incInteractionNum, boardWidth
         (missBoard.boardAnimating ||
             missPhase === 'wrong' ||
             missPhase === 'refutation');
-    const arePiecesDraggable = position !== null && !positionLocked && !missLocked;
+    const arePiecesDraggable = position !== null &&
+        !positionLocked &&
+        !missLocked &&
+        correctMoveSquare === null;
     const onPieceDrop = (sourceSquare, targetSquare, piece) => {
         if (!position || positionLocked || position.isSolutionRevealed()) {
             return false;
@@ -183,6 +192,7 @@ const PuzzlePlaySurface = ({ position, onFeedback, incInteractionNum, boardWidth
             recordIfIncorrect: !(answerArrowVisible && !allowRetryOnIncorrect),
         });
         if (!guess.accepted) {
+            attemptMissedRef.current = true;
             onFeedback({
                 index: position.getIndex(),
                 guess: { sourceSquare, targetSquare, piece },
@@ -225,38 +235,47 @@ const PuzzlePlaySurface = ({ position, onFeedback, incInteractionNum, boardWidth
         setIncorrectActive(false);
         missBoard.missSequence.clearSequence();
         onMissFeedbackChange === null || onMissFeedbackChange === void 0 ? void 0 : onMissFeedbackChange(null);
-        onFeedback({
+        clearCorrectMoveFeedback();
+        const assistedByAnswerArrow = answerArrowVisible && attemptMissedRef.current;
+        const guessPayload = {
             index: position.getIndex(),
             guess: { sourceSquare, targetSquare, piece },
-            isCorrect: true,
-            isFinished: guess.finished,
-        });
-        notifyHost();
-        setTimeout(() => {
-            position.resetInteractions();
-            notifyHost();
-        }, 500);
-        if (position.isAlternativeCheckmate()) {
-            notifyHost();
-            return true;
+        };
+        if (assistedByAnswerArrow) {
+            // Miss feedback for this ply is already saved; dragging along the answer
+            // arrow only continues the line — it must not count as a clean solve.
+            if (guess.finished) {
+                onFeedback(Object.assign(Object.assign({}, guessPayload), { isCorrect: false, isFinished: true }));
+            }
+        }
+        else {
+            onFeedback(Object.assign(Object.assign({}, guessPayload), { isCorrect: true, isFinished: guess.finished }));
         }
         position.next();
+        boardFenRef.current = position.fen();
         notifyHost();
-        if (position.hasResumeConfig()) {
-            onResumeCorrect === null || onResumeCorrect === void 0 ? void 0 : onResumeCorrect(position);
-            return true;
-        }
-        setTimeout(() => {
+        const finishCorrectFeedback = () => {
+            position.resetInteractions();
+            notifyHost();
+            if (position.isAlternativeCheckmate()) {
+                return;
+            }
+            if (position.hasResumeConfig()) {
+                onResumeCorrect === null || onResumeCorrect === void 0 ? void 0 : onResumeCorrect(position);
+                return;
+            }
             if (!position.isFinished()) {
                 position.next();
+                boardFenRef.current = position.fen();
             }
             notifyHost();
-        }, 500);
+        };
+        showCorrectMove(targetSquare, finishCorrectFeedback);
         return true;
     };
     return (jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: hasBoard ? (jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, checkSquare: (_e = position === null || position === void 0 ? void 0 : position.getCheckSquare()) !== null && _e !== void 0 ? _e : '', hintSquare: (_f = position === null || position === void 0 ? void 0 : position.getHintSquare()) !== null && _f !== void 0 ? _f : null, incorrectMoveSquare: showAnswerArrowOnIncorrect
                 ? null
-                : ((_g = position === null || position === void 0 ? void 0 : position.getIncorrectMoveSquare()) !== null && _g !== void 0 ? _g : null), customArrows: customArrows, onPieceDrop: onPieceDrop, position: displayFen, boardOrientation: boardOrientation, arePiecesDraggable: arePiecesDraggable, areArrowsAllowed: false, promotionDialogVariant: "modal", animationDuration: 0 }, revision)) : null }));
+                : ((_g = position === null || position === void 0 ? void 0 : position.getIncorrectMoveSquare()) !== null && _g !== void 0 ? _g : null), correctMoveSquare: correctMoveSquare, customArrows: customArrows, onPieceDrop: onPieceDrop, position: displayFen, boardOrientation: boardOrientation, arePiecesDraggable: arePiecesDraggable, areArrowsAllowed: false, promotionDialogVariant: "modal", animationDuration: 0 }, revision)) : null }));
 };
 
 const PuzzleBoard = ({ position, onFeedback, incInteractionNum, boardWidth, revealAnswerOnIncorrect = false, showAnswerArrowOnIncorrect = false, allowRetryOnIncorrect = true, answerArrowColor, }) => (jsxRuntime.jsx(PuzzlePlaySurface, { position: position, onFeedback: onFeedback, incInteractionNum: incInteractionNum, boardWidth: boardWidth, revealAnswerOnIncorrect: revealAnswerOnIncorrect, showAnswerArrowOnIncorrect: showAnswerArrowOnIncorrect, allowRetryOnIncorrect: allowRetryOnIncorrect, answerArrowColor: answerArrowColor }));
@@ -721,7 +740,7 @@ const puzzlePositionFromFetch = (fen, moves, resume) => {
 const AUTO_ADVANCE_ON_COMPLETE_DELAY_MS = 700;
 const SOLUTION_STEP_MS = 500;
 const RESUME_AUTO_STEP_MS = 500;
-const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls = defaultRenderControls, renderAnalysisSidebar, renderAnalysisContainer, renderEngineEvaluation, renderBoardCaption, renderBoardFeedback, puzzleBoardWidth = DEFAULT_PUZZLE_BOARD_WIDTH, analysisLayout = reactChessCore.DEFAULT_ANALYSIS_LAYOUT, renderAnalysisMain, engine, autoAdvanceOnComplete = false, autoAdvanceOnCompleteAfterIncorrect = false, revealAnswerOnIncorrect = false, showAnswerArrowOnIncorrect = false, allowRetryOnIncorrect = true, showRefutationOnIncorrect, autoShowWrongMoves = true, refutationEngine, answerArrowColor, }) => {
+const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls = defaultRenderControls, renderAnalysisSidebar, renderAnalysisContainer, renderEngineEvaluation, renderBoardCaption, renderBoardFeedback, puzzleBoardWidth = DEFAULT_PUZZLE_BOARD_WIDTH, analysisLayout = reactChessCore.DEFAULT_ANALYSIS_LAYOUT, analysisBoardWidth, renderAnalysisMain, engine, autoAdvanceOnComplete = false, autoAdvanceOnCompleteAfterIncorrect = false, revealAnswerOnIncorrect = false, showAnswerArrowOnIncorrect = false, allowRetryOnIncorrect = true, showRefutationOnIncorrect, autoShowWrongMoves = true, refutationEngine, answerArrowColor, }) => {
     var _a, _b, _c, _d;
     const refutationOnIncorrect = showRefutationOnIncorrect !== null && showRefutationOnIncorrect !== void 0 ? showRefutationOnIncorrect : showAnswerArrowOnIncorrect;
     const stackControlsBelow = useStackPuzzleControlsBelow();
@@ -733,6 +752,7 @@ const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls =
     const [loadingNextPuzzle, setLoadingNextPuzzle] = react.useState(true);
     const [puzzleNum, setPuzzleNum] = react.useState(0);
     const [hasIncorrectAttempt, setHasIncorrectAttempt] = react.useState(false);
+    const [hintUsed, setHintUsed] = react.useState(false);
     const [puzzleComplete, setPuzzleComplete] = react.useState(false);
     const [completedAfterMiss, setCompletedAfterMiss] = react.useState(false);
     const [missFeedback, setMissFeedback] = react.useState(null);
@@ -758,6 +778,7 @@ const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls =
         let cancelled = false;
         setLoadingNextPuzzle(true);
         setHasIncorrectAttempt(false);
+        setHintUsed(false);
         setPuzzleComplete(false);
         setCompletedAfterMiss(false);
         setMissFeedback(null);
@@ -794,12 +815,18 @@ const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls =
         const incorrectThisFeedback = feedbackData.hintRequested ||
             feedbackData.solutionShown ||
             feedbackData.isCorrect === false;
+        if (feedbackData.hintRequested) {
+            setHintUsed(true);
+        }
         if (incorrectThisFeedback) {
             setHasIncorrectAttempt(true);
         }
         if (feedbackData.isFinished) {
             setPuzzleComplete(true);
-            setCompletedAfterMiss(hasIncorrectAttempt || incorrectThisFeedback);
+            setCompletedAfterMiss((prev) => prev ||
+                hasIncorrectAttempt ||
+                incorrectThisFeedback ||
+                feedbackData.hintRequested === true);
         }
         onFeedback(feedbackData);
     };
@@ -1003,10 +1030,11 @@ const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls =
     };
     const analysis = usePuzzleAnalysis(position, resultStatus, puzzleNum);
     const analysisSnapshot = analysis.isOpen && analysis.snapshot ? analysis.snapshot : null;
+    const resolvedAnalysisBoardWidth = analysisBoardWidth !== null && analysisBoardWidth !== void 0 ? analysisBoardWidth : analysisLayout.boardWidth;
     const useHostAnalysisUi = Boolean(renderAnalysisSidebar &&
         renderAnalysisContainer &&
         (renderEngineEvaluation || (engine === null || engine === void 0 ? void 0 : engine.enabled) === false));
-    return (jsxRuntime.jsx(reactChessCore.ThemeProvider, { theme: theme, boardTheme: boardTheme, children: analysisSnapshot ? (jsxRuntime.jsx(reactChessCore.AnalysisErrorBoundary, { onClose: analysis.closeAnalysis, children: useHostAnalysisUi ? (jsxRuntime.jsx(reactChessCore.AnalysisBoardCore, { analysisContext: analysisSnapshot, onClose: analysis.closeAnalysis, theme: theme, boardWidth: analysisLayout.boardWidth, engine: engine, renderMain: renderAnalysisMain !== null && renderAnalysisMain !== void 0 ? renderAnalysisMain : (({ board, sidebar, model }) => (jsxRuntime.jsx(reactChessCore.AnalysisBoardLayout, { layout: analysisLayout, model: model, board: board, sidebar: sidebar }))), renderSidebar: renderAnalysisSidebar, renderContainer: renderAnalysisContainer, renderEngineEvaluation: renderEngineEvaluation !== null && renderEngineEvaluation !== void 0 ? renderEngineEvaluation : (() => null) })) : (jsxRuntime.jsx(reactChessCore.AnalysisBoard, { analysisContext: analysisSnapshot, onClose: analysis.closeAnalysis, theme: theme, layout: analysisLayout, engine: engine, renderMain: renderAnalysisMain, renderSidebar: renderAnalysisSidebar, renderContainer: renderAnalysisContainer, renderEngineEvaluation: renderEngineEvaluation })) })) : (jsxRuntime.jsxs("div", { style: puzzlePlayRowStyle(controlsPlacement), children: [jsxRuntime.jsxs("div", { style: puzzleBoardColumnStyle(puzzleBoardWidth, controlsPlacement), children: [jsxRuntime.jsx("div", { style: puzzleBoardSlotWrapperStyle(), children: jsxRuntime.jsx("div", { style: puzzleBoardSlotStyle(), children: jsxRuntime.jsx(PuzzlePlaySurface, { position: position, boardWidth: puzzleBoardWidth, onFeedback: handleFeedback, incInteractionNum: incInteractionNum, onResumeCorrect: runResumeAutoAdvance, revealAnswerOnIncorrect: revealAnswerOnIncorrect, showAnswerArrowOnIncorrect: showAnswerArrowOnIncorrect, allowRetryOnIncorrect: allowRetryOnIncorrect, showRefutationOnIncorrect: refutationOnIncorrect, autoShowWrongMoves: autoShowWrongMoves, refutationEngine: refutationEngine !== null && refutationEngine !== void 0 ? refutationEngine : engine, answerArrowColor: answerArrowColor, positionLocked: loadingNextPuzzle, onMissFeedbackChange: setMissFeedback }) }) }), renderBoardCaption && (jsxRuntime.jsx("div", { style: puzzleBoardCaptionSlotStyle(), children: renderBoardCaption({
+    return (jsxRuntime.jsx(reactChessCore.ThemeProvider, { theme: theme, boardTheme: boardTheme, children: analysisSnapshot ? (jsxRuntime.jsx(reactChessCore.AnalysisErrorBoundary, { onClose: analysis.closeAnalysis, children: useHostAnalysisUi ? (jsxRuntime.jsx(reactChessCore.AnalysisBoardCore, { analysisContext: analysisSnapshot, onClose: analysis.closeAnalysis, theme: theme, boardWidth: resolvedAnalysisBoardWidth, engine: engine, renderMain: renderAnalysisMain !== null && renderAnalysisMain !== void 0 ? renderAnalysisMain : (({ board, sidebar, model }) => (jsxRuntime.jsx(reactChessCore.AnalysisBoardLayout, { layout: analysisLayout, model: model, board: board, sidebar: sidebar }))), renderSidebar: renderAnalysisSidebar, renderContainer: renderAnalysisContainer, renderEngineEvaluation: renderEngineEvaluation !== null && renderEngineEvaluation !== void 0 ? renderEngineEvaluation : (() => null) })) : (jsxRuntime.jsx(reactChessCore.AnalysisBoard, { analysisContext: analysisSnapshot, onClose: analysis.closeAnalysis, theme: theme, layout: analysisLayout, engine: engine, renderMain: renderAnalysisMain, renderSidebar: renderAnalysisSidebar, renderContainer: renderAnalysisContainer, renderEngineEvaluation: renderEngineEvaluation })) })) : (jsxRuntime.jsxs("div", { style: puzzlePlayRowStyle(controlsPlacement), children: [jsxRuntime.jsxs("div", { style: puzzleBoardColumnStyle(puzzleBoardWidth, controlsPlacement), children: [jsxRuntime.jsx("div", { style: puzzleBoardSlotWrapperStyle(), children: jsxRuntime.jsx("div", { style: puzzleBoardSlotStyle(), children: jsxRuntime.jsx(PuzzlePlaySurface, { position: position, boardWidth: puzzleBoardWidth, onFeedback: handleFeedback, incInteractionNum: incInteractionNum, onResumeCorrect: runResumeAutoAdvance, revealAnswerOnIncorrect: revealAnswerOnIncorrect, showAnswerArrowOnIncorrect: showAnswerArrowOnIncorrect, allowRetryOnIncorrect: allowRetryOnIncorrect, showRefutationOnIncorrect: refutationOnIncorrect, autoShowWrongMoves: autoShowWrongMoves, refutationEngine: refutationEngine !== null && refutationEngine !== void 0 ? refutationEngine : engine, answerArrowColor: answerArrowColor, positionLocked: loadingNextPuzzle, onMissFeedbackChange: setMissFeedback }) }) }), renderBoardCaption && (jsxRuntime.jsx("div", { style: puzzleBoardCaptionSlotStyle(), children: renderBoardCaption({
                                 sideToMove: (_a = position === null || position === void 0 ? void 0 : position.getSideToMove()) !== null && _a !== void 0 ? _a : null,
                                 playerColor: position
                                     ? position.getPlayerColor()
@@ -1018,6 +1046,7 @@ const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls =
                                 missPhase: (_c = missFeedback === null || missFeedback === void 0 ? void 0 : missFeedback.phase) !== null && _c !== void 0 ? _c : null,
                                 answerArrowVisible: (_d = missFeedback === null || missFeedback === void 0 ? void 0 : missFeedback.answerArrowVisible) !== null && _d !== void 0 ? _d : false,
                                 completedAfterMiss,
+                                hintUsed,
                             }) }))] }), jsxRuntime.jsxs("div", { style: puzzleControlsSlotStyle(controlsPlacement), children: [renderControls(handleHintRequest, handleShowSolution, handleNextPuzzle, resultStatus, {
                             visible: analysis.canOpen,
                             openAnalysis: analysis.openAnalysis,
@@ -1026,6 +1055,7 @@ const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls =
                                 cleanSolve: !hasIncorrectAttempt,
                                 refutationSan: missFeedback === null || missFeedback === void 0 ? void 0 : missFeedback.refutationSan,
                                 missPhase: missFeedback === null || missFeedback === void 0 ? void 0 : missFeedback.phase,
+                                hintUsed,
                             }) }))] })] })) }));
 };
 
@@ -1034,7 +1064,7 @@ const PuzzleBoardWithControls = ({ theme, boardTheme, apiProxy, renderControls =
  * side's pieces be dragged. Move validation and sequencing live in
  * {@link LineBoardWithControls}.
  */
-const LineBoard = ({ fen, orientation, trainSide, draggable, onPieceDrop, boardWidth, }) => (jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, position: fen, boardOrientation: orientation, arePiecesDraggable: draggable, isDraggablePiece: ({ piece }) => piece[0] === trainSide, onPieceDrop: (source, target, piece) => onPieceDrop(source, target, piece), autoPromoteToQueen: true, areArrowsAllowed: false, customBoardStyle: { borderRadius: 4 } }) }));
+const LineBoard = ({ fen, orientation, trainSide, draggable, correctMoveSquare = null, onPieceDrop, boardWidth, }) => (jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, correctMoveSquare: correctMoveSquare, position: fen, boardOrientation: orientation, arePiecesDraggable: draggable, isDraggablePiece: ({ piece }) => piece[0] === trainSide, onPieceDrop: (source, target, piece) => onPieceDrop(source, target, piece), autoPromoteToQueen: true, areArrowsAllowed: false, customBoardStyle: { borderRadius: 4 } }) }));
 
 /** Library default line-drill status controls (unstyled). */
 const DefaultLineControls = ({ moveNumber, total, finished, isUserTurn, feedback, }) => (jsxRuntime.jsxs("div", { style: rowStyle, children: [jsxRuntime.jsx("span", { style: statusStyle, children: finished ? 'Line complete' : `Move ${moveNumber} of ${total}` }), feedback && !finished && (jsxRuntime.jsx("span", { style: Object.assign(Object.assign({}, statusStyle), { color: feedback.isCorrect ? '#2e7d32' : '#c62828' }), children: feedback.isCorrect
@@ -1081,6 +1111,8 @@ const LineBoardWithControls = ({ theme, boardTheme, line, onComplete, onMove, re
     const [currentIndex, setCurrentIndex] = react.useState(0);
     const [finished, setFinished] = react.useState(false);
     const [feedback, setFeedback] = react.useState(null);
+    const [displayFen, setDisplayFen] = react.useState(null);
+    const { correctMoveSquare, showCorrectMove, clearCorrectMoveFeedback, isShowingCorrectMove, } = reactChessCore.useCorrectMoveFeedback();
     const total = line.movesUci.length;
     const orientation = boardOrientationForLine(line.trainSide);
     const applyMove = react.useCallback((index) => {
@@ -1105,7 +1137,7 @@ const LineBoardWithControls = ({ theme, boardTheme, line, onComplete, onMove, re
     }, [line.movesUci]);
     // Auto-play opponent moves and detect the end of the line.
     react.useEffect(() => {
-        if (finished) {
+        if (finished || isShowingCorrectMove) {
             return;
         }
         if (currentIndex >= total) {
@@ -1124,6 +1156,7 @@ const LineBoardWithControls = ({ theme, boardTheme, line, onComplete, onMove, re
         line.trainSide,
         applyMove,
         opponentMoveDelayMs,
+        isShowingCorrectMove,
     ]);
     // Emit the completion event exactly once.
     react.useEffect(() => {
@@ -1135,15 +1168,16 @@ const LineBoardWithControls = ({ theme, boardTheme, line, onComplete, onMove, re
     }, [finished]);
     const handleDrop = (source, target, piece) => {
         var _a, _b, _c;
-        if (finished) {
+        if (finished || isShowingCorrectMove) {
             return false;
         }
-        if (turnFromFen(chessRef.current.fen()) !== line.trainSide) {
+        const setupFen = displayFen !== null && displayFen !== void 0 ? displayFen : chessRef.current.fen();
+        if (turnFromFen(setupFen) !== line.trainSide) {
             return false;
         }
         const index = currentIndex;
         const expected = line.movesUci[index];
-        const dropResult = reactChessCore.evaluateExpectedMoveDrop(chessRef.current.fen(), source, target, piece, expected, true);
+        const dropResult = reactChessCore.evaluateExpectedMoveDrop(setupFen, source, target, piece, expected, true);
         if (dropResult.kind === 'illegal' || dropResult.kind === 'ignored') {
             return false;
         }
@@ -1153,16 +1187,31 @@ const LineBoardWithControls = ({ theme, boardTheme, line, onComplete, onMove, re
         const moveFeedback = { index, isCorrect, expectedSan };
         setFeedback(moveFeedback);
         (_c = onMoveRef.current) === null || _c === void 0 ? void 0 : _c.call(onMoveRef, moveFeedback);
-        applyMove(index);
+        if (isCorrect) {
+            const nextFen = reactChessCore.fenAfterUci(setupFen, dropResult.uci);
+            if (nextFen) {
+                setDisplayFen(nextFen);
+            }
+            showCorrectMove(target, () => {
+                setDisplayFen(null);
+                setFeedback(null);
+                clearCorrectMoveFeedback();
+                applyMove(index);
+            });
+        }
         return isCorrect;
     };
+    const boardFen = displayFen !== null && displayFen !== void 0 ? displayFen : fen;
     const moveNumber = Math.min(currentIndex + 1, total);
-    const isUserTurn = !finished && turnFromFen(fen) === line.trainSide && currentIndex < total;
+    const isUserTurn = !finished &&
+        !isShowingCorrectMove &&
+        turnFromFen(boardFen) === line.trainSide &&
+        currentIndex < total;
     const stackControlsBelow = useStackPuzzleControlsBelow();
     const controlsPlacement = stackControlsBelow
         ? 'below'
         : 'beside';
-    return (jsxRuntime.jsx(reactChessCore.ThemeProvider, { theme: theme, boardTheme: boardTheme, children: jsxRuntime.jsxs("div", { style: puzzlePlayRowStyle(controlsPlacement), children: [jsxRuntime.jsx("div", { style: puzzleBoardColumnStyle(boardWidth, controlsPlacement), children: jsxRuntime.jsx("div", { style: puzzleBoardSlotStyle(), children: jsxRuntime.jsx(LineBoard, { fen: fen, orientation: orientation, trainSide: line.trainSide, draggable: isUserTurn, onPieceDrop: handleDrop, boardWidth: boardWidth }) }) }), jsxRuntime.jsx("div", { style: puzzleControlsSlotStyle(controlsPlacement), children: renderControls({
+    return (jsxRuntime.jsx(reactChessCore.ThemeProvider, { theme: theme, boardTheme: boardTheme, children: jsxRuntime.jsxs("div", { style: puzzlePlayRowStyle(controlsPlacement), children: [jsxRuntime.jsx("div", { style: puzzleBoardColumnStyle(boardWidth, controlsPlacement), children: jsxRuntime.jsx("div", { style: puzzleBoardSlotStyle(), children: jsxRuntime.jsx(LineBoard, { fen: boardFen, orientation: orientation, trainSide: line.trainSide, draggable: isUserTurn, correctMoveSquare: correctMoveSquare, onPieceDrop: handleDrop, boardWidth: boardWidth }) }) }), jsxRuntime.jsx("div", { style: puzzleControlsSlotStyle(controlsPlacement), children: renderControls({
                         trainSide: line.trainSide,
                         moveNumber,
                         total,

package/package.json

@@ -1,87 +1,87 @@
-{
-  "name": "react-chess-puzzle-kit",
-  "version": "1.0.1",
-  "description": "React chess puzzle kit: play, controls, analysis, and browser Stockfish for endchess.training and other apps",
-  "license": "MIT",
-  "author": "Robert Blackwell",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/reblackwell3/react-chess-puzzle-kit.git"
-  },
-  "bugs": {
-    "url": "https://github.com/reblackwell3/react-chess-puzzle-kit/issues"
-  },
-  "homepage": "https://github.com/reblackwell3/react-chess-puzzle-kit#readme",
-  "keywords": [
-    "react",
-    "chess",
-    "chess.js",
-    "chess puzzle",
-    "puzzle",
-    "analysis",
-    "stockfish",
-    "react-chessboard",
-    "chessboard",
-    "drag and drop"
-  ],
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rollup -c",
-    "copy:stockfish": "node scripts/copy-stockfish.mjs",
-    "prepare": "rollup -c",
-    "prestorybook": "npm run copy:stockfish",
-    "test": "jest --config jest.config.cjs",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "serve-storybook": "serve storybook-static",
-    "prepublishOnly": "npm run build"
-  },
-  "dependencies": {
-    "chess.js": "^1.0.0-beta.8",
-    "rollup": "^4.22.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "typescript": "^5.6.2"
-  },
-  "peerDependencies": {
-    "chess.js": "^1.0.0-beta.8",
-    "react": "^18.3.1",
-    "react-chess-core": "^0.1.1",
-    "react-chessboard": "^4.7.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-onboarding": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "chess.js": "^1.0.0-beta.8",
-    "jest": "^29.7.0",
-    "react": "^18.3.1",
-    "react-chess-core": "^0.1.1",
-    "react-chessboard": "^4.7.1",
-    "storybook": "^8.2.9",
-    "ts-jest": "^29.2.4",
-    "vite": "^5.4.11",
-    "vite-tsconfig-paths": "^5.0.1"
-  },
-  "optionalDependencies": {
-    "stockfish": "^18.0.7"
-  }
-}
+{
+  "name": "react-chess-puzzle-kit",
+  "version": "1.0.3",
+  "description": "React chess puzzle kit: play, controls, analysis, and browser Stockfish for endchess.training and other apps",
+  "license": "MIT",
+  "author": "Robert Blackwell",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reblackwell3/react-chess-puzzle-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/reblackwell3/react-chess-puzzle-kit/issues"
+  },
+  "homepage": "https://github.com/reblackwell3/react-chess-puzzle-kit#readme",
+  "keywords": [
+    "react",
+    "chess",
+    "chess.js",
+    "chess puzzle",
+    "puzzle",
+    "analysis",
+    "stockfish",
+    "react-chessboard",
+    "chessboard",
+    "drag and drop"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "copy:stockfish": "node scripts/copy-stockfish.mjs",
+    "prepare": "rollup -c",
+    "prestorybook": "npm run copy:stockfish",
+    "test": "jest --config jest.config.cjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "serve-storybook": "serve storybook-static",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "chess.js": "^1.0.0-beta.8",
+    "rollup": "^4.22.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "typescript": "^5.6.2"
+  },
+  "peerDependencies": {
+    "chess.js": "^1.0.0-beta.8",
+    "react": "^18.3.1",
+    "react-chess-core": "^0.1.1",
+    "react-chessboard": "^4.7.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "chess.js": "^1.0.0-beta.8",
+    "jest": "^29.7.0",
+    "react": "^18.3.1",
+    "react-chess-core": "^0.1.1",
+    "react-chessboard": "^4.7.1",
+    "storybook": "^8.2.9",
+    "ts-jest": "^29.2.4",
+    "vite": "^5.4.11",
+    "vite-tsconfig-paths": "^5.0.1"
+  },
+  "optionalDependencies": {
+    "stockfish": "^18.0.7"
+  }
+}