react-chess-replay-trainer 0.0.1 → 0.0.2

package/README.md

@@ -1,44 +1,44 @@
-# react-chess-replay-trainer
-
-A React component for replaying a chess game move-by-move and drilling it.
-
-- **Browse** freely through the game (first / prev / next / last / jump) without
-  recording anything, so you can pick the part of the game you want to study.
-- **Train White / Train Black / Train Both** start a drill at the current ply:
-  you guess each move, and every mistake is reported via `onMiss` so the host can
-  (for example) enroll the missed position into a spaced-repetition deck.
-  - With **Train White** or **Train Black** you only guess that side's moves; the
-    opponent's reply is played automatically after each correct guess, and the
-    board is rotated so the trained side is on the bottom.
-  - With **Train Both** you drill every ply for both colors.
-- **Analyze** opens the built-in analysis board (`AnalysisBoard` from
-  `react-chess-core`) at the current position.
-
-Depends on `react-chess-core` (board, engine, analysis board), `react-chessboard`,
-and `chess.js`.
-
-## Usage
-
-```tsx
-import { ReplayTrainer } from 'react-chess-replay-trainer';
-
-<ReplayTrainer
-  gameId={gameId}
-  startFen={fenWhereUserWasBrowsing}
-  fetchGame={fetchGame}
-  onMiss={(miss) => enrollMissedPosition(miss)}
-  onExit={() => setTraining(null)}
-  theme="dark"
-  engine={{ depth: 18, multiPv: 3 }}
-/>;
-```
-
-For a custom shell, use `useReplayTrainer` with `AnalysisBoard` from the same package:
-
-```tsx
-import {
-  useReplayTrainer,
-  buildReplayAnalysisContext,
-  AnalysisBoard,
-} from 'react-chess-replay-trainer';
-```
+# react-chess-replay-trainer
+
+A React component for replaying a chess game move-by-move and drilling it.
+
+- **Browse** freely through the game (first / prev / next / last / jump) without
+  recording anything, so you can pick the part of the game you want to study.
+- **Train White / Train Black / Train Both** start a drill at the current ply:
+  you guess each move, and every mistake is reported via `onMiss` so the host can
+  (for example) enroll the missed position into a spaced-repetition deck.
+  - With **Train White** or **Train Black** you only guess that side's moves; the
+    opponent's reply is played automatically after each correct guess, and the
+    board is rotated so the trained side is on the bottom.
+  - With **Train Both** you drill every ply for both colors.
+- **Analyze** opens the built-in analysis board (`AnalysisBoard` from
+  `react-chess-core`) at the current position.
+
+Depends on `react-chess-core` (board, engine, analysis board), `react-chessboard`,
+and `chess.js`.
+
+## Usage
+
+```tsx
+import { ReplayTrainer } from 'react-chess-replay-trainer';
+
+<ReplayTrainer
+  gameId={gameId}
+  startFen={fenWhereUserWasBrowsing}
+  fetchGame={fetchGame}
+  onMiss={(miss) => enrollMissedPosition(miss)}
+  onExit={() => setTraining(null)}
+  theme="dark"
+  engine={{ depth: 18, multiPv: 3 }}
+/>;
+```
+
+For a custom shell, use `useReplayTrainer` with `AnalysisBoard` from the same package:
+
+```tsx
+import {
+  useReplayTrainer,
+  buildReplayAnalysisContext,
+  AnalysisBoard,
+} from 'react-chess-replay-trainer';
+```

package/dist/features/replay/ReplayTrainer.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import { type AnalysisEngineOptions, type PlyNavigationRenderProps } from 'react-chess-core';
+import { type AnalysisEngineOptions, type BoardThemeId, type PlyNavigationRenderProps } from 'react-chess-core';
 import type { ReplayGame, ReplayMiss } from './types';
 export interface ReplayTrainerProps {
     gameId: string;
@@ -13,6 +13,7 @@ export interface ReplayTrainerProps {
     /** Called when the user leaves the trainer. */
     onExit?: () => void;
     theme?: 'light' | 'dark';
+    boardTheme?: BoardThemeId;
     boardWidth?: number;
     /** Side shown at the bottom of the board. Defaults to white. */
     orientation?: 'white' | 'black';
@@ -28,4 +29,4 @@ export interface ReplayTrainerProps {
  * next / last / slider) never records anything; once the user hits "Train from
  * here" each wrong move is reported through {@link ReplayTrainerProps.onMiss}.
  */
-export declare const ReplayTrainer: ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit, theme, boardWidth, orientation, engine, renderPlyNavigation, showPlyScrubber, }: ReplayTrainerProps) => import("react").JSX.Element;
+export declare const ReplayTrainer: ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit, theme, boardTheme, boardWidth, orientation, engine, renderPlyNavigation, showPlyScrubber, }: ReplayTrainerProps) => import("react").JSX.Element;

package/dist/features/replay/constants.d.ts

@@ -1,3 +1,5 @@
 /** Standard chess starting position; game move lists replay from here. */
 export declare const REPLAY_START_FEN = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";
 export declare const DEFAULT_BOARD_WIDTH = 480;
+/** Delay between half-moves during browse autoplay (ms). */
+export declare const REPLAY_AUTOPLAY_STEP_MS = 500;

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

@@ -39,5 +39,12 @@ export interface ReplayTrainerState {
     stopTraining: () => void;
     revealMove: () => void;
     handleDrop: (source: string, target: string, piece: string) => boolean;
+    /** True while browse mode is auto-advancing through the game. */
+    autoplayActive: boolean;
+    /** Start autoplay from the current ply (exits train mode). No-op at game end. */
+    startAutoplay: () => void;
+    stopAutoplay: () => void;
+    /** Toggle browse autoplay; exits train mode when starting. */
+    toggleAutoplay: () => void;
 }
 export declare function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, }: UseReplayTrainerOptions): ReplayTrainerState;

package/dist/features/replay/index.d.ts

@@ -1,7 +1,12 @@
 export { ReplayTrainer, type ReplayTrainerProps } from './ReplayTrainer';
 export { useReplayTrainer, type UseReplayTrainerOptions, type ReplayTrainerState, } from './hooks/useReplayTrainer';
 export type { ReplayGame, ReplayMiss, ReplayMode, ReplayFeedback, ReplaySide, TrainColor, } from './types';
-export { REPLAY_START_FEN, DEFAULT_BOARD_WIDTH } from './constants';
-export { fenAtPly, findPlyIndexForFen, sideToMove, uciFromDrop, normalizeFen, } from './replayUtils';
+export { REPLAY_START_FEN, DEFAULT_BOARD_WIDTH, REPLAY_AUTOPLAY_STEP_MS, } from './constants';
+export { fenAtPly, findPlyIndexForFen, sideToMove, normalizeFen, } from './replayUtils';
+export { uciFromDrop } from 'react-chess-core';
 export { buildReplayAnalysisContext } from './buildReplayAnalysisContext';
