elements.chessmeister.min.js

let e = e => 0 !== e && 1 == (e & -e), t = (e, s = 1, r = (s < 1 ? 1 : s), i = [ e.splice(0, r) ]) => i.concat(e.length ? t(e, r) : []);

class s extends Array {
    constructor(e) {
        super(), this.board = e;
    }
    ___filter(e = m) {
        return this.filter(t => t.length > 2 && t[2] === e);
    }
    get attacks() {
        return this.___filter(m);
    }
    get defends() {
        return this.___filter(b);
    }
    get pieces() {
        return this.map(e => this.board.piece(E(e)));
    }
}

let r = e => {
    let t = e.target, {board: s, at: r} = t;
    t._show_moves_on_Moves_and_Destinations_layers(r), s.draggingFromsquare = s.layerDestinations.squares(t.at), 
    s.draggingFromsquare.setAttribute(M, t.is);
}, i = e => {
    let t = e.target, {board: s} = t;
    s.draggingPiece || (s.layerMoves.clear_squares_with_from_attributes(), s.layerDestinations.clear_squares_with_from_attributes());
}, a = e => {
    let {board: t} = e.target, s = t.piece(e.target.at);
    t && t.draggingFromsquare ? (console.log("%c Dragged piece in same board/shadowDOM", "background:lightgreen;color:black"), 
    t.dispatch("dragged", {
        piece: s,
        is: s.is,
        at: e.target.at,
        move: x.get(s.is) + e.target.at
    }), t.draggingFromsquare.removeAttribute(M), t.draggingFromsquare = !1, s.length > 1 && (s[0] === t.draggingPiece ? s[1].remove() : s[0].remove()), 
    t.draggingPiece = !1, e.target.board.show_moves_piece_in_square(), i(e)) : console.warn("end dragging", e);
};

const n = "white", o = "black", d = "pawn", c = "rook", l = "knight", h = "bishop", u = "queen", _ = "king", g = "attackers", p = "defenders", m = "X", b = "Z", f = "protectors", v = f + n, q = f + o, y = "relations", w = "piece", k = "from", M = "dragstart";

let x = new Map(), $ = [], A = [], P = 8;

do {
    $.unshift(String.fromCharCode(64 + P)), A.push(String(P));
} while (--P);

let D = [ ...A ].reverse(), z = A.map(e => $.map(t => t + e)).flat(), E = e => (e[0] + e[1]).toUpperCase(), L = e => z.includes(e);

