onix-chess-game
Version:
Chess game board
263 lines (261 loc) • 14.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AnalyseGame = void 0;
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const React = tslib_1.__importStar(require("react"));
const ReactDOM = tslib_1.__importStar(require("react-dom"));
const react_scrollbars_custom_1 = tslib_1.__importDefault(require("react-scrollbars-custom"));
const react_bootstrap_1 = require("react-bootstrap");
const chessground_1 = require("chessground");
const i18n_1 = require("../../../i18n");
const onix_core_1 = require("onix-core");
const onix_board_assets_1 = require("onix-board-assets");
const onix_chess_1 = require("onix-chess");
const onix_chess_analyse_1 = require("onix-chess-analyse");
const onix_chess_movetimes_1 = require("onix-chess-movetimes");
const GameProps_1 = require("../GameProps");
const AnalyseGameStore_1 = require("./AnalyseGameStore");
const AnalyseGameState_1 = require("./AnalyseGameState");
const ChessMoves_1 = require("../../moves/ChessMoves");
const Constants_1 = require("../../moves/Constants");
const Captures_1 = require("../../captures/Captures");
const GameUtils_1 = require("../GameUtils");
const onix_chess_ctrls_1 = require("onix-chess-ctrls");
const GameInfo_1 = require("../../GameInfo");
const BoardActions = tslib_1.__importStar(require("../../BoardActions"));
class AnalyseGameComponent extends React.Component {
constructor(props) {
super(props);
this.storeUnsubscribe = undefined;
this.cg = undefined;
this.boardElement = null;
this.redrawBoard = () => {
const { cg } = this;
if (cg !== undefined) {
cg.redrawAll();
}
};
this.flipBoard = () => {
this.store.dispatch({ type: BoardActions.FLIP_BOARD });
};
this.updateState = () => {
this.forceUpdate();
};
this.gameConnect = () => {
};
this.gameDisconnect = () => {
};
this.gameMsgHandler = (msg) => {
console.log(msg);
};
this.pvtChatHandler = (msg) => {
console.log(msg);
};
this.pubChatHandler = (msg) => {
console.log(msg);
};
this.loadGame = (id, insite) => {
};
this.renderTimer = () => {
};
this.renderControls = () => {
return (React.createElement("div", { className: "controls flex-grow-1 d-flex flex-column" },
React.createElement(react_bootstrap_1.Tab.Container, { defaultActiveKey: "info" },
React.createElement(react_bootstrap_1.Nav, { variant: "tabs", className: "nav-tabs-simple" },
React.createElement(react_bootstrap_1.Nav.Item, null,
React.createElement(react_bootstrap_1.Nav.Link, { eventKey: "moves" }, onix_core_1._("game", "movesTab"))),
React.createElement(react_bootstrap_1.Nav.Item, null,
React.createElement(react_bootstrap_1.Nav.Link, { eventKey: "info" }, onix_core_1._("game", "infoTab")))),
React.createElement(react_bootstrap_1.Tab.Content, { className: "p-0" },
React.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "moves" },
React.createElement("div", { className: "d-flex flex-column h-100" },
React.createElement("div", { className: "mb-auto board-height auto-overflow" },
React.createElement(ChessMoves_1.ChessMoves, { mode: Constants_1.MovesMode.List, nav: Constants_1.NavigatorMode.Top, store: this.store })),
React.createElement("div", { className: "mt-2 pt-2 border-top" },
React.createElement(Captures_1.Captures, { store: this.store, piece: this.props.board.piece })))),
React.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "info" },
React.createElement(GameInfo_1.GameInfo, { store: this.store }))))));
};
this.onPlyClick = (ply) => {
const { store } = this;
// gameNavigateToPly(store, ply);
};
this.renderAnalysisTab = (engine) => {
var _a;
if ((_a = engine.RawData.game) === null || _a === void 0 ? void 0 : _a.insite) {
return (React.createElement(react_bootstrap_1.Nav.Item, null,
React.createElement(react_bootstrap_1.Nav.Link, { eventKey: "analysis" }, onix_core_1._("analyse", "title"))));
}
else {
return null;
}
};
this.renderAnalysis = (store, engine) => {
var _a;
if ((_a = engine.RawData.game) === null || _a === void 0 ? void 0 : _a.insite) {
return (React.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "analysis" },
React.createElement(onix_chess_analyse_1.AnalyseGraphAsync, { store: store, height: 400 })));
}
else {
return null;
}
};
this.renderMovetimeTab = (engine) => {
var _a;
if ((_a = engine.RawData.game) === null || _a === void 0 ? void 0 : _a.moveCentis) {
return (React.createElement(react_bootstrap_1.Nav.Item, null,
React.createElement(react_bootstrap_1.Nav.Link, { eventKey: "movetime" }, "\u0417\u0430\u0442\u0440\u0430\u0447\u0435\u043D\u043D\u043E\u0435 \u0432\u0440\u0435\u043C\u044F")));
}
else {
return null;
}
};
this.renderMovetime = (store, engine) => {
var _a;
if ((_a = engine.RawData.game) === null || _a === void 0 ? void 0 : _a.moveCentis) {
return (React.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "movetime" },
React.createElement("div", { style: { width: '100%', height: 400 } },
React.createElement(onix_chess_movetimes_1.MovesGraphAsync, { height: 400, store: this.store }))));
}
else {
return null;
}
};
this.renderFenPgnTab = (engine) => {
return (React.createElement(react_bootstrap_1.Nav.Item, null,
React.createElement(react_bootstrap_1.Nav.Link, { eventKey: "fenpgn" }, "FEN & PGN")));
};
this.renderFenPgn = (engine) => {
const fen = onix_chess_1.FenString.fromPosition(engine.CurrentPos);
const pgn = engine.RawData.pgn;
return (React.createElement(react_bootstrap_1.Tab.Pane, { eventKey: "fenpgn" },
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 12 },
React.createElement(react_bootstrap_1.FormGroup, null,
React.createElement(react_bootstrap_1.FormLabel, null, onix_core_1._("chess", "fen")),
React.createElement(onix_chess_ctrls_1.TextWithCopy, { value: fen, placeholder: onix_core_1._("chess", "fen") })))),
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 12 },
React.createElement("div", { className: "pgn-text" },
React.createElement(react_scrollbars_custom_1.default, { trackYProps: { style: { width: 5 } } },
React.createElement("pre", null, pgn)))))));
};
this.renderCountersTab = (engine) => {
return null;
};
this.renderCounters = (store, engine) => {
return null;
};
this.renderUnderboard = (store, engine) => {
const { renderAnalysis, renderAnalysisTab, renderMovetime, renderMovetimeTab, renderFenPgn, renderFenPgnTab, renderCounters, renderCountersTab } = this;
return (React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { lg: 12 },
React.createElement("div", { className: "underboard" },
React.createElement(react_bootstrap_1.Tab.Container, { defaultActiveKey: "fenpgn" },
React.createElement(react_bootstrap_1.Nav, { variant: "tabs", className: "nav-tabs-simple" },
renderAnalysisTab(engine),
renderMovetimeTab(engine),
renderFenPgnTab(engine),
renderCountersTab(engine)),
React.createElement(react_bootstrap_1.Tab.Content, null,
renderAnalysis(store, engine),
renderMovetime(store, engine),
renderFenPgn(engine),
renderCounters(store, engine)))))));
};
onix_chess_analyse_1.i18nRegister();
onix_chess_1.i18nRegister();
i18n_1.register();
const state = AnalyseGameState_1.createAnalyseGameState(this.props);
this.store = AnalyseGameStore_1.createAnalyseGameStore(state);
}
componentDidMount() {
const { store } = this;
const { board, game } = store.getState();
this.storeUnsubscribe = this.store.subscribe(() => this.updateState());
this.cg = chessground_1.Chessground(this.boardElement, {
fen: game.fen,
orientation: board.orientation,
coordinates: board.coordinates,
turnColor: onix_chess_1.Color.toName(game.engine.ToMove),
viewOnly: true,
resizable: true,
lastMove: game.lastMove,
check: game.isCheck,
highlight: {
lastMove: true,
check: true
},
events: {
// change: onPositionChange
},
});
window.addEventListener("resize", this.redrawBoard);
}
componentWillUnmount() {
window.removeEventListener("resize", this.redrawBoard);
const { cg } = this;
if (cg !== undefined) {
cg.destroy();
}
if (this.storeUnsubscribe) {
this.storeUnsubscribe();
}
}
render() {
const { props, store, flipBoard } = this;
const { board: boardCfg } = props;
const { board, game } = store.getState();
const { engine } = game;
const { square, piece, size, coordinates, is3d } = board;
if (this.cg) {
this.cg.set({
fen: game.fen,
lastMove: game.lastMove,
check: game.isCheck,
orientation: board.orientation,
coordinates: board.coordinates,
});
}
const containerClass = [
square,
onix_board_assets_1.BoardSizeClass[size],
{
"coords-no": !coordinates,
"is2d": !is3d,
"is3d": is3d
}
];
return (React.createElement(react_bootstrap_1.Container, { fluid: true, className: classnames_1.default(containerClass) },
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 12 },
React.createElement("div", { className: "d-block d-md-flex flex-wrap mb-2" },
React.createElement("div", null,
React.createElement("div", { className: classnames_1.default("board-container", piece) },
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 6 }, GameUtils_1.renderPlayer(game.engine, board.orientation, "top")),
React.createElement(react_bootstrap_1.Col, { className: "text-right", md: 6 }, GameUtils_1.renderResult(game.engine, board.orientation, "top"))),
React.createElement(react_bootstrap_1.Row, { className: "py-2" },
React.createElement(react_bootstrap_1.Col, null,
React.createElement("div", { className: "main-board", ref: el => this.boardElement = el }))),
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 6 }, GameUtils_1.renderPlayer(game.engine, board.orientation, "bottom")),
React.createElement(react_bootstrap_1.Col, { className: "text-right", md: 6 }, GameUtils_1.renderResult(game.engine, board.orientation, "bottom"))))),
React.createElement("div", { className: "mini-controls mx-md-3 mt-3 mt-md-5 mb-4" },
React.createElement("div", { className: "btn-toolbar flex-wrap", role: "toolbar" },
React.createElement("div", { className: "btn-group" },
boardCfg.configUrl ? (React.createElement("a", { "aria-label": onix_core_1._("game", "config"), className: "btn btn-link", title: onix_core_1._("game", "config"), href: boardCfg.configUrl + "?returnUrl=" + window.location.href },
React.createElement("i", { className: "xi-config" }))) : "",
React.createElement("button", { "aria-label": onix_core_1._("game", "flip"), className: "btn btn-link", title: onix_core_1._("game", "flip"), onClick: flipBoard },
React.createElement("i", { className: "xi-refresh" }))))),
this.renderControls()))),
this.renderUnderboard(store, engine)));
}
}
AnalyseGameComponent.defaultProps = GameProps_1.defaultProps;
const AnalyseGame = (props, container) => {
ReactDOM.render(React.createElement(AnalyseGameComponent, props), container, () => { });
};
exports.AnalyseGame = AnalyseGame;
//# sourceMappingURL=AnalyseGame.js.map