Add play to beat image ui

app/assets/stylesheets/game.css.sass

@@ -111,11 +111,17 @@ ol#cards-to-beat
   flex-wrap: wrap
   text-align: center
   li
+    margin-left: -21vmin
+    // Don't offset first card
+    &:first-of-type
+      // margin-left: 0
+      margin-left: -4vmin
+    flex: 1 1 auto
     //flex: 1 1 auto
     text-align: center
     display: inline-block
   img
-    width: 6vmin
+    width: 16vmin
     border: 1px solid black
     border-radius: .3vmin
 

app/views/tables/_play_to_beat.html.haml

@@ -0,0 +1,18 @@
+#play-to-beat
+  %h4 Hand to beat:
+  - if @game.play_to_beat.play == nil
+    None
+  - else
+
+    %div.hand-type= @game.play_to_beat.play.hand_type.capitalize
+    %span= @game.play_to_beat.play.to_s
+    -# - @game.play_to_beat.play.player_cards.each do |card|
+      = card.to_s
+    %div= @game.play_to_beat.play.player.display_name
+    %ol#cards-to-beat
+      - @game.play_to_beat.play.player_cards.each do |card|
+        %li
+          -# TODO: Don't hard code face cards here
+          %img{alt: card.rank + ' ' + card.suit,
+            src: '/assets/cards/png/' + (card.rank.gsub('J','jack').gsub('Q','queen').gsub('K','king').gsub('A','ace') + '_of_' + card.suit.downcase + 's.png').gsub('11','jack').gsub('12','queen').gsub('13','king').gsub('14','ace').gsub('15','2') }
+

app/views/tables/show.html.haml

@@ -66,7 +66,10 @@
         = render "seat", seat: @seats[0]
       #mid
         = render "seat", seat: @seats[1]
-        -# <HandToBeat cards={this.props.game.cards_to_beat} />
+
+        = render "play_to_beat"
+
         = render "seat", seat: @seats[2]
+
       #bot
         = render "seat", seat: @seats[3]