+export { fenAfterUci, refutationEvalGapCp, refutationFromEvaluation, type RefutationResult as ReplayRefutationResult, } from 'react-chess-core';
+export { refutationEngineOptions as replayRefutationEngineOptions, REFUTATION_EVAL_GAP_CP as REPLAY_REFUTATION_EVAL_GAP_CP, REFUTATION_EVAL_GAP_PAWNS as REPLAY_REFUTATION_EVAL_GAP_PAWNS, } from 'react-chess-core';
+export { getMissDisplay as getReplayMissDisplay, 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, type MissDisplay as ReplayMissDisplay, type MissSequencePhase, type MissSequenceState, } from 'react-chess-core';
+export { useMissRefutation as useReplayRefutation, useMissSequence as useReplayMissSequence, useMissBoard as useReplayMissBoard, } from 'react-chess-core';
 export { AnalysisBoard, AnalysisBoardCore, AnalysisErrorBoundary, DEFAULT_ANALYSIS_LAYOUT, DefaultPlyNavigation, PlyNavigation, defaultRenderPlyNavigation, type AnalysisContext, type AnalysisBoardProps, type AnalysisLayoutConfig, type PlyNavigationModel, type PlyNavigationProps, type PlyNavigationRenderProps, } from 'react-chess-core';

package/dist/features/replay/miss/replayMissDisplay.d.ts

@@ -0,0 +1,16 @@
+export type MissSequencePhase = 'wrong' | 'refutation' | 'answer' | 'retry';
+export type MissSequenceState = {
+    setupFen: string;
+    attemptedUci: string;
+    phase: MissSequencePhase;
+};
+export type ReplayMissDisplay = {
+    fen: string | null;
+    arrows: [string, string, string][];
+    animating: boolean;
+};
+export declare const REPLAY_MISS_WRONG_PAUSE_MS = 450;
+export declare const REPLAY_MISS_REFUTATION_PAUSE_MS = 900;
+export declare const REPLAY_MISS_REFUTATION_MAX_WAIT_MS = 4000;
+export declare const REPLAY_MISS_MOVE_ANIMATION_MS = 220;
+export declare function getReplayMissDisplay(sequence: MissSequenceState | null, expectedUci: string | null, refutationUci: string | null, answerArrowColor: string): ReplayMissDisplay;

package/dist/features/replay/miss/useReplayMissBoard.d.ts

@@ -0,0 +1,28 @@
+import type { AnalysisEngineOptions } from 'react-chess-core';
+type ReplayMissFeedback = 'correct' | 'incorrect' | null;
+export declare function useReplayMissBoard({ feedback, expectedUci, positionFen, answerArrowColor, autoShowWrongMoves, engineOptions, }: {
+    feedback: ReplayMissFeedback;
+    expectedUci: string | null;
+    positionFen: string;
+    answerArrowColor: string;
+    autoShowWrongMoves?: boolean;
+    engineOptions?: AnalysisEngineOptions;
+}): {
+    missSequence: {
+        sequence: import("./replayMissDisplay").MissSequenceState | null;
+        refutation: import("..").ReplayRefutationResult;
+        display: import("./replayMissDisplay").ReplayMissDisplay;
+        startSequence: (setupFen: string, attemptedUci: string) => void;
+        clearSequence: () => void;
+    };
+    refutation: import("..").ReplayRefutationResult;
+    customArrows: [string, string, string][];
+    boardPosition: string;
+    boardAnimating: boolean;
+    wrapDropHandler: (onDrop: (source: string, target: string, piece: string) => boolean, { enabled, dropFen, expectedMoveUci, }: {
+        enabled: boolean;
+        dropFen?: string;
+        expectedMoveUci?: string | null;
+    }) => (source: string, target: string, piece: string) => boolean;
+};
+export {};

package/dist/features/replay/miss/useReplayMissSequence.d.ts

@@ -0,0 +1,10 @@
+import type { AnalysisEngineOptions } from 'react-chess-core';
+import { type MissSequencePhase, type MissSequenceState, type ReplayMissDisplay } from './replayMissDisplay';
+export type { MissSequencePhase, ReplayMissDisplay };
+export declare function useReplayMissSequence(feedback: 'correct' | 'incorrect' | null, expectedUci: string | null, engineOptions: AnalysisEngineOptions, answerArrowColor: string, autoShowWrongMoves: boolean): {
+    sequence: MissSequenceState | null;
+    refutation: import("..").ReplayRefutationResult;
+    display: ReplayMissDisplay;
+    startSequence: (setupFen: string, attemptedUci: string) => void;
+    clearSequence: () => void;
+};

package/dist/features/replay/miss/useReplayRefutation.d.ts

@@ -0,0 +1,3 @@
+import { type AnalysisEngineOptions } from 'react-chess-core';
+import { type ReplayRefutationResult } from '../refutation/replayRefutation';
+export declare function useReplayRefutation(setupFen: string | null, attemptedUci: string | null, expectedUci: string | null, enabled: boolean, engineOptions: AnalysisEngineOptions): ReplayRefutationResult;

package/dist/features/replay/refutation/replayRefutation.d.ts

@@ -0,0 +1,19 @@
+import { type AnalysisEngineOptions, type EngineEvaluation, type EngineLine } from 'react-chess-core';
+/** Minimum eval loss (pawns) from the wrong move before showing a refutation. */
+export declare const REPLAY_REFUTATION_EVAL_GAP_PAWNS = 0.5;
+export declare const REPLAY_REFUTATION_EVAL_GAP_CP: number;
+export type ReplayRefutationResult = {
+    fenAfterWrong: string | null;
+    refutationUci: string | null;
+    refutationSan: string | null;
+    refutationLine: string | null;
+    loading: boolean;
+    error: string | null;
+};
+export declare const replayRefutationEngineOptions: AnalysisEngineOptions;
+export declare function fenAfterUci(fen: string, uci: string): string | null;
+/** Centipawn score from side to move, comparable across sibling positions. */
+export declare function lineEvalCpForGap(line: EngineLine | undefined): number | null;
+/** How much better the opponent's eval is after the wrong move vs the correct one. */
+export declare function refutationEvalGapCp(evalAfterWrong: EngineEvaluation, evalAfterCorrect: EngineEvaluation): number | null;
+export declare function refutationFromEvaluation(fenAfterWrong: string, evaluation: EngineEvaluation, evalGapCp: number | null, evalGapApplies: boolean, evalGapLoading: boolean): Omit<ReplayRefutationResult, 'fenAfterWrong'>;

package/dist/features/replay/replayUtils.d.ts

@@ -1,5 +1,5 @@
 import { Chess } from 'chess.js';
-import type { ReplaySide } from './types';
+import type { ReplaySide, TrainColor } from './types';
 /** Compare positions ignoring move clocks (first four FEN fields). */
 export declare function normalizeFen(fen: string): string;
 export declare function applyUci(chess: Chess, uci: string): void;
