123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- 'use strict';
- const React = require('react/addons');
- const GameStore = require('../stores/GameStore');
- const GameActions = require('../actions/GameActions');
- const onGameChange = require('../mixins/onGameChange');
- const Chessboard = require('./Chessboard');
- const CapturedPieces = require('./CapturedPieces');
- const TableOfMoves = require('./TableOfMoves');
- const cx = require('classnames');
- const ChessboardInterface = React.createClass({
-
- propTypes: {
- io: React.PropTypes.object.isRequired
- },
- mixins: [React.addons.PureRenderMixin, onGameChange],
- getInitialState() {
- return GameStore.getState();
- },
- render() {
- const {promotion, turn, gameOver} = this.state;
- const cxFeedback = cx({
- feedback: true,
- whitefeedback: turn === 'w',
- blackfeedback: turn === 'b'
- });
- console.log(turn);
- console.log(cxFeedback);
- const goType = gameOver.get('type');
- const loser = gameOver.get('winner') === 'White' ? 'Black' : 'White';
- return (
- <div id="board-moves-wrapper" className="clearfix">
-
- <div id="board-wrapper">
- <CapturedPieces />
- <Chessboard io={this.props.io} />
- </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="n">Knight</option>
- <option value="b">Bishop</option>
- </select>
- </label>
- </span>
- <span className={cxFeedback}>
- {!gameOver.get('status') ?
- <span className="feedback-move">
- {`${turn === 'w' ? 'White' : 'Black'} to move.`}
- </span> :
- <span className="feedback-status">
- {goType === 'checkmate' ?
- `Checkmate. ${gameOver.get('winner')} wins!`
- :goType === 'timeout' ?
- `${loser}‘s time is out. ${gameOver.get('winner')} wins!`
- :goType === 'resign' ?
- `${loser} has resigned. ${gameOver.get('winner')} wins!`
- :goType === 'draw' ?
- 'Draw.'
- :goType === 'stalemate' ?
- 'Draw (Stalemate).'
- :goType === 'threefoldRepetition' ?
- 'Draw (Threefold Repetition).'
- :goType === 'insufficientMaterial' ?
- 'Draw (Insufficient Material)'
- :null}
- </span>
- }
- </span>
- </div>
- );
- },
- _onGameChange() {
- this.setState(GameStore.getState());
- },
- _onPromotionChange(e) {
- GameActions.changePromotion(e.target.value);
- }
- });
- module.exports = ChessboardInterface;
|