react-chessboard-svg - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

dist/index.d.ts

@@ -8,2 +8,10 @@ import { ReactElement } from 'react';
   fen?: string;
+  /**
+   * String defining fill colour for chessboard dark tiles e.g. '#b58863'
+   */
+  squareDarkColour?: string;
+  /**
+   * String defining fill colour for chessboard light tiles e.g. '#f0d9b5'
+   */
+  squareLightColour?: string;
 }
@@ -10,0 +18,0 @@ declare function ChessboardSVG(props: ChessBoardSVGProps): ReactElement;

dist/index.esm.js

@@ -601,3 +601,6 @@ import 'react';
 }
-function ChessBoard() {
+function ChessBoard({
+  squareDarkColour,
+  squareLightColour
+}) {
   return /*#__PURE__*/jsxs(Fragment, {
@@ -610,3 +613,3 @@ children: [/*#__PURE__*/jsx("rect", {
       transform: "translate(0 700)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -619,3 +622,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(100 600)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -628,3 +631,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(0 500)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -637,3 +640,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(200 500)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -646,3 +649,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(400 500)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -655,3 +658,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(600 500)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -664,3 +667,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(700 400)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -673,3 +676,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(500 400)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -682,3 +685,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(300 400)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -691,3 +694,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(100 400)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -700,3 +703,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(0 300)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -709,3 +712,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(200 300)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -718,3 +721,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(400 300)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -727,3 +730,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(600 300)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -736,3 +739,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(700 200)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -745,3 +748,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(500 200)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -754,3 +757,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(300 200)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -763,3 +766,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(100 200)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -772,3 +775,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(0 100)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -781,3 +784,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(200 100)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -790,3 +793,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(400 100)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -799,3 +802,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(600 100)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -808,3 +811,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(700 0)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -817,3 +820,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(500 0)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -826,3 +829,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(300 0)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -835,3 +838,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(100 0)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -844,3 +847,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(300 600)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -853,3 +856,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(500 600)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -862,3 +865,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(700 600)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -871,3 +874,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(600 700)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -879,4 +882,12 @@ }), /*#__PURE__*/jsx("rect", {
       ry: "0",
+      transform: "translate(400 700)",
+      fill: squareDarkColour,
+      strokeWidth: "0"
+    }), /*#__PURE__*/jsx("rect", {
+      width: "100",
+      height: "100",
+      rx: "0",
+      ry: "0",
       transform: "translate(200 700)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -889,3 +900,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(100 700)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -898,3 +909,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(0 600)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -907,3 +918,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(100 500)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -916,3 +927,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(300 500)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -925,3 +936,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(500 500)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -934,3 +945,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(0 400)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -943,3 +954,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(200 400)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -952,3 +963,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(400 400)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -961,3 +972,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(600 400)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -970,3 +981,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(700 500)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -979,3 +990,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(100 300)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -988,3 +999,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(300 300)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -997,3 +1008,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(500 300)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1006,3 +1017,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(700 300)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1015,3 +1026,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(0 200)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1024,3 +1035,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(200 200)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1033,3 +1044,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(400 200)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1042,3 +1053,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(600 200)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1051,3 +1062,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(100 100)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1060,3 +1071,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(300 100)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1069,3 +1080,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(500 100)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1078,3 +1089,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(700 100)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1086,3 +1097,3 @@ }), /*#__PURE__*/jsx("rect", {
       ry: "0",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1095,3 +1106,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(200 0)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1104,3 +1115,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(400 0)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1113,3 +1124,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(600 0)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1122,3 +1133,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(200 600)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1131,3 +1142,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(400 600)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1140,3 +1151,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(600 600)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1149,3 +1160,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(300 700)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1157,12 +1168,4 @@ }), /*#__PURE__*/jsx("rect", {
       ry: "0",
-      transform: "translate(400 700)",
-      fill: "#b58863",
-      strokeWidth: "0"
-    }), /*#__PURE__*/jsx("rect", {
-      width: "100",
-      height: "100",
-      rx: "0",
-      ry: "0",
       transform: "translate(500 700)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1175,3 +1178,3 @@ }), /*#__PURE__*/jsx("rect", {
       transform: "translate(700 700)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1189,3 +1192,2 @@ })]
   if (validFen(position)) return fenToObj(position);
-  if (validPositionObject(position)) return position;
   return {};
@@ -1260,7 +1262,12 @@ }
 function ChessboardSVG({
-  fen = 'start'
+  fen = 'start',
+  squareDarkColour = '#b58863',
+  squareLightColour = '#f0d9b5'
 }) {
   const fenObj = convertPositionToObject(fen);
   return /*#__PURE__*/jsxs(SVGWrapper, {
-    children: [/*#__PURE__*/jsx(ChessBoard, {}), Object.entries(fenObj).map(([square, piece]) => PIECES[piece](`${COLUMN_X_VALUES[square[0]]} ${ROW_Y_VALUES[square[1]]}`))]
+    children: [/*#__PURE__*/jsx(ChessBoard, {
+      squareDarkColour: squareDarkColour,
+      squareLightColour: squareLightColour
+    }), Object.entries(fenObj).map(([square, piece]) => PIECES[piece](`${COLUMN_X_VALUES[square[0]]} ${ROW_Y_VALUES[square[1]]}`))]
   });
@@ -1267,0 +1274,0 @@ }

dist/index.js

@@ -605,3 +605,6 @@ 'use strict';
 }
-function ChessBoard() {
+function ChessBoard({
+  squareDarkColour,
+  squareLightColour
+}) {
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -614,3 +617,3 @@ children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(0 700)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -623,3 +626,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(100 600)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -632,3 +635,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(0 500)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -641,3 +644,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(200 500)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -650,3 +653,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(400 500)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -659,3 +662,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(600 500)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -668,3 +671,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(700 400)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -677,3 +680,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(500 400)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -686,3 +689,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(300 400)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -695,3 +698,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(100 400)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -704,3 +707,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(0 300)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -713,3 +716,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(200 300)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -722,3 +725,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(400 300)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -731,3 +734,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(600 300)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -740,3 +743,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(700 200)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -749,3 +752,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(500 200)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -758,3 +761,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(300 200)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -767,3 +770,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(100 200)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -776,3 +779,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(0 100)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -785,3 +788,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(200 100)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -794,3 +797,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(400 100)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -803,3 +806,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(600 100)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -812,3 +815,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(700 0)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -821,3 +824,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(500 0)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -830,3 +833,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(300 0)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -839,3 +842,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(100 0)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -848,3 +851,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(300 600)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -857,3 +860,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(500 600)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -866,3 +869,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(700 600)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -875,3 +878,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(600 700)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -883,4 +886,12 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       ry: "0",
+      transform: "translate(400 700)",
+      fill: squareDarkColour,
+      strokeWidth: "0"
+    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
+      width: "100",
+      height: "100",
+      rx: "0",
+      ry: "0",
       transform: "translate(200 700)",
-      fill: "#b58863",
+      fill: squareDarkColour,
       strokeWidth: "0"
@@ -893,3 +904,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(100 700)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -902,3 +913,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(0 600)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -911,3 +922,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(100 500)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -920,3 +931,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(300 500)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -929,3 +940,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(500 500)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -938,3 +949,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(0 400)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -947,3 +958,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(200 400)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -956,3 +967,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(400 400)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -965,3 +976,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(600 400)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -974,3 +985,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(700 500)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -983,3 +994,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(100 300)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -992,3 +1003,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(300 300)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1001,3 +1012,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(500 300)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1010,3 +1021,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(700 300)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1019,3 +1030,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(0 200)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1028,3 +1039,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(200 200)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1037,3 +1048,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(400 200)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1046,3 +1057,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(600 200)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1055,3 +1066,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(100 100)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1064,3 +1075,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(300 100)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1073,3 +1084,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(500 100)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1082,3 +1093,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(700 100)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1090,3 +1101,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       ry: "0",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1099,3 +1110,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(200 0)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1108,3 +1119,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(400 0)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1117,3 +1128,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(600 0)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1126,3 +1137,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(200 600)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1135,3 +1146,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(400 600)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1144,3 +1155,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(600 600)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1153,3 +1164,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(300 700)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1161,12 +1172,4 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       ry: "0",
-      transform: "translate(400 700)",
-      fill: "#b58863",
-      strokeWidth: "0"
-    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
-      width: "100",
-      height: "100",
-      rx: "0",
-      ry: "0",
       transform: "translate(500 700)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1179,3 +1182,3 @@ }), /*#__PURE__*/jsxRuntime.jsx("rect", {
       transform: "translate(700 700)",
-      fill: "#f0d9b5",
+      fill: squareLightColour,
       strokeWidth: "0"
@@ -1193,3 +1196,2 @@ })]
   if (validFen(position)) return fenToObj(position);
-  if (validPositionObject(position)) return position;
   return {};
@@ -1264,7 +1266,12 @@ }
 function ChessboardSVG({
-  fen = 'start'
+  fen = 'start',
+  squareDarkColour = '#b58863',
+  squareLightColour = '#f0d9b5'
 }) {
   const fenObj = convertPositionToObject(fen);
   return /*#__PURE__*/jsxRuntime.jsxs(SVGWrapper, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(ChessBoard, {}), Object.entries(fenObj).map(([square, piece]) => PIECES[piece](`${COLUMN_X_VALUES[square[0]]} ${ROW_Y_VALUES[square[1]]}`))]
+    children: [/*#__PURE__*/jsxRuntime.jsx(ChessBoard, {
+      squareDarkColour: squareDarkColour,
+      squareLightColour: squareLightColour
+    }), Object.entries(fenObj).map(([square, piece]) => PIECES[piece](`${COLUMN_X_VALUES[square[0]]} ${ROW_Y_VALUES[square[1]]}`))]
   });
@@ -1271,0 +1278,0 @@ }

package.json

 {
   "name": "react-chessboard-svg",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "repository": "https://github.com/Clariity/react-chessboard-svg",
@@ -5,0 +5,0 @@ "author": "Ryan Gregory <[e-mail]>",

No alert changes

Improved metrics

Total package byte prevSize

76531

increased by1.98%

Lines of code

2401

increased by0.92%

No dependency changes