@@ -8,5 +8,4 @@ export declare function fenAtPly(movesUci: string[], ply: number): string;
 /** Index of the next move to play to reach `targetFen`, or 0 if not found. */
 export declare function findPlyIndexForFen(movesUci: string[], targetFen: string): number;
 export declare function sideToMove(fen: string): ReplaySide;
-/** Resolve a board drag into a legal UCI string, or null when illegal. */
-export declare function uciFromDrop(fen: string, sourceSquare: string, targetSquare: string, piece: string): string | null;
+export declare function isTrainSideToMove(trainColor: TrainColor, side: ReplaySide): boolean;

package/dist/features/replay/types.d.ts

@@ -9,6 +9,7 @@ export type ReplayGame = {
     result?: string;
     timeControl?: string;
     timeClass?: string;
+    date?: string;
     movesUci: string[];
     movesSan?: string[];
 };

package/dist/index.esm.js

@@ -1,13 +1,14 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { ChessboardDnDProvider } from 'react-chessboard';
-import { ThemeProvider, HighlightChessboard, PlyNavigation, AnalysisErrorBoundary, AnalysisBoard } from 'react-chess-core';
-export { AnalysisBoard, AnalysisBoardCore, AnalysisErrorBoundary, DEFAULT_ANALYSIS_LAYOUT, DefaultPlyNavigation, PlyNavigation, defaultRenderPlyNavigation } from 'react-chess-core';
+import { createExpectedMoveDropHandler, 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';
 
 /** Standard chess starting position; game move lists replay from here. */
 const REPLAY_START_FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
 const DEFAULT_BOARD_WIDTH = 480;
+/** Delay between half-moves during browse autoplay (ms). */
+const REPLAY_AUTOPLAY_STEP_MS = 500;
 
 /** Build a core {@link AnalysisContext} for the current replay browse position. */
 function buildReplayAnalysisContext(game, plyIndex, boardOrientation) {
@@ -58,18 +59,10 @@ function findPlyIndexForFen(movesUci, targetFen) {
 function sideToMove(fen) {
     return fen.trim().split(/\s+/)[1] === 'b' ? 'b' : 'w';
 }
-/** Resolve a board drag into a legal UCI string, or null when illegal. */
-function uciFromDrop(fen, sourceSquare, targetSquare, piece) {
-    var _a, _b;
-    const chess = new Chess(fen);
-    const pieceType = (_a = piece[1]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    const legal = chess
-        .moves({ square: sourceSquare, verbose: true })
-        .find((move) => move.to === targetSquare &&
-        (!move.promotion || move.promotion === pieceType));
-    if (!legal)
-        return null;
-    return `${legal.from}${legal.to}${(_b = legal.promotion) !== null && _b !== void 0 ? _b : ''}`;
+function isTrainSideToMove(trainColor, side) {
+    return (trainColor === 'both' ||
+        (trainColor === 'white' && side === 'w') ||
+        (trainColor === 'black' && side === 'b'));
 }
 
 /** Pause (ms) before the opponent's reply is auto-played in single-color drills. */
@@ -83,6 +76,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     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 fetchGameRef = useRef(fetchGame);
     fetchGameRef.current = fetchGame;
@@ -92,6 +86,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     onCompleteRef.current = onComplete;
     const recordedRef = useRef(new Set());
     const completedFiredRef = useRef(false);
+    const modeRef = useRef('browse');
+    const trainColorRef = useRef('both');
     useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -100,10 +96,13 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         recordedRef.current = new Set();
         completedFiredRef.current = false;
         setMode('browse');
+        modeRef.current = 'browse';
         setTrainColor('both');
+        trainColorRef.current = 'both';
         setFeedback(null);
         setExpectedSan(null);
         setExpectedUci(null);
+        setAutoplayActive(false);
         fetchGameRef
             .current(gameId)
             .then((loaded) => {
@@ -134,15 +133,19 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const fen = useMemo(() => fenAtPly(movesUci, plyIndex), [movesUci, plyIndex]);
     const complete = plyIndex >= totalPly && totalPly > 0;
     const sideToMove$1 = sideToMove(fen);
-    const isUserTurn = trainColor === 'both' ||
-        (trainColor === 'white' && sideToMove$1 === 'w') ||
-        (trainColor === 'black' && sideToMove$1 === 'b');
+    const isUserTurn = isTrainSideToMove(trainColor, sideToMove$1);
+    modeRef.current = mode;
+    trainColorRef.current = trainColor;
     const clearTransient = useCallback(() => {
         setFeedback(null);
         setExpectedSan(null);
         setExpectedUci(null);
     }, []);
+    const stopAutoplay = useCallback(() => {
+        setAutoplayActive(false);
+    }, []);
     const goTo = useCallback((ply) => {
+        setAutoplayActive(false);
         const clamped = Math.max(0, Math.min(ply, totalPly));
         completedFiredRef.current = clamped >= totalPly ? completedFiredRef.current : false;
         setPlyIndex(clamped);
@@ -152,12 +155,31 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const goPrev = useCallback(() => goTo(plyIndex - 1), [goTo, plyIndex]);
     const goNext = useCallback(() => goTo(plyIndex + 1), [goTo, plyIndex]);
     const goLast = useCallback(() => goTo(totalPly), [goTo, totalPly]);
+    const startAutoplay = useCallback(() => {
+        if (plyIndex >= totalPly) {
+            return;
+        }
+        setMode('browse');
+        clearTransient();
+        setAutoplayActive(true);
+    }, [plyIndex, totalPly, clearTransient]);
+    const toggleAutoplay = useCallback(() => {
+        if (autoplayActive) {
+            stopAutoplay();
+            return;
+        }
+        startAutoplay();
+    }, [autoplayActive, startAutoplay, stopAutoplay]);
     const startTraining = useCallback((color = 'both') => {
+        setAutoplayActive(false);
         setTrainColor(color);
+        trainColorRef.current = color;
+        modeRef.current = 'train';
         setMode('train');
         clearTransient();
     }, [clearTransient]);
     const stopTraining = useCallback(() => {
+        modeRef.current = 'browse';
         setMode('browse');
         clearTransient();
     }, [clearTransient]);
@@ -193,29 +215,30 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         setFeedback('incorrect');
         recordMiss(plyIndex);
     }, [complete, game, movesUci, plyIndex, recordMiss, isUserTurn]);
-    const handleDrop = useCallback((source, target, piece) => {
-        var _a, _b;
-        if (mode !== 'train' || complete || !isUserTurn)
-            return false;
-        const expectedUci = movesUci[plyIndex];
-        if (!expectedUci)
-            return false;
-        const uci = uciFromDrop(fen, source, target, piece);
-        if (!uci)
-            return false;
-        if (uci.toLowerCase() === expectedUci.toLowerCase()) {
+    const handleDrop = useCallback((source, target, piece) => createExpectedMoveDropHandler({
+        fen,
+        expectedUci: movesUci[plyIndex],
+        enabled: modeRef.current === 'train' &&
+            !complete &&
+            isTrainSideToMove(trainColorRef.current, sideToMove$1),
+        onCorrect: () => {
             setFeedback('correct');
             setExpectedSan(null);
             setExpectedUci(null);
             setPlyIndex((p) => p + 1);
-            return true;
-        }
-        setFeedback('incorrect');
-        setExpectedSan((_b = (_a = game === null || game === void 0 ? void 0 : game.movesSan) === null || _a === void 0 ? void 0 : _a[plyIndex]) !== null && _b !== void 0 ? _b : expectedUci);
-        setExpectedUci(expectedUci);
-        recordMiss(plyIndex);
-        return false;
-    }, [mode, complete, isUserTurn, movesUci, plyIndex, fen, game, recordMiss]);
+        },
+        onIncorrect: () => {
+            var _a, _b;
+            const expectedUci = movesUci[plyIndex];
+            if (!expectedUci) {
+                return;
+            }
+            setFeedback('incorrect');
+            setExpectedSan((_b = (_a = game === null || game === void 0 ? void 0 : game.movesSan) === null || _a === void 0 ? void 0 : _a[plyIndex]) !== null && _b !== void 0 ? _b : expectedUci);
+            setExpectedUci(expectedUci);
+            recordMiss(plyIndex);
+        },
+    })(source, target, piece), [complete, movesUci, plyIndex, fen, game, recordMiss, sideToMove$1]);
     useEffect(() => {
         var _a;
         if (mode === 'train' && complete && !completedFiredRef.current) {
@@ -223,6 +246,21 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
         }
     }, [mode, complete]);
+    // Browse autoplay: advance one ply at a fixed interval until the game ends.
+    useEffect(() => {
+        if (!autoplayActive || mode === 'train') {
+            return;
+        }
+        if (plyIndex >= totalPly) {
+            setAutoplayActive(false);
+            return;
+        }
+        const id = setTimeout(() => {
+            setPlyIndex((p) => (p < totalPly ? p + 1 : p));
+            clearTransient();
+        }, REPLAY_AUTOPLAY_STEP_MS);
+        return () => clearTimeout(id);
+    }, [autoplayActive, mode, plyIndex, totalPly, clearTransient]);
     // In single-color drills, auto-play the opponent's reply once it's their turn
     // (e.g. after the user guesses correctly, or when training starts mid-game).
     useEffect(() => {
@@ -261,6 +299,10 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         stopTraining,
         revealMove,
         handleDrop,
+        autoplayActive,
+        startAutoplay,
+        stopAutoplay,
+        toggleAutoplay,
     };
 }
 
@@ -355,7 +397,7 @@ function buttonStyle(colors, variant) {
  * next / last / slider) never records anything; once the user hits "Train from
  * here" each wrong move is reported through {@link ReplayTrainerProps.onMiss}.
  */
-const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit, theme = 'dark', boardWidth = DEFAULT_BOARD_WIDTH, orientation = 'white', engine, renderPlyNavigation, showPlyScrubber = true, }) => {
+const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit, theme = 'dark', boardTheme, boardWidth = DEFAULT_BOARD_WIDTH, orientation = 'white', engine, renderPlyNavigation, showPlyScrubber = true, }) => {
     var _a, _b, _c;
     const state = useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete });
     const colors = palette(theme);
@@ -370,9 +412,10 @@ const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit
         if (!state.game) {
             return;
         }
+        state.stopAutoplay();
         setAnalysisSnapshot(buildReplayAnalysisContext(state.game, state.plyIndex, boardOrientation));
         setAnalysisOpen(true);
-    }, [state.game, state.plyIndex, boardOrientation]);
+    }, [state.game, state.plyIndex, boardOrientation, state.stopAutoplay]);
     const closeAnalysis = useCallback(() => {
         setAnalysisOpen(false);
     }, []);
