@react-chess-tools/react-chess-game 0.3.1 → 0.4.1

package/coverage/lcov-report/sorter.js

@@ -0,0 +1,196 @@
+/* eslint-disable */
+var addSorting = (function() {
+    'use strict';
+    var cols,
+        currentSort = {
+            index: 0,
+            desc: false
+        };
+
+    // returns the summary table element
+    function getTable() {
+        return document.querySelector('.coverage-summary');
+    }
+    // returns the thead element of the summary table
+    function getTableHeader() {
+        return getTable().querySelector('thead tr');
+    }
+    // returns the tbody element of the summary table
+    function getTableBody() {
+        return getTable().querySelector('tbody');
+    }
+    // returns the th element for nth column
+    function getNthColumn(n) {
+        return getTableHeader().querySelectorAll('th')[n];
+    }
+
+    function onFilterInput() {
+        const searchValue = document.getElementById('fileSearch').value;
+        const rows = document.getElementsByTagName('tbody')[0].children;
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            if (
+                row.textContent
+                    .toLowerCase()
+                    .includes(searchValue.toLowerCase())
+            ) {
+                row.style.display = '';
+            } else {
+                row.style.display = 'none';
+            }
+        }
+    }
+
+    // loads the search box
+    function addSearchBox() {
+        var template = document.getElementById('filterTemplate');
+        var templateClone = template.content.cloneNode(true);
+        templateClone.getElementById('fileSearch').oninput = onFilterInput;
+        template.parentElement.appendChild(templateClone);
+    }
+
+    // loads all columns
+    function loadColumns() {
+        var colNodes = getTableHeader().querySelectorAll('th'),
+            colNode,
+            cols = [],
+            col,
+            i;
+
+        for (i = 0; i < colNodes.length; i += 1) {
+            colNode = colNodes[i];
+            col = {
+                key: colNode.getAttribute('data-col'),
+                sortable: !colNode.getAttribute('data-nosort'),
+                type: colNode.getAttribute('data-type') || 'string'
+            };
+            cols.push(col);
+            if (col.sortable) {
+                col.defaultDescSort = col.type === 'number';
+                colNode.innerHTML =
+                    colNode.innerHTML + '<span class="sorter"></span>';
+            }
+        }
+        return cols;
+    }
+    // attaches a data attribute to every tr element with an object
+    // of data values keyed by column name
+    function loadRowData(tableRow) {
+        var tableCols = tableRow.querySelectorAll('td'),
+            colNode,
+            col,
+            data = {},
+            i,
+            val;
+        for (i = 0; i < tableCols.length; i += 1) {
+            colNode = tableCols[i];
+            col = cols[i];
+            val = colNode.getAttribute('data-value');
+            if (col.type === 'number') {
+                val = Number(val);
+            }
+            data[col.key] = val;
+        }
+        return data;
+    }
+    // loads all row data
+    function loadData() {
+        var rows = getTableBody().querySelectorAll('tr'),
+            i;
+
+        for (i = 0; i < rows.length; i += 1) {
+            rows[i].data = loadRowData(rows[i]);
+        }
+    }
+    // sorts the table using the data for the ith column
+    function sortByIndex(index, desc) {
+        var key = cols[index].key,
+            sorter = function(a, b) {
+                a = a.data[key];
+                b = b.data[key];
+                return a < b ? -1 : a > b ? 1 : 0;
+            },
+            finalSorter = sorter,
+            tableBody = document.querySelector('.coverage-summary tbody'),
+            rowNodes = tableBody.querySelectorAll('tr'),
+            rows = [],
+            i;
+
+        if (desc) {
+            finalSorter = function(a, b) {
+                return -1 * sorter(a, b);
+            };
+        }
+
+        for (i = 0; i < rowNodes.length; i += 1) {
+            rows.push(rowNodes[i]);
+            tableBody.removeChild(rowNodes[i]);
+        }
+
+        rows.sort(finalSorter);
+
+        for (i = 0; i < rows.length; i += 1) {
+            tableBody.appendChild(rows[i]);
+        }
+    }
+    // removes sort indicators for current column being sorted
+    function removeSortIndicators() {
+        var col = getNthColumn(currentSort.index),
+            cls = col.className;
+
+        cls = cls.replace(/ sorted$/, '').replace(/ sorted-desc$/, '');
+        col.className = cls;
+    }
+    // adds sort indicators for current column being sorted
+    function addSortIndicators() {
+        getNthColumn(currentSort.index).className += currentSort.desc
+            ? ' sorted-desc'
+            : ' sorted';
+    }
+    // adds event listeners for all sorter widgets
+    function enableUI() {
+        var i,
+            el,
+            ithSorter = function ithSorter(i) {
+                var col = cols[i];
+
+                return function() {
+                    var desc = col.defaultDescSort;
+
+                    if (currentSort.index === i) {
+                        desc = !currentSort.desc;
+                    }
+                    sortByIndex(i, desc);
+                    removeSortIndicators();
+                    currentSort.index = i;
+                    currentSort.desc = desc;
+                    addSortIndicators();
+                };
+            };
+        for (i = 0; i < cols.length; i += 1) {
+            if (cols[i].sortable) {
+                // add the click event handler on the th so users
+                // dont have to click on those tiny arrows
+                el = getNthColumn(i).querySelector('.sorter').parentElement;
+                if (el.addEventListener) {
+                    el.addEventListener('click', ithSorter(i));
+                } else {
+                    el.attachEvent('onclick', ithSorter(i));
+                }
+            }
+        }
+    }
+    // adds sorting functionality to the UI
+    return function() {
+        if (!getTable()) {
+            return;
+        }
+        cols = loadColumns();
+        loadData();
+        addSearchBox();
+        addSortIndicators();
+        enableUI();
+    };
+})();
+
+window.addEventListener('load', addSorting);

