Add player and inventory components

app/assets/javascripts/components.js

@@ -1 +1,2 @@
+//= require ./components/mixins
 //= require_tree ./components

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
+          title: result.title,
-        });
+          players: result.players
-        this.setProps({
-          id: result.id
         });
       }
     }.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')
-    );
-  }
-})

app/assets/javascripts/components/inventory.js.jsx

@@ -1,31 +1,32 @@
 var Inventory = React.createClass({
-  propTypes: {
+  //  propTypes: {
-    cards: React.PropTypes.array
+  //    cards: React.PropTypes.array
-  },
+  //  },
 
     getInitialState: function() {
       return {
-      cards: []
+        cards: this.props.cards
       };
     },
 
-  componentDidMount: function() {
+  //  componentDidMount: function() {
-    $.get(this.props.source, function(result) {
+  //    $.get(this.props.source, function(result) {
-      if (this.isMounted()) {
+  //      console.log("Hi from inventory didmount");
-        this.setState({
+  //      if (this.isMounted()) {
-          cards: result
+  //        this.setState({
-        });
+  //          cards: result
-      }
+  //        });
-    }.bind(this));
+  //      }
-  },
+  //    }.bind(this));
+  //  },
 
   render: function() {
+    if (this.props.cards) {
       return (
         <div>
-        <div>Cards:</div>
+          Inventory:
-        <div>
           <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() {
+//$(document).on("page:change", function() {
-  if (document.getElementById("inventory") != null) {
+//  if (document.getElementById("inventory") != null) {
-    React.render(
+//    React.render(
-      <Inventory source={document.URL + "/my-inventory.json"} />, document.getElementById('inventory')
+//      <Inventory source={document.URL + "/my-inventory.json"} />, document.getElementById('inventory')
-    );
+//    );
-  }
+//  }
-})
+//})

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);
+  }
+};
+

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 (
+      <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>
+    );
+  }
+
+});

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
+-#- unless @game.status == nil
-  .table
+  -#.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"

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

app/views/players/show.html.haml

@@ -7,9 +7,13 @@
   %b User:
   = @player.user
 
-%p
+- if @player.user == current_user
+  %p
     %b Inventory:
-  = @player.inventory.map{|c| c.class}
+    = @player.inventory.map{|c| c.to_s}
+%p
+  %b Inventory count:
+  = @player.inventory.count
 
 = link_to 'Edit', edit_player_path(@player)
 \|

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