Merge pull request #311 from Rostlab/generated-heading

Generated heading

app/actions/CharactersPlodActions.js

@@ -54,16 +54,18 @@ var CharactersPlodActions = {
                     return response.data;
                 }).then(function(character){
                     Api
-                        .get('plod/bySlug/' + character.slug)
-                        .then(function (response) {
-                            var characterPlod = response.data[0];
-                            var characterWithPlod = Object.assign(character,characterPlod);
-                            charactersPlod.push(characterWithPlod);
-                            AppDispatcher.handleServerAction({
-                                actionType: Constants.RECEIVE_CHARACTERS_PLOD_BY_NAME,
-                                data: charactersPlod
-                            });
+                      .get('plod/bySlug/' + character.slug)
+                      .then(function (response) {
+                        var characterPlod = response.data.find(function (ele) {
+                          return ele.algorithm == "gotplod";
+                        });
+                        var characterWithPlod = Object.assign(character,characterPlod);
+                        charactersPlod.push(characterWithPlod);
+                        AppDispatcher.handleServerAction({
+                            actionType: Constants.RECEIVE_CHARACTERS_PLOD_BY_NAME,
+                            data: charactersPlod
                         });
+                      });
                 });
         }
     }

app/components/common/AntagonistsComp/AntagonistsComp.jsx

@@ -7,27 +7,106 @@ import BigBattle from '../BigBattle/BigBattle.jsx';
 import json from 'json!./antagonists.json';
 import MapComp from '../MapComp/MapComp.jsx';
 
+import Actions from '../../../actions/CharactersPlodActions.js';
+import Store from '../../../stores/CharactersPlodStore.js';
+
 export default class AntagonistsComp extends Component {
+  constructor (props) {
+    super(props);
+
+    // generate random Characters using json
+    let randompair = Math.floor(Math.random() * json.length);
+    let name1 = json[randompair][0];
+    let name2 = json[randompair][1];
+    let img1 = '/static/images/'+json[randompair][0].replace(/ /g,'_')+'.jpg';
+    let img2 = '/static/images/'+json[randompair][1].replace(/ /g,'_')+'.jpg';
+
+    this.state = {
+      char1: {
+        name: name1,
+        img: img1
+        },
+      char2:{
+        name: name2,
+        img: img2
+      }
+    };
+    this._onChange = this._onChange.bind(this);
+  }
+
+  componentWillMount (){
+    Store.addChangeListener(this._onChange);
+  }
+
+  componentWillUnmount(){
+    Store.removeChangeListener(this._onChange);
+  }
+
+  componentDidMount() {
+    Actions.loadCharactersPlodByName([this.state.char1.name,this.state.char2.name]);
+  }
+
+  _onChange() {
+    this.setState({
+      characters: Store.getCharactersPlodByName()
+    });
+  }
+
+  getTitle(data) {
+    if(data === undefined){
+      return;
+    }
+    let likelierDeath;
+    let notLikelyDeath;
+    if(data[0].plod >= data[1].plod) {
+      likelierDeath = data[0];
+      notLikelyDeath = data[1];
+    } else {
+      likelierDeath = data[1];
+      notLikelyDeath = data[0];
+    }
+    const likelierDeathName = likelierDeath.character.replace(/\([a-zA-Z]*\)/ig, '');
+    const notLikelyDeathName = notLikelyDeath.character.replace(/\([a-zA-Z]*\)/ig, '');
+    const titles = [
+      `${ likelierDeathName } is likelier to die than ${ notLikelyDeathName }`,
+      `${ likelierDeathName } is likelier to get whacked`,
+      `${ likelierDeathName } will surely be the first to be slain`,
+      `The future of ${ likelierDeathName } is blood and fire`,
+      `${ likelierDeathName } will surely bite the dust`,
+      `${ notLikelyDeathName } would outlive ${ likelierDeathName }`
+    ];
+    const randomTitle = Math.floor(Math.random() * titles.length);
+    return titles[randomTitle];
+  }
+
   render() {
-  let randompair = Math.floor(Math.random() * json.length);
-  let name1 = json[randompair][0];
-  let name2 = json[randompair][1];
-  let img1 = '/static/images/'+json[randompair][0].replace(/ /g,'_')+'.jpg';
-  let img2 = '/static/images/'+json[randompair][1].replace(/ /g,'_')+'.jpg';
-  return (
-    <div>
-      <Grid>
-        <Row>
-          <Col>
-            <h1 className="text-center">Who will be the next eliminated?</h1>
-            <BigBattle name1={name1} name2={name2} img1={img1} img2={img2} />
-            <br />
-            <h3>{name1}'s and {name2}'s location-history on a map:</h3>
-            <MapComp character={[name1, name2]}/>
-          </Col>
-        </Row>
-      </Grid>
-    </div>
+    let name1 = this.state.char1.name;
+    let name2 = this.state.char2.name;
+    let img1 = this.state.char1.img;
+    let img2 = this.state.char2.img;
+    let plod1 = 0,plod2 = 0;
+    if (this.state.characters != undefined) {
+      plod1 = this.state.characters.find(function(ele) {
+        return ele.character === name1;
+      }).plod;
+      plod2 = this.state.characters.find(function(ele) {
+        return ele.character === name2;
+      }).plod;
+    }
+    return (
+      <div>
+        <Grid>
+          <Row>
+            <Col>
+              <h1 className="text-center">{this.getTitle(this.state.characters)}</h1>
+              <BigBattle name1={name1} name2={name2} img1={img1} img2={img2} plod1={plod1} plod2={plod2}/>
+              <br />
+              <h3>{name1}'s and {name2}'s location-history on a map:</h3>
+              <MapComp character={[name1, name2]}/>
+            </Col>
+          </Row>
+        </Grid>
+      </div>
     );
   }
 }

app/components/common/AntagonistsComp/antagonists.json

@@ -6,14 +6,14 @@
   ["Tyrion Lannister","Petyr Baelish"],
   ["Melisandre","Davos Seaworth"],
   ["Cersei Lannister","Margaery Tyrell"],
-  ["Robert Baratheon","Rhaegar Targeryan"],
+  ["Robert Baratheon","Rhaegar Targaryen"],
   ["Eddard Stark","Tywin Lannister"],
   ["Daenerys Targaryen","Tyrion Lannister"],
   ["Daenerys Targaryen","Euron Greyjoy"],
   ["Aeron Greyjoy","Euron Greyjoy"],
   ["Brandon Stark","Brynden Rivers"],
   ["Jorah Mormont","Daenerys Targaryen"],
-  ["Cersei Lannister","The High Sparrow"],
+  ["Cersei Lannister","High Sparrow"],
   ["Bowen Marsh","Jon Snow"],
   ["Tyrion Lannister","Jaime Lannister"]
 ]

