121 lines
3.4 KiB
JavaScript
121 lines
3.4 KiB
JavaScript
var Game = React.createClass({
|
|
mixins: [SetIntervalMixin],
|
|
// TODO: Declare all propTypes
|
|
propTypes: {
|
|
title: React.PropTypes.string,
|
|
players: React.PropTypes.array,
|
|
id: React.PropTypes.number,
|
|
url: React.PropTypes.string,
|
|
play_to_beat_string: React.PropTypes.string
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return {
|
|
data: null,
|
|
players: [],
|
|
title: "",
|
|
play_to_beat_string: "",
|
|
is_started: false,
|
|
is_joinable: false,
|
|
is_startable: false
|
|
};
|
|
},
|
|
|
|
loadGameFromServer: function() {
|
|
$.getJSON(this.props.url, function(result) {
|
|
if (this.isMounted()) {
|
|
this.setState({ data: result });
|
|
}
|
|
}.bind(this));
|
|
},
|
|
|
|
componentDidMount: function() {
|
|
this.loadGameFromServer();
|
|
this.setInterval(this.loadGameFromServer, 3000);
|
|
},
|
|
|
|
handlePlayHandSubmit: function(card_ids) {
|
|
$.ajax({
|
|
url: this.props.url + '/play_hand',
|
|
type: 'PATCH',
|
|
dataType: 'json',
|
|
data: card_ids,
|
|
success: function(data) {
|
|
// TODO: Set state instead of this custom method?
|
|
this.loadGameFromServer();
|
|
}.bind(this),
|
|
error: function(xhr, status, err) {
|
|
console.error(this.props.url, status, err.toString());
|
|
}.bind(this)
|
|
});
|
|
},
|
|
|
|
handleStart: function() {
|
|
$.ajax({
|
|
url: this.props.url + '/start',
|
|
type: 'POST',
|
|
dataType: 'json',
|
|
complete: function (jqXHR, textStatus) {
|
|
// callback
|
|
},
|
|
success: function (data, textStatus, jqXHR) {
|
|
// success callback
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
// error callback
|
|
}
|
|
});
|
|
},
|
|
|
|
handleJoin: function() {
|
|
$.ajax({
|
|
url: this.props.url + '/join',
|
|
type: 'POST',
|
|
dataType: 'json',
|
|
complete: function (jqXHR, textStatus) {
|
|
// callback
|
|
},
|
|
success: function (data, textStatus, jqXHR) {
|
|
// success callback
|
|
},
|
|
error: function (jqXHR, textStatus, errorThrown) {
|
|
// error callback
|
|
}
|
|
});
|
|
},
|
|
|
|
render: function() {
|
|
if (!this.state.data) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
return (
|
|
<div id="game_show_container" style={{
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}}>
|
|
<div>Title: {this.state.data.title}</div>
|
|
<div>Game Id: {this.state.data.id}</div>
|
|
<div>Current Player: {this.state.data.controlling_player_id}</div>
|
|
<div>Hand to beat: {this.state.data.play_to_beat_string}</div>
|
|
<div className='player-list'>
|
|
<PlayerList
|
|
game_id={this.props.id}
|
|
players={this.state.data.players}
|
|
onPlayHandSubmit={this.handlePlayHandSubmit}
|
|
controlling_player_id={this.state.data.controlling_player_id}
|
|
current_user_id={this.state.data.current_user_id} />
|
|
</div>
|
|
<div>
|
|
{/* TODO: If not joinable, show why. i.e. game full*/ }
|
|
{this.state.data.is_joinable ? <button onClick={this.handleJoin}>Join</button> : null }
|
|
{/* TODO: If not startable, show why. i.e. need more players */}
|
|
{this.state.data.is_started ? null : <button onClick={this.handleStart} disabled={this.state.data.is_startable ? null : "disabled" }>Start</button>}
|
|
</div>
|
|
<div>
|
|
{this.state.data.winner_player_id ? "Winner: " + this.state.data.winner_player_id : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|