var Player = React.createClass({
  propTypes: {
    email: React.PropTypes.string,
    id: React.PropTypes.number
  },

  render: function() {
    return (
      <div>
        <div>Id: {this.props.id}</div>
        <div>Email: {this.props.email}</div>
        <div>Inventory count: {this.props.inventory_count}</div>
        <div>
          <PlayerControls
            key={this.props.id}
            onPlayHandSubmit={this.props.onPlayHandSubmit}
            game_id={this.props.game_id}
            player_id={this.props.id}
            inventory={this.props.inventory}
            current_player_id={this.props.current_player_id} />
        </div>
      </div>
    );
  }
});

var PlayerList = React.createClass({
  propTypes: {
    players: React.PropTypes.array,
    game_id: React.PropTypes.number
  },

  render: function() {
    var playerList = this;
    var playerNodes = this.props.players.map(function (player) {
      return (
        <Player
          key={player.id}
          onPlayHandSubmit={playerList.props.onPlayHandSubmit}
          current_player_id={playerList.props.current_player_id}
          game_id={playerList.props.game_id} {...player} />
      );
    });

    return (
      <div>
        PlayerList:
        {playerNodes}
      </div>
    );
  }

});