react-chess-replay-trainer 0.0.5 → 0.0.6

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

@@ -30,6 +30,8 @@ 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. */

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, lastMoveUciAtPly, 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);
@@ -153,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);
     }, []);
@@ -184,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;
@@ -229,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);
@@ -244,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);
@@ -261,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) {
@@ -290,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(() => {
@@ -298,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,
@@ -315,6 +318,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         expectedSan,
         expectedUci,
         correctMoveSquare,
+        incorrectMoveSquare,
         displayFen,
         lastMoveUci,
         canPrev: plyIndex > 0,
@@ -461,12 +465,14 @@ 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')

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);
@@ -154,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);
     }, []);
@@ -185,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;
@@ -230,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);
@@ -245,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);
@@ -262,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) {
@@ -291,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(() => {
@@ -299,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,
@@ -316,6 +319,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         expectedSan,
         expectedUci,
         correctMoveSquare,
+        incorrectMoveSquare,
         displayFen,
         lastMoveUci,
         canPrev: plyIndex > 0,
@@ -462,12 +466,14 @@ 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')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chess-replay-trainer",
-  "version": "0.0.5",
+  "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",