react-chess-replay-trainer 0.0.3 → 0.0.5

package/dist/features/replay/hooks/useReplayTrainer.d.ts

@@ -28,6 +28,12 @@ export interface ReplayTrainerState {
     /** Revealed/expected move at the current ply (set after a miss or reveal). */
     expectedSan: string | null;
     expectedUci: string | null;
+    /** Destination square of the last correct guess (green check overlay). */
+    correctMoveSquare: string | null;
+    /** FEN shown on the board (includes a pending correct-move ply). */
+    displayFen: string;
+    /** UCI of the move that produced the current board position. */
+    lastMoveUci: string | null;
     canPrev: boolean;
     canNext: boolean;
     goFirst: () => void;

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { createExpectedMoveDropHandler, ThemeProvider, ChessboardDnDProvider, HighlightChessboard, PlyNavigation, AnalysisErrorBoundary, AnalysisBoard } from 'react-chess-core';
+import { useCorrectMoveFeedback, lastMoveUciAtPly, createExpectedMoveDropHandler, fenAfterUci, ThemeProvider, ChessboardDnDProvider, HighlightChessboard, PlyNavigation, AnalysisErrorBoundary, AnalysisBoard } from 'react-chess-core';
 export { AnalysisBoard, AnalysisBoardCore, AnalysisErrorBoundary, DEFAULT_ANALYSIS_LAYOUT, DefaultPlyNavigation, PlyNavigation, MISS_MOVE_ANIMATION_MS as REPLAY_MISS_MOVE_ANIMATION_MS, MISS_REFUTATION_MAX_WAIT_MS as REPLAY_MISS_REFUTATION_MAX_WAIT_MS, MISS_REFUTATION_PAUSE_MS as REPLAY_MISS_REFUTATION_PAUSE_MS, MISS_WRONG_PAUSE_MS as REPLAY_MISS_WRONG_PAUSE_MS, REFUTATION_EVAL_GAP_CP as REPLAY_REFUTATION_EVAL_GAP_CP, REFUTATION_EVAL_GAP_PAWNS as REPLAY_REFUTATION_EVAL_GAP_PAWNS, defaultRenderPlyNavigation, fenAfterUci, getMissDisplay as getReplayMissDisplay, refutationEvalGapCp, refutationFromEvaluation, refutationEngineOptions as replayRefutationEngineOptions, uciFromDrop, useMissBoard as useReplayMissBoard, useMissSequence as useReplayMissSequence, useMissRefutation as useReplayRefutation } from 'react-chess-core';
 import { Chess } from 'chess.js';
 
@@ -78,6 +78,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const [expectedSan, setExpectedSan] = useState(null);
     const [autoplayActive, setAutoplayActive] = useState(false);
     const [expectedUci, setExpectedUci] = useState(null);
+    const [feedbackFen, setFeedbackFen] = useState(null);
+    const { correctMoveSquare, showCorrectMove, clearCorrectMoveFeedback, isShowingCorrectMove, } = useCorrectMoveFeedback();
     const fetchGameRef = useRef(fetchGame);
     fetchGameRef.current = fetchGame;
     const onMissRef = useRef(onMiss);
@@ -88,6 +90,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const completedFiredRef = useRef(false);
     const modeRef = useRef('browse');
     const trainColorRef = useRef('both');
+    const showingCorrectMoveRef = useRef(false);
+    showingCorrectMoveRef.current = isShowingCorrectMove;
     useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -131,6 +135,14 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const movesUci = useMemo(() => { var _a; return (_a = game === null || game === void 0 ? void 0 : game.movesUci) !== null && _a !== void 0 ? _a : []; }, [game]);
     const totalPly = movesUci.length;
     const fen = useMemo(() => fenAtPly(movesUci, plyIndex), [movesUci, plyIndex]);
+    const displayFen = feedbackFen !== null && feedbackFen !== void 0 ? feedbackFen : fen;
+    const lastMoveUci = useMemo(() => {
+        var _a;
+        if (feedbackFen) {
+            return (_a = movesUci[plyIndex]) !== null && _a !== void 0 ? _a : null;
+        }
+        return lastMoveUciAtPly(movesUci, plyIndex);
+    }, [feedbackFen, movesUci, plyIndex]);
     const complete = plyIndex >= totalPly && totalPly > 0;
     const sideToMove$1 = sideToMove(fen);
     const isUserTurn = isTrainSideToMove(trainColor, sideToMove$1);
@@ -140,7 +152,9 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         setFeedback(null);
         setExpectedSan(null);
         setExpectedUci(null);
-    }, []);
+        setFeedbackFen(null);
+        clearCorrectMoveFeedback();
+    }, [clearCorrectMoveFeedback]);
     const stopAutoplay = useCallback(() => {
         setAutoplayActive(false);
     }, []);
