diff --git a/app/assets/javascripts/components.js b/app/assets/javascripts/components.js
index 9ce7a4f3..c0fcdbce 100644
--- a/app/assets/javascripts/components.js
+++ b/app/assets/javascripts/components.js
@@ -1 +1,2 @@
+//= require ./components/mixins
//= require_tree ./components
diff --git a/app/assets/javascripts/components/game.js.jsx b/app/assets/javascripts/components/game.js.jsx
index 27632f1b..9f665fe9 100644
--- a/app/assets/javascripts/components/game.js.jsx
+++ b/app/assets/javascripts/components/game.js.jsx
@@ -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 (
Title: {this.state.title}
Id: {this.props.id}
+
-
);
}
});
-
-$(document).on("page:change", function() {
- if (document.getElementById("game-container") != null) {
- React.render(
- , document.getElementById('game-container')
- );
- }
-})
diff --git a/app/assets/javascripts/components/inventory.js.jsx b/app/assets/javascripts/components/inventory.js.jsx
index 5f9dcdbb..be4fcde6 100644
--- a/app/assets/javascripts/components/inventory.js.jsx
+++ b/app/assets/javascripts/components/inventory.js.jsx
@@ -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 (
-
-
Cards:
+ if (this.props.cards) {
+ return (
+ Inventory:
- {this.state.cards.map(function(card) {
+ {this.props.cards.map(function(card) {
return -
-
- );
+ );
+ }
+ else {
+ return ();
+ }
}
});
// TODO: Remove this?
-$(document).on("page:change", function() {
- if (document.getElementById("inventory") != null) {
- React.render(
- , document.getElementById('inventory')
- );
- }
-})
+//$(document).on("page:change", function() {
+// if (document.getElementById("inventory") != null) {
+// React.render(
+// , document.getElementById('inventory')
+// );
+// }
+//})
diff --git a/app/assets/javascripts/components/mixins.js.jsx b/app/assets/javascripts/components/mixins.js.jsx
new file mode 100644
index 00000000..372e101c
--- /dev/null
+++ b/app/assets/javascripts/components/mixins.js.jsx
@@ -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);
+ }
+};
+
diff --git a/app/assets/javascripts/components/player.js.jsx b/app/assets/javascripts/components/player.js.jsx
new file mode 100644
index 00000000..50ebf672
--- /dev/null
+++ b/app/assets/javascripts/components/player.js.jsx
@@ -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 (
+
+
Id: {this.props.id}
+
Email: {this.props.email}
+
Inventory count: {this.props.inventory_count}
+
+
+ );
+ }
+});
+
+
+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 (
+
+ );
+ });
+ //
+
+ return (
+
+ PlayerList:
+ {playerNodes}
+
+ );
+ }
+
+});
diff --git a/app/views/games/show.html.haml b/app/views/games/show.html.haml
index 0dc1ef73..b7c073de 100644
--- a/app/views/games/show.html.haml
+++ b/app/views/games/show.html.haml
@@ -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"
diff --git a/app/views/games/show.json.jbuilder b/app/views/games/show.json.jbuilder
index 8eceebb7..cacda23b 100644
--- a/app/views/games/show.json.jbuilder
+++ b/app/views/games/show.json.jbuilder
@@ -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
diff --git a/app/views/players/show.html.haml b/app/views/players/show.html.haml
index f01d7db3..fdf2e1c8 100644
--- a/app/views/players/show.html.haml
+++ b/app/views/players/show.html.haml
@@ -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)
\|
diff --git a/app/views/players/show.json.jbuilder b/app/views/players/show.json.jbuilder
index 74fc67e3..673e634e 100644
--- a/app/views/players/show.json.jbuilder
+++ b/app/views/players/show.json.jbuilder
@@ -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