onix-chess-game
Version:
Chess game board
147 lines (145 loc) • 7.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ConfigureGame = 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 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_ctrls_1 = require("onix-chess-ctrls");
const BoardActions = tslib_1.__importStar(require("../../BoardActions"));
const BoardReducer_1 = require("../../BoardReducer");
const BoardSettings_1 = require("../../settings/BoardSettings");
class ConfigureGameComponent 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.onCoordsChange = (e) => {
this.store.dispatch({ type: BoardActions.SET_COORDS });
};
this.onSizeChange = (size) => {
this.store.dispatch({ type: BoardActions.CHANGE_SIZE, size: size });
};
this.onPieceChange = (piece) => {
this.store.dispatch({ type: BoardActions.SET_PIECE, piece: piece });
};
this.onSquareChange = (square) => {
this.store.dispatch({ type: BoardActions.SET_SQUARE, square: square });
};
this.renderControls = () => {
const { props } = this;
const { size, piece, square, coordinates } = this.store.getState();
return (React.createElement("div", { className: "controls flex-grow-1" },
React.createElement(react_bootstrap_1.Form, { method: "post" },
(props.csrfTokenName && props.csrfTokenValue) ? (React.createElement("input", { type: "hidden", name: props.csrfTokenName, value: props.csrfTokenValue })) : "",
(props.returnUrl) ? (React.createElement("input", { type: "hidden", name: "returnUrl", value: props.returnUrl })) : "",
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 12 },
React.createElement(react_bootstrap_1.FormGroup, { controlId: "size" },
React.createElement(react_bootstrap_1.FormLabel, null, onix_core_1._("game", "board_size")),
React.createElement(onix_chess_ctrls_1.SizeSelector, { name: "size", defaultValue: size, onChangeSize: this.onSizeChange })))),
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 12 },
React.createElement(react_bootstrap_1.FormGroup, { controlId: "piece" },
React.createElement(react_bootstrap_1.FormLabel, null, onix_core_1._("chess", "pieces")),
React.createElement(onix_chess_ctrls_1.PieceSelector, { name: "piece", defaultValue: piece, onChangePiece: this.onPieceChange })))),
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 12 },
React.createElement(react_bootstrap_1.FormGroup, { controlId: "square" },
React.createElement(react_bootstrap_1.FormLabel, null, onix_core_1._("chess", "squares")),
React.createElement(onix_chess_ctrls_1.SquareSelector, { name: "square", defaultValue: square, onChangeSquare: this.onSquareChange })))),
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { md: 12 },
React.createElement(react_bootstrap_1.FormCheck, { id: "coords", name: "coords", type: "checkbox", value: "1", onChange: this.onCoordsChange, defaultChecked: coordinates, label: onix_core_1._("game", "display_coord") }))),
React.createElement(react_bootstrap_1.Row, null,
React.createElement(react_bootstrap_1.Col, { className: "text-right", md: 12 },
React.createElement(react_bootstrap_1.Button, { type: "submit" }, onix_core_1._("app", "save")))))));
};
onix_chess_1.i18nRegister();
i18n_1.register();
const { is3d, size, square, piece, orientation, coordinates } = this.props;
this.store = BoardReducer_1.createBoardStore({
is3d: !!is3d,
size: size,
square: square,
piece: piece,
orientation: orientation !== null && orientation !== void 0 ? orientation : 'white',
coordinates: !!coordinates
});
}
componentDidMount() {
const { store } = this;
const { orientation, coordinates } = store.getState();
this.storeUnsubscribe = this.store.subscribe(() => this.updateState());
this.cg = chessground_1.Chessground(this.boardElement, {
fen: onix_chess_1.FenString.standartStart,
orientation: orientation,
coordinates: coordinates,
viewOnly: true,
resizable: true
});
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 { store } = this;
const { square, piece, size, coordinates, orientation, is3d } = store.getState();
if (this.cg) {
this.cg.set({
fen: onix_chess_1.FenString.standartStart,
orientation: orientation,
coordinates: 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-lg-flex mb-2" },
React.createElement("div", null,
React.createElement("div", { className: classnames_1.default("board-container", piece) },
React.createElement("div", { className: "py-2" },
React.createElement("div", { className: "main-board", ref: el => this.boardElement = el })))),
React.createElement("div", { className: "mini-controls mx-3 mt-5" }),
this.renderControls())))));
}
}
ConfigureGameComponent.defaultProps = BoardSettings_1.defaultSettings;
const ConfigureGame = (props, container) => {
ReactDOM.render(React.createElement(ConfigureGameComponent, props), container, () => { });
};
exports.ConfigureGame = ConfigureGame;
//# sourceMappingURL=ConfigureGame.js.map