app/components/common/BigBattle/BigBattle.jsx

@@ -43,14 +43,14 @@ export default class BigBattle extends Component {
             <h3>
               <Link to={'/characters/' + this.props.name1}>{this.props.name1}</Link>
             </h3>
-            <p>PLOD: 70%</p>
+            <p>PLOD: {this.props.plod1}%</p>
 
           </Col>
           <Col xs={6}>
             <h3>
               <Link to={'/characters/' + this.props.name2}>{this.props.name2}</Link>
             </h3>
-            <p>PLOD: 50%</p>
+            <p>PLOD: {this.props.plod2}%</p>
           </Col>
         </Row>
         <p><em>PLOD</em> is the <strong>likelihood of death</strong> of a character. Learn more about how we calculate this score <a href="/machine-learning-algorithm-predict-death-game-of-thrones">here</a>.</p>
@@ -73,5 +73,7 @@ BigBattle.propTypes = {
   name1: React.PropTypes.string.isRequired,
   name2: React.PropTypes.string.isRequired,
   img1: React.PropTypes.string,
-  img2: React.PropTypes.string
+  img2: React.PropTypes.string,
+  plod1: React.PropTypes.number.isRequired,
+  plod2: React.PropTypes.number.isRequired
 };

app/stores/CharactersPlodStore.js

@@ -5,23 +5,32 @@ var assign = require('object-assign');
 
 
 var  _charactersPlod = [];
-var _characterPlod = {};
+var _charactersPlodByName = [];
+var _characterPlodByName = {};
 
 function setCharactersPlod(data) {
     _charactersPlod = data;
 }
 
-function setCharacterPlod(data){
-    _characterPlod = data;
+function setCharactersPlodByName(data){
+    _charactersPlodByName = data;
+}
+
+function setCharacterPlodByName(data){
+    _characterPlodByName = data;
 }
 
 var CharactersPlodStore = assign({}, EventEmitter.prototype, {
 
     getCharactersPlod: function() {
         return _charactersPlod;
     },
-    getCharacterPlod: function() {
-        return _characterPlod;
+    getCharactersPlodByName: function() {
+        return _charactersPlodByName;
+    },
+
+    getCharacterPlodByName: function() {
+        return _characterPlodByName;
     },
 
     emitChange: function() {
@@ -45,7 +54,10 @@ CharactersPlodStore.dispatchToken = AppDispatcher.register(function (payload) {
             setCharactersPlod(action.data);
             break;
         case Constants.RECEIVE_CHARACTER_PLOD_BY_NAME:
-            setCharacterPlod(action.data);
+            setCharacterPlodByName(action.data);
+            break;
+        case Constants.RECEIVE_CHARACTERS_PLOD_BY_NAME:
+            setCharactersPlodByName(action.data);
             break;
         default:
             return true;