[add] icons; card_data

src/components/Category/Creatures.js

@@ -13,6 +13,12 @@ export default class Creatures extends React.Component {
   }
 
   render() {
+    // const creature = this.state.creatures.map((item, i) => {
+    //   return (
+    //     <div>{item.title.$t}</div>
+    //   );
+    // });
+
     return (
       <div>
       {this.props.children||

src/components/Single/Creature.js

@@ -1,10 +1,12 @@
 import React from 'react';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
 // import {browserHistory} from 'react-router';
 import PageNotFound from '../PageNotFound';
 import Tribes from '../Category/Tribes';
 import UnderConstruction from '../UnderConstruction';
 import API from '../Spreadsheet';
-
+import s from '../../styles/app.style';
 
 export default class SingleCreature extends React.Component {
 
@@ -12,14 +14,21 @@ export default class SingleCreature extends React.Component {
     super (props);
     this.location = props.location;
     this.url = '';
-    this.state = {creatures: []}
+    this.creature = '';
+    this.state = {creature: null, card_data: null};
   }
 
   componentDidMount() {
     var self = this;
     API.getSpreadsheet(this.url, function(data) {
-      // console.log(data);
-      self.setState({creatures: data });
+      data.map((item, i) => {
+        if (item.title.$t == self.creature) self.setState({creature: item });
+      });
+    });
+    API.getSpreadsheet(API.Creatures_Card_Data, function(data) {
+      data.map((item, i) => {
+        if (item.title.$t == self.creature) self.setState({card_data: item });
+      });
     });
   }
 
@@ -47,7 +56,7 @@ export default class SingleCreature extends React.Component {
     // Get spreadsheet data based on tribe/name
     switch (tribe) {
       case 'Overworld':
-        this.url = API.Creature_Overworld;
+        this.url = API.Overworld_Creatures;
         break;
       case 'Underworld':
       case 'Mipedian':
@@ -59,26 +68,34 @@ export default class SingleCreature extends React.Component {
         return(<PageNotFound location={this.location}/>);
     }
 
-    var creature = null;
-    this.state.creatures.map((item, i) => {
-      // console.log(item.title, path[4], item.title.$t == path[4]);
-      if (item.title.$t == path[4]) creature = item;
-    });
+    // confusing, this.creature is a string for the api call,
+    // creature is the object to be used in the jsx
+    this.creature = path[4];
+    var creature = this.state.creature;
+    var card_data = this.state.card_data;
 
-    if (creature == null) {
+    // console.log(this.state.creature);
+    if (creature == null || card_data == null) {
       return(<PageNotFound location={this.location}/>);
     }
+    // console.log(this.state.card_data);
 
-    // const creature = this.state.creature.map((item, i) => {
-    //   return (
-    //     <div>{item.title.$t}</div>
-    //   );
-    // });
+    const elements = card_data.gsx$elements.$t.split(/[ ,]+/).map((item, i) => {
+      return <img className="icon" src={"/portal/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
+    });
+
+    const locations = creature.gsx$location.$t.split(/[,]+\s*/).map((item, i) => {
+      return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Locations/"+item}><span>{item}</span></Interactive></p>;
+    });
+
+    const battlegear = creature.gsx$battlegear.$t.split(/[,]+\s*/).map((item, i) => {
+      return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Battlegear/"+item}><span>{item}</span></Interactive></p>;
+    });
 
     return(
       <div className={"creature " + tribe.toLowerCase()}>
         <h1>{creature.gsx$name.$t}</h1>
-        <img className="splash" src={API.image + creature.gsx$splash.$t}></img>
+        <img className="splash" src={API.base_image + creature.gsx$splash.$t}></img>
         <hr />
         <div>
           <strong>Appearance:</strong><br />
@@ -97,12 +114,12 @@ export default class SingleCreature extends React.Component {
         <hr />
         <div>
           <strong>Favorite Battlegear(s):</strong><br />
-          {creature.gsx$battlegear.$t}
+          {battlegear}
         </div>
         <hr />
         <div>
           <strong>Favorite Location(s):</strong><br />
-          {creature.gsx$location.$t}
+          {locations}
         </div>
         <hr />
         <div>
@@ -119,6 +136,70 @@ export default class SingleCreature extends React.Component {
           <strong>Weight (lb):</strong><br />
           {creature.gsx$weight.$t}
         </div>
+        <hr />
+        <div>
+          <strong>Card ID: </strong>
+          {card_data.gsx$cardid.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Set: </strong>
+          {card_data.gsx$set.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Rarity: </strong>
+          {card_data.gsx$rarity.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Tribe: </strong>{tribe}
+          <img className="icon" src={"/portal/src/img/icons/tribes/"+tribe.toLowerCase()+".png"}></img>
+        </div>
+        <hr />
+        <div>
+          <strong>Ability:</strong><br />
+          {card_data.gsx$ability.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Courage: </strong>
+          {card_data.gsx$courage.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Elements: </strong>{elements}
+        </div>
+        <hr />
+        <div>
+          <strong>Energy: </strong>
+          {card_data.gsx$energy.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Flavortext:</strong><br />
+          {card_data.gsx$flavortext.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Mugic Ability: </strong>
+          {card_data.gsx$mugicability.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Power: </strong>
+          {card_data.gsx$power.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Speed: </strong>
+          {card_data.gsx$speed.$t}
+        </div>
+        <hr />
+        <div>
+          <strong>Wisdom: </strong>
+          {card_data.gsx$wisdom.$t}
+        </div>
       </div>
     );
   }

src/components/Spreadsheet.js

@@ -5,9 +5,7 @@ class URLS {
   static base_url = "https://spreadsheets.google.com/feeds/list/";
   static data_format = "/od6/public/values?alt=json";
   // + "/od6/public/basic?alt=json"; // Alternate data format
-
-  // base url for image
-  get image() { return "https://drive.google.com/uc?id="; }
+  get base_image() { return "https://drive.google.com/uc?id="; }
 
   constructor() {}
 
@@ -41,14 +39,38 @@ class URLS {
     return URLS.base_url + spreadsheetID + URLS.data_format;
   }
 
-  get Creature_Card_Data() {
+  /* Creatures */
+  get Creatures_Card_Data() {
     return URLS.path("1fUFYhG1NLLkSTzrdbevm6ZMKNP6xLiKUZvM1sY10pVI");
   }
 
-  get Creature_Overworld() {
+  get Danian_Creatures() {
+    return URLS.path("1-Lz-itwOobEvqr8HSLFFwg3JFkT64NbwyGFEPfj9rxU");
+  }
+
+  get Generic_Creatures() {
+    return URLS.path("1pnDahSxGDNKvDmwRfYF4Cd75q5plmtb9tvGvU7RM05g");
+  }
+
+  get Marrillian_Creatures() {
+    return URLS.path("1rLlzND9hHgxJuEtcTE4nbIVb16IjRme8V-I4vyryIEU");
+  }
+
+  get Mipedian_Creatures() {
+    return URLS.path("1P4FKASfnhR46j2bqm89T9xhI1Yyyy-jiZ1CkRglSy2k");
+  }
+
+  get Overworld_Creatures() {
     return URLS.path("1Z4_MmlV7uE34nLzrcxslqQKRwL4OBXNA15s7G8eteXU");
   }
 
+  get Underworld_Creatures() {
+    return URLS.path("1c_XAxQsDIWVdzUxWl5t-K_mQumNjX-yrg0X-0NsZVts");
+  }
+
+
+
+
 }
 
 export default URLS.getInstance();