feat: Custom Board Dimensions

README.md

@@ -138,6 +138,7 @@ For more advanced code usage examples, please see example boards shown in [`Stor
 | arePiecesDraggable            | boolean: true                                                                                                                                                                                                                                                                     | [true, false]                                      | Whether or not all pieces are draggable.                                                                                                                                                                                                                                                                                                                                             |
 | arePremovesAllowed            | boolean: false                                                                                                                                                                                                                                                                    | [true, false]                                      | Whether or not premoves are allowed.                                                                                                                                                                                                                                                                                                                                                 |
 | autoPromoteToQueen            | boolean: false                                                                                                                                                                                                                                                                    | [true, false]                                      | Whether or not to automatically promote pawn to queen.                                                                                                                                                                                                                                                                                                                               |
+| boardDimensions         | object: { rows: 8, columns: 8 }                                                                                                                                                                                                                                            | integer: 0 < rows, columns <= 16                                 | Custom board dimensions (for some chess variants). Supports up to a 16x16 board.                                                                                                                                                                                                                                                                                                                                                  |
 | boardOrientation              | string: 'white'                                                                                                                                                                                                                                                                   | ['white', 'black']                                 | The orientation of the board, the chosen colour will be at the bottom of the board.                                                                                                                                                                                                                                                                                                  |
 | boardWidth                    | number: 560                                                                                                                                                                                                                                                                       |                                                    | The width of the board in pixels.                                                                                                                                                                                                                                                                                                                                                    |
 | clearPremovesOnRightClick     | boolean: true                                                                                                                                                                                                                                                                     | [true, false]                                      | If premoves are allowed, whether or not to clear the premove queue on right click.                                                                                                                                                                                                                                                                                                   |
@@ -166,7 +167,7 @@ For more advanced code usage examples, please see example boards shown in [`Stor
 | onPieceDragBegin              | function: (piece, sourceSquare) => {}                                                                                                                                                                                                                                             |                                                    | User function that is run when piece is grabbed to start dragging.                                                                                                                                                                                                                                                                                                                   |
 | onPieceDragEnd                | function: (piece, sourceSquare) => {}                                                                                                                                                                                                                                             |                                                    | User function that is run when piece is let go after dragging.                                                                                                                                                                                                                                                                                                                       |
 | onPieceDrop                   | function: (sourceSquare, targetSquare, piece) => true                                                                                                                                                                                                                             | returns [true, false]                              | User function that is run when piece is dropped on a square. Must return whether the move was successful or not. This return value does not control whether or not the piece was placed (as that is controlled by the `position` prop) but instead controls premove logic.                                                                                                           |
-| onPromotionCheck              | function: (sourceSquare, targetSquare, piece) => (((piece === "wP" && sourceSquare[1] === "7" && targetSquare[1] === "8") \|\| (piece === "bP" && sourceSquare[1] === "2" && targetSquare[1] === "1")) && Math.abs(sourceSquare.charCodeAt(0) - targetSquare.charCodeAt(0)) <= 1) | returns [true, false]                              | User function that is run when piece is dropped. Must return whether the move results in a promotion or not.                                                                                                                                                                                                                                                                         |
+| onPromotionCheck              | function: (sourceSquare, targetSquare, piece) => (((piece === "wP" && sourceSquare.slice(1,3) === (boardDimensions.rows - 1).toString() && targetSquare.slice(1,3) === (boardDimensions.rows).toString())) \|\| (piece === "bP" && sourceSquare.slice(1,3) === "2" && targetSquare.slice(1,3) === "1")) && Math.abs(sourceSquare.charCodeAt(0) - targetSquare.charCodeAt(0)) <= 1) | returns [true, false]                              | User function that is run when piece is dropped. Must return whether the move results in a promotion or not.                                                                                                                                                                                                                                                                         |
 | onPromotionPieceSelect        | function: (piece, promoteFromSquare, promoteToSquare) => true                                                                                                                                                                                                                     | returns [true, false]                              | User function that is run when a promotion piece is selected. Must return whether the move was successful or not.                                                                                                                                                                                                                                                                    |
 | onSquareClick                 | function: (square, piece) => {}                                                                                                                                                                                                                                                   |                                                    | User function that is run when a square is clicked.                                                                                                                                                                                                                                                                                                                                  |
 | onSquareRightClick            | function: (square) => {}                                                                                                                                                                                                                                                          |                                                    | User function that is run when a square is right clicked.                                                                                                                                                                                                                                                                                                                            |

src/chessboard/components/Arrows.tsx

@@ -4,21 +4,26 @@ import { getRelativeCoords } from "../functions";
 import { useChessboard } from "../context/chessboard-context";
 import { Arrow } from "../types";
 
