var Game = React.createClass({
  propTypes: {
    title: React.PropTypes.string,
    id: React.PropTypes.number
  },

  getInitialState: function() {
    return {
      id: 0,
      title: ""
    };
  },

  componentDidMount: function() {
    $.get(this.props.source, function(result) {
      if (this.isMounted()) {
        console.log("Mounted");
        this.setState({
          title: result.title
        });
        this.setProps({
          id: result.id
        });
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        <div>Title: {this.state.title}</div>
        <div>Id: {this.props.id}</div>
        <div>
          <Inventory source={"/games/" + this.state.id + "/my-inventory.json"} />
        </div>
      </div>
    );
  }
});

$(document).on("page:change", function() {
  if (document.getElementById("game-container") != null) {
    React.render(
      <Game source={document.URL + ".json"} />, document.getElementById('game-container')
    );
  }
})