Add Game ReactJS component

README.md

@@ -4,6 +4,9 @@ Thirteen Tien Len
 TODO
 ----
 
+BUG TODO: First player / lowest card holder should not be able to pass
+first play
+
 ReactJS front-end
 
 Implement card graphics

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

@@ -0,0 +1,47 @@
+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')
+    );
+  }
+})

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

@@ -41,6 +41,7 @@ var Inventory = React.createClass({
   }
 });
 
+// TODO: Remove this?
 $(document).on("page:change", function() {
   if (document.getElementById("inventory") != null) {
     React.render(

app/views/games/show.html.haml

@@ -1,3 +1,5 @@
+#game-container
+
 %p
   %b Status:
   = @game.status
@@ -34,7 +36,7 @@
 
       // Show the players' cards
       - if player.user == current_user && player.inventory.empty? == false
-        #inventory
+        -##inventory
 
 -# TODO better logic, not in view
 - unless @game.status == nil