@@ -220,12 +234,21 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         expectedUci: movesUci[plyIndex],
         enabled: modeRef.current === 'train' &&
             !complete &&
+            !showingCorrectMoveRef.current &&
             isTrainSideToMove(trainColorRef.current, sideToMove$1),
-        onCorrect: () => {
+        onCorrect: (uci) => {
             setFeedback('correct');
             setExpectedSan(null);
             setExpectedUci(null);
-            setPlyIndex((p) => p + 1);
+            const nextFen = fenAfterUci(fen, uci);
+            if (nextFen) {
+                setFeedbackFen(nextFen);
+            }
+            showCorrectMove(uci.slice(2, 4), () => {
+                setFeedbackFen(null);
+                setFeedback(null);
+                setPlyIndex((p) => p + 1);
+            });
         },
         onIncorrect: () => {
             var _a, _b;
@@ -238,7 +261,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             setExpectedUci(expectedUci);
             recordMiss(plyIndex);
         },
-    })(source, target, piece), [complete, movesUci, plyIndex, fen, game, recordMiss, sideToMove$1]);
+    })(source, target, piece), [complete, fen, movesUci, plyIndex, game, recordMiss, sideToMove$1, showCorrectMove]);
     useEffect(() => {
         var _a;
         if (mode === 'train' && complete && !completedFiredRef.current) {
@@ -267,12 +290,15 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         if (mode !== 'train' || complete || trainColor === 'both' || isUserTurn) {
             return;
         }
+        if (isShowingCorrectMove) {
+            return;
+        }
         const id = setTimeout(() => {
             setPlyIndex((p) => (p < totalPly ? p + 1 : p));
             clearTransient();
         }, OPPONENT_MOVE_DELAY_MS);
         return () => clearTimeout(id);
-    }, [mode, complete, trainColor, isUserTurn, plyIndex, totalPly, clearTransient]);
+    }, [mode, complete, trainColor, isUserTurn, plyIndex, totalPly, clearTransient, isShowingCorrectMove]);
     return {
         game,
         loading,
@@ -288,6 +314,9 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         feedback,
         expectedSan,
         expectedUci,
+        correctMoveSquare,
+        displayFen,
+        lastMoveUci,
         canPrev: plyIndex > 0,
         canNext: plyIndex < totalPly,
         goFirst,
@@ -437,13 +466,13 @@ const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit
         ]
         : [];
     const draggable = training && !state.complete;
