From bb3bb541a8e15a439f0bc2b96e5859b421f1b68e Mon Sep 17 00:00:00 2001
From: "Jesse C. Fisher" <jessecfisher@gmail.com>
Date: Thu, 29 Oct 2015 06:25:33 -0700
Subject: [PATCH] Add player controls component; add play hand button

---
 app/assets/javascripts/components/game.js.jsx |  4 ++--
 .../javascripts/components/inventory.js.jsx   |  2 +-
 .../javascripts/components/player.js.jsx      |  6 ++++--
 .../components/player_controls.js.jsx         | 20 +++++++++++++++++++
 app/views/games/show.html.haml                |  3 ++-
 spec/features/plays_spec.rb                   |  3 ++-
 6 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/javascripts/components/player_controls.js.jsx

diff --git a/app/assets/javascripts/components/game.js.jsx b/app/assets/javascripts/components/game.js.jsx
index 9f665fe..c150d76 100644
--- a/app/assets/javascripts/components/game.js.jsx
+++ b/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>
diff --git a/app/assets/javascripts/components/inventory.js.jsx b/app/assets/javascripts/components/inventory.js.jsx
index be4fcde..e2b9364 100644
--- a/app/assets/javascripts/components/inventory.js.jsx
+++ b/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>;
diff --git a/app/assets/javascripts/components/player.js.jsx b/app/assets/javascripts/components/player.js.jsx
index 50ebf67..10fddc5 100644
--- a/app/assets/javascripts/components/player.js.jsx
+++ b/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} />
diff --git a/app/assets/javascripts/components/player_controls.js.jsx b/app/assets/javascripts/components/player_controls.js.jsx
new file mode 100644
index 0000000..4606f3e
--- /dev/null
+++ b/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>
+    );
+  }
+});
diff --git a/app/views/games/show.html.haml b/app/views/games/show.html.haml
index b7c073d..b85030a 100644
--- a/app/views/games/show.html.haml
+++ b/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
diff --git a/spec/features/plays_spec.rb b/spec/features/plays_spec.rb
index a24a94c..fa4c3b3 100644
--- a/spec/features/plays_spec.rb
+++ b/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