package/dist/index.d.mts

@@ -1,10 +1,15 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default from 'react';
 import { Chessboard } from 'react-chessboard';
 import * as chess_js from 'chess.js';
 import { Color, Chess } from 'chess.js';
 
 type Sound = "check" | "move" | "capture" | "gameOver";
+type Sounds = Record<Sound, HTMLAudioElement>;
+
+type SoundsProps = {
+    sounds?: Partial<Record<Sound, string>>;
+};
 
 interface ChessGameProps extends React__default.ComponentProps<typeof Chessboard> {
 }
@@ -14,17 +19,19 @@ interface RootProps {
     orientation?: Color;
 }
 
-declare const ChessGame: {
-    Root: React.FC<React.PropsWithChildren<RootProps>>;
-    Board: React.FC<ChessGameProps>;
-    Sounds: React.FC<Partial<Record<Sound, string>>>;
+type useChessGameProps = {
+    fen?: string;
+    orientation?: Color;
 };
-
-declare const useChessGameContext: () => {
-    game: chess_js.Chess;
-    orientation: chess_js.Color;
+declare const useChessGame: ({ fen, orientation: initialOrientation, }?: useChessGameProps) => {
+    game: Chess;
+    currentFen: string;
+    currentPosition: string;
+    orientation: Color;
+    currentMoveIndex: number;
+    isLatestMove: boolean;
     info: {
-        turn: chess_js.Color;
+        turn: Color;
         isPlayerTurn: boolean;
         isOpponentTurn: boolean;
         moveNumber: number;
@@ -41,25 +48,26 @@ declare const useChessGameContext: () => {
         hasPlayerLost: boolean;
     };
     methods: {
-        makeMove: (move: string | {
-            from: string;
-            to: string;
-            promotion?: string | undefined;
-        }) => boolean;
-        setPosition: (fen: string, orientation: chess_js.Color) => void;
+        makeMove: (move: Parameters<Chess["move"]>[0]) => boolean;
+        setPosition: (fen: string, orientation: Color) => void;
         flipBoard: () => void;
+        goToMove: (moveIndex: number) => void;
+        goToStart: () => void;
+        goToEnd: () => void;
+        goToPreviousMove: () => void;
+        goToNextMove: () => void;
     };
 };
 
-type useChessGameProps = {
-    fen?: string;
-    orientation?: Color;
-};
-declare const useChessGame: ({ fen, orientation: initialOrientation, }?: useChessGameProps) => {
-    game: Chess;
-    orientation: Color;
+declare const useChessGameContext: () => {
+    game: chess_js.Chess;
+    currentFen: string;
+    currentPosition: string;
+    orientation: chess_js.Color;
+    currentMoveIndex: number;
+    isLatestMove: boolean;
     info: {
-        turn: Color;
+        turn: chess_js.Color;
         isPlayerTurn: boolean;
         isOpponentTurn: boolean;
         moveNumber: number;
@@ -76,10 +84,60 @@ declare const useChessGame: ({ fen, orientation: initialOrientation, }?: useChes
         hasPlayerLost: boolean;
     };
     methods: {
-        makeMove: (move: Parameters<Chess["move"]>[0]) => boolean;
-        setPosition: (fen: string, orientation: Color) => void;
+        makeMove: (move: string | {
+            from: string;
+            to: string;
+            promotion?: string | undefined;
+        }) => boolean;
+        setPosition: (fen: string, orientation: chess_js.Color) => void;
         flipBoard: () => void;
+        goToMove: (moveIndex: number) => void;
+        goToStart: () => void;
+        goToEnd: () => void;
+        goToPreviousMove: () => void;
+        goToNextMove: () => void;
     };
 };
+type ChessGameContextType = ReturnType<typeof useChessGame>;
+
+type KeyboardControlsProps = {
+    controls?: KeyboardControls;
+};
+type KeyboardControls = Record<string, (context: ChessGameContextType) => void>;
+declare const KeyboardControls: React.FC<KeyboardControlsProps>;
+
+declare const ChessGame: {
+    Root: React$1.FC<React$1.PropsWithChildren<RootProps>>;
+    Board: React$1.FC<ChessGameProps>;
+    Sounds: React$1.FC<SoundsProps>;
+    KeyboardControls: React$1.FC<{
+        controls?: KeyboardControls | undefined;
+    }>;
+};
+
+/**
+ * Returns an object with information about the current state of the game. This can be determined
+ * using chess.js instance, but this function is provided for convenience.
+ * @param game - The Chess.js instance representing the game.
+ * @returns An object with information about the current state of the game.
+ */
+declare const getGameInfo: (game: Chess, orientation: Color) => {
+    turn: Color;
+    isPlayerTurn: boolean;
+    isOpponentTurn: boolean;
+    moveNumber: number;
+    lastMove: chess_js.Move | undefined;
+    isCheck: boolean;
+    isCheckmate: boolean;
+    isDraw: boolean;
+    isStalemate: boolean;
+    isThreefoldRepetition: boolean;
+    isInsufficientMaterial: boolean;
+    isGameOver: boolean;
+    isDrawn: boolean;
+    hasPlayerWon: boolean;
+    hasPlayerLost: boolean;
+};
+type GameInfo = ReturnType<typeof getGameInfo>;
 
-export { ChessGame, useChessGame, useChessGameContext };
+export { ChessGame, type ChessGameContextType, type ChessGameProps, type GameInfo, KeyboardControls, type RootProps, type Sound, type Sounds, type SoundsProps, useChessGame, useChessGameContext, type useChessGameProps };

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import React3 from "react";
 
 // src/hooks/useChessGame.ts
-import React from "react";
+import React, { useEffect } from "react";
 import { Chess as Chess2 } from "chess.js";
 
 // src/utils/chess.ts
@@ -26,8 +26,8 @@ var getGameInfo = (game, orientation) => {
   const isThreefoldRepetition = game.isThreefoldRepetition();
   const isInsufficientMaterial = game.isInsufficientMaterial();
   const isGameOver = game.isGameOver();
-  const hasPlayerWon = isPlayerTurn && isGameOver && !isDraw;
-  const hasPlayerLost = isOpponentTurn && isGameOver && !isDraw;
+  const hasPlayerWon = isOpponentTurn && isGameOver && !isDraw;
+  const hasPlayerLost = isPlayerTurn && isGameOver && !isDraw;
   const isDrawn = game.isDraw();
   return {
     turn,
@@ -57,17 +57,36 @@ var isLegalMove = (game, move) => {
   }
 };
 var requiresPromotion = (game, move) => {
-  const copy = cloneGame(game);
-  const result = copy.move(move);
-  if (result === null) {
-    return false;
+  try {
+    const copy = cloneGame(game);
+    const result = copy.move(move);
+    return result.flags.indexOf("p") !== -1;
+  } catch (e) {
+    if (e instanceof Error && e.message.includes("Invalid move")) {
+      return false;
+    }
+    throw e;
   }
-  return result.flags.indexOf("p") !== -1;
 };
 var getDestinationSquares = (game, square) => {
   const moves = game.moves({ square, verbose: true });
   return moves.map((move) => move.to);
 };
+var getCurrentFen = (fen, game, currentMoveIndex) => {
+  const tempGame = new Chess();
+  if (currentMoveIndex === -1) {
+    if (fen) {
+      tempGame.load(fen);
+    }
+  } else {
+    const moves = game.history().slice(0, currentMoveIndex + 1);
+    if (fen) {
+      tempGame.load(fen);
+    }
+    moves.forEach((move) => tempGame.move(move));
+  }
+  return tempGame.fen();
+};
 
 // src/hooks/useChessGame.ts
 var useChessGame = ({
@@ -75,37 +94,108 @@ var useChessGame = ({
   orientation: initialOrientation
 } = {}) => {
   const [game, setGame] = React.useState(new Chess2(fen));
+  useEffect(() => {
+    setGame(new Chess2(fen));
+  }, [fen]);
   const [orientation, setOrientation] = React.useState(
     initialOrientation ?? "w"
   );
-  const setPosition = (fen2, orientation2) => {
+  const [currentMoveIndex, setCurrentMoveIndex] = React.useState(-1);
+  const history = React.useMemo(() => game.history(), [game]);
+  const isLatestMove = React.useMemo(
+    () => currentMoveIndex === history.length - 1 || currentMoveIndex === -1,
+    [currentMoveIndex, history.length]
+  );
+  const info = React.useMemo(
+    () => getGameInfo(game, orientation),
+    [game, orientation]
+  );
+  const currentFen = React.useMemo(
+    () => getCurrentFen(fen, game, currentMoveIndex),
+    [game, currentMoveIndex]
+  );
+  const currentPosition = React.useMemo(
+    () => game.history()[currentMoveIndex],
+    [game, currentMoveIndex]
+  );
+  const setPosition = React.useCallback((fen2, orientation2) => {
     const newGame = new Chess2();
     newGame.load(fen2);
     setOrientation(orientation2);
     setGame(newGame);
-  };
-  const makeMove = (move) => {
-    try {
-      const copy = cloneGame(game);
-      copy.move(move);
-      setGame(copy);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  };
-  const flipBoard = () => {
+    setCurrentMoveIndex(-1);
+  }, []);
+  const makeMove = React.useCallback(
+    (move) => {
+      if (!isLatestMove) {
+        return false;
+      }
+      try {
+        const copy = cloneGame(game);
+        copy.move(move);
+        setGame(copy);
+        setCurrentMoveIndex(copy.history().length - 1);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    },
+    [isLatestMove, game]
+  );
+  const flipBoard = React.useCallback(() => {
     setOrientation((orientation2) => orientation2 === "w" ? "b" : "w");
-  };
+  }, []);
+  const goToMove = React.useCallback(
+    (moveIndex) => {
+      if (moveIndex < -1 || moveIndex >= history.length) return;
+      setCurrentMoveIndex(moveIndex);
+    },
+    [history.length]
+  );
+  const goToStart = React.useCallback(() => goToMove(-1), []);
+  const goToEnd = React.useCallback(
+    () => goToMove(history.length - 1),
+    [history.length]
+  );
+  const goToPreviousMove = React.useCallback(
+    () => goToMove(currentMoveIndex - 1),
+    [currentMoveIndex]
+  );
+  const goToNextMove = React.useCallback(
+    () => goToMove(currentMoveIndex + 1),
+    [currentMoveIndex]
+  );
+  const methods = React.useMemo(
+    () => ({
+      makeMove,
+      setPosition,
+      flipBoard,
+      goToMove,
+      goToStart,
+      goToEnd,
+      goToPreviousMove,
+      goToNextMove
+    }),
+    [
+      makeMove,
+      setPosition,
+      flipBoard,
+      goToMove,
+      goToStart,
+      goToEnd,
+      goToPreviousMove,
+      goToNextMove
+    ]
+  );
   return {
     game,
+    currentFen,
+    currentPosition,
     orientation,
-    info: getGameInfo(game, orientation),
-    methods: {
-      makeMove,
-      setPosition,
-      flipBoard
-    }
+    currentMoveIndex,
+    isLatestMove,
+    info,
+    methods
   };
 };
 
@@ -158,8 +248,9 @@ var getCustomSquareStyles = (game, info, activeSquare) => {
   if (activeSquare) {
     const destinationSquares = getDestinationSquares(game, activeSquare);
     destinationSquares.forEach((square) => {
+      var _a;
       customSquareStyles[square] = {
-        background: game.get(square) && game.get(square).color !== turn ? "radial-gradient(circle, rgba(0,0,0,.1) 85%, transparent 85%)" : "radial-gradient(circle, rgba(0,0,0,.1) 25%, transparent 25%)"
+        background: game.get(square) && ((_a = game.get(square)) == null ? void 0 : _a.color) !== turn ? "radial-gradient(circle, rgba(1, 0, 0, 0.1) 85%, transparent 85%)" : "radial-gradient(circle, rgba(0,0,0,.1) 25%, transparent 25%)"
       };
     });
   }
@@ -188,6 +279,7 @@ var Board = ({
   }
   const {
     game,
+    currentFen,
     orientation,
     info,
     methods: { makeMove }
@@ -249,7 +341,7 @@ var Board = ({
         ...customSquareStyles
       },
       boardOrientation: orientation === "b" ? "black" : "white",
-      position: game.fen(),
+      position: currentFen,
       showPromotionDialog: !!promotionMove,
       onPromotionPieceSelect: promotionMove ? onPromotionPieceSelect : void 0,
       onPieceDragBegin: (_2, square) => {
@@ -284,30 +376,37 @@ var defaultSounds = {
 };
 
 // src/hooks/useBoardSounds.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 var useBoardSounds = (sounds) => {
   const {
     info: { lastMove, isCheckmate }
   } = useChessGameContext();
-  useEffect(() => {
+  useEffect2(() => {
+    var _a, _b, _c;
+    if (Object.keys(sounds).length === 0) {
+      return;
+    }
     if (isCheckmate) {
-      sounds.gameOver.play();
+      (_a = sounds.gameOver) == null ? void 0 : _a.play();
       return;
     }
     if (lastMove == null ? void 0 : lastMove.captured) {
-      sounds.capture.play();
+      (_b = sounds.capture) == null ? void 0 : _b.play();
       return;
     }
     if (lastMove) {
-      sounds.move.play();
+      (_c = sounds.move) == null ? void 0 : _c.play();
       return;
     }
   }, [lastMove]);
 };
 
 // src/components/ChessGame/parts/Sounds.tsx
-var Sounds = (sounds) => {
+var Sounds = ({ sounds }) => {
   const customSoundsAudios = useMemo(() => {
+    if (typeof window === "undefined" || typeof Audio === "undefined") {
+      return {};
+    }
     return Object.entries({ ...defaultSounds, sounds }).reduce(
       (acc, [name, base64]) => {
         acc[name] = new Audio(`data:audio/wav;base64,${base64}`);
@@ -320,11 +419,55 @@ var Sounds = (sounds) => {
   return null;
 };
 
+// src/hooks/useKeyboardControls.ts
+import { useEffect as useEffect3 } from "react";
+var useKeyboardControls = (controls) => {
+  const gameContext = useChessGameContext();
+  if (!gameContext) {
+    throw new Error("ChessGameContext not found");
+  }
+  const keyboardControls = { ...defaultKeyboardControls, ...controls };
+  useEffect3(() => {
+    const handleKeyDown = (event) => {
+      const handler = keyboardControls[event.key];
+      if (handler) {
+        event.preventDefault();
+        handler(gameContext);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [gameContext]);
+  return null;
+};
+
+// src/components/ChessGame/parts/KeyboardControls.tsx
+var defaultKeyboardControls = {
+  ArrowLeft: (context) => context.methods.goToPreviousMove(),
+  ArrowRight: (context) => context.methods.goToNextMove(),
+  ArrowUp: (context) => context.methods.goToStart(),
+  ArrowDown: (context) => context.methods.goToEnd()
+};
+var KeyboardControls2 = ({
+  controls
+}) => {
+  const gameContext = useChessGameContext();
+  if (!gameContext) {
+    throw new Error("ChessGameContext not found");
+  }
+  const keyboardControls = { ...defaultKeyboardControls, ...controls };
+  useKeyboardControls(keyboardControls);
+  return null;
+};
+
 // src/components/ChessGame/index.ts
 var ChessGame = {
   Root,
   Board,
-  Sounds
+  Sounds,
+  KeyboardControls: KeyboardControls2
 };
 export {
   ChessGame,