react-chess-explorer 0.0.4 → 0.0.6

package/dist/features/explorer/hooks/useGameReplayTraining.d.ts

@@ -16,6 +16,9 @@ export declare function useGameReplayTraining({ gameId, startFen, fetchGame, }:
     error: string | null;
     feedback: GameReplayFeedback;
     lastExpectedSan: string | null;
+    lastMoveUci: any;
+    correctMoveSquare: any;
+    incorrectMoveSquare: any;
     expectedSan: string | undefined;
     handlePieceDrop: (sourceSquare: string, targetSquare: string, piece: string) => boolean;
     revealMove: () => void;

package/dist/features/explorer/hooks/usePositionHistory.d.ts

@@ -2,6 +2,8 @@ export type PositionHistoryEntry = {
     fen: string;
     /** SAN of the move played from the previous entry to reach this FEN. */
     lastSan?: string;
+    /** UCI of the move played from the previous entry to reach this FEN. */
+    lastUci?: string;
 };
 export declare function initialHistoryState(initialFen: string, initialLineSans?: string[]): {
     history: PositionHistoryEntry[];
@@ -13,14 +15,17 @@ export declare function usePositionHistory(initialFen: string, initialLineSans?:
     lineSans: string[];
     forwardSans: string[];
     currentFen: string;
-    pushEntry: (fen: string, lastSan?: string) => PositionHistoryEntry;
+    lastMoveUci: string | null;
+    pushEntry: (fen: string, lastSan?: string, lastUci?: string) => PositionHistoryEntry;
     pushEntries: (entries: {
         fen: string;
         lastSan: string;
+        lastUci?: string;
     }[]) => void;
     replaceLineEntries: (startFen: string, entries: {
         fen: string;
         lastSan: string;
+        lastUci?: string;
     }[]) => void;
     goBack: () => PositionHistoryEntry | null;
     goForward: () => PositionHistoryEntry | null;

package/dist/features/explorer/hooks/usePositionReferenceData.d.ts

@@ -28,6 +28,7 @@ export declare function usePositionReferenceData({ fenProp, onFenChange, initial
     canGoForward: boolean;
     forwardSans: string[];
     selectedVariationKey: string | undefined;
+    lastMoveUci: string | null;
     setSources: import("react").Dispatch<import("react").SetStateAction<GameSource[]>>;
     setGamesMoveFilterUci: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     handleMoveSelect: (move: PositionMoveApiDto) => void;

package/dist/features/explorer/positionUtils.d.ts

@@ -10,6 +10,7 @@ export declare function applyBoardMove(fen: string, sourceSquare: string, target
 export type LineSansEntry = {
     fen: string;
     lastSan: string;
+    lastUci: string;
 };
 /** Play a SAN sequence from a start FEN; returns null if any move is illegal. */
 export declare function applyLineSans(startFen: string, sans: string[]): {

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { Chess } from 'chess.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ThemeProvider, HighlightChessboard, usePositionKeyboardNav, ChessboardDnDProvider } from 'react-chess-core';
+import { ThemeProvider, HighlightChessboard, usePositionKeyboardNav, ChessboardDnDProvider, useCorrectMoveFeedback, useIncorrectMoveFeedback, lastMoveUciAtPly } from 'react-chess-core';
 import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
 
 /** Standard start position — placeholder until game replay is implemented. */
@@ -39,6 +39,7 @@ function applyBoardMove(fen, sourceSquare, targetSquare, piece) {
 }
 /** Play a SAN sequence from a start FEN; returns null if any move is illegal. */
 function applyLineSans(startFen, sans) {
+    var _a;
     const chess = new Chess(startFen);
     const entries = [];
     for (const san of sans) {
@@ -46,9 +47,10 @@ function applyLineSans(startFen, sans) {
             const move = chess.move(san);
             if (!move)
                 return null;
-            entries.push({ fen: chess.fen(), lastSan: move.san });
+            const lastUci = `${move.from}${move.to}${(_a = move.promotion) !== null && _a !== void 0 ? _a : ""}`;
+            entries.push({ fen: chess.fen(), lastSan: move.san, lastUci });
         }
-        catch (_a) {
+        catch (_b) {
             return null;
         }
     }
@@ -523,19 +525,19 @@ function initialHistoryState(initialFen, initialLineSans) {
     };
 }
 function usePositionHistory(initialFen, initialLineSans) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const [history, setHistory] = useState(() => initialHistoryState(initialFen, initialLineSans).history);
     const [historyIndex, setHistoryIndex] = useState(() => initialHistoryState(initialFen, initialLineSans).historyIndex);
     const canGoBack = historyIndex > 0;
     const canGoForward = historyIndex < history.length - 1;
-    const pushEntry = useCallback((fen, lastSan) => {
+    const pushEntry = useCallback((fen, lastSan, lastUci) => {
         setHistory((prev) => {
             const trimmed = prev.slice(0, historyIndex + 1);
-            const next = [...trimmed, { fen, lastSan }];
+            const next = [...trimmed, { fen, lastSan, lastUci }];
             setHistoryIndex(next.length - 1);
             return next;
         });
-        return { fen, lastSan };
+        return { fen, lastSan, lastUci };
     }, [historyIndex]);
     const goBack = useCallback(() => {
         if (historyIndex <= 0)
@@ -596,12 +598,14 @@ function usePositionHistory(initialFen, initialLineSans) {
         setHistory([{ fen: startFen }, ...entries]);
         setHistoryIndex(entries.length);
     }, []);
+    const lastMoveUci = historyIndex > 0 ? (_d = (_c = history[historyIndex]) === null || _c === void 0 ? void 0 : _c.lastUci) !== null && _d !== void 0 ? _d : null : null;
     return {
         canGoBack,
         canGoForward,
         lineSans,
         forwardSans,
         currentFen,
+        lastMoveUci,
         pushEntry,
         pushEntries,
         replaceLineEntries,
@@ -646,7 +650,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         }
         isAnimatingVariationRef.current = false;
     }, []);
-    const { canGoBack, canGoForward, lineSans, forwardSans, currentFen, pushEntry, pushEntries, replaceLineEntries, goBack, goForward, goFirst, goLast, resetHistory, } = usePositionHistory(initialFen, initialLineSans);
+    const { canGoBack, canGoForward, lineSans, forwardSans, currentFen, pushEntry, pushEntries, replaceLineEntries, goBack, goForward, goFirst, goLast, resetHistory, lastMoveUci: historyLastMoveUci, } = usePositionHistory(initialFen, initialLineSans);
     /** FEN used for explorer API queries — follows move history, not animation frames. */
     const queryFen = currentFen;
     const initialLineKey = useMemo(() => { var _a; return (_a = initialLineSans === null || initialLineSans === void 0 ? void 0 : initialLineSans.join("|")) !== null && _a !== void 0 ? _a : ""; }, [initialLineSans]);
@@ -681,6 +685,10 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
     }), [sources]);
     const lastAppliedLineKeyRef = useRef(initialLineKey);
     useEffect(() => () => cancelVariationAnimation(), [cancelVariationAnimation]);
+    // Hold URL line callbacks until history catches up after an external line change.
+    useEffect(() => {
+        readyForLineSyncRef.current = false;
+    }, [initialLineKey]);
     // Apply URL line changes only when the external line key changes — not when the
     // user clicks moves (internal lineSans updates must not re-sync from stale props).
     useEffect(() => {
@@ -891,7 +899,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         const nextFen = fenAfterUci(queryFen, move.uci);
         if (!nextFen)
             return;
-        pushEntry(nextFen, move.san);
+        pushEntry(nextFen, move.san, move.uci);
         setSelectedVariationKey(undefined);
         applyNavigation(nextFen, true);
     }, [queryFen, pushEntry, applyNavigation, cancelVariationAnimation]);
@@ -905,7 +913,11 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
             const nextFen = fenAfterUci(lineFen, line.uciPath[i]);
             if (!nextFen)
                 return;
-            entries.push({ fen: nextFen, lastSan: line.moves[i].san });
+            entries.push({
+                fen: nextFen,
+                lastSan: line.moves[i].san,
+                lastUci: line.uciPath[i],
+            });
             lineFen = nextFen;
         }
         if (entries.length === 0)
@@ -940,7 +952,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         const result = applyBoardMove(queryFen, sourceSquare, targetSquare, piece);
         if (!result)
             return false;
-        pushEntry(result.fen, result.san);
+        pushEntry(result.fen, result.san, result.uci);
         setSelectedVariationKey(undefined);
         applyNavigation(result.fen, true);
         return true;
@@ -1017,6 +1029,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         canGoForward,
         forwardSans,
         selectedVariationKey,
+        lastMoveUci: historyLastMoveUci,
         setSources,
         setGamesMoveFilterUci,
         handleMoveSelect,
@@ -1115,7 +1128,7 @@ const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineS
         fetchPositionGames,
         fetchPositionVariations,
     });
-    const { fen, boardFen, games, sources, lineSans, loading, showPositionLoading, gamesLoading, positionReady, displayMoves, error, lineLabel, canGoBack, canGoForward, forwardSans, selectedVariationKey, setSources, handleMoveSelect, handleLineSelect, handlePieceDrop, handleBack, handleForward, handleFirst, handleLast, } = referenceData;
+    const { fen, boardFen, games, sources, lineSans, loading, showPositionLoading, gamesLoading, positionReady, displayMoves, error, lineLabel, canGoBack, canGoForward, forwardSans, selectedVariationKey, lastMoveUci, setSources, handleMoveSelect, handleLineSelect, handlePieceDrop, handleBack, handleForward, handleFirst, handleLast, } = referenceData;
     usePositionKeyboardNav({
         enabled: keyboardNav,
         canPrev: canGoBack,
@@ -1179,7 +1192,7 @@ const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineS
         overflow: fillHeight ? "hidden" : "visible",
         boxSizing: "border-box",
     };
-    const board = (jsxs(Fragment, { children: [jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { boardWidth: boardWidth, position: boardFen, boardOrientation: boardOrientation, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }, boardOrientation) }), renderBoardNav(boardNavProps)] }));
+    const board = (jsxs(Fragment, { children: [jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { boardWidth: boardWidth, position: boardFen, boardOrientation: boardOrientation, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, lastMoveUci: lastMoveUci, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }, boardOrientation) }), renderBoardNav(boardNavProps)] }));
     const referencePanel = (jsx(DefaultReferencePanel, { theme: theme, fillHeight: fillHeight, status: renderStatus({
             error,
             loading: showPositionLoading,
@@ -1260,12 +1273,16 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
     const [error, setError] = useState(null);
     const [feedback, setFeedback] = useState(null);
     const [lastExpectedSan, setLastExpectedSan] = useState(null);
+    const { correctMoveSquare, showCorrectMove, clearCorrectMoveFeedback, isShowingCorrectMove, } = useCorrectMoveFeedback();
+    const { incorrectMoveSquare, showIncorrectMove, clearIncorrectMoveFeedback, isShowingIncorrectMove, } = useIncorrectMoveFeedback();
     useEffect(() => {
         let cancelled = false;
         setLoading(true);
         setError(null);
         setFeedback(null);
         setLastExpectedSan(null);
+        clearCorrectMoveFeedback();
+        clearIncorrectMoveFeedback();
         (() => __awaiter(this, void 0, void 0, function* () {
             try {
                 const loaded = yield fetchGame(gameId);
@@ -1292,7 +1309,7 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
         return () => {
             cancelled = true;
         };
-    }, [gameId, startFen, fetchGame]);
+    }, [gameId, startFen, fetchGame, clearCorrectMoveFeedback, clearIncorrectMoveFeedback]);
     const fen = useMemo(() => {
         if (!game)
             return startFen;
@@ -1301,22 +1318,42 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
     const complete = game ? plyIndex >= game.movesUci.length : false;
     const expectedUci = game === null || game === void 0 ? void 0 : game.movesUci[plyIndex];
     const expectedSan = game === null || game === void 0 ? void 0 : game.movesSan[plyIndex];
+    const lastMoveUci = useMemo(() => (game ? lastMoveUciAtPly(game.movesUci, plyIndex) : null), [game, plyIndex]);
     const handlePieceDrop = useCallback((sourceSquare, targetSquare, piece) => {
-        if (!game || complete || !expectedUci)
+        if (!game ||
+            complete ||
+            !expectedUci ||
+            isShowingCorrectMove ||
+            isShowingIncorrectMove) {
             return false;
+        }
         const uci = uciFromDrop(fen, sourceSquare, targetSquare, piece);
         if (!uci)
             return false;
         if (uci === expectedUci) {
             setFeedback("correct");
-            setPlyIndex((p) => p + 1);
             setLastExpectedSan(null);
+            showCorrectMove(targetSquare, () => {
+                setFeedback(null);
+                setPlyIndex((p) => p + 1);
+            });
             return true;
         }
         setFeedback("incorrect");
         setLastExpectedSan(expectedSan !== null && expectedSan !== void 0 ? expectedSan : null);
+        showIncorrectMove(sourceSquare);
         return false;
-    }, [game, complete, expectedUci, expectedSan, fen]);
+    }, [
+        game,
+        complete,
+        expectedUci,
+        expectedSan,
+        fen,
+        isShowingCorrectMove,
+        isShowingIncorrectMove,
+        showCorrectMove,
+        showIncorrectMove,
+    ]);
     const revealMove = useCallback(() => {
         if (!game || complete || !expectedSan)
             return;
@@ -1334,6 +1371,9 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
         error,
         feedback,
         lastExpectedSan,
+        lastMoveUci,
+        correctMoveSquare,
+        incorrectMoveSquare,
         expectedSan,
         handlePieceDrop,
         revealMove,
@@ -1354,7 +1394,7 @@ const defaultButtonStyle = {
     cursor: "pointer",
 };
 const GameReplayTrainer = ({ gameId, startFen, fetchGame, onExit, theme = "dark", boardWidth = DEFAULT_REFERENCE_LAYOUT.boardWidth, renderStatus, }) => {
-    const { game, fen, plyIndex, totalPlies, complete, loading, error, feedback, lastExpectedSan, handlePieceDrop, revealMove, } = useGameReplayTraining({ gameId, startFen, fetchGame });
+    const { game, fen, plyIndex, totalPlies, complete, loading, error, feedback, lastExpectedSan, lastMoveUci, correctMoveSquare, incorrectMoveSquare, handlePieceDrop, revealMove, } = useGameReplayTraining({ gameId, startFen, fetchGame });
     const status = renderStatus === null || renderStatus === void 0 ? void 0 : renderStatus({
         loading,
         error,
@@ -1374,7 +1414,7 @@ const GameReplayTrainer = ({ gameId, startFen, fetchGame, onExit, theme = "dark"
                             !error &&
                             !complete &&
                             feedback === "incorrect" &&
-                            lastExpectedSan && (jsxs("span", { style: { color: "#ef6c00" }, children: ["Expected ", lastExpectedSan] })), !loading && !error && !complete && feedback === null && (jsxs("span", { children: ["Guess move ", plyIndex + 1, " of ", totalPlies] }))] })), jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { boardWidth: boardWidth, position: fen, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }) }), !complete && !loading && !error && (jsx("button", { type: "button", style: defaultButtonStyle, onClick: revealMove, children: "Show move" }))] }) }));
+                            lastExpectedSan && (jsxs("span", { style: { color: "#ef6c00" }, children: ["Expected ", lastExpectedSan] })), !loading && !error && !complete && feedback === null && (jsxs("span", { children: ["Guess move ", plyIndex + 1, " of ", totalPlies] }))] })), jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { boardWidth: boardWidth, position: fen, checkSquare: "", hintSquare: null, incorrectMoveSquare: incorrectMoveSquare, correctMoveSquare: correctMoveSquare, lastMoveUci: lastMoveUci, arePiecesDraggable: !complete && !loading && !error && !correctMoveSquare && !incorrectMoveSquare, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }) }), !complete && !loading && !error && (jsx("button", { type: "button", style: defaultButtonStyle, onClick: revealMove, children: "Show move" }))] }) }));
 };
 
 const mockPosition = {

package/dist/index.js

@@ -41,6 +41,7 @@ function applyBoardMove(fen, sourceSquare, targetSquare, piece) {
 }
 /** Play a SAN sequence from a start FEN; returns null if any move is illegal. */
 function applyLineSans(startFen, sans) {
+    var _a;
     const chess = new chess_js.Chess(startFen);
     const entries = [];
     for (const san of sans) {
@@ -48,9 +49,10 @@ function applyLineSans(startFen, sans) {
             const move = chess.move(san);
             if (!move)
                 return null;
-            entries.push({ fen: chess.fen(), lastSan: move.san });
+            const lastUci = `${move.from}${move.to}${(_a = move.promotion) !== null && _a !== void 0 ? _a : ""}`;
+            entries.push({ fen: chess.fen(), lastSan: move.san, lastUci });
         }
-        catch (_a) {
+        catch (_b) {
             return null;
         }
     }
@@ -525,19 +527,19 @@ function initialHistoryState(initialFen, initialLineSans) {
     };
 }
 function usePositionHistory(initialFen, initialLineSans) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const [history, setHistory] = react.useState(() => initialHistoryState(initialFen, initialLineSans).history);
     const [historyIndex, setHistoryIndex] = react.useState(() => initialHistoryState(initialFen, initialLineSans).historyIndex);
     const canGoBack = historyIndex > 0;
     const canGoForward = historyIndex < history.length - 1;
-    const pushEntry = react.useCallback((fen, lastSan) => {
+    const pushEntry = react.useCallback((fen, lastSan, lastUci) => {
         setHistory((prev) => {
             const trimmed = prev.slice(0, historyIndex + 1);
-            const next = [...trimmed, { fen, lastSan }];
+            const next = [...trimmed, { fen, lastSan, lastUci }];
             setHistoryIndex(next.length - 1);
             return next;
         });
-        return { fen, lastSan };
+        return { fen, lastSan, lastUci };
     }, [historyIndex]);
     const goBack = react.useCallback(() => {
         if (historyIndex <= 0)
@@ -598,12 +600,14 @@ function usePositionHistory(initialFen, initialLineSans) {
         setHistory([{ fen: startFen }, ...entries]);
         setHistoryIndex(entries.length);
     }, []);
+    const lastMoveUci = historyIndex > 0 ? (_d = (_c = history[historyIndex]) === null || _c === void 0 ? void 0 : _c.lastUci) !== null && _d !== void 0 ? _d : null : null;
     return {
         canGoBack,
         canGoForward,
         lineSans,
         forwardSans,
         currentFen,
+        lastMoveUci,
         pushEntry,
         pushEntries,
         replaceLineEntries,
@@ -648,7 +652,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         }
         isAnimatingVariationRef.current = false;
     }, []);
-    const { canGoBack, canGoForward, lineSans, forwardSans, currentFen, pushEntry, pushEntries, replaceLineEntries, goBack, goForward, goFirst, goLast, resetHistory, } = usePositionHistory(initialFen, initialLineSans);
+    const { canGoBack, canGoForward, lineSans, forwardSans, currentFen, pushEntry, pushEntries, replaceLineEntries, goBack, goForward, goFirst, goLast, resetHistory, lastMoveUci: historyLastMoveUci, } = usePositionHistory(initialFen, initialLineSans);
     /** FEN used for explorer API queries — follows move history, not animation frames. */
     const queryFen = currentFen;
     const initialLineKey = react.useMemo(() => { var _a; return (_a = initialLineSans === null || initialLineSans === void 0 ? void 0 : initialLineSans.join("|")) !== null && _a !== void 0 ? _a : ""; }, [initialLineSans]);
@@ -683,6 +687,10 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
     }), [sources]);
     const lastAppliedLineKeyRef = react.useRef(initialLineKey);
     react.useEffect(() => () => cancelVariationAnimation(), [cancelVariationAnimation]);
