@react-chess-tools/react-chess-game 0.4.0 → 0.4.2

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

@@ -5,6 +5,11 @@ 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> {
 }
@@ -104,10 +109,35 @@ 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<Partial<Record<Sound, string>>>;
+    Sounds: React$1.FC<SoundsProps>;
     KeyboardControls: React$1.FC<{
         controls?: KeyboardControls | undefined;
     }>;
 };
 
-export { ChessGame, useChessGame, useChessGameContext };
+/**
+ * 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, 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,12 +57,16 @@ 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 });
@@ -90,53 +94,79 @@ 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 [currentMoveIndex, setCurrentMoveIndex] = React.useState(-1);
   const history = React.useMemo(() => game.history(), [game]);
-  const isLatestMove = currentMoveIndex === history.length - 1 || currentMoveIndex === -1;
-  const setPosition = (fen2, orientation2) => {
+  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);
     setCurrentMoveIndex(-1);
-  };
-  const makeMove = (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;
-    }
-  };
-  const flipBoard = () => {
+  }, []);
+  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 = (moveIndex) => {
-    if (moveIndex < -1 || moveIndex >= history.length) return;
-    setCurrentMoveIndex(moveIndex);
-  };
-  const goToStart = () => goToMove(-1);
-  const goToEnd = () => goToMove(history.length - 1);
-  const goToPreviousMove = () => goToMove(currentMoveIndex - 1);
-  const goToNextMove = () => goToMove(currentMoveIndex + 1);
-  return {
-    game,
-    currentFen: getCurrentFen(fen, game, currentMoveIndex),
-    currentPosition: game.history()[currentMoveIndex],
-    orientation,
-    currentMoveIndex,
-    isLatestMove,
-    info: getGameInfo(game, orientation),
-    methods: {
+  }, []);
+  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,
@@ -145,7 +175,27 @@ var useChessGame = ({
       goToEnd,
       goToPreviousMove,
       goToNextMove
-    }
+    }),
+    [
+      makeMove,
+      setPosition,
+      flipBoard,
+      goToMove,
+      goToStart,
+      goToEnd,
+      goToPreviousMove,
+      goToNextMove
+    ]
+  );
+  return {
+    game,
+    currentFen,
+    currentPosition,
+    orientation,
+    currentMoveIndex,
+    isLatestMove,
+    info,
+    methods
   };
 };
 
@@ -156,7 +206,7 @@ var useChessGameContext = () => {
   const context = React2.useContext(ChessGameContext);
   if (!context) {
     throw new Error(
-      "useChessGameContext must be used within a ChessGameProvider"
+      `useChessGameContext must be used within a ChessGame component. Make sure your component is wrapped with <ChessGame.Root> or ensure the ChessGame component is properly rendered in the component tree.`
     );
   }
   return context;
@@ -198,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%)"
       };
     });
   }
@@ -325,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}`);
@@ -362,14 +420,14 @@ var Sounds = (sounds) => {
 };
 
 // src/hooks/useKeyboardControls.ts
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 var useKeyboardControls = (controls) => {
   const gameContext = useChessGameContext();
   if (!gameContext) {
     throw new Error("ChessGameContext not found");
   }
   const keyboardControls = { ...defaultKeyboardControls, ...controls };
-  useEffect2(() => {
+  useEffect3(() => {
     const handleKeyDown = (event) => {
       const handler = keyboardControls[event.key];
       if (handler) {