-    return (jsxs(ThemeProvider, { theme: theme, boardTheme: boardTheme, children: [jsxs("div", { style: mainContainerStyle(boardWidth, colors), children: [jsxs("div", { style: headerStyle, children: [jsxs("span", { style: playerNameStyle, children: [((_b = game.white) !== null && _b !== void 0 ? _b : 'White'), " vs ", ((_c = game.black) !== null && _c !== void 0 ? _c : 'Black')] }), game.result && jsx("span", { style: subtleTextStyle(colors), children: game.result })] }), jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, position: state.fen, boardOrientation: boardOrientation, arePiecesDraggable: draggable, isDraggablePiece: ({ piece }) => {
+    return (jsxs(ThemeProvider, { theme: theme, boardTheme: boardTheme, children: [jsxs("div", { style: mainContainerStyle(boardWidth, colors), children: [jsxs("div", { style: headerStyle, children: [jsxs("span", { style: playerNameStyle, children: [((_b = game.white) !== null && _b !== void 0 ? _b : 'White'), " vs ", ((_c = game.black) !== null && _c !== void 0 ? _c : 'Black')] }), game.result && jsx("span", { style: subtleTextStyle(colors), children: game.result })] }), jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, correctMoveSquare: state.correctMoveSquare, position: state.displayFen, boardOrientation: boardOrientation, arePiecesDraggable: draggable && !state.correctMoveSquare, isDraggablePiece: ({ piece }) => {
                                 if (state.trainColor === 'white')
                                     return piece[0] === 'w';
                                 if (state.trainColor === 'black')
                                     return piece[0] === 'b';
                                 return piece[0] === state.sideToMove;
-                            }, onPieceDrop: (source, target, piece) => state.handleDrop(source, target, piece), customArrows: customArrows, promotionDialogVariant: "modal", areArrowsAllowed: false, customBoardStyle: customBoardStyle }) }), jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }, children: [jsx(PlyNavigation, { plyIndex: state.plyIndex, totalPly: state.totalPly, canPrev: state.canPrev, canNext: state.canNext, onGoFirst: state.goFirst, onGoPrev: state.goPrev, onGoNext: state.goNext, onGoLast: state.goLast, onGoTo: state.goTo, theme: theme, showScrubber: showPlyScrubber, renderPlyNavigation: renderPlyNavigation }), jsx("button", { type: "button", onClick: state.toggleAutoplay, disabled: !state.autoplayActive && !state.canNext, style: buttonStyle(colors, state.autoplayActive ? 'ghost' : 'primary'), "aria-label": state.autoplayActive ? 'Stop autoplay' : 'Autoplay game', children: state.autoplayActive ? 'Stop' : 'Play' })] }), jsxs("div", { style: statusLineStyle(colors), children: ["Half move ", Math.min(state.plyIndex + (state.complete ? 0 : 1), state.totalPly), " of", ' ', state.totalPly, training && !state.complete && (jsxs(Fragment, { children: [` · ${TRAIN_COLOR_LABEL[state.trainColor]}`, state.trainColor === 'both'
+                            }, onPieceDrop: (source, target, piece) => state.handleDrop(source, target, piece), customArrows: customArrows, lastMoveUci: state.lastMoveUci, promotionDialogVariant: "modal", areArrowsAllowed: false, customBoardStyle: customBoardStyle }) }), jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }, children: [jsx(PlyNavigation, { plyIndex: state.plyIndex, totalPly: state.totalPly, canPrev: state.canPrev, canNext: state.canNext, onGoFirst: state.goFirst, onGoPrev: state.goPrev, onGoNext: state.goNext, onGoLast: state.goLast, onGoTo: state.goTo, theme: theme, showScrubber: showPlyScrubber, renderPlyNavigation: renderPlyNavigation }), jsx("button", { type: "button", onClick: state.toggleAutoplay, disabled: !state.autoplayActive && !state.canNext, style: buttonStyle(colors, state.autoplayActive ? 'ghost' : 'primary'), "aria-label": state.autoplayActive ? 'Stop autoplay' : 'Autoplay game', children: state.autoplayActive ? 'Stop' : 'Play' })] }), jsxs("div", { style: statusLineStyle(colors), children: ["Half move ", Math.min(state.plyIndex + (state.complete ? 0 : 1), state.totalPly), " of", ' ', state.totalPly, training && !state.complete && (jsxs(Fragment, { children: [` · ${TRAIN_COLOR_LABEL[state.trainColor]}`, state.trainColor === 'both'
                                         ? ` · ${state.sideToMove === 'b' ? 'Black' : 'White'} to move`
                                         : state.isUserTurn
                                             ? ' · Your move'

package/dist/index.js

@@ -79,6 +79,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const [expectedSan, setExpectedSan] = react.useState(null);
     const [autoplayActive, setAutoplayActive] = react.useState(false);
     const [expectedUci, setExpectedUci] = react.useState(null);
+    const [feedbackFen, setFeedbackFen] = react.useState(null);
+    const { correctMoveSquare, showCorrectMove, clearCorrectMoveFeedback, isShowingCorrectMove, } = reactChessCore.useCorrectMoveFeedback();
     const fetchGameRef = react.useRef(fetchGame);
     fetchGameRef.current = fetchGame;
     const onMissRef = react.useRef(onMiss);
@@ -89,6 +91,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const completedFiredRef = react.useRef(false);
     const modeRef = react.useRef('browse');
     const trainColorRef = react.useRef('both');
+    const showingCorrectMoveRef = react.useRef(false);
+    showingCorrectMoveRef.current = isShowingCorrectMove;
     react.useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -132,6 +136,14 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const movesUci = react.useMemo(() => { var _a; return (_a = game === null || game === void 0 ? void 0 : game.movesUci) !== null && _a !== void 0 ? _a : []; }, [game]);
     const totalPly = movesUci.length;
     const fen = react.useMemo(() => fenAtPly(movesUci, plyIndex), [movesUci, plyIndex]);
+    const displayFen = feedbackFen !== null && feedbackFen !== void 0 ? feedbackFen : fen;
+    const lastMoveUci = react.useMemo(() => {
+        var _a;
+        if (feedbackFen) {
+            return (_a = movesUci[plyIndex]) !== null && _a !== void 0 ? _a : null;
+        }
+        return reactChessCore.lastMoveUciAtPly(movesUci, plyIndex);
+    }, [feedbackFen, movesUci, plyIndex]);
     const complete = plyIndex >= totalPly && totalPly > 0;
     const sideToMove$1 = sideToMove(fen);
     const isUserTurn = isTrainSideToMove(trainColor, sideToMove$1);
@@ -141,7 +153,9 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         setFeedback(null);
         setExpectedSan(null);
         setExpectedUci(null);
-    }, []);
+        setFeedbackFen(null);
+        clearCorrectMoveFeedback();
+    }, [clearCorrectMoveFeedback]);
     const stopAutoplay = react.useCallback(() => {
         setAutoplayActive(false);
     }, []);
@@ -221,12 +235,21 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         expectedUci: movesUci[plyIndex],
         enabled: modeRef.current === 'train' &&
             !complete &&
+            !showingCorrectMoveRef.current &&
             isTrainSideToMove(trainColorRef.current, sideToMove$1),
-        onCorrect: () => {
+        onCorrect: (uci) => {
             setFeedback('correct');
             setExpectedSan(null);
             setExpectedUci(null);
-            setPlyIndex((p) => p + 1);
+            const nextFen = reactChessCore.fenAfterUci(fen, uci);
+            if (nextFen) {
+                setFeedbackFen(nextFen);
+            }
+            showCorrectMove(uci.slice(2, 4), () => {
+                setFeedbackFen(null);
+                setFeedback(null);
+                setPlyIndex((p) => p + 1);
+            });
         },
         onIncorrect: () => {
             var _a, _b;
@@ -239,7 +262,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             setExpectedUci(expectedUci);
             recordMiss(plyIndex);
         },
-    })(source, target, piece), [complete, movesUci, plyIndex, fen, game, recordMiss, sideToMove$1]);
+    })(source, target, piece), [complete, fen, movesUci, plyIndex, game, recordMiss, sideToMove$1, showCorrectMove]);
     react.useEffect(() => {
         var _a;
         if (mode === 'train' && complete && !completedFiredRef.current) {
@@ -268,12 +291,15 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         if (mode !== 'train' || complete || trainColor === 'both' || isUserTurn) {
             return;
         }
+        if (isShowingCorrectMove) {
+            return;
+        }
         const id = setTimeout(() => {
             setPlyIndex((p) => (p < totalPly ? p + 1 : p));
             clearTransient();
         }, OPPONENT_MOVE_DELAY_MS);
         return () => clearTimeout(id);
-    }, [mode, complete, trainColor, isUserTurn, plyIndex, totalPly, clearTransient]);
+    }, [mode, complete, trainColor, isUserTurn, plyIndex, totalPly, clearTransient, isShowingCorrectMove]);
     return {
         game,
         loading,
@@ -289,6 +315,9 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         feedback,
         expectedSan,
         expectedUci,
+        correctMoveSquare,
+        displayFen,
+        lastMoveUci,
         canPrev: plyIndex > 0,
         canNext: plyIndex < totalPly,
         goFirst,
@@ -438,13 +467,13 @@ const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit
         ]
         : [];
     const draggable = training && !state.complete;
-    return (jsxRuntime.jsxs(reactChessCore.ThemeProvider, { theme: theme, boardTheme: boardTheme, children: [jsxRuntime.jsxs("div", { style: mainContainerStyle(boardWidth, colors), children: [jsxRuntime.jsxs("div", { style: headerStyle, children: [jsxRuntime.jsxs("span", { style: playerNameStyle, children: [((_b = game.white) !== null && _b !== void 0 ? _b : 'White'), " vs ", ((_c = game.black) !== null && _c !== void 0 ? _c : 'Black')] }), game.result && jsxRuntime.jsx("span", { style: subtleTextStyle(colors), children: game.result })] }), jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, position: state.fen, boardOrientation: boardOrientation, arePiecesDraggable: draggable, isDraggablePiece: ({ piece }) => {
+    return (jsxRuntime.jsxs(reactChessCore.ThemeProvider, { theme: theme, boardTheme: boardTheme, children: [jsxRuntime.jsxs("div", { style: mainContainerStyle(boardWidth, colors), children: [jsxRuntime.jsxs("div", { style: headerStyle, children: [jsxRuntime.jsxs("span", { style: playerNameStyle, children: [((_b = game.white) !== null && _b !== void 0 ? _b : 'White'), " vs ", ((_c = game.black) !== null && _c !== void 0 ? _c : 'Black')] }), game.result && jsxRuntime.jsx("span", { style: subtleTextStyle(colors), children: game.result })] }), jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, correctMoveSquare: state.correctMoveSquare, position: state.displayFen, boardOrientation: boardOrientation, arePiecesDraggable: draggable && !state.correctMoveSquare, isDraggablePiece: ({ piece }) => {
                                 if (state.trainColor === 'white')
                                     return piece[0] === 'w';
                                 if (state.trainColor === 'black')
                                     return piece[0] === 'b';
                                 return piece[0] === state.sideToMove;
-                            }, onPieceDrop: (source, target, piece) => state.handleDrop(source, target, piece), customArrows: customArrows, promotionDialogVariant: "modal", areArrowsAllowed: false, customBoardStyle: customBoardStyle }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }, children: [jsxRuntime.jsx(reactChessCore.PlyNavigation, { plyIndex: state.plyIndex, totalPly: state.totalPly, canPrev: state.canPrev, canNext: state.canNext, onGoFirst: state.goFirst, onGoPrev: state.goPrev, onGoNext: state.goNext, onGoLast: state.goLast, onGoTo: state.goTo, theme: theme, showScrubber: showPlyScrubber, renderPlyNavigation: renderPlyNavigation }), jsxRuntime.jsx("button", { type: "button", onClick: state.toggleAutoplay, disabled: !state.autoplayActive && !state.canNext, style: buttonStyle(colors, state.autoplayActive ? 'ghost' : 'primary'), "aria-label": state.autoplayActive ? 'Stop autoplay' : 'Autoplay game', children: state.autoplayActive ? 'Stop' : 'Play' })] }), jsxRuntime.jsxs("div", { style: statusLineStyle(colors), children: ["Half move ", Math.min(state.plyIndex + (state.complete ? 0 : 1), state.totalPly), " of", ' ', state.totalPly, training && !state.complete && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [` · ${TRAIN_COLOR_LABEL[state.trainColor]}`, state.trainColor === 'both'
+                            }, onPieceDrop: (source, target, piece) => state.handleDrop(source, target, piece), customArrows: customArrows, lastMoveUci: state.lastMoveUci, promotionDialogVariant: "modal", areArrowsAllowed: false, customBoardStyle: customBoardStyle }) }), jsxRuntime.jsxs("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4 }, children: [jsxRuntime.jsx(reactChessCore.PlyNavigation, { plyIndex: state.plyIndex, totalPly: state.totalPly, canPrev: state.canPrev, canNext: state.canNext, onGoFirst: state.goFirst, onGoPrev: state.goPrev, onGoNext: state.goNext, onGoLast: state.goLast, onGoTo: state.goTo, theme: theme, showScrubber: showPlyScrubber, renderPlyNavigation: renderPlyNavigation }), jsxRuntime.jsx("button", { type: "button", onClick: state.toggleAutoplay, disabled: !state.autoplayActive && !state.canNext, style: buttonStyle(colors, state.autoplayActive ? 'ghost' : 'primary'), "aria-label": state.autoplayActive ? 'Stop autoplay' : 'Autoplay game', children: state.autoplayActive ? 'Stop' : 'Play' })] }), jsxRuntime.jsxs("div", { style: statusLineStyle(colors), children: ["Half move ", Math.min(state.plyIndex + (state.complete ? 0 : 1), state.totalPly), " of", ' ', state.totalPly, training && !state.complete && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [` · ${TRAIN_COLOR_LABEL[state.trainColor]}`, state.trainColor === 'both'
                                         ? ` · ${state.sideToMove === 'b' ? 'Black' : 'White'} to move`
                                         : state.isUserTurn
                                             ? ' · Your move'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chess-replay-trainer",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "React component for browsing a chess game and drilling its moves, reporting misses (uses react-chess-core for board and analysis)",
   "license": "MIT",
   "author": "Robert Blackwell",