+    // Hold URL line callbacks until history catches up after an external line change.
+    react.useEffect(() => {
+        readyForLineSyncRef.current = false;
+    }, [initialLineKey]);
     // Apply URL line changes only when the external line key changes — not when the
     // user clicks moves (internal lineSans updates must not re-sync from stale props).
     react.useEffect(() => {
@@ -893,7 +901,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         const nextFen = fenAfterUci(queryFen, move.uci);
         if (!nextFen)
             return;
-        pushEntry(nextFen, move.san);
+        pushEntry(nextFen, move.san, move.uci);
         setSelectedVariationKey(undefined);
         applyNavigation(nextFen, true);
     }, [queryFen, pushEntry, applyNavigation, cancelVariationAnimation]);
@@ -907,7 +915,11 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
             const nextFen = fenAfterUci(lineFen, line.uciPath[i]);
             if (!nextFen)
                 return;
-            entries.push({ fen: nextFen, lastSan: line.moves[i].san });
+            entries.push({
+                fen: nextFen,
+                lastSan: line.moves[i].san,
+                lastUci: line.uciPath[i],
+            });
             lineFen = nextFen;
         }
         if (entries.length === 0)
@@ -942,7 +954,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         const result = applyBoardMove(queryFen, sourceSquare, targetSquare, piece);
         if (!result)
             return false;
