caissify_chessground
Version:
Vue 3 wrapper for chessground - A modern chess board component
402 lines (401 loc) • 11.2 kB
JavaScript
import { ref as K, watch as F, onMounted as J, onUnmounted as Q, defineComponent as X, computed as Y, nextTick as Z, createElementBlock as $, openBlock as ee, normalizeClass as oe } from "vue";
import { Chessground as te } from "chessground";
function se(C, S) {
const e = K(), t = () => {
if (C.value)
try {
e.value = te(C.value, S.value);
} catch (s) {
console.error("Failed to initialize chessground:", s);
}
}, p = () => {
e.value && (e.value.destroy(), e.value = void 0);
}, B = (s) => {
e.value && e.value.set(s);
};
F(
S,
(s) => {
B(s);
},
{ deep: !0 }
), F(
C,
(s) => {
s && (p(), t());
}
), J(() => {
t();
}), Q(() => {
p();
});
const b = (s) => {
const u = /* @__PURE__ */ new Map(), m = s.split(" ")[0].split("/");
for (let l = 0; l < 8; l++) {
let g = 0;
for (const a of m[l])
if (a >= "1" && a <= "8")
g += parseInt(a);
else {
const q = a === a.toUpperCase() ? "white" : "black", y = a.toLowerCase(), k = {
p: "pawn",
r: "rook",
n: "knight",
b: "bishop",
q: "queen",
k: "king"
}, E = String.fromCharCode(97 + g) + (8 - l);
u.set(E, { role: k[y], color: q }), g++;
}
}
return u;
};
return {
chessground: e,
set: (s) => {
if (e.value)
if (s.fen) {
const u = b(s.fen), m = { ...s };
delete m.fen, e.value.setPieces(u);
const l = {
...S.value,
// Current reactive config with correct movable.dests
...m,
// Any new config without FEN
lastMove: m.lastMove || void 0,
selected: void 0,
check: m.check || void 0
};
e.value.set(l), e.value.redrawAll();
} else
e.value.set(s);
},
toggleOrientation: () => {
e.value && e.value.toggleOrientation();
},
setPieces: (s) => {
if (e.value) {
let u = s;
s instanceof Map || (u = /* @__PURE__ */ new Map(), s && typeof s == "object" && Object.entries(s).forEach(([m, l]) => {
u.set(m, l);
})), e.value.setPieces(u), e.value.redrawAll();
}
},
selectSquare: (s) => {
e.value && e.value.selectSquare(s);
},
move: (s, u) => {
e.value && e.value.move(s, u);
},
newPiece: (s, u) => {
e.value && e.value.newPiece(s, u);
},
playPremove: () => {
var s;
return ((s = e.value) == null ? void 0 : s.playPremove()) ?? !1;
},
cancelPremove: () => {
e.value && e.value.cancelPremove();
},
cancelMove: () => {
e.value && e.value.cancelMove();
},
stop: () => {
e.value && e.value.stop();
},
explode: (s) => {
e.value && e.value.explode(s);
},
setAutoShapes: (s) => {
e.value && e.value.setAutoShapes(s);
},
setShapes: (s) => {
e.value && e.value.setShapes(s);
},
getKeyAtDomPos: (s) => {
var u;
return (u = e.value) == null ? void 0 : u.getKeyAtDomPos(s);
},
redrawAll: () => {
e.value && e.value.redrawAll();
},
dragNewPiece: (s, u, m) => {
e.value && e.value.dragNewPiece(s, u, m);
}
};
}
const ne = /* @__PURE__ */ X({
__name: "ChessBoard",
props: {
fen: {},
orientation: { default: "white" },
turnColor: {},
check: { type: Boolean },
lastMove: {},
coordinates: { type: Boolean, default: !0 },
coordinatesPosition: { default: "inside" },
coordinatesOnSquares: { type: Boolean, default: !1 },
autoCastle: { type: Boolean, default: !0 },
viewOnly: { type: Boolean, default: !1 },
disableContextMenu: { type: Boolean, default: !0 },
movable: {},
premovable: {},
animation: {},
highlight: {},
drawable: {},
selectable: {},
onMove: {},
onDropNewPiece: {},
onSelect: {},
onInsert: {},
onChange: {}
},
emits: ["move", "dropNewPiece", "select", "insert", "change"],
setup(C, { expose: S, emit: e }) {
const t = C, p = e, B = K(), b = K(null), N = () => {
const l = /* @__PURE__ */ new Map(), g = (o, n) => o >= 0 && o < 8 && n >= 1 && n <= 8, a = (o, n) => String.fromCharCode(97 + o) + n;
for (let o = 0; o < 8; o++) {
const n = a(o, 2), v = [a(o, 3), a(o, 4)];
l.set(n, v);
}
for (let o = 0; o < 8; o++) {
const n = a(o, 7), v = [a(o, 6), a(o, 5)];
l.set(n, v);
}
const q = [
[-2, -1],
[-2, 1],
[-1, -2],
[-1, 2],
[1, -2],
[1, 2],
[2, -1],
[2, 1]
];
return [[1, 1], [6, 1]].forEach(([o, n]) => {
const v = a(o, n), r = [];
q.forEach(([i, c]) => {
const h = o + i, d = n + c;
g(h, d) && r.push(a(h, d));
}), l.set(v, r);
}), [[1, 8], [6, 8]].forEach(([o, n]) => {
const v = a(o, n), r = [];
q.forEach(([i, c]) => {
const h = o + i, d = n + c;
g(h, d) && r.push(a(h, d));
}), l.set(v, r);
}), [
[0, 1],
[7, 1],
// a1, h1 (white)
[0, 8],
[7, 8]
// a8, h8 (black)
].forEach(([o, n]) => {
const v = a(o, n), r = [];
for (let i = 0; i < 8; i++)
i !== o && r.push(a(i, n));
for (let i = 1; i <= 8; i++)
i !== n && r.push(a(o, i));
l.set(v, r);
}), [
[2, 1],
[5, 1],
// c1, f1 (white)
[2, 8],
[5, 8]
// c8, f8 (black)
].forEach(([o, n]) => {
const v = a(o, n), r = [];
[[-1, -1], [-1, 1], [1, -1], [1, 1]].forEach(([c, h]) => {
for (let d = 1; d < 8; d++) {
const P = o + c * d, A = n + h * d;
if (g(P, A))
r.push(a(P, A));
else
break;
}
}), l.set(v, r);
}), [
[3, 1],
// d1 (white)
[3, 8]
// d8 (black)
].forEach(([o, n]) => {
const v = a(o, n), r = [];
for (let c = 0; c < 8; c++)
c !== o && r.push(a(c, n));
for (let c = 1; c <= 8; c++)
c !== n && r.push(a(o, c));
[[-1, -1], [-1, 1], [1, -1], [1, 1]].forEach(([c, h]) => {
for (let d = 1; d < 8; d++) {
const P = o + c * d, A = n + h * d;
if (g(P, A))
r.push(a(P, A));
else
break;
}
}), l.set(v, r);
}), [
[4, 1],
// e1 (white)
[4, 8]
// e8 (black)
].forEach(([o, n]) => {
const v = a(o, n), r = [];
[
[-1, -1],
[-1, 0],
[-1, 1],
[0, -1],
[0, 1],
[1, -1],
[1, 0],
[1, 1]
].forEach(([c, h]) => {
const d = o + c, P = n + h;
g(d, P) && r.push(a(d, P));
}), l.set(v, r);
}), l;
}, x = Y(() => {
var g, a, q, y, k, E, D;
return {
orientation: t.orientation,
turnColor: t.turnColor,
check: t.check,
lastMove: t.lastMove,
coordinates: t.coordinates,
coordinatesOnSquares: t.coordinatesOnSquares,
autoCastle: t.autoCastle,
viewOnly: t.viewOnly,
disableContextMenu: t.disableContextMenu,
movable: {
free: ((g = t.movable) == null ? void 0 : g.free) || !1,
color: ((a = t.movable) == null ? void 0 : a.color) || "white",
rookCastle: ((q = t.movable) == null ? void 0 : q.rookCastle) !== !1,
showDests: ((y = t.movable) == null ? void 0 : y.showDests) !== !1,
// Use provided dests if available, otherwise use basic dests for free mode fallback
dests: ((k = t.movable) == null ? void 0 : k.dests) || ((E = t.movable) != null && E.free ? void 0 : N()),
events: {
after: (f, w, o) => {
var n;
(n = t.onMove) == null || n.call(t, f, w, o.captured), p("move", f, w, o.captured);
}
}
},
draggable: {
enabled: !0,
showGhost: !0
},
premovable: t.premovable || {
enabled: !0
},
animation: t.animation || {
enabled: !0,
duration: 200
},
highlight: t.highlight || {
lastMove: !0,
check: !0
},
drawable: t.drawable || {
enabled: !1,
visible: !0
},
selectable: {
enabled: !t.viewOnly && ((D = t.selectable) == null ? void 0 : D.enabled) !== !1
},
events: {
select: (f) => {
var w, o, n;
if (b.value && b.value !== f) {
const v = (w = x.value.movable) == null ? void 0 : w.dests, r = v == null ? void 0 : v.get(b.value);
if (r && r.includes(f)) {
if (M.value) {
const i = b.value, c = f, h = M.value.state.pieces.get(c);
M.value.move(i, c), (o = t.onMove) == null || o.call(t, i, c, h), p("move", i, c, h);
}
b.value = null;
return;
}
}
b.value = f, (n = t.onSelect) == null || n.call(t, f), p("select", f);
},
insert: (f) => {
var w;
(w = t.onInsert) == null || w.call(t, f), p("insert", f);
},
change: () => {
var f;
(f = t.onChange) == null || f.call(t), p("change");
}
}
};
}), {
chessground: M,
set: O,
toggleOrientation: R,
setPieces: _,
selectSquare: I,
move: j,
newPiece: z,
playPremove: T,
cancelPremove: U,
cancelMove: G,
stop: L,
explode: V,
setAutoShapes: W,
setShapes: H,
getKeyAtDomPos: s,
redrawAll: u,
dragNewPiece: m
} = se(B, x);
return F(
() => t.fen,
(l) => {
l && M.value && (O({ fen: l }), p("change"));
}
), J(() => {
Z(() => {
t.fen && M.value && (O({ fen: t.fen }), p("change"));
});
}), S({
// Chessground API methods
set: O,
toggleOrientation: R,
setPieces: _,
selectSquare: I,
move: j,
newPiece: z,
playPremove: T,
cancelPremove: U,
cancelMove: G,
stop: L,
explode: V,
setAutoShapes: W,
setShapes: H,
getKeyAtDomPos: s,
redrawAll: u,
dragNewPiece: m,
// Direct access to chessground instance (advanced usage)
chessground: M.value
}), (l, g) => (ee(), $("div", {
ref_key: "boardElement",
ref: B,
class: oe(["chessground", {
"cg-coordinates": l.coordinates,
"coords-outside": l.coordinates && l.coordinatesPosition === "outside"
}])
}, null, 2));
}
}), ce = {
install(C) {
C.component("ChessBoard", ne);
}
};
export {
ce as CaissifyChessgroundPlugin,
ne as ChessBoard,
ne as default,
se as useChessground
};