onix-chess-game
Version:
Chess game board
169 lines (167 loc) • 8.94 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WatchGame = 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_bootstrap_1 = require("react-bootstrap");
const chessground_1 = require("chessground");
const onix_chess_1 = require("onix-chess");
const i18n_1 = require("../../../i18n");
const onix_core_1 = require("onix-core");
const onix_board_assets_1 = require("onix-board-assets");
const GameProps_1 = require("../GameProps");
const WatchGameStore_1 = require("./WatchGameStore");
const WatchGameState_1 = require("./WatchGameState");
const ChessMoves_1 = require("../../moves/ChessMoves");
const Constants_1 = require("../../moves/Constants");
const Captures_1 = require("../../captures/Captures");
const GameUtils_1 = require("../GameUtils");
const BoardActions = tslib_1.__importStar(require("../../BoardActions"));
const GameInfo_1 = require("../../GameInfo");
class WatchGameComponent 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.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.flipBoard = () => {
this.store.dispatch({ type: BoardActions.FLIP_BOARD });
};
this.renderControls = () => {
return (React.createElement("div", { className: "controls flex-grow-1 d-flex flex-column" },
React.createElement(react_bootstrap_1.Tab.Container, { defaultActiveKey: "moves" },
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 }))))));
};
onix_chess_1.i18nRegister();
i18n_1.register();
const state = WatchGameState_1.createWatchGameState(this.props);
this.store = WatchGameStore_1.createWatchGameStore(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 { 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, { xs: 6 }, GameUtils_1.renderPlayer(game.engine, board.orientation, "top")),
React.createElement(react_bootstrap_1.Col, { className: "text-right", xs: 6 }, GameUtils_1.renderTimer(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, { xs: 6 }, GameUtils_1.renderPlayer(game.engine, board.orientation, "bottom")),
React.createElement(react_bootstrap_1.Col, { className: "text-right", xs: 6 }, GameUtils_1.renderTimer(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())))));
}
}
WatchGameComponent.defaultProps = GameProps_1.defaultProps;
const WatchGame = (props, container) => {
ReactDOM.render(React.createElement(WatchGameComponent, props), container, () => { });
};
exports.WatchGame = WatchGame;
//# sourceMappingURL=WatchGame.js.map