Implement inventory as a React component

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

@@ -0,0 +1,50 @@
+var Inventory = React.createClass({
+  propTypes: {
+    cards: React.PropTypes.array
+  },
+
+  getInitialState: function() {
+    return {
+      cards: []
+    };
+  },
+
+  componentDidMount: function() {
+    $.get(this.props.source, function(result) {
+      if (this.isMounted()) {
+        this.setState({
+          cards: result
+        });
+      }
+    }.bind(this));
+  },
+
+  render: function() {
+    return (
+      <div>
+        <div>Cards:</div>
+        <div>
+          <ul>
+            {this.state.cards.map(function(card) {
+              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]} />
+                  {card.rank} {card.suit}
+                </label>
+              </li>;
+            })}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+});
+
+$(document).on("page:change", function() {
+  if (document.getElementById("inventory") != null) {
+    React.render(
+      <Inventory source={document.URL + "/my-inventory.json"} />, document.getElementById('inventory')
+    );
+  }
+})

app/controllers/games_controller.rb

@@ -1,7 +1,7 @@
 class GamesController < ApplicationController
   before_action :set_game, only: [:show, :edit, :update, :destroy, :play_hand]
 
-  respond_to :html
+  respond_to :html, :json
 
   def index
     @games = Game.all
@@ -115,6 +115,11 @@ class GamesController < ApplicationController
     redirect_to(@game)
   end
 
+  def my_inventory
+    @game = Game.find(params[:game_id])
+    @player = @game.players.find_by(user_id: current_user.id)
+  end
+
   private
 
   def set_game

app/views/games/my_inventory.json.jbuilder

@@ -0,0 +1,3 @@
+json.(@player.inventory) do |card|
+  json.extract! card, :id, :rank, :suit, :play_id
+end

app/views/games/show.html.haml

@@ -34,14 +34,7 @@
 
       // Show the players' cards
       - if player.user == current_user && player.inventory.empty? == false
-        %ul.cards
-          - player.inventory.each do |card|
-            %li
-              %label
-                // If the cards belong to the user, allow them to select the cards to play as a hand
-                = check_box_tag 'player_card_ids[]', card.id, false, form: "edit_game_#{@game.id}" if player.user == current_user
-                // Show the card TODO hide values of cards of other players
-                = card.to_s
+        #inventory
 
 -# TODO better logic, not in view
 - unless @game.status == nil

config/routes.rb

@@ -4,6 +4,7 @@ Rails.application.routes.draw do
   resources :games do
     get 'start'
     get 'join'
+    get 'my-inventory'
     member do
       patch 'play_hand'
     end

spec/features/plays_spec.rb

@@ -2,7 +2,7 @@ require 'rails_helper'
 include Warden::Test::Helpers
 Warden.test_mode!
 
-feature 'Play a hand', type: :feature do
+feature 'Play a hand', type: :feature, js: true do
   # TODO: Implement a player / seat order. scenario 'active player rotates after a valid hand'
   ## fails without a consistent seat order. Workaround is to create a new game for each scenario
   ## with before :each instead of :all