react-chess-replay-trainer 0.0.4 → 0.0.6

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

@@ -30,8 +30,12 @@ export interface ReplayTrainerState {
     expectedUci: string | null;
     /** Destination square of the last correct guess (green check overlay). */
     correctMoveSquare: string | null;
+    /** Origin square of the last rejected guess (red X overlay). */
+    incorrectMoveSquare: 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 { useCorrectMoveFeedback, createExpectedMoveDropHandler, fenAfterUci, ThemeProvider, ChessboardDnDProvider, HighlightChessboard, PlyNavigation, AnalysisErrorBoundary, AnalysisBoard } from 'react-chess-core';
+import { useTrainingMoveFeedback, lastMoveUciAtPly, fenAfterUci, DEFAULT_ANSWER_ARROW_COLOR, 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';
 
@@ -72,14 +72,14 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     const [mode, setMode] = useState('browse');
-    const [trainColor, setTrainColor] = useState('both');
+    const [trainColor, setTrainColor] = useState('white');
     const [plyIndex, setPlyIndex] = useState(0);
     const [feedback, setFeedback] = useState(null);
     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 { correctMoveSquare, incorrectMoveSquare, showCorrectMove, clearMoveFeedback, isShowingCorrectMove, isShowingIncorrectMove, createDropHandler, } = useTrainingMoveFeedback();
     const fetchGameRef = useRef(fetchGame);
     fetchGameRef.current = fetchGame;
     const onMissRef = useRef(onMiss);
@@ -89,9 +89,11 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const recordedRef = useRef(new Set());
     const completedFiredRef = useRef(false);
     const modeRef = useRef('browse');
-    const trainColorRef = useRef('both');
+    const trainColorRef = useRef('white');
     const showingCorrectMoveRef = useRef(false);
     showingCorrectMoveRef.current = isShowingCorrectMove;
+    const showingIncorrectMoveRef = useRef(false);
+    showingIncorrectMoveRef.current = isShowingIncorrectMove;
     useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -101,8 +103,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         completedFiredRef.current = false;
         setMode('browse');
         modeRef.current = 'browse';
-        setTrainColor('both');
-        trainColorRef.current = 'both';
+        setTrainColor('white');
+        trainColorRef.current = 'white';
         setFeedback(null);
         setExpectedSan(null);
         setExpectedUci(null);
@@ -136,6 +138,13 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     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);
@@ -146,8 +155,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         setExpectedSan(null);
         setExpectedUci(null);
         setFeedbackFen(null);
-        clearCorrectMoveFeedback();
-    }, [clearCorrectMoveFeedback]);
+        clearMoveFeedback();
+    }, [clearMoveFeedback]);
     const stopAutoplay = useCallback(() => {
         setAutoplayActive(false);
     }, []);
@@ -177,7 +186,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         }
         startAutoplay();
     }, [autoplayActive, startAutoplay, stopAutoplay]);