@@ -394,17 +437,17 @@ const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit
         ]
         : [];
     const draggable = training && !state.complete;
-    return (jsxs(ThemeProvider, { theme: theme, children: [jsxs("div", { style: mainContainerStyle(boardWidth, colors), children: [jsxs("div", { style: headerStyle, children: [jsxs("span", { style: playerNameStyle, children: [((_b = game.white) !== null && _b !== void 0 ? _b : 'White'), " vs ", ((_c = game.black) !== null && _c !== void 0 ? _c : 'Black')] }), game.result && jsx("span", { style: subtleTextStyle(colors), children: game.result })] }), jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, position: state.fen, boardOrientation: boardOrientation, arePiecesDraggable: draggable, isDraggablePiece: ({ piece }) => {
+    return (jsxs(ThemeProvider, { theme: theme, boardTheme: boardTheme, children: [jsxs("div", { style: mainContainerStyle(boardWidth, colors), children: [jsxs("div", { style: headerStyle, children: [jsxs("span", { style: playerNameStyle, children: [((_b = game.white) !== null && _b !== void 0 ? _b : 'White'), " vs ", ((_c = game.black) !== null && _c !== void 0 ? _c : 'Black')] }), game.result && jsx("span", { style: subtleTextStyle(colors), children: game.result })] }), jsx(ChessboardDnDProvider, { children: jsx(HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, position: state.fen, boardOrientation: boardOrientation, arePiecesDraggable: draggable, 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, autoPromoteToQueen: true, areArrowsAllowed: false, customBoardStyle: customBoardStyle }) }), 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 }), 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, 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'
                                             : ' · Opponent replying…'] }))] }), jsxs("div", { style: controlsRowStyle, children: [jsx("button", { type: "button", onClick: openAnalysis, style: buttonStyle(colors, 'primary'), children: "Analyze" }), !training && (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: () => state.startTraining('white'), disabled: state.complete, style: buttonStyle(colors, 'primary'), children: "Train White" }), jsx("button", { type: "button", onClick: () => state.startTraining('black'), disabled: state.complete, style: buttonStyle(colors, 'primary'), children: "Train Black" }), jsx("button", { type: "button", onClick: () => state.startTraining('both'), disabled: state.complete, style: buttonStyle(colors, 'primary'), children: "Train Both" })] })), training && (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: state.revealMove, disabled: state.complete || !state.isUserTurn, style: buttonStyle(colors, 'ghost'), children: "Show move" }), jsx("button", { type: "button", onClick: state.stopTraining, style: buttonStyle(colors, 'ghost'), children: "Stop drilling" })] })), onExit && (jsx("button", { type: "button", onClick: onExit, style: buttonStyle(colors, 'ghost'), children: "Exit" }))] }), jsxs("div", { style: feedbackContainerStyle, children: [state.complete && training && (jsx("span", { style: feedbackMessageStyle(colors, 'success'), children: "End of game \u2014 drill complete" })), !state.complete && state.feedback === 'correct' && (jsx("span", { style: feedbackMessageStyle(colors, 'success'), children: "Correct" })), !state.complete && state.feedback === 'incorrect' && (jsxs("span", { style: feedbackMessageStyle(colors, 'error'), children: ["Game move was ", state.expectedSan] }))] })] }), analysisOpen && analysisSnapshot && (jsx(AnalysisErrorBoundary, { onClose: closeAnalysis, children: jsx(AnalysisBoard, { analysisContext: analysisSnapshot, onClose: closeAnalysis, theme: theme, engine: engine }) }))] }));
 };
 
