Initial work on Group Tracker component

package.json

@@ -12,13 +12,18 @@
       "packageCache": {}
     },
     "transform": [
-      ["babelify"]
+      "babelify",
+      "browserify-shim"
     ]
   },
+  "browserify-shim": {
+    "jquery": "global:$"
+  },
   "devDependencies": {
     "babel": "^5.8.21",
     "babelify": "^6.1.3",
     "browserify": "^10.2.1",
+    "browserify-shim": "^3.8.10",
     "gulp": "^3.8.11",
     "gulp-mocha": "^2.1.3",
     "gulp-util": "^3.0.4",

src/app.jsx

@@ -1,10 +1,51 @@
 var React = require('react');
 var Header = require('./components/Header.jsx');
-var CharacterTable = require('./CharacterTable.jsx');
+var GroupTracker = require('./components/GroupTracker.jsx');
+
+var data = {
+  characters: [
+    {
+      name: "Shot Dun Yun",
+      player: "Christian",
+      career: "Colonist",
+      soak: 0
+    },
+    {
+      name: "B1-L1",
+      player: "Bill",
+      career: "Bounty Hunter",
+      soak: 0
+    },
+    {
+      name: "Onin",
+      player: "Kyle",
+      career: "Hired Gun",
+      soak: 0
+    },
+    {
+      name: "Tuck Cosmicfall",
+      player: "Heather",
+      career: "Bounty Hunter",
+      soak: 0
+    },
+    {
+      name: "Prof. Bidbits",
+      player: "Kris",
+      career: "Colonist",
+      soak: 0
+    },
+    {
+      name: "Ralph",
+      player: "Richard",
+      career: "Colonist",
+      soak: 0
+    }
+  ]
+};
 
 React.render(
   <div className="container" >
     <Header />
-    <CharacterTable />
+    <GroupTracker characters={data.characters} />
   </div>,
   document.body);

src/components/ClickToEdit.jsx

@@ -0,0 +1,65 @@
+const React = require('react');
+const $ = require('jquery');
+
+const IsNodeOrAChildOf = (node, target) => {
+  return $(target).find(node).length > 0;
+};
+
+const ClickToEdit = React.createClass({
+  getDefaultProps() {
+    return {
+      type: 'text',
+      label: void 0,
+      value: void 0
+    };
+  },
+
+  getInitialState() {
+    return {
+      value: this.props.value,
+      active: false
+    };
+  },
+
+  clickHandler() {
+    this.setState({
+      active: true
+    });
+    document.addEventListener('click', this.finalizeHandler);
+  },
+
+  finalizeHandler(event) {
+    if (IsNodeOrAChildOf(event.target, React.findDOMNode(this.refs.edittable))) {
+      return;
+    }
+    event.preventDefault();
+    this.setState({
+      active: false,
+      value: React.findDOMNode(this.refs.input).value
+    });
+    document.removeEventListener('click', this.finalizeHandler);
+  },
+
+  render() {
+    const edittable = () => {
+      return (
+        <div ref="edittable" className="input-group">
+          <input ref="input"
+                 type={this.props.type}
+                 className="form-control"
+                 aria-label={this.props.label}
+                 defaultValue={this.state.value}
+            />
+        </div>
+      );
+    };
+
+    const inactive = () => {
+      return <div onClick={this.clickHandler}>{this.state.value}</div>
+    };
+
+    return this.state.active ? edittable() : inactive();
+  }
+});
+
+module.exports = ClickToEdit;

src/components/GroupStatusTable.jsx

@@ -0,0 +1,47 @@
+const React = require('react');
+const ClickToEdit = require('./ClickToEdit.jsx');
+
+const GroupStatusTable = React.createClass({
+  getDefaultProps() {
+    return {
+      characters: []
+    };
+  },
+
+  render() {
+    const rows = this.props.characters.map((character, i) => {
+      return (
+        <tr key={i}>
+          <th scope="row">{character.name}</th>
+          <td><ClickToEdit value={character.soak} type="number"/></td>
+          <td><ClickToEdit value={character.defense} type="number"/></td>
+          <td><ClickToEdit value={character.woundThreshold} type="number"/></td>
+          <td><ClickToEdit value={character.wounds} type="number"/></td>
+          <td><ClickToEdit value={character.strainThreshold} type="number"/></td>
+          <td><ClickToEdit value={character.strain} type="number"/></td>
+        </tr>
+      );
+    });
+
+    return (
+      <table className="table table-hover">
+        <thead>
+        <tr>
+          <th>Name</th>
+          <th>Soak</th>
+          <th>Defense</th>
+          <th><abbr title="Wound Threshold">W/T</abbr></th>
+          <th>Wounds</th>
+          <th><abbr title="Strain Threshold">S/T</abbr></th>
+          <th>Strain</th>
+        </tr>
+        </thead>
+        <tbody>
+        {rows}
+        </tbody>
+      </table>
+    );
+  }
+});
+
+module.exports = GroupStatusTable;

src/components/GroupTracker.jsx

@@ -0,0 +1,16 @@
+const React = require('react');
+const GroupStatusTable = require('./GroupStatusTable.jsx');
+
+const GroupTracker = React.createClass({
+  render() {
+    return (
+      <div>
+        <GroupStatusTable characters={this.props.characters} />
+        {/*<GroupObligationTable />)*/}
+        {/*<DestinyPool />*/}
+      </div>
+    );
+  }
+});
+
+module.exports = GroupTracker;

src/components/Header.jsx

@@ -8,7 +8,7 @@ var Header = React.createClass({
         <nav>
           <ul className="nav nav-pills pull-right">
             <li role="presentation" className="active">
-              <a href="#">Initiative</a>
+              <a href="#">Status</a>
             </li>
           </ul>
         </nav>