[ n, o ].map(e => [ d, c, l, h, u, _ ].map(t => {
    let o = e + "-" + t, b = t == l ? "n" : t[0];
    e == n && (b = b.toUpperCase()), x.set(o, b), x.set(b, o), customElements.define(o, class extends HTMLImageElement {
        static get observedAttributes() {
            return [ "at", "is", g, "outline" ];
        }
        constructor() {
            super(), this.setAttribute("is", o);
        }
        connectedCallback() {
            this._set_IMG_src(), this.board = this.getRootNode().host, this.board && this.board.is_interactive && this.make_piece_interactive();
            let e = e => new s(this.board);
            this.destinations = e(), this.defended_from = e(), this.attacked_from = e();
        }
        _set_IMG_src() {
            let e = ((e, t = {}, s = e.getAttributeNames()) => s.reduce((t, s) => (t[s] = e.getAttribute(s) || void 0, 
            t), t))(this, {}, this.constructor.observedAttributes);
            this.board, this.src = function({is: e, outline: t = "#666", detailcolor: s = "#888", size: r = 900, translate: i = "20,0", circlesize: a = 50, piececolors: o = [ [ "eee", "999" ], [ "111", "888" ] ], fillcolors: g = [ "gold", "silver" ]}) {
                let p = e.includes(n) ? 0 : 1, m = o[p], b = g[p], f = (e, t, s, r = b) => `<circle cx="${e}" cy="${t}" r="${s}" fill="${r}"></circle>`;
                return ("data:image/svg+xml" + `,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='${r}' height='${r}'>` + `${`<defs><linearGradient id='a'><stop offset='50%' stop-color='#${m[0]}'/><stop offset='100%' stop-color='#${m[1]}'/></linearGradient></defs>` + `<g stroke='${t}' stroke-width='16' stroke-linecap='round' stroke-linejoin='round' fill='url(#a)' transform='translate(${i})'>` + {
                    none: "",
                    [d]: "<path d='M397 467c2 170-86 221-128 250-34 24-25 83 20 86 28 1 277 2 306-1 51-6 53-67 20-88-53-32-136-69-139-247 0-33-79-30-79 0z'/><path d='M340 433c-74 19-100 66-100 66h409s-43-52-110-67c-85-19-129-17-199 1'/>" + `<path d='M339 714h188' stroke='${s}'/>` + f(435, 300, 110, ""),
                    [l]: "<path d='M529 402c0 76-89 142-176 109-13-5-134 105-154 90-15-12 17-61 15-55-11 30-61 63-100 20-16-16-11-64 22-103 35-41 70-104 84-140 28-73 17-75 69-141 10-12-16-60-6-92 37 7 51 44 69 60 10-23 3-85 21-82 17 3 38 56 67 80 351 108 349 670 250 672-121 2-266 2-388 0-29-1-43-39-37-62 27-108 142-185 198-222 58-39 68-77 66-134M345 294c-29-5-55 3-76 24m29 8c11 10 24 11 26-7M151 518c-14-4-24 18-15 19m181-63l9 12m203-117v-25M326 163l-10 5m63-59c30 42 41 51 5 44M454 131c87 26 72 7 91 37 10 17 24-6 58-4 18 1-50-27-59-38-12-16-102 1-90 5M580 200c27 20 47-1 46 35-1 25 32 8 48 19 15 9 30-29 21-29-15 0-39 7-34-9 9-36-89-22-81-16M660 278c5 2 34 21 32 30-7 48 29 45 44 50 21 7-1-18-12-31s8-19 6-27c-4-30-73-23-70-22M710 379c5 8 17 18 21 32s5 26 13 41c7 15 38 13 51 9 17-6-43-24-29-52 8-18-58-35-56-30M438 730l-26 61'/>",
                    [c]: "<path d='M200 323s4-117 18-156c30-6 89-9 126-4 1 24-5 74-1 97 33-2 101 2 144-2 1-28-7-68 1-99 27-2 89-4 118 8-4 40 0 95 0 95l76 2-11 60c-95 36-412 30-471-1z'/><path d='M251 702c-24 24-74 49-110 56-5 17-10 37 0 58h586c6-24 11-41 5-60-38-7-83-19-117-54M198 769c149 0 312-6 472 0'/><path d='M253 311c-4 45-5 357-4 394 55-4 312-5 368 0-3-70-2-393-2-393'/>" + `<path d='M291 635c40-3 124-6 216-3m-217-62c51-5 100-6 171-6m-170-59c72-5 74-5 152-6m-152-58c36-3 58-5 102-4m-58 21v24m55 39l1 25m-56 40v24m117-26v26m-62 42l1 27m-99-296c28-3 42-4 66-3' stroke='${s}'/>` + "<path d='M132 161l14 96c32 22 50 30 53 67 97-17 387-13 475 0 6-34 16-39 63-68 6-44 11-66 11-92-14-3-115-34-128-29-4 26 2 49-4 73-38 2-71 1-111-9 0-34 0-52 2-77-17-6-115-7-134-1-3 32 1 49-2 78-33 9-65 7-105 9-4-34 2-46 2-70-17-4-121 18-136 23z'/><path d='M189 262c148-14 368-15 496 4' fill='none'/>",
                    [h]: "<path d='M436 217c11-18 39-51 68-67a511 511 0 0 1 134 339c1 63-32 126-53 149'/><path d='M565 687c7-53-294-49-281 3 10 22 2 50 2 50s69-10 146-9c77 2 129 8 129 8s-2-36 4-52z'/><path d='M279 682c-22-8-39-40-53-61-23-33-37-101-23-178 13-77 86-225 161-291 91 66 150 165 196 298 25 71 37 149 15 230-54-11-234-21-296 2z'/><path d='M490 135c12-21-20-35-3-50 9-8 25-9 35 2 13 15-23 29-6 48'/><path d='M350 139c13-21-19-35-2-50 9-8 25-9 34 2 13 15-22 29-5 48'/><path d='M436 712c-9-2-18 2-21-1-5-3-4-18-1-22 2-3 33-3 36 0 3 2 0 20-2 25'/><path d='M318 803c56 0 83-32 107-32 25 0 48 32 108 32 32 0 202 3 192-23-9-25-116 9-152-9-19-10-25-12-49-16-66-10-133-9-192 0-26 4-37 9-52 19-25 16-130-19-138 6-9 25 108 24 176 23z'/>" + `<path d='M636 91c-21 0-36 17-45 34-5 11-15 19-21 30-1 7 8 9 13 7 12-2 22-12 26-23 5-12 16-21 28-22 13-2 25 8 27 20 4 13 2 28-8 37-16 17-40 24-53 44L382 655c-26 53-53 106-76 160-1 7-7 15-4 22 5 3 10-2 14-5 16-14 25-35 35-53 45-86 87-174 130-261l142-284c13-20 39-27 54-46 10-10 16-24 15-39-1-24-15-51-40-56-6-2-11-2-16-2z' fill='${b}'/>`,
                    [u]: "<path d='M244 825l-50-166 433 1-49 170-334-5z'/><path d='M613 716a633 633 0 0 0-403 0c13 31 16 93 16 93 101-28 272-27 372 4 0 0 2-66 15-97M195 698c122-53 313-54 436 0 12-105 50-234 122-327-54 21-134 158-180 184-37-76 35-274 63-316-47 28-146 203-175 285-43-94-33-271-34-345-32 69-73 229-78 342-81-61-109-225-131-290-12 94 9 257 23 323A907 907 0 0 1 75 374c65 155 89 202 120 324zM245 825c88 11 232 15 333 5-57-26-260-25-333-5M846 352c2-14-13-18-27-37-20 8-43 17-59 40 41-8 60 4 86-3M715 206c-5-6-2-16-40-37l-49 61c27-9 71-21 89-24M475 83c-9 0-35 4-51 12-5 12-2 48 0 77 15-25 49-67 51-89M227 155c-11-12-23-11-51-15 1 34 21 43 33 70 15-25 13-26 18-55M50 290c-13 3-14 30-19 44 16 17 31 26 44 52 14-25-9-77-25-96z'/>" + f(87, 383, a) + f(211, 231, a) + f(422, 179, a) + f(630, 238, a) + f(754, 365, a),
                    [_]: "<path d='M289 612c23-33-7-125 0-168 11-68 101-114 113-74 14 47-43 51-60 91-14 36-11 96 18 132M587 617c-23-33 7-126 0-168-12-68-102-114-114-75-14 48 44 52 60 91 15 37 12 97-17 133M401 288c5-15 19-71 14-87-22-2-69 18-99 12-9-16-14-49-2-67 28-8 88 6 105 9 6-17-15-68-11-86 19-9 66-8 79 1 0 19-28 66-29 82 19-1 77-17 97-13 9 17 11 47-3 66-22 7-78-9-101-5-10 20 5 72 9 87'/><path d='M408 372c-24-22-35-22-30-75 4-46 106-44 108-2 3 52-14 55-26 81M271 830l-64-196 471-2-75 204-332-6z'/><path d='M643 717c-93-48-307-50-407 2 14 44 20 94 20 94 91-29 277-30 367 4 0 0 10-67 20-100M554 574c-29-16-90-54-122-55-25-1-77 33-104 53-115-52-114-153-33-171 13-3 52 0 78-1-8-23-17-39-9-69-18-12-42-20-70-22a351 351 0 0 0-25 0c-81 1-165 30-177 105-18 109 79 173 114 289 110-63 364-59 470-5 28-89 140-193 115-284-23-84-136-109-210-105-30 2-59 12-81 25 4 24-4 44-11 64 34 0 94-8 118 6 52 29 56 136-53 170z'/><path d='M328 573c38-27 56-80 55-123-2-62-35-72-16-126 12-37 119-39 131 1 14 47-23 76-17 124 7 56 7 93 72 127M276 833c88 10 228 12 327 2-69-28-256-28-327-2z'/>" + f(330, 743, a / 2) + f(440, 737, a / 2) + f(550, 743, a / 2)
                }[e.split("-")[1]]}</g></svg>`).replace(/</g, "%3C").replace(/>/g, "%3E").replace(/#/g, "%23");
            }(e);
        }
        _show_piece_moves(e, t = [ this.board.layerDestinations ]) {
            this.calculate_piece_moves().filter(e => 2 == e.length || e[2] == m).map(s => {
                if (e == this.at) {
                    let {piece: r, piece_is: i, square_element: a} = this.board.squareData(E(s));
                    s[2] == m && r.attackFrom(this.at), t.map(t => t.mark_attack_from_to_square(e, s));
                }
            });
        }
        _show_moves_on_Moves_and_Destinations_layers(e) {
            this._show_piece_moves(e, [ this.board.layerMoves ]), this._show_piece_moves(e, [ this.board.layerDestinations ]);
        }
        make_piece_interactive() {
            this.setAttribute("draggable", "draggable"), this.addEventListener("dragstart", e => {
                let t = e.target;
                t.board.draggingPiece = t, t._show_moves_on_Moves_and_Destinations_layers(t.at), 
                r(e);
            }), this.addEventListener("mouseover", e => {
                let t = e.target;
                t.board.draggingPiece || t._show_moves_on_Moves_and_Destinations_layers(t.at);
            }), this.addEventListener("touchmove", e => {
                if (e.preventDefault(), e.target.board) {
                    let t = e.target, {board: s} = t, {pageX: i, pageY: a} = e.targetTouches[0], n = s.square_from_position(i, a);
                    s.draggingPiece || r(e), s.draggingPiece && n == s.draggingPiece.at || (s.draggingPiece = t, 
                    e.target.at = n, s.show_moves_piece_in_square(n));
                }
            }, {
                passive: !0
            }), this.addEventListener("touchend", a, {
                passive: !0
            }), this.addEventListener("mouseout", i), this.addEventListener("click", e => {
                let t = e.target;
                t.board.dispatch("click", {
                    type: "piece",
                    square: t.at
                });
            });
        }
        attributeChangedCallback(e, t, s) {
            "at" == e && (this._at_square = E(s)), this._set_IMG_src();
        }
        get at() {
            return this._at_square;
        }
        set at(e) {
            this.setAttribute("at", E(e));
        }
        outline(e = !1) {
            e ? this.setAttribute("outline", e) : this.removeAttribute("outline");
        }
        attackFrom(e = !1) {
            this.removeAttribute("outline");
        }
        get fen() {
            return x.get(o);
        }
        get color() {
            return e;
        }
        get is() {
            return this.getAttribute("is");
        }
        rect() {
            return this.getBoundingClientRect();
        }
        to(e) {
            let t = this.board.piece(this.at).rect(), s = this.board.layerSquares.squares(e).rect;
            this.animate([ {}, {
                transform: `translate(${s.x - t.x}px,${s.y - t.y}px)`
            } ], {
                duration: 500
            }).onfinish = (() => {
                this.at = e, this.board.dispatch("moved");
            });
        }
        data() {
            return {
                square: this.at,
                piece_is: this.is,
                fen: this.fen,
                color: this.color,
                destinations: this.destinations,
                attacked_from: this.attacked_from,
                defended_from: this.defended_from,
                squareData: this.board.squareData(this.at),
                [g]: this.getAttribute(g),
                [p]: this.getAttribute(p)
            };
        }
        calculate_piece_moves(e = this.at) {
            let t = this.board, r = t.squareData(e), {idxFile: i, idxRank: a, piece_is: n, fen: o, pd: g} = r, p = i, m = a, b = new s(t), f = !0, v = !1, q = !1;
            this.destinations.length = 0, this.attacked_from.length = 0, this.defended_from.length = 0;
            let y = e => {
                v = !1, i = p, a = m;
            }, w = (t, s, r = !1) => (v ? t.square += s : (t.square_element[r] = e + o, t.square += s.toUpperCase()), 
            t.square), k = (s, r) => ((q = t.squareData(s)).piece ? (g == q.pd ? (s = w(q, "z", "set_defended_By"), 
            this.defended_from.push(s)) : (f && (s = w(q, "x", "attacked_By")), this.attacked_from.push(s)), 
            r && (s = s.toUpperCase()), r || (v = q)) : v ? s += "z" : q.square_element.set_protected_By(e, n), 
            b.push(s), s), M = (e = $[i - 1] + D[a - 1], t = !1) => {
                e && k(e, t);
            }, x = e => {
                for (;a++ < 8; ) M();
                for (y(); i++ < 8; ) M();
                for (y(); --a; ) M();
                for (y(); --i; ) M();
                return y(), b;
            }, A = e => {
                for (;++i < 9 && ++a < 9; ) M();
                for (y(); ++i < 9 && --a; ) M();
                for (y(); --i && --a; ) M();
                for (y(); --i && ++a < 9; ) M();
                return y(), b;
            }, P = (s, r = !0) => b.concat(s.map(s => {
                let i = ((e, t, s, r = ((e, t, s, r = e.indexOf(t) + s) => r > -1 && r < 8 && e[r]), i = r($, e[0], t), a = r(D, e[1], s)) => i && a && i + a)(e, g * s[0], g * s[1]);
                return !!i && (r && M(i, !0), t.squareData(i));
            }));
            return this.destinations.push(...{
                [d]: e => {
                    let t = P([ [ -1, 1 ], [ 1, 1 ] ], !1).filter(e => e.piece).map(e => k(e.square, !0));
                    f = !1, v = !0;
                    let s = [ [ 0, 1 ] ];
                    return 2 != a && 7 != a || s.push([ 0, 2 ]), [ ...t, ...P(s, !1).filter(e => !(v && e.piece)).map(e => e.square) ];
                },
                [l]: e => P([ [ 2, -1 ], [ 2, 1 ], [ 1, 2 ], [ -1, 2 ], [ -2, 1 ], [ -2, -1 ], [ -1, -2 ], [ 1, -2 ] ]),
                [h]: A,
                [u]: e => [ ...x(), ...A() ],
                [_]: e => [ ...P([ [ 1, -1 ], [ 1, 0 ], [ 1, 1 ], [ 0, 1 ], [ -1, 1 ], [ 0, -1 ], [ -1, -1 ], [ -1, 0 ] ]) ],
                [c]: e => [ ...x() ]
            }[n.split`-`[1]]().filter(e => e && "string" == typeof e)), this.destinations;
        }
    }, {
        extends: "img"
    });
}));

class C extends HTMLElement {
    static get observedAttributes() {
        return [];
    }
    constructor() {
        super();
    }
    connectedCallback() {
        this.board = this.getRootNode().host, this.reset_square();
    }
    set square(e) {
        this._square = e;
    }
    get square() {
        return this._square;
    }
    get at() {
        return this.square;
    }
    get rect() {
        return this.getBoundingClientRect();
    }
    reset_square() {
        this.board && (this._relations = {
            [g]: new Set(),
            [p]: new Set(),
            [v]: new Set(),
            [q]: new Set(),
            [y]: new Set()
        }, this.removeAttribute(k), this.removeAttribute(v), this.removeAttribute(q), this.removeAttribute(v + "_count"), 
        this.removeAttribute(q + "_count"), this.removeAttribute(p), this.removeAttribute(p + "_count"), 
        this.removeAttribute(g), this.removeAttribute(g + "_count"), this.setAttribute(w, "none"));
    }
    get relations() {
        return this._relations;
    }
    set_square_relations() {
        if (this.board) {
            let {piece: e, piece_is: t, square_element: s} = this.board.squareData(this.square), r = (t, s) => {
                let r = [ ...t._relations[s] ], i = e => {
                    r.length ? (e.setAttribute(s, r.join(",")), e.setAttribute(s + "_count", r.length)) : (e.removeAttribute(s), 
                    e.removeAttribute(s + "_count"));
                };
                i(t), e && i(e);
            };
            (e => {
                r(e, g), r(e, p), r(e, v), r(e, q), e.setAttribute(w, t);
            })(this);
        }
    }
    add_relationData(e) {}
    set attacked_By(e) {
        this._relations[g].add(e);
    }
    set_protected_By(e, t) {
        let s = t.split("-")[0];
        this._relations[f + s].add(e);
    }
    set set_defended_By(e) {
        this._relations[p].add(e);
    }
    set piece(e) {
        this.board.add_board_piece(e, this._square);
    }
    get piece() {
        return this.board.piece(this._square);
    }
}

customElements.define("chessmeister-square-white", class extends C {}), customElements.define("chessmeister-square-black", class extends C {});

let S = e => `repeat(8, ${(100 - 7 * e) / 8}%)`, R = '<style>:root {\n    all:initial;\n    display:block;\n  }\n*{\n    box-sizing:border-box;\n  }\n#board{\n    position:relative;\n    /* border:var(--border, 1vh solid black); */\n    width:100%;\n    max-width:70vh;\n    margin:0 auto;\n  }\n#board:after{\n    content:"";\n    display:block;\n    padding-bottom:100%;\n  }\nchessmeister-square-white{\n    --bgcolor:var(--chessmeister-squarewhite-color,#f0e9c5)\n  }\nchessmeister-square-black{\n    --bgcolor:var(--chessmeister-squareblack-color,#b58863)\n  }\n#all_board_squares chessmeister-square-white,\n   #all_board_squares chessmeister-square-black{\n    background-color:var(--bgcolor);\n  }\n' + `${(() => (gridareas = z.map(t => `[at="${t}"]{ grid-area:${t};--squarecolor:"${[ n, o ][~~(e("ABCDEFGH".indexOf(t[0])) ^ e(t[1]))]}"}`).join("\n"), 
gridareas))()}` + "\n" + `chessmeister-board-layer{\n    ${(e => "position:absolute;\n  width:100%;\n  height:100%;\n  box-sizing: border-box;\n" + `display:grid;\n  grid-gap:${e};\n  grid-template-columns:${S(e)};\n  grid-template-rows:${S(e)};` + "\n" + ` grid-template-areas: ${'\n "' + t([ ...z ], 8).join('"\n "').replace(/,/g, " ") + '"\n'};` + "\n grid-auto-flow:row")(0)};\n    user-select:none\n  }` + '\nchessmeister-square-white:not([at]),chessmeister-square-black:not([at]){\n    border:1px solid red\n  }\n#all_board_squares >*[piece="none"]:before{\n    font-size:var(--squarefontsize,0px);\n    z-index:1;\n    display:block;\n    content:attr(at);\n    position:relative;\n    text-align:center;\n    top:40%;\n    color:var(--chessmeister-squarelabel-color,#444);\n    font-family:arial;\n  }' + `#piece_destinations >*[${k}]{\n    border:var(--chessmeister-allowed-destinations,.5vh solid orange)\n  }` + "\n" + `#piece_destinations >*[${M}]{\n    border:.5vh dashed var(--bgcolor);\n    background:lightgreen;\n  }` + "\n" + `#allowed_piece_moves >*[${k}]{\n    width:90%;\n    height:90%;\n    margin:5%;\n    border:var(--chessmeister-piece-destinations,.5vh dashed green)\n  }` + "\n.rotated,.rotated img{\n    transform:rotate(180deg)\n  }\nimg:not([at]){\n    background:red;\n  }\nimg[at]{\n    width:100%;\n    z-index:11;\n  }\n</style>\n<style id=attack_and_defend_dropshadow>#pieces_on_board{\n    --dropshadow-attack:\n        drop-shadow(var(--dropsize) 0px 1px var(--chessmeister-attack-color,darkred));\n    --dropshadow-defense:\n        drop-shadow(calc(-1*var(--dropsize)) 0px 1px darkgreen)\n  }" + `#pieces_on_board img[${g}][${p}]{\n    filter:var(--dropshadow-attack) var(--dropshadow-defense)\n  }` + `#pieces_on_board img[${g}]:not([${p}]){\n    filter:var(--dropshadow-attack)\n  }` + `#pieces_on_board img[${p}]:not([${g}]){\n    filter:var(--dropshadow-defense)\n  }` + `#pieces_on_board img[${g}]:not([${p}]){\n    filter:\n      drop-shadow(var(--dropsize) 0px 1px red) \n      drop-shadow(calc(-1*var(--dropsize)) 0px 1px var(--chessmeister-undefended-color,red));` + "</style>" + `<style id=attack_and_defend_counters>\n  #all_board_squares [${p}]:before,\n  #all_board_squares [${g}]:after\n  {\n    z-index:1;\n    display:none;/*//!todo set to block when counters bug is fixed */\n    position:relative;\n    width:80%;\n    height:100%;\n    margin:0 auto;\n  }\n  #all_board_squares [${p}]:before{\n    content:attr(${p}_count);\n    text-align:left;\n    color:green;\n  }\n  #all_board_squares [${g}]:after{\n    content:attr(${g}_count);\n    text-align:right;\n    color:red;\n  }\n  </style>` + "<style id=css_interactive_board>\n  #board{\n    touch-action:none;\n  }\n  img[at]{\n      cursor:grab\n  }\n  </style>";

customElements.define("chessmeister-board-layer", class extends HTMLElement {
    static get observedAttributes() {
        return [];
    }
    constructor() {
        super(), this._squares_marked_from = new Set();
    }
    connectedCallback() {}
    clear_layer() {
        this.innerHTML = "", this.clear_squares_with_from_attributes();
    }
    mark_attack_from_to_square(e, t) {
        let s = E(t), r = this.squares(s);
        this._squares_marked_from.add(s), r && r.setAttribute(k, e);
    }
    clear_squares_with_from_attributes() {
        this.children.length && this._squares_marked_from.forEach(e => {
            let t = this.squares(e);
            t && t.removeAttribute(k);
        }), this._squares_marked_from.clear();
    }
    layerHTML(t = ((e, t) => (e.setAttribute(w, t.piece_is), !0))) {
        let s = this.getRootNode().host;
        this.clear_layer();
        let r = z.map(r => {
            let i = s.squareData(r), {idxFile: a, idxRank: d} = i, c = [ o, n ][~~(e(a) ^ e(d))], l = document.createElement("chessmeister-square-" + c);
            return l.square = r, l.setAttribute("at", r), l.onclick = (e => {
                console.warn("click", r, this, e.target.id, e), s.dispatch("click", {
                    type: "square",
                    square: r
                });
            }), !!t(l, i) && l;
        });
        return this.append(...r), this;
    }
    reset_squares() {
        this.squares().map(e => e.reset_square());
    }
    set_square_relations() {
        this.squares().map(e => e.set_square_relations());
    }
    squares(e = "*") {
        if (0 === this.children.length) return !1;
        "*" != e && e.length < 3 && (e = `[at*="${e}" i]`);
        let t = [ ...this.querySelectorAll(e) ];
        return t.length > 1 ? t : !!t.length && t[0];
    }
    add_board_layer_piece(e, t, s = !0) {
        if (t && s) {
            let s = document.createElement("img", {
                is: e
            });
            return s.setAttribute("at", t = E(t)), this.appendChild(s);
        }
        this.insertAdjacentHTML("beforeend", `<img is=${e} at=${t}>`);
    }
}), customElements.define("chessmeister-board", class extends HTMLElement {
    static get observedAttributes() {
        return [ "fen", "static" ];
    }
    constructor() {
        super(), this.attachShadow({
            mode: "open"
        }), this._initialpieces_in_lightDOM = this.innerHTML, this._initfen = !1;
    }
    get files() {
        return $;
    }
    get ranks() {
        return A;
    }
    make_board_interactive(e = !0) {
        if (this.is_interactive = e, this.shadowRoot.querySelector('[id="css_interactive_board"]').disabled = !e, 
        this.layerMoves.layerHTML(() => !0), this.layerDestinations.layerHTML(() => !0), 
        this.board.addEventListener("dragenter", this._showdraggingpiece), this.board.addEventListener("dragend", a), 
        "ChessDesign" === this.id) {
            console.warn("DEV code on", this.shadowRoot.getRootNode().host, this);
            let e = (e, t, s = "orange") => {
                let r = this.shadowRoot.elementFromPoint(e.x, e.y).square;
                console.log(`%c Board ${e.type} ${t}`, `background:${s}`, r, e.target.is);
            };
            document.addEventListener("dragend", t => {
                let s = this.shadowRoot.elementFromPoint(t.x, t.y).square;
                e(t, "@document", "green;color:white"), this.add_board_piece(t.target.is, s);
            });
        }
    }
    _showdraggingpiece(e) {
        let t = e.target, {board: s, at: r} = t;
        r && s.draggingPiece && r !== s.draggingPiece.at && (s.draggingPiece.at = r, s.show_moves_piece_in_square(r));
    }
    setProperty(e, t) {
        this.board.style.setProperty("--" + e, t);
    }
    connectedCallback() {
        this.innerHTML = "", this.shadowRoot.innerHTML = R + "<div id=board></div>", this.board = this.shadowRoot.querySelector("#board"), 
        this.layerSquares = this.addlayer("all_board_squares"), this.layerMoves = this.addlayer("allowed_piece_moves"), 
        this.layerPieces = this.addlayer("pieces_on_board"), this.layerPieces.innerHTML = this._initialpieces_in_lightDOM, 
        delete this._initialpieces_in_lightDOM, this.layerDestinations = this.addlayer("piece_destinations"), 
        this.is_interactive = !this.hasAttribute("static"), this.layerSquares.layerHTML(), 
        this.is_interactive && this.make_board_interactive();
        let e = this.board.getBoundingClientRect().width;
        this.setProperty("dropsize", e / 100 + "px"), e > 300 && this.setProperty("squarefontsize", e / 45 + "px"), 
        this._initfen && this.setfen(this._initfen);
    }
    addlayer(e) {
        let t = document.createElement("chessmeister-board-layer");
        return t.id = e, this.board.appendChild(t);
    }
    add_board_piece(e, t, s = this.layerPieces) {
        L(t) && (e.length < 3 && (e = x(e)), s.add_board_layer_piece(e, t));
    }
    remove_board_piece(e) {
        let t = this.layerPieces.squares(e);
        t && (t.remove(), this.clear_board_moves());
    }
    clear_board() {
        this.layerSquares.reset_squares(), this.layerMoves.clear_layer(), this.layerDestinations.clear_layer(), 
        this.layerPieces.clear_layer();
    }
    clear_board_moves() {
        this.layerSquares.reset_squares(), this.layerMoves.clear_squares_with_from_attributes(), 
        this.layerDestinations.clear_squares_with_from_attributes();
    }
    show_moves_piece_in_square(e) {
        this.clear_board_moves(), this.is_interactive && ([ ...this.layerPieces.children ].map(t => {
            t._show_piece_moves(e, [ this.layerMoves ]);
        }), this.layerSquares.set_square_relations(), document.location.href.includes("fen") && history.pushState({}, "", "?fen=" + encodeURI(this.fen)));
    }
    setfen(e) {
        delete this._initfen, this.layerPieces.clear_layer(), e.split("/").map((e, t) => {
            e.split``.map(e => e == Number(e) ? ".".repeat(e) : e).join``.split``.map((e, s) => {
                let r = x.get(e), i = $[s % 8] + A[t % 8];
                r && this.add_board_piece(r, i);
            });
        }), this.layerSquares.layerHTML(), this.show_moves_piece_in_square(), this.dispatch("fen", {
            fen: e
        });
    }
    set fen(e) {
        this.setAttribute("fen", e);
    }
    get fen() {
        if (this._initfen) return this._initfen;
        let e = "", t = 0, s = (e = t || "") => (t = 0, e), r = t => e += s() + t;
        return [ ...this.layerSquares.children ].map((e, s) => {
            !s || s % 8 || r("/"), e.piece ? e.piece.length && this.draggingPiece ? r(this.draggingPiece.fen) : r(e.piece.fen) : t++;
        }), e += s();
    }
    game(e) {
        this.fen = games[e].fen;
    }
    translateSquare(e, t, s, r = ((e, t, s, r = e.indexOf(t) + s) => r > -1 && r < 8 && e[r]), i = r($, e[0], t), a = r(D, e[1], s)) {
        return i && a && i + a;
    }
    moves(e) {
        let t = this.layerPieces.squares(e);
        return t ? t.calculate_piece_moves() : [];
    }
    get pieces() {
        return this.piece("*");
    }
    piece(e = "K", t = !1) {
        return L(e) ? t = e : ("*" == e ? t = "*" : e.length < 2 && (e = x.get(e)), t || (t = e.includes("-") ? `[is="${e}"]` : e = `[is*="${e}"]`)), 
        this.layerPieces.squares(t);
    }
    isCheck(e = (e => this.piece(e).hasAttribute(g))) {
        return e("K") ? n : !!e("k") && o;
    }
    isMate() {
        return this.piece("K").data();
    }
    move(e, t) {
        let s;
        if (3 === e.length) {
            x.get(e[0]);
            t = e.slice(1);
        } else s = this.piece(e);
        return s && s.to(t), this;
    }
    rotate() {
        this.board.classList.toggle("rotated");
    }
    get squares() {
        return z;
    }
    get files() {
        return $;
    }
    get ranks() {
        return D;
    }
    square_from_position(e, t) {
        let s = this.getBoundingClientRect(), r = s.width / 8, i = e => {
            let t = 1;
            for (;e > t * r; ) t++;
            return t - 1;
        }, a = $[i(e - s.left)], n = A[i(t - s.top)];
        return !(!a || !n) && a + n;
    }
    attributeChangedCallback(e, t, s) {
        "fen" == e ? this.board ? this.setfen(s) : this._initfen = s : "static" == e && t && "true" === s && this.make_board_interactive();
    }
    squareData(e) {
        let t = e[0], s = e[1], r = t + s, i = $.indexOf(t) + 1, a = D.indexOf(s) + 1, o = "none", d = !1, c = this.layerPieces && this.piece(r);
        c.length > 1 && (c = this.draggingPiece ? this.draggingPiece : c[1]);
        let l = this.layerSquares.squares(r);
        return c && (d = (o = c.is).includes(n) ? 1 : -1), {
            board: this.board,
            square: r,
            file: t,
            rank: s,
            idxFile: i,
            idxRank: a,
            piece: c,
            piece_is: o,
            square_element: l,
            fen: x.get(o),
            pd: d
        };
    }
    dispatch(e, t = {}) {
        return t.name = e, this.dispatchEvent(new CustomEvent("chessmeister-event", {
            bubbles: !0,
            composed: !0,
            detail: t
        })), !1;
    }
    start(e = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w") {
        this.fen = e;
    }
}), console.log("chessmeister loaded");