+
 export const Arrows = () => {
   const {
     arrows,
     newArrow,
+    boardDimensions,
     boardOrientation,
     boardWidth,
-
     customArrowColor: primaryArrowCollor,
   } = useChessboard();
+
+  const boardHeight = (boardWidth * boardDimensions.rows) / boardDimensions.columns;
+  const squareWidth = boardWidth / boardDimensions.columns;
+
   const arrowsList = [...arrows, newArrow].filter(Boolean) as Arrow[];
 
   return (
     <svg
       width={boardWidth}
-      height={boardWidth}
+      height={boardHeight}
       style={{
         position: "absolute",
         top: "0",
@@ -30,29 +35,35 @@ export const Arrows = () => {
       {arrowsList.map((arrow, i) => {
         const [arrowStartField, arrowEndField, arrowColor] = arrow;
         if (arrowStartField === arrowEndField) return null;
+
         const from = getRelativeCoords(
+          boardDimensions,
           boardOrientation,
           boardWidth,
           arrowStartField
         );
+
         const to = getRelativeCoords(
+          boardDimensions,
           boardOrientation,
           boardWidth,
           arrowEndField
         );
-        let ARROW_LENGTH_REDUCER = boardWidth / 32;
+
+        let ARROW_LENGTH_REDUCER = squareWidth / 5;
 
         const isArrowActive = i === arrows.length;
-        // if there are different arrows targeting the same square make their length a bit shorter
+
         if (
           arrows.some(
             (restArrow) =>
               restArrow[0] !== arrowStartField && restArrow[1] === arrowEndField
           ) &&
           !isArrowActive
         ) {
-          ARROW_LENGTH_REDUCER = boardWidth / 16;
+          ARROW_LENGTH_REDUCER = squareWidth / 3.5;
         }
+
         const dx = to.x - from.x;
         const dy = to.y - from.y;
 
@@ -90,7 +101,7 @@ export const Arrows = () => {
               opacity={isArrowActive ? "0.5" : "0.65"}
               stroke={arrowColor ?? primaryArrowCollor}
               strokeWidth={
-                isArrowActive ? (0.9 * boardWidth) / 40 : boardWidth / 40
+                isArrowActive ? 0.9 * squareWidth / 5.5 : squareWidth / 5.5
               }
               markerEnd={`url(#arrowhead-${i})`}
             />

src/chessboard/components/Board.tsx

@@ -10,13 +10,16 @@ export function Board() {
 
   const {
     boardWidth,
+    boardDimensions,
     clearCurrentRightClickDown,
     onPromotionPieceSelect,
     setShowPromoteDialog,
     showPromoteDialog,
     customBoardStyle,
   } = useChessboard();
 
+  const boardHeight = (boardWidth * boardDimensions.rows) / boardDimensions.columns;
+
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (
@@ -39,7 +42,7 @@ export function Board() {
         ref={boardRef}
         style={{
           position: "relative",
-          ...boardStyles(boardWidth),
+          ...boardStyles(boardWidth, boardHeight),
           ...customBoardStyle,
         }}
       >
@@ -60,7 +63,7 @@ export function Board() {
                 zIndex: "100",
                 backgroundColor: "rgba(22,21,18,.7)",
                 width: boardWidth,
-                height: boardWidth,
+                height: boardHeight,
               }}
             />
             <PromotionDialog />
@@ -73,8 +76,8 @@ export function Board() {
   );
 }
 
-const boardStyles = (width: number) => ({
+const boardStyles = (width: number, height: number) => ({
   cursor: "default",
-  height: width,
+  height,
   width,
 });

src/chessboard/components/CustomDragLayer.tsx

@@ -9,8 +9,17 @@ export type CustomDragLayerProps = {
 };
 
 export function CustomDragLayer({ boardContainer }: CustomDragLayerProps) {
-  const { boardWidth, chessPieces, id, snapToCursor, allowDragOutsideBoard } =
-    useChessboard();
+  const {
+    boardWidth,
+    boardDimensions,
+    chessPieces,
+    id,
+    snapToCursor,
+    allowDragOutsideBoard,
+  } = useChessboard();
+
+  const boardHeight = (boardWidth * boardDimensions.rows) / boardDimensions.columns;
+  const squareWidth = boardWidth / boardDimensions.columns;
 
   const collectedProps = useDragLayer((monitor) => ({
     item: monitor.getItem(),
@@ -36,19 +45,21 @@ export function CustomDragLayer({ boardContainer }: CustomDragLayerProps) {
       if (!clientOffset || !sourceClientOffset) return { display: "none" };
 
       let { x, y } = snapToCursor ? clientOffset : sourceClientOffset;
-      const halfSquareWidth = boardWidth / 8 / 2;
+      const halfSquareWidth = squareWidth / 2;
+
       if (snapToCursor) {
         x -= halfSquareWidth;
         y -= halfSquareWidth;
       }
 
       if (!allowDragOutsideBoard) {
         const { left, top } = boardContainer;
-        // half square so the piece reaches the board
+
         const maxLeft = left - halfSquareWidth;
         const maxTop = top - halfSquareWidth;
         const maxRight = left + boardWidth - halfSquareWidth;
-        const maxBottom = top + boardWidth - halfSquareWidth;
+        const maxBottom = top + boardHeight - halfSquareWidth;
+
         x = Math.max(maxLeft, Math.min(x, maxRight));
         y = Math.max(maxTop, Math.min(y, maxBottom));
       }
@@ -61,7 +72,7 @@ export function CustomDragLayer({ boardContainer }: CustomDragLayerProps) {
         touchAction: "none",
       };
     },
-    [boardWidth, allowDragOutsideBoard, snapToCursor, boardContainer]
+    [squareWidth, boardWidth, boardHeight, allowDragOutsideBoard, snapToCursor, boardContainer]
   );
 
   return isDragging && item.id === id ? (
@@ -77,15 +88,11 @@ export function CustomDragLayer({ boardContainer }: CustomDragLayerProps) {
       <div style={getItemStyle(clientOffset, sourceClientOffset)}>
         {typeof chessPieces[item.piece] === "function" ? (
           (chessPieces[item.piece] as CustomPieceFn)({
-            squareWidth: boardWidth / 8,
+            squareWidth,
             isDragging: true,
           })
         ) : (
-          <svg
-            viewBox={"1 1 43 43"}
-            width={boardWidth / 8}
-            height={boardWidth / 8}
-          >
+          <svg viewBox={"1 1 43 43"} width={squareWidth} height={squareWidth}>
             <g>{chessPieces[item.piece] as ReactNode}</g>
           </svg>
         )}