123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- import React from 'react/addons';
- import omit from 'lodash.omit';
- import GameStore from '../stores/GameStore';
- import GameActions from '../actions/GameActions';
- import onGameChange from '../mixins/onGameChange';
- import Chessboard from './Chessboard';
- import CapturedPieces from './CapturedPieces';
- import TableOfMoves from './TableOfMoves';
- const ChessboardInterface = React.createClass({
-
- propTypes: {
- io: React.PropTypes.object.isRequired,
- token: React.PropTypes.string.isRequired,
- soundsEnabled: React.PropTypes.bool.isRequired,
- color: React.PropTypes.oneOf(['white', 'black']).isRequired,
- gameOver: React.PropTypes.object.isRequired,
- isOpponentAvailable: React.PropTypes.bool.isRequired
- },
- mixins: [React.addons.PureRenderMixin, onGameChange],
- getInitialState() {
- return GameStore.getState();
- },
- componentDidUpdate(prevProps) {
- if (this.props.gameOver.get('status') &&
- !prevProps.gameOver.get('status')) {
- this.props.openModal('info', this._getGameOverMessage());
- }
- },
- render() {
- const {promotion, turn, gameOver, check} = this.state;
- return (
- <div id="board-moves-wrapper" className="clearfix">
-
- <audio preload="auto" ref="moveSnd">
- <source src="/snd/move.mp3" />
- </audio>
- <audio preload="auto" ref="checkSnd">
- <source src="/snd/check.mp3" />
- </audio>
- <div id="board-wrapper">
- <CapturedPieces />
- <Chessboard
- {...omit(this.props, 'soundsEnabled', 'gameOver')}
- gameOver={gameOver.get('status')}
- maybePlaySound={this._maybePlaySound} />
- </div>
- <TableOfMoves />
- <span className="promotion">
- <label>
- <span>Promotion: </span>
- <select value={promotion}
- onChange={this._onPromotionChange}>
- <option value="q">Queen</option>
- <option value="r">Rook</option>
- <option value="b">Bishop</option>
- <option value="n">Knight</option>
- </select>
- </label>
- </span>
- <span className="feedback">
- {!gameOver.get('status') ?
- <span>
- <span className="icon">
- {/* F -> white king, f -> black king*/
- turn === 'w' ? 'F' : 'f'}
- </span>
- {`${turn === 'w' ? 'White' : 'Black'} to move.`}
- {check ? <strong> Check.</strong> : null}
- </span> :
- <strong>
- <span className="icon">
- {gameOver.get('winner') === 'White' ? 'F' : 'f'}
- </span>
- {this._getGameOverMessage()}
- </strong>
- }
- </span>
- </div>
- );
- },
- _onGameChange() {
- this.setState(GameStore.getState());
- },
- _onPromotionChange(e) {
- GameActions.changePromotion(e.target.value);
- },
- _maybePlaySound() {
- if (this.props.soundsEnabled) {
- this.refs[this.state.check ? 'checkSnd' : 'moveSnd'].getDOMNode().play();
- }
- },
- _getGameOverMessage() {
- const type = this.props.gameOver.get('type');
- const winner = this.props.gameOver.get('winner');
- const loser = winner === 'White' ? 'Black' : 'White';
- return type === 'checkmate' ? `Checkmate. ${winner} wins!` :
- type === 'timeout' ? `${loser}‘s time is out. ${winner} wins!` :
- type === 'resign' ? `${loser} has resigned. ${winner} wins!` :
- type === 'draw' ? 'Draw.' :
- type === 'stalemate' ? 'Draw (Stalemate).' :
- type === 'threefoldRepetition' ? 'Draw (Threefold Repetition).' :
- type === 'insufficientMaterial' ? 'Draw (Insufficient Material)' : '';
- }
- });
- export default ChessboardInterface;
|