Add player controls component; add play hand button

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

@@ -9,7 +9,6 @@ var Game = React.createClass({
 
   getInitialState: function() {
     return {
-      //id: 0,
       players: [],
       title: ""
     };
@@ -38,8 +37,9 @@ var Game = React.createClass({
       <div>
         <div>Title: {this.state.title}</div>
         <div>Id: {this.props.id}</div>
+        <div>Current Player: {this.props.current_player}</div>
         <div className='player-list'>
-          <PlayerList players={this.state.players} />
+          <PlayerList game_id={this.props.id} players={this.state.players} />
         </div>
         <div>
         </div>

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

@@ -30,7 +30,7 @@ var Inventory = React.createClass({
               return <li key={card.id}>
                 <label>
                   {/* TODO: Better method of assigning form value */}
-                  <input type="checkbox" name="player_card_ids[]" value={card.id} form={"edit_game_" + location.pathname.split("/")[2]} />
+                  <input type="checkbox" name="player_card_ids[]" value={card.id} form={"player_controls_" + card.player_id} />
                   {card.rank} {card.suit}
                 </label>
               </li>;

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

@@ -33,7 +33,8 @@ var Player = React.createClass({
         <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><Inventory cards={this.props.inventory} player_id={this.props.id} /></div>
+        <div><PlayerControls key={this.props.id} game_id={this.props.game_id} player_id={this.props.id} /></div>
       </div>
     );
   }
@@ -63,9 +64,10 @@ var PlayerList = React.createClass({
   //  },
 
   render: function() {
+    var playerList = this;
     var playerNodes = this.props.players.map(function (player) {
       return (
-        <Player key={player.id} {...player} />
+          <Player key={player.id} game_id={playerList.props.game_id} {...player} />
       );
     });
         //<Player key={player.id} id={player.id} email={player.email} inventory_count={player.inventory_count} inventory={player.inventory} />

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

@@ -0,0 +1,20 @@
+var PlayerControls = React.createClass({
+
+  render: function() {
+    return (
+      <div>
+        <div>Game Id: {this.props.game_id}</div>
+        <form
+          id={"player_controls_" + this.props.player_id}
+          method="post"
+          data-remote="true"
+          action={"/games/" + this.props.game_id + "/play_hand"}
+          accept-charset="UTF-8">
+
+          <input type="hidden" value="patch" name="_method"></input>
+          <input id={"play_hand_button_" + this.props.player_id} type="submit" value="Play Hand" name="commit"></input>
+        </form>
+      </div>
+    );
+  }
+});

app/views/games/show.html.haml

@@ -1,5 +1,6 @@
-= react_component 'Game', source: "#{game_path @game}.json"
+= react_component 'Game', id: @game.id, current_player: @game.current_player.id, source: "#{game_path @game}.json"
 
+-# TODO: Remove deprecated commented out code
 -#%p
   %b Status:
   = @game.status

spec/features/plays_spec.rb

@@ -29,7 +29,8 @@ feature 'Play a hand', type: :feature, js: true do
     # Play the highest card
     @card_to_play = @player.inventory.last
     check @card_to_play.to_s
-    click_button 'Play Hand'
+    #click_button 'Play Hand'
+    click_button "play_hand_button_#{@player.id}"
 
     expect(page).to have_content "First hand must contain the lowest card: #{@game.lowest_card.to_s}"
     # No play to beat, because play was invalid