From 5b4c73defbde19fe8a285804454a0168235b8694 Mon Sep 17 00:00:00 2001 From: "Jonathan M. Lane" Date: Tue, 11 Aug 2015 04:28:40 -0300 Subject: [PATCH 1/6] Setting up GroupTracker & child GroupStatusTable components --- src/app.jsx | 4 +-- src/components/GroupStatusTable.jsx | 46 +++++++++++++++++++++++++++++ src/components/GroupTracker.jsx | 16 ++++++++++ src/components/Header.jsx | 2 +- 4 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 src/components/GroupStatusTable.jsx create mode 100644 src/components/GroupTracker.jsx diff --git a/src/app.jsx b/src/app.jsx index 990415a..ccff59f 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -1,6 +1,6 @@ var React = require('react'); var Header = require('./components/Header.jsx'); -var CharacterTable = require('./CharacterTable.jsx'); +var GroupTracker = require('./components/GroupTracker.jsx'); var data = { characters: [ @@ -35,6 +35,6 @@ var data = { React.render(
- +
, document.body); diff --git a/src/components/GroupStatusTable.jsx b/src/components/GroupStatusTable.jsx new file mode 100644 index 0000000..cb5f797 --- /dev/null +++ b/src/components/GroupStatusTable.jsx @@ -0,0 +1,46 @@ +const React = require('react'); + +const GroupStatusTable = React.createClass({ + getDefaultProps() { + return { + characters: [] + }; + }, + + render() { + const rows = this.props.characters.map((character, i) => { + return ( + + {character.name} + {character.soak} + {character.defense} + {character.woundThreshold} + {character.wounds} + {character.strainThreshold} + {character.strain} + + ); + }); + + return ( + + + + + + + + + + + + + + {rows} + +
NameSoakDefenseW/TWoundsS/TStrain
+ ); + } +}); + +module.exports = GroupStatusTable; diff --git a/src/components/GroupTracker.jsx b/src/components/GroupTracker.jsx new file mode 100644 index 0000000..fb3c4ba --- /dev/null +++ b/src/components/GroupTracker.jsx @@ -0,0 +1,16 @@ +const React = require('react'); +const GroupStatusTable = require('./GroupStatusTable.jsx'); + +const GroupTracker = React.createClass({ + render() { + return ( +
+ + {/*)*/} + {/**/} +
+ ); + } +}); + +module.exports = GroupTracker; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 474df51..c067ba5 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -8,7 +8,7 @@ var Header = React.createClass({ From d0a58508776a0b7cce38ac83fc36d3d26c739de6 Mon Sep 17 00:00:00 2001 From: "Jonathan M. Lane" Date: Tue, 11 Aug 2015 06:03:57 -0300 Subject: [PATCH 2/6] First pass at ClickToEdit component (unfinished: clicks and state saving) --- src/app.jsx | 3 +- src/components/ClickToEdit.jsx | 55 +++++++++++++++++++++++++++++ src/components/GroupStatusTable.jsx | 3 +- 3 files changed, 59 insertions(+), 2 deletions(-) create mode 100644 src/components/ClickToEdit.jsx diff --git a/src/app.jsx b/src/app.jsx index ccff59f..b74826b 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -7,7 +7,8 @@ var data = { { name: "Shot Dun Yun", player: "Christian", - career: "Colonist" + career: "Colonist", + soak: 0 }, { name: "B1-L1", diff --git a/src/components/ClickToEdit.jsx b/src/components/ClickToEdit.jsx new file mode 100644 index 0000000..7c6ff0c --- /dev/null +++ b/src/components/ClickToEdit.jsx @@ -0,0 +1,55 @@ +const React = require('react'); + +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) { + event.preventDefault(); + this.setState({ + active: false + }); + document.removeEventListener('click', this.finalizeHandler); + }, + + render() { + const edittable = () => { + return ( +
+ +
+ ); + }; + + const inactive = () => { + return
{this.props.value}
+ }; + + return this.state.active ? edittable() : inactive(); + } +}); + +module.exports = ClickToEdit; diff --git a/src/components/GroupStatusTable.jsx b/src/components/GroupStatusTable.jsx index cb5f797..f48b5a2 100644 --- a/src/components/GroupStatusTable.jsx +++ b/src/components/GroupStatusTable.jsx @@ -1,4 +1,5 @@ const React = require('react'); +const ClickToEdit = require('./ClickToEdit.jsx'); const GroupStatusTable = React.createClass({ getDefaultProps() { @@ -12,7 +13,7 @@ const GroupStatusTable = React.createClass({ return ( {character.name} - {character.soak} + {character.defense} {character.woundThreshold} {character.wounds} From b958945b045e1d87e810f879b85c40ab5979a6d2 Mon Sep 17 00:00:00 2001 From: "Jonathan M. Lane" Date: Tue, 11 Aug 2015 03:16:11 -0300 Subject: [PATCH 3/6] browserify-shim & configuration for jQuery from CDN --- package.json | 7 ++++++- public/index.html | 1 + 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 3c68171..4367e2a 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,13 @@ "private": true, "browserify": { "transform": [ - ["babelify"] + "babelify", + "browserify-shim" ] }, + "browserify-shim": { + "jquery": "global:$" + }, "dependencies": { "express": "^4.12.4" }, @@ -21,6 +25,7 @@ "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", diff --git a/public/index.html b/public/index.html index 7ee2212..867c31b 100644 --- a/public/index.html +++ b/public/index.html @@ -21,6 +21,7 @@ + From be9b2c0e2731062fe41b3b0459931fbc40685648 Mon Sep 17 00:00:00 2001 From: "Jonathan M. Lane" Date: Tue, 11 Aug 2015 06:33:21 -0300 Subject: [PATCH 4/6] Basic ClickToEdit functionality working; todo: state persistence --- src/components/ClickToEdit.jsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/ClickToEdit.jsx b/src/components/ClickToEdit.jsx index 7c6ff0c..b55105d 100644 --- a/src/components/ClickToEdit.jsx +++ b/src/components/ClickToEdit.jsx @@ -1,4 +1,9 @@ const React = require('react'); +const $ = require('jquery'); + +const IsNodeOrAChildOf = (node, target) => { + return $(target).find(node).length > 0; +}; const ClickToEdit = React.createClass({ getDefaultProps() { @@ -24,9 +29,13 @@ const ClickToEdit = React.createClass({ }, finalizeHandler(event) { + if (IsNodeOrAChildOf(event.target, React.findDOMNode(this.refs.edittable))) { + return; + } event.preventDefault(); this.setState({ - active: false + active: false, + value: React.findDOMNode(this.refs.input).value }); document.removeEventListener('click', this.finalizeHandler); }, @@ -34,18 +43,19 @@ const ClickToEdit = React.createClass({ render() { const edittable = () => { return ( -
- +
); }; const inactive = () => { - return
{this.props.value}
+ return
{this.state.value}
}; return this.state.active ? edittable() : inactive(); From bbc57f17a56610b1581aef0bb2c537640c9a9562 Mon Sep 17 00:00:00 2001 From: "Jonathan M. Lane" Date: Tue, 11 Aug 2015 06:48:18 -0300 Subject: [PATCH 5/6] Add ClickToEdit to the other rows in the GroupStatusTable --- src/app.jsx | 18 ++++++++++++++---- src/components/GroupStatusTable.jsx | 10 +++++----- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/app.jsx b/src/app.jsx index b74826b..11a6535 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -13,22 +13,32 @@ var data = { { name: "B1-L1", player: "Bill", - career: "Bounty Hunter" + career: "Bounty Hunter", + soak: 0 }, { name: "Onin", player: "Kyle", - career: "Hired Gun" + career: "Hired Gun", + soak: 0 }, { name: "Tuck Cosmicfall", player: "Heather", - career: "Bounty Hunter" + career: "Bounty Hunter", + soak: 0 }, { name: "Prof. Bidbits", player: "Kris", - career: "Colonist" + career: "Colonist", + soak: 0 + }, + { + name: "Ralph", + player: "Richard", + career: "Colonist", + soak: 0 } ] }; diff --git a/src/components/GroupStatusTable.jsx b/src/components/GroupStatusTable.jsx index f48b5a2..d73cdfc 100644 --- a/src/components/GroupStatusTable.jsx +++ b/src/components/GroupStatusTable.jsx @@ -14,11 +14,11 @@ const GroupStatusTable = React.createClass({ {character.name} - {character.defense} - {character.woundThreshold} - {character.wounds} - {character.strainThreshold} - {character.strain} + + + + + ); }); From 5747744e80041484db308e57a47a3697e5644bb0 Mon Sep 17 00:00:00 2001 From: "Jonathan M. Lane" Date: Tue, 15 Mar 2016 18:36:19 +0000 Subject: [PATCH 6/6] Removed unused GAPI library --- public/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/public/index.html b/public/index.html index 867c31b..7ee2212 100644 --- a/public/index.html +++ b/public/index.html @@ -21,7 +21,6 @@ -