125 lines
3.3 KiB
JavaScript
125 lines
3.3 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,
|
|
play_to_beat_string: React.PropTypes.string
|
|
},
|
|
|
|
url: function() {
|
|
var url = "/games/" + this.props.id;
|
|
return url;
|
|
},
|
|
|
|
getInitialState: function() {
|
|
return {
|
|
data: null,
|
|
players: [],
|
|
title: "",
|
|
play_to_beat_string: "",
|
|
is_started: false,
|
|
is_joinable: false,
|
|
is_startable: false
|
|
};
|
|
},
|
|
|
|
loadGameFromServer: function() {
|
|
$.getJSON(this.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) {
|
|
console.log("Hello from handlePlayHandSubmit()");
|
|
$.ajax({
|
|
url: this.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.url(), status, err.toString());
|
|
}.bind(this)
|
|
});
|
|
},
|
|
|
|
handleStart: function() {
|
|
$.ajax({
|
|
url: this.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.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-component'>
|
|
<h1>{this.state.data.title}</h1>
|
|
|
|
{this.state.data.is_started
|
|
?
|
|
null
|
|
:
|
|
<section id='game-controls'>
|
|
{/* TODO: If not joinable, show why. i.e. game full*/ }
|
|
{/* TODO: DEPRECATED use seat sit instead this.state.data.is_joinable ? <button onClick={this.handleJoin}>Join</button> : null */}
|
|
{/* TODO: If not startable, show why. i.e. need more players */}
|
|
<div id='start'>
|
|
{this.state.data.is_started ? null : <button onClick={this.handleStart} disabled={this.state.data.is_startable ? null : "disabled" }>Start</button>}
|
|
</div>
|
|
</section>
|
|
}
|
|
|
|
<PlayerList
|
|
game={this.state.data}
|
|
current_user={this.props.current_user}
|
|
onSeatSubmit={this.props.onSeatSubmit}
|
|
onPlayHandSubmit={this.handlePlayHandSubmit} />
|
|
|
|
{this.state.data.winner_player_id ? "Winner: " + this.state.data.winner_player_id : null}
|
|
</div>
|
|
);
|
|
}
|
|
});
|