react-xiangqiboard
Version:
A simple Xiangqi Board for React. Inspired and adapted from the unmaintained Chessboard.jsx. A fork of react-chessboard.
710 lines (687 loc) • 231 kB
JavaScript
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useState, useEffect, createContext, forwardRef, useContext, memo, useLayoutEffect, useCallback, useMemo, isValidElement, cloneElement, useRef, Fragment as Fragment$1 } from 'react';
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
const COLUMNS = "abcdefghi".split("");
const START_POSITION_OBJECT = {
a10: "bR",
b10: "bN",
c10: "bB",
d10: "bA",
e10: "bK",
f10: "bA",
g10: "bB",
h10: "bN",
i10: "bR",
b8: "bC",
h8: "bC",
a7: "bP",
c7: "bP",
e7: "bP",
g7: "bP",
i7: "bP",
a1: "wR",
b1: "wN",
c1: "wB",
d1: "wA",
e1: "wK",
f1: "wA",
g1: "wB",
h1: "wN",
i1: "wR",
b3: "wC",
h3: "wC",
a4: "wP",
c4: "wP",
e4: "wP",
g4: "wP",
i4: "wP",
};
const WHITE_COLUMN_VALUES = {
a: 0,
b: 1,
c: 2,
d: 3,
e: 4,
f: 5,
g: 6,
h: 7,
i: 8,
};
const BLACK_COLUMN_VALUES = {
a: 8,
b: 7,
c: 6,
d: 5,
e: 4,
f: 3,
g: 2,
h: 1,
i: 0,
};
const WHITE_ROWS = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
const BLACK_ROWS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// https://commons.wikimedia.org/wiki/Category:SVG_chess_pieces
// By en:User:Cburnett - Own work
// This W3C - unspecified vector image was created with Inkscape., CC BY - SA 3.0, https://commons.wikimedia.org/w/index.php?curid=1499810
const defaultPieces = {
wA: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", { xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontSize: 18, fontStyle: "italic", style: {
lineHeight: "100%",
}, textAnchor: "end", transform: "translate(-79.688 -10.75)" }), jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-86.584 -10.25)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", stroke: "#000", strokeWidth: 2, transform: "translate(77.583 1.25)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", stroke: "#c00", strokeWidth: 2.233, transform: "translate(82.018 5.684) scale(.89566)" })] })), jsxs("g", Object.assign({ fill: "#fedaa4", stroke: "#c00", strokeWidth: 1.288 }, { children: [jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.0007791999999998, d: "M24.368 28.137a10.3 10.3 0 0 0-2.088 6.262c0 2.89 1.236 5.51 3.204 7.427-3.898 2.3-6.697 6.253-7.524 10.874h31.068c-.827-4.62-3.627-8.574-7.525-10.874 1.969-1.917 3.156-4.537 3.156-7.427 0-2.228-.765-4.304-1.99-6.02z", color: "#000" }), jsx("path", { strokeLinejoin: "round", strokeWidth: 2.0007791999999998, d: "m42.884 28.277-19.149-.152-4.334-10.482 10.07 2.29 4.273-5.647 3.8 6.17 10.98-2.026-5.64 9.846z" }), jsx("path", { strokeLinecap: "round", strokeWidth: 2.0007791999999998, d: "m38.97 32.72-3.059 3.074h0M27.987 32.58l3.058 3.074h0" })] }))] }))),
wP: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", { xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontSize: 18, fontStyle: "italic", style: {
lineHeight: "100%",
}, textAnchor: "end", transform: "translate(-68.11 -6.463)" }), jsxs("g", Object.assign({ strokeLinecap: "round" }, { children: [jsxs("g", Object.assign({ strokeLinejoin: "bevel", transform: "translate(-81.661 -10.705)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", stroke: "#000", strokeWidth: 2, transform: "translate(72.661 1.705)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", stroke: "#c00", strokeWidth: 2.233, transform: "translate(77.095 6.14) scale(.89566)" })] })), jsx("path", { fill: "none", stroke: "#c00", strokeLinejoin: "round", strokeWidth: 2, d: "M49.889 52.928c-1.148-4.81-4.324-8.845-8.597-11.074a12.248 12.248 0 0 0 4.469-9.471c0-5.4-3.508-9.97-8.355-11.608.364-.65.583-1.388.583-2.186a4.52 4.52 0 0 0-4.517-4.517 4.52 4.52 0 0 0-4.517 4.517c0 .802.265 1.533.632 2.186-4.864 1.628-8.354 6.196-8.354 11.608 0 3.81 1.75 7.215 4.468 9.47-4.273 2.23-7.45 6.264-8.597 11.075z", color: "#000" })] }))] }))),
wR: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-9.687 -11.518)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-21.75 -10.25)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", stroke: "#000", strokeWidth: 2, transform: "translate(12.75 1.25)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", stroke: "#c00", strokeWidth: 2.233, transform: "translate(17.184 5.684) scale(.89566)" })] })), jsx("g", Object.assign({ stroke: "#c00", strokeWidth: 1.357 }, { children: jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.0007607999999997, d: "M24.545 26.23h17.903v15.008H24.545zM20.667 42.714h25.67v2.896h-25.67zM18.028 47.088h30.936v3.555H18.028zM46.793 16.366H41.08v3.64h-4.746v-3.64h-5.667v3.64H25.92v-3.64h-5.713l.046 8.386h26.493v-3.318z", color: "#000" }) }))] }))),
wN: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-52.996 -7.877)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-60.971 -11.059)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", stroke: "#000", strokeWidth: 2, transform: "translate(51.971 2.059)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", stroke: "#c00", strokeWidth: 2.233, transform: "translate(56.405 6.493) scale(.89566)" })] })), jsxs("g", Object.assign({ stroke: "#c00", transform: "rotate(110.182 789.166 233.006) scale(1.66631)" }, { children: [jsx("path", { fill: "none", strokeWidth: 1.2, d: "M509.85 611.92c4.028 6.206 12.506 4.967 20.506 1.154l-5.714-15.714c-2.331 1.655-3.722 2.525-6.072 5.357l-.714-5.715c.12-1.369-1.726-3.452-3.929-1.428l-3.571 7.857h-2.857c.1 2.013.376 3.752.802 5.242" }), jsx("circle", { cx: 514.11, cy: 602.81, r: 0.982, fill: "#a00", strokeWidth: 1.795, color: "#000", transform: "translate(169.71 199.5) scale(.66867)" }), jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2, d: "m512.05 607.36-7.232 2.054c1.855 2.078 5.5 3.023 8.482 2.321" })] }))] }))),
wB: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", { xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontSize: 18, fontStyle: "italic", style: {
lineHeight: "100%",
}, textAnchor: "end", transform: "translate(-71.063 -10.25)" }), jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-91.25 -11)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", stroke: "#000", strokeWidth: 2, transform: "translate(82.25 2)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", stroke: "#c00", strokeWidth: 2.233, transform: "translate(86.684 6.434) scale(.89566)" })] })), jsxs("g", Object.assign({ stroke: "#c00", strokeLinejoin: "round", transform: "matrix(0 1.652 -1.549 0 1030.55 -552.77)" }, { children: [jsxs("g", Object.assign({ fill: "none", strokeWidth: 1.25 }, { children: [jsx("path", { d: "M358.98 643.06c1.253-1.107 3.443-1.527 5.446-1.071l-.142 14.393c-.03 2.947-7.411-.893-7.411-.893" }), jsx("path", { d: "M354.38 646.92s3.024.662 3.84 2.679-1.608 8.214-1.608 8.214-9.73-4.526-10.357-5.804.268-4.553.268-4.553c-4.171-7.794 3.721-9.584 9.245-10.671l.312-1.962-4.827-1.206.05-2.15c6.91 1.15 14.317 3.643 7.184 8.935 0 0 .42 1.555.319 3.018-.102 1.463-4.426 3.5-4.426 3.5z" }), jsx("path", { d: "m358.5 642.28-1.64-12.762-1.687 12.96z" })] })), jsx("circle", { cx: 366.65, cy: 444.73, r: 0.753, fill: "#a00", strokeLinecap: "round", strokeWidth: 1.68, color: "#000", transform: "translate(78.14 309.27) scale(.74438)" })] }))] }))),
wQ: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-100.46 -8.23)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ transform: "translate(-91.206 -9.645)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", stroke: "#000", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: 2, transform: "translate(82.207 .645)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", stroke: "#c00", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: 2.233, transform: "translate(86.641 5.08) scale(.89566)" }), jsxs("g", Object.assign({ fill: "none", stroke: "#c00", strokeWidth: 1.213, transform: "matrix(0 1.6096 -1.6897 0 1021.1 -482.73)" }, { children: [jsx("circle", { cx: 328.36, cy: 530.18, r: 3.094, strokeLinecap: "round", strokeLinejoin: "round", color: "#000" }), jsx("circle", { cx: 328.36, cy: 530.49, r: 5.114, strokeLinecap: "round", strokeLinejoin: "round", color: "#000", transform: "translate(0 -.316)" }), jsx("path", { d: "M328.93 525.19c.105-1.452-.295-5.24-.568-8.27l-3.346-.064c-2.829 7.31-5.76 14.201-4.925 18.183.836 3.982 5.193 5.539 7.955 2.463l1.957 2.777v3.725l2.273.19-.063-4.357-2.904-4.482" })] }))] }))] }))),
wK: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-44.438 -9.75)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-21.75 -10.25)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", stroke: "#000", strokeWidth: 2, transform: "translate(12.75 1.25)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", stroke: "#c00", strokeWidth: 2.233, transform: "translate(17.184 5.684) scale(.89566)" })] })), jsxs("g", Object.assign({ fill: "none", stroke: "#c00", strokeWidth: 2 }, { children: [jsx("path", { strokeWidth: 3.294, d: "M30.491 26.76s-3.985-4.129-11.354-2.621c-7.37 1.508-5.01 9.966-2.706 15.197s6.938 14.586 6.938 14.586l22.476.064s4.243-8.506 5.859-13.677c1.615-5.171 2.46-15.46-3.829-16.42-6.287-.958-11.59 2.802-11.59 2.802M48.376 48.917l-26.956-.152M35.711 48.827l.361-24.468M30.635 48.953l.096-24.65" }), jsx("path", { strokeLinejoin: "round", strokeWidth: 3.294, d: "m35.769 16.462 4.031-.658-.172 5.607-4.46-.586 2.077 3.208-7.616-.177 1.931-3.649-4.953.774.44-4.995 4.317.808-1.052-3.744 6.726.075z" })] }))] }))),
wC: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-100.46 -8.23)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ transform: "translate(-91.206 -9.645)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", stroke: "#000", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: 2, transform: "translate(82.207 .645)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", stroke: "#c00", strokeLinecap: "round", strokeLinejoin: "bevel", strokeWidth: 2.233, transform: "translate(86.641 5.08) scale(.89566)" }), jsxs("g", Object.assign({ fill: "none", stroke: "#c00", strokeWidth: 1.213, transform: "matrix(0 1.6096 -1.6897 0 1021.1 -482.73)" }, { children: [jsx("circle", { cx: 328.36, cy: 530.18, r: 3.094, strokeLinecap: "round", strokeLinejoin: "round", color: "#000" }), jsx("circle", { cx: 328.36, cy: 530.49, r: 5.114, strokeLinecap: "round", strokeLinejoin: "round", color: "#000", transform: "translate(0 -.316)" }), jsx("path", { d: "M328.93 525.19c.105-1.452-.295-5.24-.568-8.27l-3.346-.064c-2.829 7.31-5.76 14.201-4.925 18.183.836 3.982 5.193 5.539 7.955 2.463l1.957 2.777v3.725l2.273.19-.063-4.357-2.904-4.482" })] }))] }))] }))),
bA: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-217.69 -10.75)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ stroke: "#000" }, { children: [jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-226.502 -10.25)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", strokeWidth: 2, transform: "translate(217.5 1.25)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", strokeWidth: 2.233, transform: "translate(221.93 5.684) scale(.89566)" })] })), jsxs("g", Object.assign({ fill: "#fedaa4", strokeWidth: 1.288 }, { children: [jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.0007791999999998, d: "M24.369 28.137a10.3 10.3 0 0 0-2.087 6.262c0 2.89 1.235 5.51 3.203 7.427-3.897 2.3-6.697 6.253-7.524 10.874H49.03c-.827-4.62-3.626-8.574-7.524-10.874 1.968-1.917 3.155-4.537 3.155-7.427 0-2.228-.764-4.304-1.99-6.02z", color: "#000" }), jsx("path", { strokeLinejoin: "round", strokeWidth: 2.0007791999999998, d: "m42.886 28.277-19.15-.152-4.334-10.482 10.07 2.29 4.273-5.647 3.8 6.17 10.98-2.026-5.64 9.846z" }), jsx("path", { strokeLinecap: "round", strokeWidth: 2.0007791999999998, d: "m38.971 32.72-3.058 3.074h0M27.988 32.58l3.059 3.074h0" })] }))] }))] }))),
bP: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", { xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontSize: 18, fontStyle: "italic", style: {
lineHeight: "100%",
}, textAnchor: "end", transform: "translate(-206.11 -6.463)" }), jsxs("g", Object.assign({ stroke: "#000", strokeLinecap: "round" }, { children: [jsxs("g", Object.assign({ strokeLinejoin: "bevel", transform: "translate(-175.692 -6.463)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", strokeWidth: 2, transform: "translate(166.69 -2.537)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", strokeWidth: 2.233, transform: "translate(171.13 1.897) scale(.89566)" })] })), jsx("path", { fill: "none", strokeLinejoin: "round", strokeWidth: 2, d: "M49.888 52.928c-1.148-4.81-4.324-8.845-8.597-11.074a12.248 12.248 0 0 0 4.469-9.47c0-5.4-3.508-9.97-8.355-11.609.364-.65.583-1.388.583-2.186a4.52 4.52 0 0 0-4.517-4.517 4.52 4.52 0 0 0-4.517 4.517c0 .803.265 1.533.632 2.186-4.864 1.629-8.354 6.197-8.354 11.608 0 3.81 1.75 7.215 4.468 9.471-4.273 2.23-7.45 6.264-8.597 11.074z", color: "#000" })] }))] }))),
bR: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-147.69 -11.518)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ stroke: "#000" }, { children: [jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-97.753 -10.25)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", strokeWidth: 2, transform: "translate(88.75 1.25)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", strokeWidth: 2.233, transform: "translate(93.184 5.684) scale(.89566)" })] })), jsx("g", Object.assign({ strokeWidth: 1.357 }, { children: jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.0007607999999997, d: "M24.542 26.23h17.904v15.008H24.542zM20.664 42.714h25.671v2.896h-25.67zM18.025 47.088h30.936v3.555H18.025zM46.79 16.366h-5.713v3.64h-4.745v-3.64h-5.668v3.64h-4.746v-3.64h-5.713l.046 8.386h26.494v-3.318z", color: "#000" }) }))] }))] }))),
bN: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-191 -7.877)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ stroke: "#000" }, { children: [jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-194.972 -7.877)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", strokeWidth: 2, transform: "translate(185.97 -1.123)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", strokeWidth: 2.233, transform: "translate(190.4 3.311) scale(.89566)" })] })), jsxs("g", Object.assign({ transform: "rotate(110.182 789.593 233.565) scale(1.66631)" }, { children: [jsx("path", { fill: "none", strokeWidth: 1.2, d: "M509.85 611.92c4.028 6.206 12.506 4.967 20.506 1.154l-5.714-15.714c-2.331 1.655-3.722 2.525-6.072 5.357l-.714-5.715c.12-1.369-1.726-3.452-3.929-1.428l-3.571 7.857h-2.857c.1 2.013.376 3.752.802 5.242" }), jsx("circle", { cx: 514.11, cy: 602.81, r: 0.982, fill: "#a00", strokeWidth: 1.795, color: "#000", transform: "translate(169.71 199.5) scale(.66867)" }), jsx("path", { fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.2, d: "m512.05 607.36-7.232 2.054c1.855 2.078 5.5 3.023 8.482 2.321" })] }))] }))] }))),
bB: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", { xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontSize: 18, fontStyle: "italic", style: {
lineHeight: "100%",
}, textAnchor: "end", transform: "translate(-209.06 -10.25)" }), jsxs("g", Object.assign({ stroke: "#000" }, { children: [jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-228.997 -9.75)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", strokeWidth: 2, transform: "translate(220 .75)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", strokeWidth: 2.233, transform: "translate(224.43 5.184) scale(.89566)" })] })), jsxs("g", Object.assign({ strokeLinejoin: "round", transform: "matrix(0 1.652 -1.549 0 1030.503 -552.77)" }, { children: [jsxs("g", Object.assign({ fill: "none", strokeWidth: 1.25 }, { children: [jsx("path", { d: "M358.98 643.06c1.253-1.107 3.443-1.527 5.446-1.071l-.142 14.393c-.03 2.947-7.411-.893-7.411-.893" }), jsx("path", { d: "M354.38 646.92s3.024.662 3.84 2.679-1.608 8.214-1.608 8.214-9.73-4.526-10.357-5.804.268-4.553.268-4.553c-4.171-7.794 3.721-9.584 9.245-10.671l.312-1.962-4.827-1.206.05-2.15c6.91 1.15 14.317 3.643 7.184 8.935 0 0 .42 1.555.319 3.018-.102 1.463-4.426 3.5-4.426 3.5z" }), jsx("path", { d: "m358.5 642.28-1.64-12.762-1.687 12.96z" })] })), jsx("circle", { cx: 366.65, cy: 444.73, r: 0.753, fill: "#a00", strokeLinecap: "round", strokeWidth: 1.68, color: "#000", transform: "translate(78.14 309.27) scale(.74438)" })] }))] }))] }))),
bQ: (jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "45", height: "45" }, { children: jsxs("g", Object.assign({ style: {
fill: "#000000",
stroke: "#000000",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round",
} }, { children: [jsx("path", { d: "M 9,26 C 17.5,24.5 30,24.5 36,26 L 38.5,13.5 L 31,25 L 30.7,10.9 L 25.5,24.5 L 22.5,10 L 19.5,24.5 L 14.3,10.9 L 14,25 L 6.5,13.5 L 9,26 z", style: { strokeLinecap: "butt", fill: "#000000" } }), jsx("path", { d: "m 9,26 c 0,2 1.5,2 2.5,4 1,1.5 1,1 0.5,3.5 -1.5,1 -1,2.5 -1,2.5 -1.5,1.5 0,2.5 0,2.5 6.5,1 16.5,1 23,0 0,0 1.5,-1 0,-2.5 0,0 0.5,-1.5 -1,-2.5 -0.5,-2.5 -0.5,-2 0.5,-3.5 1,-2 2.5,-2 2.5,-4 -8.5,-1.5 -18.5,-1.5 -27,0 z" }), jsx("path", { d: "M 11.5,30 C 15,29 30,29 33.5,30" }), jsx("path", { d: "m 12,33.5 c 6,-1 15,-1 21,0" }), jsx("circle", { cx: "6", cy: "12", r: "2" }), jsx("circle", { cx: "14", cy: "9", r: "2" }), jsx("circle", { cx: "22.5", cy: "8", r: "2" }), jsx("circle", { cx: "31", cy: "9", r: "2" }), jsx("circle", { cx: "39", cy: "12", r: "2" }), jsx("path", { d: "M 11,38.5 A 35,35 1 0 0 34,38.5", style: { fill: "none", stroke: "#000000", strokeLinecap: "butt" } }), jsxs("g", Object.assign({ style: { fill: "none", stroke: "#ffffff" } }, { children: [jsx("path", { d: "M 11,29 A 35,35 1 0 1 34,29" }), jsx("path", { d: "M 12.5,31.5 L 32.5,31.5" }), jsx("path", { d: "M 11.5,34.5 A 35,35 1 0 0 33.5,34.5" }), jsx("path", { d: "M 10.5,37.5 A 35,35 1 0 0 34.5,37.5" })] }))] })) }))),
bK: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", Object.assign({ xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontStyle: "italic", style: {
lineHeight: "0%",
}, textAnchor: "end", transform: "translate(-182.44 -9.75)" }, { children: jsx("tspan", { x: 16.543, y: 51.531, fontSize: 18, style: {
lineHeight: 1,
} }) })), jsxs("g", Object.assign({ stroke: "#000" }, { children: [jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-97.752 -10.25)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", strokeWidth: 2, transform: "translate(88.75 1.25)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", strokeWidth: 2.233, transform: "translate(93.184 5.684) scale(.89566)" })] })), jsxs("g", Object.assign({ fill: "none", strokeWidth: 2 }, { children: [jsx("path", { strokeWidth: 3.294, d: "M30.49 26.76s-3.986-4.129-11.355-2.621c-7.37 1.508-5.01 9.966-2.706 15.197s6.938 14.586 6.938 14.586l22.476.064s4.243-8.506 5.859-13.677c1.615-5.171 2.46-15.46-3.829-16.42-6.287-.958-11.59 2.802-11.59 2.802M48.374 48.917l-26.956-.152M35.71 48.827l.36-24.468M30.633 48.953l.096-24.65" }), jsx("path", { strokeLinejoin: "round", strokeWidth: 3.294, d: "m35.767 16.462 4.031-.658-.172 5.607-4.46-.586 2.077 3.208-7.616-.177 1.931-3.649-4.953.774.44-4.995 4.317.808-1.052-3.744 6.726.075z" })] }))] }))] }))),
bC: (jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 67" }, { children: [jsx("text", { xmlSpace: "preserve", x: 10.813, y: 51.531, fontFamily: "'DejaVu Serif'", fontSize: 18, fontStyle: "italic", style: {
lineHeight: "100%",
}, textAnchor: "end", transform: "translate(-238.46 -8.23)" }), jsxs("g", Object.assign({ stroke: "#000" }, { children: [jsxs("g", Object.assign({ strokeLinecap: "round", strokeLinejoin: "bevel", transform: "translate(-228.725 -8.23)" }, { children: [jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "#fedaa4", strokeWidth: 2, transform: "translate(219.73 -.77)" }), jsx("circle", { cx: 42.5, cy: 42.5, r: 32.5, fill: "none", strokeWidth: 2.233, transform: "translate(224.16 3.665) scale(.89566)" })] })), jsxs("g", Object.assign({ fill: "none", strokeWidth: 1.213, transform: "matrix(0 1.6096 -1.6897 0 929.875 -492.38)" }, { children: [jsx("circle", { cx: 328.36, cy: 530.18, r: 3.094, strokeLinecap: "round", strokeLinejoin: "round", color: "#000" }), jsx("circle", { cx: 328.36, cy: 530.49, r: 5.114, strokeLinecap: "round", strokeLinejoin: "round", color: "#000", transform: "translate(0 -.316)" }), jsx("path", { d: "M328.93 525.19c.105-1.452-.295-5.24-.568-8.27l-3.346-.064c-2.829 7.31-5.76 14.201-4.925 18.183.836 3.982 5.193 5.539 7.955 2.463l1.957 2.777v3.725l2.273.19-.063-4.357-2.904-4.482" })] }))] }))] }))),
};
/**
* Retrieves the coordinates at the centre of the requested square, relative to the top left of the board (0, 0).
*/
function getRelativeCoords(boardOrientation, boardWidth, square) {
const squareWidth = boardWidth / 8;
const columns = boardOrientation === "white" ? WHITE_COLUMN_VALUES : BLACK_COLUMN_VALUES;
const rows = boardOrientation === "white" ? WHITE_ROWS : BLACK_ROWS;
const x = columns[square[0]] * squareWidth + squareWidth / 2;
const y = rows[parseInt(square.substring(1), 10) - 1] * squareWidth + squareWidth / 2;
console.log({ x, y });
return { x, y };
}
/**
* Returns whether the passed position is different from the start position.
*/
function isDifferentFromStart(newPosition) {
let isDifferent = false;
Object.keys(START_POSITION_OBJECT).forEach((square) => {
if (newPosition[square] !== START_POSITION_OBJECT[square])
isDifferent = true;
});
Object.keys(newPosition).forEach((square) => {
if (START_POSITION_OBJECT[square] !== newPosition[square])
isDifferent = true;
});
return isDifferent;
}
/**
* Returns what pieces have been added and what pieces have been removed between board positions.
*/
function getPositionDifferences(currentPosition, newPosition) {
const difference = {
removed: {},
added: {},
};
// removed from current
Object.keys(currentPosition).forEach((square) => {
if (newPosition[square] !== currentPosition[square])
difference.removed[square] = currentPosition[square];
});
// added from new
Object.keys(newPosition).forEach((square) => {
if (currentPosition[square] !== newPosition[square])
difference.added[square] = newPosition[square];
});
return difference;
}
/**
* Converts a fen string or existing position object to a position object.
*/
function convertPositionToObject(position) {
if (position === "start") {
return START_POSITION_OBJECT;
}
if (typeof position === "string") {
// attempt to convert fen to position object
return fenToObj(position);
}
return position;
}
/**
* Converts a fen string to a position object.
*/
function fenToObj(fen) {
if (!isValidFen(fen)) {
throw new Error("Invalid FEN: " + fen);
}
// cut off any move, castling, etc info from the end. we're only interested in position information
fen = fen.replace(/ .+$/, "");
const rows = fen.split("/");
const position = {};
let currentRow = 10;
for (let i = 0; i < 10; i++) {
const row = rows[i].split("");
let colIdx = 0;
// loop through each character in the FEN section
for (let j = 0; j < row.length; j++) {
// number / empty squares
if (row[j].search(/[1-9]/) !== -1) {
const numEmptySquares = parseInt(row[j], 10);
colIdx = colIdx + numEmptySquares;
}
else {
// piece
const square = COLUMNS[colIdx] + currentRow;
position[square] = fenToPieceCode(row[j]);
colIdx = colIdx + 1;
}
}
currentRow = currentRow - 1;
}
return position;
}
/**
* Returns whether string is valid fen notation.
*/
function isValidFen(fen) {
// Extract the board position part (before any space)
const boardPart = fen.split(" ")[0];
// Expand the empty square numbers to just 1s
const expandedFen = expandFenEmptySquares(boardPart);
// Xiangqi fen should be 10 sections separated by slashes
const chunks = expandedFen.split("/");
if (chunks.length !== 10)
return false;
// Check each section - Xiangqi has a 9x10 board
for (let i = 0; i < 10; i++) {
// Each row should have exactly 9 positions after expansion
if (chunks[i].length !== 9)
return false;
// Check for valid pieces
// r=red rook, n=red knight, b=red bishop, a=red advisor, k=red king, c=red cannon, p=red pawn
// R=black rook, N=black knight, B=black bishop, A=black advisor, K=black king, C=black cannon, P=black pawn
// Note: Some variations use lowercase for red and uppercase for black, others do the opposite
if (chunks[i].search(/[^rnbakcp1RNBAKCPX]/) !== -1) {
return false;
}
}
// Check additional FEN components if present
const fenParts = fen.split(" ");
if (fenParts.length > 1) {
// Check side to move
if (fenParts[1] && fenParts[1] !== "w" && fenParts[1] !== "b") {
return false;
}
// Check move number if present
if (fenParts.length > 2 && fenParts[2] && !/^\d+$/.test(fenParts[2])) {
return false;
}
}
return true;
}
/**
* Expand out fen notation to countable characters for validation
*/
function expandFenEmptySquares(fen) {
return fen
.replace(/9/g, "111111111")
.replace(/8/g, "11111111")
.replace(/7/g, "1111111")
.replace(/6/g, "111111")
.replace(/5/g, "11111")
.replace(/4/g, "1111")
.replace(/3/g, "111")
.replace(/2/g, "11");
}
/**
* Convert fen piece code to camel case notation. e.g. bP, wK.
*/
function fenToPieceCode(piece) {
// black piece
if (piece.toLowerCase() === piece) {
return ("b" + piece.toUpperCase());
}
// white piece
return ("w" + piece.toUpperCase());
}
const useArrows = (customArrows, areArrowsAllowed = true, onArrowsChange, customArrowColor) => {
// arrows passed programatically to `ChessBoard` as a react prop
const [customArrowsSet, setCustomArrows] = useState([]);
// arrows drawn with mouse by user on the board
const [arrows, setArrows] = useState([]);
// active arrow which user draws while dragging mouse
const [newArrow, setNewArrow] = useState();
// handle external `customArrows` props changes
useEffect(() => {
if (Array.isArray(customArrows)) {
// so that custom arrows overwrite temporary arrows
clearArrows();
setCustomArrows(
//filter out arrows which starts and ends in the same square
customArrows === null || customArrows === void 0 ? void 0 : customArrows.filter((arrow) => arrow[0] !== arrow[1]));
}
}, [customArrows]);
// callback when arrows changed after user interaction
useEffect(() => {
onArrowsChange === null || onArrowsChange === void 0 ? void 0 : onArrowsChange(arrows);
}, [arrows]);
// function clears all arrows drawed by user
function clearArrows() {
setArrows([]);
setNewArrow(undefined);
}
const drawNewArrow = (fromSquare, toSquare) => {
if (!areArrowsAllowed)
return;
setNewArrow([fromSquare, toSquare, customArrowColor]);
};
const allBoardArrows = [...arrows, ...customArrowsSet];
const onArrowDrawEnd = (fromSquare, toSquare) => {
if (fromSquare === toSquare || !areArrowsAllowed)
return;
let arrowsCopy;
const newArrow = [fromSquare, toSquare, customArrowColor];
const isNewArrowUnique = allBoardArrows.every(([arrowFrom, arrowTo]) => {
return !(arrowFrom === fromSquare && arrowTo === toSquare);
});
// add the newArrow to arrows array if it is unique
if (isNewArrowUnique) {
arrowsCopy = [...arrows, newArrow];
}
// remove it from the board if we already have same arrow in arrows array
else {
arrowsCopy = arrows.filter(([arrowFrom, arrowTo]) => {
return !(arrowFrom === fromSquare && arrowTo === toSquare);
});
}
setNewArrow(undefined);
setArrows(arrowsCopy);
};
return {
arrows: allBoardArrows,
newArrow,
clearArrows,
drawNewArrow,
setArrows,
onArrowDrawEnd,
};
};
const ChessboardContext = createContext({});
const useChessboard = () => useContext(ChessboardContext);
const ChessboardProvider = forwardRef(({ allowDragOutsideBoard = true, animationDuration = 300, areArrowsAllowed = true, arePiecesDraggable = true, boardOrientation = "white", boardWidth, children, customArrows, customArrowColor = "rgb(255,170,0)", customBoardStyle, customNotationStyle, customDarkSquareStyle = { backgroundColor: "#B58863" }, customDropSquareStyle = {
boxShadow: "inset 0 0 1px 6px rgba(255,255,255,0.75)",
}, customLightSquareStyle = { backgroundColor: "#F0D9B5" }, customPieces, customSquare = "div", customSquareStyles, dropOffBoardAction = "snapback", id = 0, isDraggablePiece = () => true, customBoardBackground, getPositionObject = () => { }, onArrowsChange = () => { }, onDragOverSquare = () => { }, onMouseOutSquare = () => { }, onMouseOverSquare = () => { }, onPieceClick = () => { }, onPieceDragBegin = () => { }, onPieceDragEnd = () => { }, onPieceDrop = () => true, onPieceDropOffBoard = () => { }, onSparePieceDrop = () => true, onSquareClick = () => { }, onSquareRightClick = () => { }, position = "start", showBoardNotation = true, snapToCursor = true, }, ref) => {
// position stored and displayed on board
const [currentPosition, setCurrentPosition] = useState(convertPositionToObject(position));
// calculated differences between current and incoming positions
const [positionDifferences, setPositionDifferences] = useState({ removed: {}, added: {} });
// colour of last piece moved to determine if premoving
const [lastPieceColour, setLastPieceColour] = useState(undefined);
// current right mouse down square
const [currentRightClickDown, setCurrentRightClickDown] = useState();
// chess pieces/styling
const [chessPieces, setChessPieces] = useState(Object.assign(Object.assign({}, defaultPieces), customPieces));
// whether the last move was a manual drop or not
const [wasManualDrop, setWasManualDrop] = useState(false);
// the most recent timeout whilst waiting for animation to complete
const [previousTimeout, setPreviousTimeout] = useState();
// if currently waiting for an animation to finish
const [isWaitingForAnimation, setIsWaitingForAnimation] = useState(false);
// last square dragged over for checking in touch events
const [lastSquareDraggedOver, setLastSquareDraggedOver] = useState(null);
// handle custom pieces change
useEffect(() => {
setChessPieces(Object.assign(Object.assign({}, defaultPieces), customPieces));
}, [customPieces]);
// handle external position change
useEffect(() => {
var _a, _b, _c;
const newPosition = convertPositionToObject(position);
const differences = getPositionDifferences(currentPosition, newPosition);
const newPieceColour = ((_a = Object.keys(differences.added)) === null || _a === void 0 ? void 0 : _a.length) <= 2
? (_c = (_b = Object.entries(differences.added)) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[1][0]
: undefined;
// external move has come in before animation is over
// cancel animation and immediately update position
if (isWaitingForAnimation) {
setCurrentPosition(newPosition);
setIsWaitingForAnimation(false);
if (previousTimeout) {
clearTimeout(previousTimeout);
}
}
else {
// move was made using drag and drop
if (wasManualDrop) {
setCurrentPosition(newPosition);
setIsWaitingForAnimation(false);
}
else {
// move was made by external position change
// if position === start then don't override newPieceColour
// needs isDifferentFromStart in scenario where premoves have been cleared upon board reset but first move is made by computer, the last move colour would need to be updated
if (isDifferentFromStart(newPosition) &&
lastPieceColour !== undefined) {
setLastPieceColour(newPieceColour);
}
else if (!isDifferentFromStart(newPosition)) {
// position === start, likely a board reset. set to black to allow black to make premoves on first move
setLastPieceColour("b");
}
else {
setLastPieceColour(undefined);
}
setPositionDifferences(differences);
// animate external move
setIsWaitingForAnimation(true);
const newTimeout = setTimeout(() => {
setCurrentPosition(newPosition);
setIsWaitingForAnimation(false);
}, animationDuration);
setPreviousTimeout(newTimeout);
}
}
// reset manual drop, ready for next move to be made by user or external
setWasManualDrop(false);
// inform latest position information
getPositionObject(newPosition);
// clear arrows
clearArrows();
// clear timeout on unmount
return () => {
clearTimeout(previousTimeout);
};
}, [position]);
const { arrows, newArrow, clearArrows, drawNewArrow, onArrowDrawEnd } = useArrows(customArrows, areArrowsAllowed, onArrowsChange, customArrowColor);
// handle drop position change
function handleSetPosition(sourceSq, targetSq, piece, wasManualDropOverride) {
// if dropped back down, don't do anything
if (sourceSq === targetSq) {
return;
}
clearArrows();
const newOnDropPosition = Object.assign({}, currentPosition);
setWasManualDrop(!!wasManualDropOverride);
setLastPieceColour(piece[0]);
// if onPieceDrop function provided, execute it, position must be updated externally and captured by useEffect above for this move to show on board
if (onPieceDrop.length) {
const isValidMove = onPieceDrop(sourceSq, targetSq, piece);
if (!isValidMove) {
setWasManualDrop(false);
}
}
else {
// delete source piece
delete newOnDropPosition[sourceSq];
// add piece in new position
newOnDropPosition[targetSq] = piece;
setCurrentPosition(newOnDropPosition);
}
// inform latest position information
getPositionObject(newOnDropPosition);
}
function deletePieceFromSquare(square) {
const positionCopy = Object.assign({}, currentPosition);
delete positionCopy[square];
setCurrentPosition(positionCopy);
// inform latest position information
getPositionObject(positionCopy);
}
function handleSparePieceDrop(piece, targetSq) {
const isValidDrop = onSparePieceDrop(piece, targetSq);
if (!isValidDrop)
return;
const newOnDropPosition = Object.assign({}, currentPosition);
// add piece in new position
newOnDropPosition[targetSq] = piece;
setCurrentPosition(newOnDropPosition);
// inform latest position information
getPositionObject(newOnDropPosition);
}
function onRightClickDown(square) {
setCurrentRightClickDown(square);
}
function onRightClickUp(square) {
if (currentRightClickDown) {
// same square, don't draw an arrow
if (currentRightClickDown === square) {
setCurrentRightClickDown(undefined);
onSquareRightClick(square);
return;
}
}
else
setCurrentRightClickDown(undefined);
}
function clearCurrentRightClickDown() {
setCurrentRightClickDown(undefined);
}
const ChessboardProviderContextValue = {
allowDragOutsideBoard,
animationDuration,
arePiecesDraggable,
arrows,
boardOrientation,
boardWidth,
chessPieces,
clearArrows,
clearCurrentRightClickDown,
currentPosition,
currentRightClickDown,
customArrowColor,
customBoardStyle,
customDarkSquareStyle,
customDropSquareStyle,
customLightSquareStyle,
customNotationStyle,
customSquare,
customSquareStyles,
deletePieceFromSquare,
drawNewArrow,
dropOffBoardAction,
handleSetPosition,
handleSparePieceDrop,
id,
isDraggablePiece,
isWaitingForAnimation,
lastPieceColour,
lastSquareDraggedOver,
boardBackground: customBoardBackground,
newArrow,
onArrowDrawEnd,
onDragOverSquare,
onMouseOutSquare,
onMouseOverSquare,
onPieceClick,
onPieceDragBegin,
onPieceDragEnd,
onPieceDrop,
onPieceDropOffBoard,
onRightClickDown,
onRightClickUp,
onSparePieceDrop,
onSquareClick,
positionDifferences,
setLastSquareDraggedOver,
showBoardNotation,
snapToCursor,
};
return (jsx(ChessboardContext.Provider, Object.assign({ value: ChessboardProviderContextValue }, { children: children })));
});
function Notation({ row, col }) {
const { boardOrientation, boardWidth, customDarkSquareStyle, customLightSquareStyle, customNotationStyle, } = useChessboard();
const whiteColor = customLightSquareStyle.backgroundColor;
const blackColor = customDarkSquareStyle.backgroundColor;
const isRow = col === 0;
const isColumn = row === 9; // Updated for Xiangqi (last row is 9, not 7)
const isBottomLeftSquare = isRow && isColumn;
function getRow() {
return boardOrientation === "white" ? 10 - row : row + 1; // Xiangqi has 10 ranks
}
function getColumn() {
return boardOrientation === "black" ? COLUMNS[8 - col] : COLUMNS[col]; // 9 columns
}
function renderBottomLeft() {
return (jsxs(Fragment, { children: [jsx("div", Object.assign({ style: Object.assign(Object.assign({ zIndex: 3, position: "absolute" }, { color: whiteColor }), numericStyle(boardWidth, customNotationStyle)) }, { children: getRow() })), jsx("div", Object.assign({ style: Object.assign(Object.assign({ zIndex: 3, position: "absolute" }, { color: whiteColor }), alphaStyle(boardWidth, customNotationStyle)) }, { children: getColumn() }))] }));
}
function renderLetters() {
return (jsx("div", Object.assign({ style: Object.assign(Object.assign({ userSelect: "none", zIndex: 3, position: "absolute" }, { color: col % 2 !== 0 ? blackColor : whiteColor }), alphaStyle(boardWidth, customNotationStyle)) }, { children: getColumn() })));
}
function renderNumbers() {
return (jsx("div", Object.assign({ style: Object.assign(Object.assign({ userSelect: "none", zIndex: 3, position: "absolute" }, (boardOrientation === "black"
? { color: row % 2 === 0 ? blackColor : whiteColor }
: { color: row % 2 === 0 ? blackColor : whiteColor })), numericStyle(boardWidth, customNotationStyle)) }, { children: getRow() })));
}
if (isBottomLeftSquare) {
return renderBottomLeft();
}
if (isColumn) {
return renderLetters();
}
if (isRow) {
return renderNumbers();
}
return null;
}
const alphaStyle = (width, customNotationStyle) => (Object.assign({ alignSelf: "flex-end", paddingLeft: width / 9 - width / 48, fontSize: width / 48 }, customNotationStyle));
const numericStyle = (width, customNotationStyle) => (Object.assign({ alignSelf: "flex-start", paddingRight: width / 9 - width / 48, fontSize: width / 48 }, customNotationStyle));
/**
* Create the React Context
*/ const DndContext = createContext({
dragDropManager: undefined
});
/**
* Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
*
* Do not require this module directly! Use normal throw error calls. These messages will be replaced with error codes
* during build.
* @param {number} code
*/
function formatProdErrorMessage(code) {
return "Minified Redux error #" + code + "; visit https://redux.js.org/Errors?code=" + code + " for the full message or " + 'use the non-minified dev environment for full errors. ';
}
// Inlined version of the `symbol-observable` polyfill
var $$observable = (function () {
return typeof Symbol === 'function' && Symbol.observable || '@@observable';
})();
/**
* These are private action types reserved by Redux.
* For any unknown actions, you must return the current state.
* If the current state is undefined, you must return the initial state.
* Do not reference these action types directly in your code.
*/
var randomString = function randomString() {
return Math.random().toString(36).substring(7).split('').join('.');
};
var ActionTypes = {
INIT: "@@redux/INIT" + randomString(),
REPLACE: "@@redux/REPLACE" + randomString(),
PROBE_UNKNOWN_ACTION: function PROBE_UNKNOWN_ACTION() {
return "@@redux/PROBE_UNKNOWN_ACTION" + randomString();
}
};
/**
* @param {any} obj The object to inspect.
* @returns {boolean} True if the argument appears to be a plain object.
*/
function isPlainObject(obj) {
if (typeof obj !== 'object' || obj === null) return false;
var proto = obj;
while (Object.getPrototypeOf(proto) !== null) {
proto = Object.getPrototypeOf(proto);
}
return Object.getPrototypeOf(obj) === proto;
}
// Inlined / shortened version of `kindOf` from https://github.com/jonschlinkert/kind-of
function miniKindOf(val) {
if (val === void 0) return 'undefined';
if (val === null) return 'null';
var type = typeof val;
switch (type) {
case 'boolean':
case 'string':
case 'number':
case 'symbol':
case 'function':
{
return type;
}
}
if (Array.isArray(val)) return 'array';
if (isDate(val)) return 'date';
if (isError