-export { DEFAULT_BOARD_WIDTH, REPLAY_START_FEN, ReplayTrainer, buildReplayAnalysisContext, fenAtPly, findPlyIndexForFen, normalizeFen, sideToMove, uciFromDrop, useReplayTrainer };
+export { DEFAULT_BOARD_WIDTH, REPLAY_AUTOPLAY_STEP_MS, REPLAY_START_FEN, ReplayTrainer, buildReplayAnalysisContext, fenAtPly, findPlyIndexForFen, normalizeFen, sideToMove, useReplayTrainer };

package/dist/index.js

@@ -2,13 +2,14 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var reactChessboard = require('react-chessboard');
 var reactChessCore = require('react-chess-core');
 var chess_js = require('chess.js');
 
 /** Standard chess starting position; game move lists replay from here. */
 const REPLAY_START_FEN = 'rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1';
 const DEFAULT_BOARD_WIDTH = 480;
+/** Delay between half-moves during browse autoplay (ms). */
+const REPLAY_AUTOPLAY_STEP_MS = 500;
 
 /** Build a core {@link AnalysisContext} for the current replay browse position. */
 function buildReplayAnalysisContext(game, plyIndex, boardOrientation) {
@@ -59,18 +60,10 @@ function findPlyIndexForFen(movesUci, targetFen) {
 function sideToMove(fen) {
     return fen.trim().split(/\s+/)[1] === 'b' ? 'b' : 'w';
 }
-/** Resolve a board drag into a legal UCI string, or null when illegal. */
-function uciFromDrop(fen, sourceSquare, targetSquare, piece) {
-    var _a, _b;
-    const chess = new chess_js.Chess(fen);
-    const pieceType = (_a = piece[1]) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-    const legal = chess
-        .moves({ square: sourceSquare, verbose: true })
-        .find((move) => move.to === targetSquare &&
-        (!move.promotion || move.promotion === pieceType));
-    if (!legal)
-        return null;
-    return `${legal.from}${legal.to}${(_b = legal.promotion) !== null && _b !== void 0 ? _b : ''}`;
+function isTrainSideToMove(trainColor, side) {
+    return (trainColor === 'both' ||
+        (trainColor === 'white' && side === 'w') ||
+        (trainColor === 'black' && side === 'b'));
 }
 
 /** Pause (ms) before the opponent's reply is auto-played in single-color drills. */
@@ -84,6 +77,7 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     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 fetchGameRef = react.useRef(fetchGame);
     fetchGameRef.current = fetchGame;
@@ -93,6 +87,8 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     onCompleteRef.current = onComplete;
     const recordedRef = react.useRef(new Set());
     const completedFiredRef = react.useRef(false);
+    const modeRef = react.useRef('browse');
+    const trainColorRef = react.useRef('both');
     react.useEffect(() => {
         let cancelled = false;
         setLoading(true);
@@ -101,10 +97,13 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         recordedRef.current = new Set();
         completedFiredRef.current = false;
         setMode('browse');
+        modeRef.current = 'browse';
         setTrainColor('both');
+        trainColorRef.current = 'both';
         setFeedback(null);
         setExpectedSan(null);
         setExpectedUci(null);
+        setAutoplayActive(false);
         fetchGameRef
             .current(gameId)
             .then((loaded) => {
@@ -135,15 +134,19 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const fen = react.useMemo(() => fenAtPly(movesUci, plyIndex), [movesUci, plyIndex]);
     const complete = plyIndex >= totalPly && totalPly > 0;
     const sideToMove$1 = sideToMove(fen);
-    const isUserTurn = trainColor === 'both' ||
-        (trainColor === 'white' && sideToMove$1 === 'w') ||
-        (trainColor === 'black' && sideToMove$1 === 'b');
+    const isUserTurn = isTrainSideToMove(trainColor, sideToMove$1);
+    modeRef.current = mode;
+    trainColorRef.current = trainColor;
     const clearTransient = react.useCallback(() => {
         setFeedback(null);
         setExpectedSan(null);
         setExpectedUci(null);
     }, []);
+    const stopAutoplay = react.useCallback(() => {
+        setAutoplayActive(false);
+    }, []);
     const goTo = react.useCallback((ply) => {
+        setAutoplayActive(false);
         const clamped = Math.max(0, Math.min(ply, totalPly));
         completedFiredRef.current = clamped >= totalPly ? completedFiredRef.current : false;
         setPlyIndex(clamped);
@@ -153,12 +156,31 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
     const goPrev = react.useCallback(() => goTo(plyIndex - 1), [goTo, plyIndex]);
     const goNext = react.useCallback(() => goTo(plyIndex + 1), [goTo, plyIndex]);
     const goLast = react.useCallback(() => goTo(totalPly), [goTo, totalPly]);
+    const startAutoplay = react.useCallback(() => {
+        if (plyIndex >= totalPly) {
+            return;
+        }
+        setMode('browse');
+        clearTransient();
+        setAutoplayActive(true);
+    }, [plyIndex, totalPly, clearTransient]);
+    const toggleAutoplay = react.useCallback(() => {
+        if (autoplayActive) {
+            stopAutoplay();
+            return;
+        }
+        startAutoplay();
+    }, [autoplayActive, startAutoplay, stopAutoplay]);
     const startTraining = react.useCallback((color = 'both') => {
+        setAutoplayActive(false);
         setTrainColor(color);
+        trainColorRef.current = color;
+        modeRef.current = 'train';
         setMode('train');
         clearTransient();
     }, [clearTransient]);
     const stopTraining = react.useCallback(() => {
+        modeRef.current = 'browse';
         setMode('browse');
         clearTransient();
     }, [clearTransient]);
@@ -194,29 +216,30 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         setFeedback('incorrect');
         recordMiss(plyIndex);
     }, [complete, game, movesUci, plyIndex, recordMiss, isUserTurn]);
-    const handleDrop = react.useCallback((source, target, piece) => {
-        var _a, _b;
-        if (mode !== 'train' || complete || !isUserTurn)
-            return false;
-        const expectedUci = movesUci[plyIndex];
-        if (!expectedUci)
-            return false;
-        const uci = uciFromDrop(fen, source, target, piece);
-        if (!uci)
-            return false;
-        if (uci.toLowerCase() === expectedUci.toLowerCase()) {
+    const handleDrop = react.useCallback((source, target, piece) => reactChessCore.createExpectedMoveDropHandler({
+        fen,
+        expectedUci: movesUci[plyIndex],
+        enabled: modeRef.current === 'train' &&
+            !complete &&
+            isTrainSideToMove(trainColorRef.current, sideToMove$1),
+        onCorrect: () => {
             setFeedback('correct');
             setExpectedSan(null);
             setExpectedUci(null);
             setPlyIndex((p) => p + 1);
-            return true;
-        }
-        setFeedback('incorrect');
-        setExpectedSan((_b = (_a = game === null || game === void 0 ? void 0 : game.movesSan) === null || _a === void 0 ? void 0 : _a[plyIndex]) !== null && _b !== void 0 ? _b : expectedUci);
-        setExpectedUci(expectedUci);
-        recordMiss(plyIndex);
-        return false;
-    }, [mode, complete, isUserTurn, movesUci, plyIndex, fen, game, recordMiss]);
+        },
+        onIncorrect: () => {
+            var _a, _b;
+            const expectedUci = movesUci[plyIndex];
+            if (!expectedUci) {
+                return;
+            }
+            setFeedback('incorrect');
+            setExpectedSan((_b = (_a = game === null || game === void 0 ? void 0 : game.movesSan) === null || _a === void 0 ? void 0 : _a[plyIndex]) !== null && _b !== void 0 ? _b : expectedUci);
+            setExpectedUci(expectedUci);
+            recordMiss(plyIndex);
+        },
+    })(source, target, piece), [complete, movesUci, plyIndex, fen, game, recordMiss, sideToMove$1]);
     react.useEffect(() => {
         var _a;
         if (mode === 'train' && complete && !completedFiredRef.current) {
@@ -224,6 +247,21 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
             (_a = onCompleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onCompleteRef);
         }
     }, [mode, complete]);
+    // Browse autoplay: advance one ply at a fixed interval until the game ends.
+    react.useEffect(() => {
+        if (!autoplayActive || mode === 'train') {
+            return;
+        }
+        if (plyIndex >= totalPly) {
+            setAutoplayActive(false);
+            return;
+        }
+        const id = setTimeout(() => {
+            setPlyIndex((p) => (p < totalPly ? p + 1 : p));
+            clearTransient();
+        }, REPLAY_AUTOPLAY_STEP_MS);
+        return () => clearTimeout(id);
+    }, [autoplayActive, mode, plyIndex, totalPly, clearTransient]);
     // In single-color drills, auto-play the opponent's reply once it's their turn
     // (e.g. after the user guesses correctly, or when training starts mid-game).
     react.useEffect(() => {
@@ -262,6 +300,10 @@ function useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete, })
         stopTraining,
         revealMove,
         handleDrop,
+        autoplayActive,
+        startAutoplay,
+        stopAutoplay,
+        toggleAutoplay,
     };
 }
 
@@ -356,7 +398,7 @@ function buttonStyle(colors, variant) {
  * next / last / slider) never records anything; once the user hits "Train from
  * here" each wrong move is reported through {@link ReplayTrainerProps.onMiss}.
  */
-const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit, theme = 'dark', boardWidth = DEFAULT_BOARD_WIDTH, orientation = 'white', engine, renderPlyNavigation, showPlyScrubber = true, }) => {
+const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit, theme = 'dark', boardTheme, boardWidth = DEFAULT_BOARD_WIDTH, orientation = 'white', engine, renderPlyNavigation, showPlyScrubber = true, }) => {
     var _a, _b, _c;
     const state = useReplayTrainer({ gameId, startFen, fetchGame, onMiss, onComplete });
     const colors = palette(theme);
@@ -371,9 +413,10 @@ const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit
         if (!state.game) {
             return;
         }
+        state.stopAutoplay();
         setAnalysisSnapshot(buildReplayAnalysisContext(state.game, state.plyIndex, boardOrientation));
         setAnalysisOpen(true);
-    }, [state.game, state.plyIndex, boardOrientation]);
+    }, [state.game, state.plyIndex, boardOrientation, state.stopAutoplay]);
     const closeAnalysis = react.useCallback(() => {
         setAnalysisOpen(false);
     }, []);
