123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106 |
- 'use strict';
- const React = require('react/addons');
- const Clock = require('./Clock');
- const ChatStore = require('../stores/ChatStore');
- const ChatActions = require('../actions/ChatActions');
- const GameHeader = React.createClass({
-
- propTypes: {
- io: React.PropTypes.object.isRequired,
- params: React.PropTypes.array.isRequired,
- color: React.PropTypes.string,
- openModal: React.PropTypes.func.isRequired,
- gameOver: React.PropTypes.bool.isRequired
- },
- mixins: [React.addons.PureRenderMixin],
- getInitialState() {
- return {
- isChatHidden: ChatStore.getState().isChatHidden,
- newMessage: false
- };
- },
- componentDidMount() {
- const io = this.props.io;
- io.on('receive-message', () => {
- if (this.state.isChatHidden) {
- this.setState({newMessage: true});
- }
- });
- ChatStore.on('change', this._onChatStoreChange);
- },
- componentWillUnmount() {
- ChatStore.off('change', this._onChatStoreChange);
- },
- render() {
- const [_, time, inc] = this.props.params;
- return (
- <header className="clearfix">
- <Clock
- io={this.props.io}
- params={this.props.params} />
- <span id="game-type">
- {`${time}|${inc}`}
- </span>
- <a className="btn" href="/">New game</a>
- {!this.props.gameOver ?
- <a className="btn btn--red resign"
- onClick={this._onResign}>
- Resign
- </a> :
- <a className="btn btn--red rematch"
- onClick={this._onRematch}>
- Rematch
- </a>
- }
- <a id="chat-icon"
- onClick={this._toggleChat}>
- {this.state.newMessage ?
- <span className="new-message">You have a new message!</span>
- :null}
- <img src="/img/chat.svg"
- width="50"
- height="50" />
- Chat
- </a>
- </header>
- );
- },
- _onChatStoreChange() {
- this.setState({
- isChatHidden: ChatStore.getState().isChatHidden
- });
- },
- _toggleChat() {
- this.setState({newMessage: false});
- ChatActions.toggleChat();
- },
- _onResign() {
- const {io, params, color} = this.props;
- io.emit('resign', {
- token: params[0],
- color: color
- });
- },
- _onRematch() {
- const {io, params, openModal} = this.props;
- io.emit('rematch-offer', {
- token: params[0]
- });
- openModal('info', 'Your offer has been sent.');
- }
- });
- module.exports = GameHeader;
|