Add hand to beat images

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

@@ -1,3 +1,4 @@
+//TODO: Rename PlaerList to something appropriate
 var PlayerList = React.createClass({
   propTypes: {
     players: React.PropTypes.array,
@@ -25,8 +26,6 @@ var PlayerList = React.createClass({
       <div id="playerList">
         <div id="top">
           <div className="game-seat position-1">
-            {console.log("Hello from player_list.jsx")}
-            {console.log(this.props.onPlayHandSubmit)}
             <Seat
               {...this.props.game.seats[0]}
               game={this.props.game}
@@ -44,7 +43,7 @@ var PlayerList = React.createClass({
               current_user={this.props.current_user}
               onSeatSubmit={this.props.onSeatSubmit} />
           </div>
-          <div id="play-to-beat">Hand to beat: {this.props.game.play_to_beat_string}</div>
+          <HandToBeat cards={this.props.game.cards_to_beat} />
           <div className="game-seat position-3">
             <Seat
               {...this.props.game.seats[2]}

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

@@ -50,7 +50,7 @@ var Table = React.createClass({
       return <div>Loading...</div>;
     }
     return (
-      <div id={"table-" + this.state.data.id}>
+      <div className="table" id={"table-" + this.state.data.id}>
         <h1>{this.state.data.title}</h1>
         {/* TODO: DEPRECATED seats are now rendered within games <SeatList current_user={this.state.data.current_user} seats={this.state.data.seats} onSeatSubmit={this.handleSeatSubmit} /> */}
         <Game id={this.state.data.current_game_id} current_user={this.state.data.current_user} onSeatSubmit={this.handleSeatSubmit} />

app/assets/stylesheets/game.css.sass

@@ -103,6 +103,20 @@ button
     flex: 0 0 100%
     align-self: flex-end
 
+////// Cards to beat
+
+ol#cards-to-beat
+  display: flex
+  flex-wrap: wrap
+  text-align: center
+  li
+    flex: 1 1 auto
+  img
+    width: 6vmin
+    border: 1px solid black
+    border-radius: .3vmin
+
+
 ////// Inventory
 
 .player form

app/assets/stylesheets/tables.css.scss

@@ -1,3 +1,10 @@
 // Place all the styles related to the Tables controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+#table-component-container-container,
+#table-component-container,
+.table {
+  width: 100%;
+  height: 100%;
+}

app/views/games/show.json.jbuilder

@@ -1,8 +1,10 @@
 json.extract! @game, :id, :title, :created_at, :updated_at, :controlling_player_id
 if  @game.controlling_player_id == @game.player_to_beat.try(:id)
   json.play_to_beat_string "None"
+  json.cards_to_beat []
 else
   json.play_to_beat_string @game.play_to_beat.try(:play).try(:to_s)
+  json.cards_to_beat @game.play_to_beat.try(:play).try(:player_cards)
 end
 
 json.winner_player_id @game.winner_player_id

spec/features/tables/table_show_spec.rb

@@ -53,7 +53,7 @@ feature 'Table show', :devise do
       #TODO: Fix race condition
       visit table_path @table
       #TODO: Write a better expectation
-      expect(page).to have_content "Hand to beat"
+      expect(page).to have_content "Inventory"
     end
 
   end