@@ -395,13 +438,13 @@ const ReplayTrainer = ({ gameId, fetchGame, startFen, onMiss, onComplete, onExit
         ]
         : [];
     const draggable = training && !state.complete;
-    return (jsxRuntime.jsxs(reactChessCore.ThemeProvider, { theme: theme, 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(reactChessboard.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, position: state.fen, boardOrientation: boardOrientation, arePiecesDraggable: draggable, isDraggablePiece: ({ piece }) => {
+    return (jsxRuntime.jsxs(reactChessCore.ThemeProvider, { theme: theme, boardTheme: boardTheme, children: [jsxRuntime.jsxs("div", { style: mainContainerStyle(boardWidth, colors), children: [jsxRuntime.jsxs("div", { style: headerStyle, children: [jsxRuntime.jsxs("span", { style: playerNameStyle, children: [((_b = game.white) !== null && _b !== void 0 ? _b : 'White'), " vs ", ((_c = game.black) !== null && _c !== void 0 ? _c : 'Black')] }), game.result && jsxRuntime.jsx("span", { style: subtleTextStyle(colors), children: game.result })] }), jsxRuntime.jsx(reactChessCore.ChessboardDnDProvider, { children: jsxRuntime.jsx(reactChessCore.HighlightChessboard, { boardWidth: boardWidth, checkSquare: "", hintSquare: null, incorrectMoveSquare: null, position: state.fen, boardOrientation: boardOrientation, arePiecesDraggable: draggable, 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, autoPromoteToQueen: true, areArrowsAllowed: false, customBoardStyle: customBoardStyle }) }), 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.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, 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'
@@ -432,11 +475,72 @@ Object.defineProperty(exports, "PlyNavigation", {
     enumerable: true,
     get: function () { return reactChessCore.PlyNavigation; }
 });
+Object.defineProperty(exports, "REPLAY_MISS_MOVE_ANIMATION_MS", {
+    enumerable: true,
+    get: function () { return reactChessCore.MISS_MOVE_ANIMATION_MS; }
+});
+Object.defineProperty(exports, "REPLAY_MISS_REFUTATION_MAX_WAIT_MS", {
+    enumerable: true,
+    get: function () { return reactChessCore.MISS_REFUTATION_MAX_WAIT_MS; }
+});
+Object.defineProperty(exports, "REPLAY_MISS_REFUTATION_PAUSE_MS", {
+    enumerable: true,
+    get: function () { return reactChessCore.MISS_REFUTATION_PAUSE_MS; }
+});
+Object.defineProperty(exports, "REPLAY_MISS_WRONG_PAUSE_MS", {
+    enumerable: true,
+    get: function () { return reactChessCore.MISS_WRONG_PAUSE_MS; }
+});
+Object.defineProperty(exports, "REPLAY_REFUTATION_EVAL_GAP_CP", {
+    enumerable: true,
+    get: function () { return reactChessCore.REFUTATION_EVAL_GAP_CP; }
+});
+Object.defineProperty(exports, "REPLAY_REFUTATION_EVAL_GAP_PAWNS", {
+    enumerable: true,
+    get: function () { return reactChessCore.REFUTATION_EVAL_GAP_PAWNS; }
+});
 Object.defineProperty(exports, "defaultRenderPlyNavigation", {
     enumerable: true,
     get: function () { return reactChessCore.defaultRenderPlyNavigation; }
 });
+Object.defineProperty(exports, "fenAfterUci", {
+    enumerable: true,
+    get: function () { return reactChessCore.fenAfterUci; }
+});
+Object.defineProperty(exports, "getReplayMissDisplay", {
+    enumerable: true,
+    get: function () { return reactChessCore.getMissDisplay; }
+});
+Object.defineProperty(exports, "refutationEvalGapCp", {
+    enumerable: true,
+    get: function () { return reactChessCore.refutationEvalGapCp; }
+});
+Object.defineProperty(exports, "refutationFromEvaluation", {
+    enumerable: true,
+    get: function () { return reactChessCore.refutationFromEvaluation; }
+});
+Object.defineProperty(exports, "replayRefutationEngineOptions", {
+    enumerable: true,
+    get: function () { return reactChessCore.refutationEngineOptions; }
+});
+Object.defineProperty(exports, "uciFromDrop", {
+    enumerable: true,
+    get: function () { return reactChessCore.uciFromDrop; }
+});
+Object.defineProperty(exports, "useReplayMissBoard", {
+    enumerable: true,
+    get: function () { return reactChessCore.useMissBoard; }
+});
+Object.defineProperty(exports, "useReplayMissSequence", {
+    enumerable: true,
+    get: function () { return reactChessCore.useMissSequence; }
+});
+Object.defineProperty(exports, "useReplayRefutation", {
+    enumerable: true,
+    get: function () { return reactChessCore.useMissRefutation; }
+});
 exports.DEFAULT_BOARD_WIDTH = DEFAULT_BOARD_WIDTH;
+exports.REPLAY_AUTOPLAY_STEP_MS = REPLAY_AUTOPLAY_STEP_MS;
 exports.REPLAY_START_FEN = REPLAY_START_FEN;
 exports.ReplayTrainer = ReplayTrainer;
 exports.buildReplayAnalysisContext = buildReplayAnalysisContext;
@@ -444,5 +548,4 @@ exports.fenAtPly = fenAtPly;
 exports.findPlyIndexForFen = findPlyIndexForFen;
 exports.normalizeFen = normalizeFen;
 exports.sideToMove = sideToMove;
-exports.uciFromDrop = uciFromDrop;
 exports.useReplayTrainer = useReplayTrainer;

package/package.json

@@ -1,56 +1,56 @@
-{
-  "name": "react-chess-replay-trainer",
-  "version": "0.0.1",
-  "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",
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rollup -c",
-    "prepublishOnly": "npm run build",
-    "storybook": "storybook dev -p 6008",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "rollup": "^4.22.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "typescript": "^5.6.2"
-  },
-  "peerDependencies": {
-    "chess.js": "^1.0.0-beta.8",
-    "react": "^18.3.1",
-    "react-chess-core": "^0.1.0",
-    "react-chessboard": "^4.7.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^1.9.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^12.3.0",
-    "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
-    "@storybook/addon-onboarding": "^8.2.9",
-    "@storybook/blocks": "^8.2.9",
-    "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
-    "@storybook/test": "^8.2.9",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "chess.js": "^1.0.0-beta.8",
-    "react": "^18.3.1",
-    "react-chess-core": "^0.1.0",
-    "react-chessboard": "^4.7.1",
-    "react-dom": "^18.3.1",
-    "storybook": "^8.2.9",
-    "tslib": "^2.8.1",
-    "vite-tsconfig-paths": "^5.0.1"
-  }
-}
+{
+  "name": "react-chess-replay-trainer",
+  "version": "0.0.2",
+  "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",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6008",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "rollup": "^4.22.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.6.2"
+  },
+  "peerDependencies": {
+    "chess.js": "^1.0.0-beta.8",
+    "react": "^18.3.1",
+    "react-chess-core": "^0.1.1",
+    "react-chessboard": "^4.7.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.9.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/preset-typescript": "^3.0.0",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "chess.js": "^1.0.0-beta.8",
+    "react": "^18.3.1",
+    "react-chess-core": "^0.1.1",
+    "react-chessboard": "^4.7.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.2.9",
+    "tslib": "^2.8.1",
+    "vite-tsconfig-paths": "^5.0.1"
+  }
+}

package/dist/features/replay/analysis/ReplayAnalysisBoard.d.ts

@@ -1,18 +0,0 @@
-import React from 'react';
-import { AnalysisEngineOptions } from 'react-chess-core';
-import { type UseReplayAnalysisBoardArgs } from './hooks/useReplayAnalysisBoard';
-import type { ReplayAnalysisContext } from './types';
-export declare const DEFAULT_ANALYSIS_BOARD_WIDTH = 400;
-export declare const DEFAULT_ANALYSIS_SIDEBAR_WIDTH = 280;
-export declare const DEFAULT_ANALYSIS_COLUMN_GAP = 16;
-export interface ReplayAnalysisBoardProps extends Omit<UseReplayAnalysisBoardArgs, 'boardWidth'> {
-    boardWidth?: number;
-    sidebarWidth?: number;
-    columnGap?: number;
-}
-/**
- * Full-screen modal analysis board: draggable exploration, move list,
- * variations, and Stockfish evaluation via react-chess-core.
- */
-export declare const ReplayAnalysisBoard: ({ boardWidth, sidebarWidth, columnGap, ...modelArgs }: ReplayAnalysisBoardProps) => React.JSX.Element;
-export type { ReplayAnalysisContext, AnalysisEngineOptions };

package/dist/features/replay/analysis/ReplayAnalysisPosition.d.ts

@@ -1,32 +0,0 @@
-import type { ReplayAnalysisContext, ReplayAnalysisHistoryRow, ReplaySolutionMoveDisplay } from './types';
-export declare class ReplayAnalysisPosition {
-    private chess;
-    private readonly initialFen;
-    private readonly solutionMoves;
-    private readonly solutionSans;
-    private mainPly;
-    private variation;
-    private variationCursor;
-    constructor(context: ReplayAnalysisContext);
-    private static buildSolutionSans;
-    private fenAtMainPly;
-    private rebuildChess;
-    private findLegalMove;
-    private uciFromVerboseMove;
-    private matchesMainMove;
-    getNavPly(): number;
-    getMaxNavPly(): number;
-    getSolutionSans(): ReplaySolutionMoveDisplay[];
-    getHistoryRows(): ReplayAnalysisHistoryRow[];
-    isHistoryRowSelected(row: ReplayAnalysisHistoryRow): boolean;
-    selectHistoryRow(row: ReplayAnalysisHistoryRow): void;
-    selectMainLine(ply: number): void;
-    goToNavPly(navPly: number): void;
-    tryPlayMove(sourceSquare: string, targetSquare: string, piece: string): boolean;
-    getLastMoveSquares(): {
-        from: string;
-        to: string;
-    } | null;
-    fen(): string;
-    getCheckSquare(): string;
-}

package/dist/features/replay/analysis/ReplayEngineEvaluationPanel.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { type EngineEvaluation } from 'react-chess-core';
-export interface ReplayEngineEvaluationPanelProps {
-    fen: string;
-    evaluation: EngineEvaluation;
-    theme: 'light' | 'dark';
-}
-export declare const ReplayEngineEvaluationPanel: ({ fen, evaluation, theme, }: ReplayEngineEvaluationPanelProps) => React.JSX.Element;

package/dist/features/replay/analysis/analysisBoardStyles.d.ts

@@ -1,63 +0,0 @@
-export declare const analysisBoardHighlightColors: {
-    readonly lastMove: {
-        readonly light: "rgba(253, 216, 53, 0.55)";
-        readonly dark: "rgba(144, 202, 249, 0.5)";
-    };
-};
-export declare const getLastMoveSquareStyles: (from: string, to: string, theme: "light" | "dark") => Record<string, {
-    backgroundColor: string;
-}>;
-export declare const analysisSidebarColors: {
-    readonly activeMove: {
-        readonly light: "rgba(58, 123, 213, 0.25)";
-        readonly dark: "rgba(58, 123, 213, 0.35)";
-    };
-    readonly mainBand: {
-        readonly light: readonly ["rgba(0,0,0,0.02)", "rgba(0,0,0,0.05)"];
-        readonly dark: readonly ["rgba(255,255,255,0.03)", "rgba(255,255,255,0.06)"];
-    };
-    readonly variationBand: {
-        readonly light: readonly ["rgba(0,0,0,0.04)", "rgba(0,0,0,0.07)"];
-        readonly dark: readonly ["rgba(255,255,255,0.05)", "rgba(255,255,255,0.08)"];
-    };
-};
-export declare function getSidebarRowBackground(theme: 'light' | 'dark', row: {
-    kind: 'start' | 'main' | 'variation';
-}, bandCounters: {
-    main: number;
-    variation: number;
-}): string;
-export declare function createSidebarRowBandCounters(): {
-    main: number;
-    variation: number;
-};
-export declare const analysisModalColors: {
-    readonly light: {
-        readonly panel: {
-            readonly backgroundColor: "#fafafa";
-            readonly color: "#1a1a1a";
-        };
-        readonly title: {
-            readonly color: "#1a1a1a";
-        };
-        readonly closeButton: {
-            readonly backgroundColor: "#eee";
-            readonly border: "1px solid #ccc";
-            readonly color: "#333";
-        };
-    };
-    readonly dark: {
-        readonly panel: {
-            readonly backgroundColor: "#2a2a2a";
-            readonly color: "#e8e8e8";
-        };
-        readonly title: {
-            readonly color: "#e8e8e8";
-        };
-        readonly closeButton: {
-            readonly backgroundColor: "#3a3a3a";
-            readonly border: "1px solid #555";
-            readonly color: "#e8e8e8";
-        };
-    };
-};

package/dist/features/replay/analysis/buildReplayAnalysisContext.d.ts

@@ -1,4 +0,0 @@
-import type { ReplayGame } from '../types';
-import type { ReplayAnalysisContext } from './types';
-/** Build analysis context from the current replay browse position. */
-export declare function buildReplayAnalysisContext(game: ReplayGame, plyIndex: number, boardOrientation: 'white' | 'black'): ReplayAnalysisContext;

package/dist/features/replay/analysis/hooks/useReplayAnalysisBoard.d.ts

@@ -1,34 +0,0 @@
-import { AnalysisEngineOptions, EngineEvaluation } from 'react-chess-core';
-import type { ReplayAnalysisContext, ReplayAnalysisHistoryRow, ReplaySolutionMoveDisplay } from '../types';
-export type UseReplayAnalysisBoardArgs = {
-    analysisContext: ReplayAnalysisContext;
-    onClose: () => void;
-    theme: 'light' | 'dark';
-    boardWidth: number;
-    engine?: AnalysisEngineOptions;
-};
-export type ReplayAnalysisBoardModel = {
-    theme: 'light' | 'dark';
-    boardWidth: number;
-    analysisContext: ReplayAnalysisContext;
-    fen: string;
-    ply: number;
-    maxPly: number;
-    historyRows: ReplayAnalysisHistoryRow[];
-    solutionSans: ReplaySolutionMoveDisplay[];
-    boardOrientation: 'white' | 'black';
-    engineEvaluation: EngineEvaluation;
-    engineEnabled: boolean;
-    lastMove: {
-        from: string;
-        to: string;
-    } | null;
-    checkSquare: string | null;
-    onSelectPly: (ply: number) => void;
-    onSelectHistoryRow: (row: ReplayAnalysisHistoryRow) => void;
-    isHistoryRowSelected: (row: ReplayAnalysisHistoryRow) => boolean;
-    onPieceDrop: (sourceSquare: string, targetSquare: string, piece: string) => boolean;
-    onBackdropMouseDown: () => void;
-    onClose: () => void;
-};
-export declare function useReplayAnalysisBoard({ analysisContext, onClose, theme, boardWidth, engine, }: UseReplayAnalysisBoardArgs): ReplayAnalysisBoardModel;

package/dist/features/replay/analysis/index.d.ts

@@ -1,6 +0,0 @@
-export { ReplayAnalysisBoard, DEFAULT_ANALYSIS_BOARD_WIDTH, DEFAULT_ANALYSIS_SIDEBAR_WIDTH, DEFAULT_ANALYSIS_COLUMN_GAP, type ReplayAnalysisBoardProps, } from './ReplayAnalysisBoard';
-export { ReplayEngineEvaluationPanel } from './ReplayEngineEvaluationPanel';
-export { buildReplayAnalysisContext } from './buildReplayAnalysisContext';
-export { ReplayAnalysisPosition } from './ReplayAnalysisPosition';
-export { useReplayAnalysisBoard, type UseReplayAnalysisBoardArgs, type ReplayAnalysisBoardModel, } from './hooks/useReplayAnalysisBoard';
-export type { ReplayAnalysisContext, ReplayAnalysisHistoryRow, ReplaySolutionMoveDisplay, } from './types';

package/dist/features/replay/analysis/replayAnalysisUtils.d.ts

@@ -1,3 +0,0 @@
-import { Chess } from 'chess.js';
-export declare function tryApplyUci(chess: Chess, uci: string): boolean;
-export declare function getCheckSquareFromChess(chess: Chess): string;

package/dist/features/replay/analysis/types.d.ts

@@ -1,22 +0,0 @@
-/** Context for opening the replay analysis board at a point in the game. */
-export type ReplayAnalysisContext = {
-    initialFen: string;
-    /** Full game main line in UCI notation. */
-    solutionMoves: string[];
-    /** Ply index to open at (0 = start position). */
-    startPly: number;
-    boardOrientation: 'white' | 'black';
-};
-export type ReplayAnalysisHistoryRow = {
-    key: string;
-    label: string;
-    indent: number;
-    kind: 'start' | 'main' | 'variation';
-    mainPly: number;
-    variationIndex: number;
-};
-export type ReplaySolutionMoveDisplay = {
-    ply: number;
-    uci: string;
-    san: string;
-};