onix-chess-game
Version:
Chess game board
188 lines (186 loc) • 9.41 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DumbMoveList = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_scrollbars_custom_1 = tslib_1.__importDefault(require("react-scrollbars-custom"));
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const onix_chess_1 = require("onix-chess");
const Constants_1 = require("./Constants");
const MoveNavigator_1 = require("./MoveNavigator");
class DumbMoveList extends React.Component {
/**
* constructor
*/
constructor(props) {
super(props);
this.scrollerRef = null;
this.renderNav = (pos) => {
const { nav, currentMove, onChangePos } = this.props;
return nav === pos ? (React.createElement(MoveNavigator_1.MoveNavigator, { currentMove: currentMove, onChange: onChangePos, key: currentMove.moveKey })) : null;
};
this.onMoveClick = (e) => {
const key = e.currentTarget.getAttribute("data-key");
if (key) {
const { onChangeKey } = this.props;
if (onChangeKey) {
onChangeKey(key);
}
}
};
this.renderMoveNo = (color, ply) => {
if (color === onix_chess_1.Color.White) {
var moveNo = ((ply + 1) >> 1);
return (React.createElement("span", { className: "moveno", "data-moveno": moveNo, key: "mn" + moveNo.toString() },
moveNo,
"."));
}
return (React.createElement(React.Fragment, null));
};
this.renderMove = (x, uid, i, p, c, s, n, m, classes) => {
let result = [];
if (c === onix_chess_1.Color.White) {
result.push(this.renderMoveNo(c, i));
}
const myclass = {
['white']: (c === onix_chess_1.Color.White),
['black']: (c === onix_chess_1.Color.Black),
['active']: (x.moveKey === p)
};
const moveClasses = classnames_1.default('move', myclass, classes);
if (x.moveKey === p) {
this.activeMove = uid;
}
result.push(React.createElement("span", { id: uid, className: moveClasses, "data-ply": i, "data-key": p, key: p, onClick: this.onMoveClick }, s));
if (n && n.length) {
for (let i = 0; i < n.length; i++) {
const nagKey = `ng_${i}_${p}`;
result.push(React.createElement("span", { key: nagKey, className: "nag" }, n[i]));
}
}
if (m) {
const evalKey = `cm_${p}`;
result.push(React.createElement("span", { key: evalKey, className: "comment" }, m));
}
return result;
};
this.renderMoves = () => {
var _a;
const { currentMove, game, opeinig } = this.props;
let moves = [];
let move = currentMove.Begin.Next;
if (currentMove.isBegin()) {
this.activeMove = currentMove.uid;
}
if (opeinig && opeinig.name) {
moves.push(React.createElement("span", { id: currentMove.Begin.uid, key: "opening", className: "text-muted opening" },
opeinig.code,
" ",
opeinig.name));
}
else {
moves.push(React.createElement("a", { id: currentMove.Begin.uid }));
}
if ((move) && !move.isEnd()) {
if (((_a = move.sm) === null || _a === void 0 ? void 0 : _a.color) === onix_chess_1.Color.Black) {
moves = moves.concat(this.renderMove(currentMove, undefined, game.StartPlyCount, "mn0_" + game.StartPlyCount.toString(), onix_chess_1.Color.White, "..."));
}
let i = 1;
do {
const { sm, moveKey } = move;
let nags = [];
if (sm.glyphs) {
nags = sm.glyphs.map(g => g.symbol);
}
const comments = [];
if (move.comments) {
comments.push(move.comments);
}
const classes = {
"best": false,
"blunder": false,
"mistake": false,
"inaccuracy": false
};
if (sm.eval) {
const ev = sm.eval;
comments.push(ev.desc);
const isBest = !ev.best;
if (!isBest) {
if (sm.judgments) {
for (let j = 0; j < sm.judgments.length; j++) {
const judgment = sm.judgments[j];
switch (judgment.name) {
case "Blunder":
classes['blunder'] = true;
break;
case "Mistake":
classes['mistake'] = true;
break;
case "Inaccuracy":
classes['inaccuracy'] = true;
break;
}
comments.push(judgment.comment);
}
}
if (ev.variation) {
const sign = (ev.ceilPawn > 0) ? "+" : "";
comments.push(" { " + ev.variation + " " + sign + ev.ceilPawn + " }");
}
}
else {
classes['best'] = true;
}
}
const comment = (comments.length > 0) ? comments.join(" ") : undefined;
moves = moves.concat(this.renderMove(currentMove, move.uid, sm.ply, moveKey, sm.color, sm.san, nags, comment, classes));
move = move.Next;
i++;
} while (move && !move.isEnd());
}
moves.push(React.createElement("span", { key: "game-result", className: "game_result" }, game.getResultName('long')));
return moves;
};
}
componentDidUpdate(prevProps) {
// only scroll into view if the active item changed last render
if (this.props.currentMove.moveKey !== prevProps.currentMove.moveKey) {
this.ensureActiveItemVisible();
}
}
ensureActiveItemVisible() {
const itemId = this.activeMove;
if (itemId) {
const domNode = document.getElementById(itemId);
this.scrollElementIntoViewIfNeeded(domNode, this.scrollerRef);
}
}
scrollElementIntoViewIfNeeded(domNode, parent) {
if (domNode && parent) {
const centerIfNeeded = true;
var parentComputedStyle = window.getComputedStyle(parent, null), parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width')), parentBorderLeftWidth = parseInt(parentComputedStyle.getPropertyValue('border-left-width')), overTop = domNode.offsetTop - parent.offsetTop < parent.scrollTop, overBottom = (domNode.offsetTop - parent.offsetTop + domNode.clientHeight - parentBorderTopWidth) > (parent.scrollTop + parent.clientHeight), overLeft = domNode.offsetLeft - parent.offsetLeft < parent.scrollLeft, overRight = (domNode.offsetLeft - parent.offsetLeft + domNode.clientWidth - parentBorderLeftWidth) > (parent.scrollLeft + parent.clientWidth), alignWithTop = overTop && !overBottom;
if ((overTop || overBottom) && centerIfNeeded) {
parent.scrollTop = domNode.offsetTop - parent.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + domNode.clientHeight / 2;
}
if ((overLeft || overRight) && centerIfNeeded) {
parent.scrollLeft = domNode.offsetLeft - parent.offsetLeft - parent.clientWidth / 2 - parentBorderLeftWidth + domNode.clientWidth / 2;
}
if ((overTop || overBottom || overLeft || overRight) && !centerIfNeeded) {
domNode.scrollIntoView(alignWithTop);
}
}
}
render() {
const { renderNav } = this;
let s;
return (React.createElement("div", { className: "movelist moves d-flex flex-column h-100" },
renderNav(Constants_1.NavigatorMode.Top),
React.createElement("div", { className: "flex-grow-1" },
React.createElement(react_scrollbars_custom_1.default, { trackYProps: { style: { width: 5 } }, scrollerProps: { elementRef: (el) => this.scrollerRef = el } },
React.createElement("div", { className: "movelist-wrap" }, this.renderMoves()))),
renderNav(Constants_1.NavigatorMode.Bottom)));
}
}
exports.DumbMoveList = DumbMoveList;
//# sourceMappingURL=DumbMoveList.js.map