react-chess-explorer 0.0.5 → 0.0.6

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

@@ -17,6 +17,8 @@ export declare function useGameReplayTraining({ gameId, startFen, fetchGame, }:
     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/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, lastMoveUciAtPly } 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. */
@@ -1273,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);
@@ -1305,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;
@@ -1316,21 +1320,40 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
     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;
@@ -1349,6 +1372,8 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
         feedback,
         lastExpectedSan,
         lastMoveUci,
+        correctMoveSquare,
+        incorrectMoveSquare,
         expectedSan,
         handlePieceDrop,
         revealMove,
@@ -1369,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, lastMoveUci, 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,
@@ -1389,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, lastMoveUci: lastMoveUci, 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

@@ -1275,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);
@@ -1307,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;
@@ -1318,21 +1322,40 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
     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;
@@ -1351,6 +1374,8 @@ function useGameReplayTraining({ gameId, startFen, fetchGame, }) {
         feedback,
         lastExpectedSan,
         lastMoveUci,
+        correctMoveSquare,
+        incorrectMoveSquare,
         expectedSan,
         handlePieceDrop,
         revealMove,
@@ -1371,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, lastMoveUci, 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,
@@ -1391,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, lastMoveUci: lastMoveUci, 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.5",
+  "version": "0.0.6",
   "description": "React components for browsing and replaying chess games (depends on react-chess-core only)",
   "license": "MIT",
   "author": "Robert Blackwell",