Add player and inventory components
This commit is contained in:
parent
ef93825b94
commit
a3ec9ae6ea
@ -1 +1,2 @@
|
||||
//= require ./components/mixins
|
||||
//= require_tree ./components
|
||||
|
||||
@ -1,47 +1,49 @@
|
||||
var Game = React.createClass({
|
||||
mixins: [SetIntervalMixin],
|
||||
propTypes: {
|
||||
title: React.PropTypes.string,
|
||||
id: React.PropTypes.number
|
||||
players: React.PropTypes.array,
|
||||
id: React.PropTypes.number,
|
||||
source: React.PropTypes.string
|
||||
},
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
id: 0,
|
||||
//id: 0,
|
||||
players: [],
|
||||
title: ""
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
loadGameFromServer: function() {
|
||||
//console.log(this.props.source);
|
||||
$.get(this.props.source, function(result) {
|
||||
if (this.isMounted()) {
|
||||
console.log("Mounted");
|
||||
//console.log("Mounted");
|
||||
this.setState({
|
||||
title: result.title
|
||||
});
|
||||
this.setProps({
|
||||
id: result.id
|
||||
title: result.title,
|
||||
players: result.players
|
||||
});
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
this.loadGameFromServer();
|
||||
this.setInterval(this.loadGameFromServer, 3000);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<div>Title: {this.state.title}</div>
|
||||
<div>Id: {this.props.id}</div>
|
||||
<div className='player-list'>
|
||||
<PlayerList players={this.state.players} />
|
||||
</div>
|
||||
<div>
|
||||
<Inventory source={"/games/" + this.state.id + "/my-inventory.json"} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on("page:change", function() {
|
||||
if (document.getElementById("game-container") != null) {
|
||||
React.render(
|
||||
<Game source={document.URL + ".json"} />, document.getElementById('game-container')
|
||||
);
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,31 +1,32 @@
|
||||
var Inventory = React.createClass({
|
||||
propTypes: {
|
||||
cards: React.PropTypes.array
|
||||
},
|
||||
// propTypes: {
|
||||
// cards: React.PropTypes.array
|
||||
// },
|
||||
|
||||
getInitialState: function() {
|
||||
return {
|
||||
cards: []
|
||||
};
|
||||
},
|
||||
getInitialState: function() {
|
||||
return {
|
||||
cards: this.props.cards
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
$.get(this.props.source, function(result) {
|
||||
if (this.isMounted()) {
|
||||
this.setState({
|
||||
cards: result
|
||||
});
|
||||
}
|
||||
}.bind(this));
|
||||
},
|
||||
// componentDidMount: function() {
|
||||
// $.get(this.props.source, function(result) {
|
||||
// console.log("Hi from inventory didmount");
|
||||
// if (this.isMounted()) {
|
||||
// this.setState({
|
||||
// cards: result
|
||||
// });
|
||||
// }
|
||||
// }.bind(this));
|
||||
// },
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<div>Cards:</div>
|
||||
if (this.props.cards) {
|
||||
return (
|
||||
<div>
|
||||
Inventory:
|
||||
<ul>
|
||||
{this.state.cards.map(function(card) {
|
||||
{this.props.cards.map(function(card) {
|
||||
return <li key={card.id}>
|
||||
<label>
|
||||
{/* TODO: Better method of assigning form value */}
|
||||
@ -36,16 +37,19 @@ var Inventory = React.createClass({
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
);
|
||||
}
|
||||
else {
|
||||
return (<div></div>);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// TODO: Remove this?
|
||||
$(document).on("page:change", function() {
|
||||
if (document.getElementById("inventory") != null) {
|
||||
React.render(
|
||||
<Inventory source={document.URL + "/my-inventory.json"} />, document.getElementById('inventory')
|
||||
);
|
||||
}
|
||||
})
|
||||
//$(document).on("page:change", function() {
|
||||
// if (document.getElementById("inventory") != null) {
|
||||
// React.render(
|
||||
// <Inventory source={document.URL + "/my-inventory.json"} />, document.getElementById('inventory')
|
||||
// );
|
||||
// }
|
||||
//})
|
||||
|
||||
14
app/assets/javascripts/components/mixins.js.jsx
Normal file
14
app/assets/javascripts/components/mixins.js.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
var SetIntervalMixin = {
|
||||
componentWillMount: function() {
|
||||
this.intervals = [];
|
||||
},
|
||||
setInterval: function() {
|
||||
//console.log('interval set');
|
||||
this.intervals.push(setInterval.apply(null, arguments));
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
//console.log('interval unmount');
|
||||
this.intervals.forEach(clearInterval);
|
||||
}
|
||||
};
|
||||
|
||||
81
app/assets/javascripts/components/player.js.jsx
Normal file
81
app/assets/javascripts/components/player.js.jsx
Normal file
@ -0,0 +1,81 @@
|
||||
var Player = React.createClass({
|
||||
propTypes: {
|
||||
email: React.PropTypes.string,
|
||||
id: React.PropTypes.number
|
||||
},
|
||||
|
||||
//getInitialState: function() {
|
||||
//return {
|
||||
//id: this.props.id
|
||||
//email: ""
|
||||
//};
|
||||
//},
|
||||
|
||||
// componentDidMount: function() {
|
||||
// $.get(this.props.source, function(result) {
|
||||
// if (this.isMounted()) {
|
||||
// console.log("Mounted from player");
|
||||
// //this.setState({
|
||||
// //id: result.id
|
||||
// //email: result.email
|
||||
// //});
|
||||
// console.log(result.id);
|
||||
// this.setProps({
|
||||
// id: result.id
|
||||
// });
|
||||
// }
|
||||
// }.bind(this));
|
||||
// },
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<div>Id: {this.props.id}</div>
|
||||
<div>Email: {this.props.email}</div>
|
||||
<div>Inventory count: {this.props.inventory_count}</div>
|
||||
<div><Inventory cards={this.props.inventory} /></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var PlayerList = React.createClass({
|
||||
// propTypes: {
|
||||
// players: React.PropTypes.array
|
||||
// },
|
||||
|
||||
// getInitialState: function() {
|
||||
// return {
|
||||
// players: []
|
||||
// };
|
||||
// },
|
||||
|
||||
// componentDidMount: function() {
|
||||
// $.get(this.props.source, function(result) {
|
||||
// if (this.isMounted()) {
|
||||
// this.setState({
|
||||
// players: result.players
|
||||
// });
|
||||
// console.log("Mounted from playerList");
|
||||
// }
|
||||
// }.bind(this));
|
||||
// },
|
||||
|
||||
render: function() {
|
||||
var playerNodes = this.props.players.map(function (player) {
|
||||
return (
|
||||
<Player key={player.id} {...player} />
|
||||
);
|
||||
});
|
||||
//<Player key={player.id} id={player.id} email={player.email} inventory_count={player.inventory_count} inventory={player.inventory} />
|
||||
|
||||
return (
|
||||
<div>
|
||||
PlayerList:
|
||||
{playerNodes}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
@ -1,24 +1,24 @@
|
||||
#game-container
|
||||
= react_component 'Game', source: "#{game_path @game}.json"
|
||||
|
||||
%p
|
||||
-#%p
|
||||
%b Status:
|
||||
= @game.status
|
||||
|
||||
%p
|
||||
-#%p
|
||||
%b Title:
|
||||
= @game.title
|
||||
|
||||
- if @game.can_accomodate(current_user)
|
||||
-#- if @game.can_accomodate(current_user)
|
||||
= link_to 'Join', game_join_path(@game)
|
||||
|
||||
- if @game.startable? && @game.already_has?(current_user)
|
||||
-#- if @game.startable? && @game.already_has?(current_user)
|
||||
= link_to 'Start', game_start_path(@game)
|
||||
|
||||
.debug
|
||||
-#.debug
|
||||
= button_to 'Debug Start', game_start_path(@game), method: :get
|
||||
= link_to 'Edit Game', edit_game_path(@game)
|
||||
|
||||
.players
|
||||
-#.players
|
||||
%b Players:
|
||||
%ol
|
||||
- @game.players.each do |player|
|
||||
@ -39,8 +39,8 @@
|
||||
-##inventory
|
||||
|
||||
-# TODO better logic, not in view
|
||||
- unless @game.status == nil
|
||||
.table
|
||||
-#- unless @game.status == nil
|
||||
-#.table
|
||||
-# TODO better logic, not in view. Set play to beat = nil; instead of view logic
|
||||
- if @game.play_to_beat && @game.player_to_beat != @game.current_player
|
||||
- if @game.play_to_beat.play
|
||||
@ -57,7 +57,7 @@
|
||||
.controls
|
||||
- if @game.control_user == current_user
|
||||
// Play hand form
|
||||
= form_for @game, :url => play_hand_game_path(@game) do |f|
|
||||
= form_for @game, :url => play_hand_game_path(@game), remote: true do |f|
|
||||
// Provide id of current game
|
||||
-#= f.hidden_field :id
|
||||
= f.submit "Play Hand"
|
||||
|
||||
@ -1 +1,10 @@
|
||||
json.extract! @game, :id, :title, :created_at, :updated_at
|
||||
json.players @game.players do |player|
|
||||
json.id player.id
|
||||
json.email player.user.email
|
||||
json.inventory_count player.inventory.count
|
||||
|
||||
if player.user == current_user
|
||||
json.inventory player.inventory
|
||||
end
|
||||
end
|
||||
|
||||
@ -7,9 +7,13 @@
|
||||
%b User:
|
||||
= @player.user
|
||||
|
||||
- if @player.user == current_user
|
||||
%p
|
||||
%b Inventory:
|
||||
= @player.inventory.map{|c| c.to_s}
|
||||
%p
|
||||
%b Inventory:
|
||||
= @player.inventory.map{|c| c.class}
|
||||
%b Inventory count:
|
||||
= @player.inventory.count
|
||||
|
||||
= link_to 'Edit', edit_player_path(@player)
|
||||
\|
|
||||
|
||||
@ -1 +1,5 @@
|
||||
json.extract! @player, :id, :game_id, :user_id, :inventory, :created_at, :updated_at
|
||||
json.extract! @player, :id, :game_id, :user_id, :created_at, :updated_at
|
||||
if @player.user == current_user
|
||||
json.inventory @player.inventory
|
||||
end
|
||||
json.inventory_count @player.inventory.count
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user