Implement card images for inventory

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

@@ -12,7 +12,7 @@ var Inventory = React.createClass({
   render: function() {
     if (this.props.cards) {
       return (
-        <ul>
+        <ul id='inventory'>
           {this.props.cards.map(function(card) {
             return <li key={card.id}>
               <label>
@@ -22,7 +22,8 @@ var Inventory = React.createClass({
                   name="player_card_ids[]"
                   value={card.id} />
                 {/* TODO: Don't hard code face cards here */}
-                {card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2')} {card.suit}
+                {/* <span>{card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2')} {card.suit}</span> */}
+                <img src={('/assets/cards/png/' + card.rank + '_of_' + card.suit.toLowerCase() + 's.png').replace('11','jack').replace('12','queen').replace('13','king').replace('14','ace').replace('15','2')} />
               </label>
             </li>;
           })}

app/assets/stylesheets/game.css.sass

@@ -106,9 +106,16 @@ button
 ////// Inventory
 
 .player form
-  ul
+  ul#inventory
     display: flex
     flex-wrap: wrap
     text-align: left
   li
     flex: 1 1 auto
+  input[type="checkbox"]
+    visibility: hidden
+    position: absolute
+    &:checked ~ img
+      box-shadow: 0px 0px 2px 6px cadetblue
+  img
+    width: 6vw