|
@@ -26,12 +26,12 @@ const Chat = React.createClass({
|
|
},
|
|
},
|
|
componentDidMount() {
|
|
componentDidMount() {
|
|
this.props.io.on('receive-message', data => {
|
|
this.props.io.on('receive-message', data => {
|
|
- ChatActions.submitMessage(data.message, data.color + ' left');
|
|
|
|
|
|
+ ChatActions.submitMessage(data.message, data.color + ' left', true);
|
|
this._maybePlaySound();
|
|
this._maybePlaySound();
|
|
});
|
|
});
|
|
ChatStore.on('change', this._onChatStoreChange);
|
|
ChatStore.on('change', this._onChatStoreChange);
|
|
|
|
|
|
- if (window.innerWidth > 1399) ChatActions.toggleChat();
|
|
|
|
|
|
+ if (window.innerWidth > 1399) ChatActions.toggleVisibility();
|
|
},
|
|
},
|
|
componentWillUnmount() {
|
|
componentWillUnmount() {
|
|
ChatStore.off('change', this._onChatStoreChange);
|
|
ChatStore.off('change', this._onChatStoreChange);
|
|
@@ -40,14 +40,17 @@ const Chat = React.createClass({
|
|
return (
|
|
return (
|
|
<div id="chat-wrapper"
|
|
<div id="chat-wrapper"
|
|
style={this.state.isChatHidden ? {display: 'none'} : null}>
|
|
style={this.state.isChatHidden ? {display: 'none'} : null}>
|
|
|
|
+
|
|
<h4>Chat</h4>
|
|
<h4>Chat</h4>
|
|
<a className="close"
|
|
<a className="close"
|
|
- onClick={ChatActions.toggleChat}>
|
|
|
|
|
|
+ onClick={ChatActions.toggleVisibility}>
|
|
x
|
|
x
|
|
</a>
|
|
</a>
|
|
|
|
+
|
|
<audio preload="auto" ref="msgSnd">
|
|
<audio preload="auto" ref="msgSnd">
|
|
<source src="/snd/message.mp3" />
|
|
<source src="/snd/message.mp3" />
|
|
</audio>
|
|
</audio>
|
|
|
|
+
|
|
<ul id="chat-list" ref="chat">
|
|
<ul id="chat-list" ref="chat">
|
|
{this.state.messages.map((message, i) => (
|
|
{this.state.messages.map((message, i) => (
|
|
<li key={i} className={message.get('className')}>
|
|
<li key={i} className={message.get('className')}>
|
|
@@ -55,10 +58,13 @@ const Chat = React.createClass({
|
|
</li>
|
|
</li>
|
|
)).toArray()}
|
|
)).toArray()}
|
|
</ul>
|
|
</ul>
|
|
|
|
+
|
|
<span>Write your message:</span>
|
|
<span>Write your message:</span>
|
|
|
|
+
|
|
<form id="chat-form"
|
|
<form id="chat-form"
|
|
onSubmit={this._submitMessage}>
|
|
onSubmit={this._submitMessage}>
|
|
<input type="text"
|
|
<input type="text"
|
|
|
|
+ ref="message"
|
|
className={this.props.color}
|
|
className={this.props.color}
|
|
required
|
|
required
|
|
value={this.state.message}
|
|
value={this.state.message}
|
|
@@ -79,12 +85,13 @@ const Chat = React.createClass({
|
|
const message = this.state.message;
|
|
const message = this.state.message;
|
|
|
|
|
|
if (!isOpponentAvailable) {
|
|
if (!isOpponentAvailable) {
|
|
|
|
+ this.refs.message.getDOMNode().blur();
|
|
this.props.openModal('info', 'Sorry, your opponent is not connected. ' +
|
|
this.props.openModal('info', 'Sorry, your opponent is not connected. ' +
|
|
'You canโt send messages.');
|
|
'You canโt send messages.');
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
|
|
|
|
- ChatActions.submitMessage(message, color + ' right');
|
|
|
|
|
|
+ ChatActions.submitMessage(message, color + ' right', false);
|
|
this.setState({message: ''});
|
|
this.setState({message: ''});
|
|
|
|
|
|
io.emit('send-message', {
|
|
io.emit('send-message', {
|