gistfile1.html

data.game_positions = data.game_positions.reverse();
React.renderComponent(SheetTable(data), document.getElementById('lineScores'));


var GamePositionRow = React.createClass({
  render: function() {
    var attrs = _.pick(this.props, "isExtraEndChanged", "indexToFocus");
    var channel = getChannel("changed:score");

    var inputs = _.map(this.props.end_scores, function(es) {
      var channelScore = comp(channel, withId(es.id), value("score"));
      var classes = cx({
        'end-hammer': es.isHammer,
      });

      if (attrs.isExtraEndChanged && attrs.indexToFocus == es.tabindex) {
        var needFocus = true;
      }

      return (
        <td className={classes} key={es.id}>
          <input
            autoFocus={needFocus}
            className="string optional form-control score"
            type="text"
            maxLength="1"
            max="8"
            tabIndex={es.tabindex}
            defaultValue={es.score}
            onBlur={channelScore} />
        </td>
      )
    });

    console.log(this.props.id);
    return (
      <tr key={this.props.id}>
        <td className={this.props.color+"-rock"}>
          <b>{this.props.team} {this.props.first_hammer && "*"}</b>
        </td>
        {inputs}
        <td>{this.props.total}</td>
      </tr>
    )
  }
});



var SheetTable = React.createClass({
  render: function() {
    var attrs = _.pick(this.props, "isExtraEndChanged", "indexToFocus");
    var names = _.range(0, this.props.game_positions[0].end_scores.length);
    var headers = names.map(function(n) {
        return (
          <th key={n}> {n+1} </th>
        );
    });

    var rows = _.map(this.props.game_positions, function(gp) {
      return GamePositionRow(_.assign(gp, {key: gp.id}, attrs));
    });

    return (
      <div>
        <div className="row game-header">
          <div className="col-xs-6">
            <h3 className="game-header__title">{this.props.sheetName}</h3>
          </div>
          <div className="col-xs-6">
            <ModalTrigger modal={SelectRockColorModal(this.props)}>
              <div className="btn btn-warning game-header__button">Change Rock Color and First Hammer</div>
            </ModalTrigger>
          </div>
        </div>
        <table className="table table-bordered line-scores">
          <thead>
            <tr>
              <th> Team </th>
              {headers}
              <th> Total </th>
            </tr>
          </thead>

          <tbody>
            {rows}
          </tbody>
        </table>
      </div>
    )
  }
});