-    const startTraining = useCallback((color = 'both') => {
+    const startTraining = useCallback((color = 'white') => {
         setAutoplayActive(false);
         setTrainColor(color);
         trainColorRef.current = color;
@@ -222,14 +231,15 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         setFeedback('incorrect');
         recordMiss(plyIndex);
     }, [complete, game, movesUci, plyIndex, recordMiss, isUserTurn]);
-    const handleDrop = useCallback((source, target, piece) => createExpectedMoveDropHandler({
+    const handleDrop = useCallback((source, target, piece) => createDropHandler({
         fen,
         expectedUci: movesUci[plyIndex],
         enabled: modeRef.current === 'train' &&
             !complete &&
             !showingCorrectMoveRef.current &&
+            !showingIncorrectMoveRef.current &&
             isTrainSideToMove(trainColorRef.current, sideToMove$1),
-        onCorrect: (uci) => {
+        onCorrect: ({ uci, targetSquare }) => {
             setFeedback('correct');
             setExpectedSan(null);
             setExpectedUci(null);
@@ -237,7 +247,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             if (nextFen) {
                 setFeedbackFen(nextFen);
             }
-            showCorrectMove(uci.slice(2, 4), () => {
+            showCorrectMove(targetSquare, () => {
                 setFeedbackFen(null);
                 setFeedback(null);
                 setPlyIndex((p) => p + 1);
@@ -254,7 +264,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             setExpectedUci(expectedUci);
             recordMiss(plyIndex);
         },
-    })(source, target, piece), [complete, fen, movesUci, plyIndex, game, recordMiss, sideToMove$1, showCorrectMove]);
+    })(source, target, piece), [complete, createDropHandler, fen, movesUci, plyIndex, game, recordMiss, sideToMove$1, showCorrectMove]);
     useEffect(() => {
         var _a;
         if (mode === 'train' && complete && !completedFiredRef.current) {
@@ -283,7 +293,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         if (mode !== 'train' || complete || trainColor === 'both' || isUserTurn) {
             return;
         }
-        if (isShowingCorrectMove) {
+        if (isShowingCorrectMove || isShowingIncorrectMove) {
             return;
         }
         const id = setTimeout(() => {
@@ -291,7 +301,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             clearTransient();
         }, OPPONENT_MOVE_DELAY_MS);
         return () => clearTimeout(id);
-    }, [mode, complete, trainColor, isUserTurn, plyIndex, totalPly, clearTransient, isShowingCorrectMove]);
+    }, [mode, complete, trainColor, isUserTurn, plyIndex, totalPly, clearTransient, isShowingCorrectMove, isShowingIncorrectMove]);
     return {
         game,
         loading,
@@ -308,7 +318,9 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         expectedSan,
         expectedUci,
         correctMoveSquare,
+        incorrectMoveSquare,
         displayFen,
+        lastMoveUci,
         canPrev: plyIndex > 0,
         canNext: plyIndex < totalPly,
         goFirst,
@@ -453,18 +465,20 @@ const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit
             [
                 state.expectedUci.slice(0, 2),
                 state.expectedUci.slice(2, 4),
-                colors.primary,
+                DEFAULT_ANSWER_ARROW_COLOR,
             ],
         ]
         : [];
     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, correctMoveSquare: state.correctMoveSquare, position: state.displayFen, boardOrientation: boardOrientation, arePiecesDraggable: draggable && !state.correctMoveSquare, 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: state.incorrectMoveSquare, correctMoveSquare: state.correctMoveSquare, position: state.displayFen, boardOrientation: boardOrientation, arePiecesDraggable: draggable &&
+                                !state.correctMoveSquare &&
+                                !state.incorrectMoveSquare, 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

@@ -73,14 +73,14 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const [loading, setLoading] = react.useState(true);
     const [error, setError] = react.useState(null);
     const [mode, setMode] = react.useState('browse');
-    const [trainColor, setTrainColor] = react.useState('both');
+    const [trainColor, setTrainColor] = react.useState('white');
     const [plyIndex, setPlyIndex] = react.useState(0);
     const [feedback, setFeedback] = react.useState(null);
     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 { correctMoveSquare, incorrectMoveSquare, showCorrectMove, clearMoveFeedback, isShowingCorrectMove, isShowingIncorrectMove, createDropHandler, } = reactChessCore.useTrainingMoveFeedback();
     const fetchGameRef = react.useRef(fetchGame);
     fetchGameRef.current = fetchGame;
     const onMissRef = react.useRef(onMiss);
@@ -90,9 +90,11 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const recordedRef = react.useRef(new Set());
     const completedFiredRef = react.useRef(false);
     const modeRef = react.useRef('browse');
-    const trainColorRef = react.useRef('both');
+    const trainColorRef = react.useRef('white');
     const showingCorrectMoveRef = react.useRef(false);
     showingCorrectMoveRef.current = isShowingCorrectMove;
+    const showingIncorrectMoveRef = react.useRef(false);
+    showingIncorrectMoveRef.current = isShowingIncorrectMove;
     react.useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -102,8 +104,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         completedFiredRef.current = false;
         setMode('browse');
         modeRef.current = 'browse';
-        setTrainColor('both');
-        trainColorRef.current = 'both';
+        setTrainColor('white');
+        trainColorRef.current = 'white';
         setFeedback(null);
         setExpectedSan(null);
         setExpectedUci(null);
@@ -137,6 +139,13 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     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);
@@ -147,8 +156,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         setExpectedSan(null);
         setExpectedUci(null);
         setFeedbackFen(null);
-        clearCorrectMoveFeedback();
-    }, [clearCorrectMoveFeedback]);
+        clearMoveFeedback();
+    }, [clearMoveFeedback]);
     const stopAutoplay = react.useCallback(() => {
         setAutoplayActive(false);
     }, []);
@@ -178,7 +187,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         }
         startAutoplay();
     }, [autoplayActive, startAutoplay, stopAutoplay]);