-        pushEntry(result.fen, result.san);
+        pushEntry(result.fen, result.san, result.uci);
         setSelectedVariationKey(undefined);
         applyNavigation(result.fen, true);
         return true;
@@ -1019,6 +1031,7 @@ function usePositionReferenceData({ fenProp, onFenChange, initialLineSans, onLin
         canGoForward,
         forwardSans,
         selectedVariationKey,
+        lastMoveUci: historyLastMoveUci,
         setSources,
         setGamesMoveFilterUci,
         handleMoveSelect,
@@ -1117,7 +1130,7 @@ const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineS
         fetchPositionGames,
         fetchPositionVariations,
     });
-    const { fen, boardFen, games, sources, lineSans, loading, showPositionLoading, gamesLoading, positionReady, displayMoves, error, lineLabel, canGoBack, canGoForward, forwardSans, selectedVariationKey, setSources, handleMoveSelect, handleLineSelect, handlePieceDrop, handleBack, handleForward, handleFirst, handleLast, } = referenceData;
+    const { fen, boardFen, games, sources, lineSans, loading, showPositionLoading, gamesLoading, positionReady, displayMoves, error, lineLabel, canGoBack, canGoForward, forwardSans, selectedVariationKey, lastMoveUci, setSources, handleMoveSelect, handleLineSelect, handlePieceDrop, handleBack, handleForward, handleFirst, handleLast, } = referenceData;
     reactChessCore.usePositionKeyboardNav({
         enabled: keyboardNav,
         canPrev: canGoBack,
@@ -1181,7 +1194,7 @@ const PositionReferenceExplorerCore = ({ fen: fenProp, onFenChange, initialLineS
         overflow: fillHeight ? "hidden" : "visible",
         boxSizing: "border-box",
     };
-    const board = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, position: boardFen, boardOrientation: boardOrientation, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }, boardOrientation) }), renderBoardNav(boardNavProps)] }));
+    const board = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, position: boardFen, boardOrientation: boardOrientation, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, lastMoveUci: lastMoveUci, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }, boardOrientation) }), renderBoardNav(boardNavProps)] }));
     const referencePanel = (jsxRuntime.jsx(DefaultReferencePanel, { theme: theme, fillHeight: fillHeight, status: renderStatus({
             error,
             loading: showPositionLoading,
@@ -1262,12 +1275,16 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
     const [error, setError] = react.useState(null);
     const [feedback, setFeedback] = react.useState(null);
     const [lastExpectedSan, setLastExpectedSan] = react.useState(null);
+    const { correctMoveSquare, showCorrectMove, clearCorrectMoveFeedback, isShowingCorrectMove, } = reactChessCore.useCorrectMoveFeedback();
+    const { incorrectMoveSquare, showIncorrectMove, clearIncorrectMoveFeedback, isShowingIncorrectMove, } = reactChessCore.useIncorrectMoveFeedback();
     react.useEffect(() => {
         let cancelled = false;
         setLoading(true);
         setError(null);
         setFeedback(null);
         setLastExpectedSan(null);
+        clearCorrectMoveFeedback();
+        clearIncorrectMoveFeedback();
         (() => __awaiter(this, void 0, void 0, function* () {
             try {
                 const loaded = yield fetchGame(gameId);
@@ -1294,7 +1311,7 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
         return () => {
             cancelled = true;
         };
-    }, [gameId, startFen, fetchGame]);
+    }, [gameId, startFen, fetchGame, clearCorrectMoveFeedback, clearIncorrectMoveFeedback]);
     const fen = react.useMemo(() => {
         if (!game)
             return startFen;
@@ -1303,22 +1320,42 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
     const complete = game ? plyIndex >= game.movesUci.length : false;
     const expectedUci = game === null || game === void 0 ? void 0 : game.movesUci[plyIndex];
     const expectedSan = game === null || game === void 0 ? void 0 : game.movesSan[plyIndex];
+    const lastMoveUci = react.useMemo(() => (game ? reactChessCore.lastMoveUciAtPly(game.movesUci, plyIndex) : null), [game, plyIndex]);
     const handlePieceDrop = react.useCallback((sourceSquare, targetSquare, piece) => {
-        if (!game || complete || !expectedUci)
+        if (!game ||
+            complete ||
+            !expectedUci ||
+            isShowingCorrectMove ||
+            isShowingIncorrectMove) {
             return false;
+        }
         const uci = uciFromDrop(fen, sourceSquare, targetSquare, piece);
         if (!uci)
             return false;
         if (uci === expectedUci) {
             setFeedback("correct");
-            setPlyIndex((p) => p + 1);
             setLastExpectedSan(null);
+            showCorrectMove(targetSquare, () => {
+                setFeedback(null);
+                setPlyIndex((p) => p + 1);
+            });
             return true;
         }
         setFeedback("incorrect");
         setLastExpectedSan(expectedSan !== null && expectedSan !== void 0 ? expectedSan : null);
+        showIncorrectMove(sourceSquare);
         return false;
-    }, [game, complete, expectedUci, expectedSan, fen]);
+    }, [
+        game,
+        complete,
+        expectedUci,
+        expectedSan,
+        fen,
+        isShowingCorrectMove,
+        isShowingIncorrectMove,
+        showCorrectMove,
+        showIncorrectMove,
+    ]);
     const revealMove = react.useCallback(() => {
         if (!game || complete || !expectedSan)
             return;
@@ -1336,6 +1373,9 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
         error,
         feedback,
         lastExpectedSan,
+        lastMoveUci,
+        correctMoveSquare,
+        incorrectMoveSquare,
         expectedSan,
         handlePieceDrop,
         revealMove,
@@ -1356,7 +1396,7 @@ const defaultButtonStyle = {
     cursor: "pointer",
 };
 const GameReplayTrainer = ({ gameId, startFen, fetchGame, onExit, theme = "dark", boardWidth = DEFAULT_REFERENCE_LAYOUT.boardWidth, renderStatus, }) => {
-    const { game, fen, plyIndex, totalPlies, complete, loading, error, feedback, lastExpectedSan, handlePieceDrop, revealMove, } = useGameReplayTraining({ gameId, startFen, fetchGame });
+    const { game, fen, plyIndex, totalPlies, complete, loading, error, feedback, lastExpectedSan, lastMoveUci, correctMoveSquare, incorrectMoveSquare, handlePieceDrop, revealMove, } = useGameReplayTraining({ gameId, startFen, fetchGame });
     const status = renderStatus === null || renderStatus === void 0 ? void 0 : renderStatus({
         loading,
         error,
@@ -1376,7 +1416,7 @@ const GameReplayTrainer = ({ gameId, startFen, fetchGame, onExit, theme = "dark"
                             !error &&
                             !complete &&
                             feedback === "incorrect" &&
-                            lastExpectedSan && (jsxRuntime.jsxs("span", { style: { color: "#ef6c00" }, children: ["Expected ", lastExpectedSan] })), !loading && !error && !complete && feedback === null && (jsxRuntime.jsxs("span", { children: ["Guess move ", plyIndex + 1, " of ", totalPlies] }))] })), jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, position: fen, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }) }), !complete && !loading && !error && (jsxRuntime.jsx("button", { type: "button", style: defaultButtonStyle, onClick: revealMove, children: "Show move" }))] }) }));
+                            lastExpectedSan && (jsxRuntime.jsxs("span", { style: { color: "#ef6c00" }, children: ["Expected ", lastExpectedSan] })), !loading && !error && !complete && feedback === null && (jsxRuntime.jsxs("span", { children: ["Guess move ", plyIndex + 1, " of ", totalPlies] }))] })), jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, position: fen, checkSquare: "", hintSquare: null, incorrectMoveSquare: incorrectMoveSquare, correctMoveSquare: correctMoveSquare, lastMoveUci: lastMoveUci, arePiecesDraggable: !complete && !loading && !error && !correctMoveSquare && !incorrectMoveSquare, onPieceDrop: handlePieceDrop, promotionDialogVariant: "modal" }) }), !complete && !loading && !error && (jsxRuntime.jsx("button", { type: "button", style: defaultButtonStyle, onClick: revealMove, children: "Show move" }))] }) }));
 };
 
 const mockPosition = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-chess-explorer",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "React components for browsing and replaying chess games (depends on react-chess-core only)",
   "license": "MIT",
   "author": "Robert Blackwell",