-    const startTraining = react.useCallback((color = 'both') => {
+    const startTraining = react.useCallback((color = 'white') => {
         setAutoplayActive(false);
         setTrainColor(color);
         trainColorRef.current = color;
@@ -223,14 +232,15 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         setFeedback('incorrect');
         recordMiss(plyIndex);
     }, [complete, game, movesUci, plyIndex, recordMiss, isUserTurn]);
-    const handleDrop = react.useCallback((source, target, piece) => reactChessCore.createExpectedMoveDropHandler({
+    const handleDrop = react.useCallback((source, target, piece) => createDropHandler({
         fen,
         expectedUci: movesUci[plyIndex],
         enabled: modeRef.current === 'train' &&
             !complete &&
             !showingCorrectMoveRef.current &&
+            !showingIncorrectMoveRef.current &&
             isTrainSideToMove(trainColorRef.current, sideToMove$1),
-        onCorrect: (uci) => {
+        onCorrect: ({ uci, targetSquare }) => {
             setFeedback('correct');
             setExpectedSan(null);
             setExpectedUci(null);
@@ -238,7 +248,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             if (nextFen) {
                 setFeedbackFen(nextFen);
             }
-            showCorrectMove(uci.slice(2, 4), () => {
+            showCorrectMove(targetSquare, () => {
                 setFeedbackFen(null);
                 setFeedback(null);
                 setPlyIndex((p) => p + 1);
@@ -255,7 +265,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             setExpectedUci(expectedUci);
             recordMiss(plyIndex);
         },
-    })(source, target, piece), [complete, fen, movesUci, plyIndex, game, recordMiss, sideToMove$1, showCorrectMove]);
+    })(source, target, piece), [complete, createDropHandler, fen, movesUci, plyIndex, game, recordMiss, sideToMove$1, showCorrectMove]);
     react.useEffect(() => {
         var _a;
         if (mode === 'train' && complete && !completedFiredRef.current) {
@@ -284,7 +294,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         if (mode !== 'train' || complete || trainColor === 'both' || isUserTurn) {
             return;
         }
-        if (isShowingCorrectMove) {
+        if (isShowingCorrectMove || isShowingIncorrectMove) {
             return;
         }
         const id = setTimeout(() => {
@@ -292,7 +302,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             clearTransient();
         }, OPPONENT_MOVE_DELAY_MS);
         return () => clearTimeout(id);
-    }, [mode, complete, trainColor, isUserTurn, plyIndex, totalPly, clearTransient, isShowingCorrectMove]);
+    }, [mode, complete, trainColor, isUserTurn, plyIndex, totalPly, clearTransient, isShowingCorrectMove, isShowingIncorrectMove]);
     return {
         game,
         loading,
@@ -309,7 +319,9 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         expectedSan,
         expectedUci,
         correctMoveSquare,
+        incorrectMoveSquare,
         displayFen,
+        lastMoveUci,
         canPrev: plyIndex > 0,
         canNext: plyIndex < totalPly,
         goFirst,
@@ -454,18 +466,20 @@ const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit
             [
                 state.expectedUci.slice(0, 2),
                 state.expectedUci.slice(2, 4),
-                colors.primary,
+                reactChessCore.DEFAULT_ANSWER_ARROW_COLOR,
             ],
         ]
         : [];
     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, correctMoveSquare: state.correctMoveSquare, position: state.displayFen, boardOrientation: boardOrientation, arePiecesDraggable: draggable && !state.correctMoveSquare, 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: state.incorrectMoveSquare, correctMoveSquare: state.correctMoveSquare, position: state.displayFen, boardOrientation: boardOrientation, arePiecesDraggable: draggable &&
+                                !state.correctMoveSquare &&
+                                !state.incorrectMoveSquare, 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.4",
+  "version": "0.0.6",
   "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",