[add] creature data from spreadsheet

src/components/App.js

@@ -125,8 +125,10 @@ function App({ children, routes }) {
                         <div className="content-area-right-repeat-y">
                           <div style={{margin: "0 8px 0 10px"}}>
                             <div id="player" style={{textAlign: "center"}}>
+                              {/*
                               <br />
                               <h1 style={s.title}>Single Page Apps for GitHub Pages</h1>
+                              */}
                               <nav style={s.mapMenu}>
                                 {generateMapMenu()}
                               </nav>

src/components/Category/Creatures.js

@@ -1,25 +1,22 @@
 import React from 'react';
 import URLS from '../Spreadsheet';
+import UnderConstruction from '../UnderConstruction';
 
 export default class Creatures extends React.Component {
-  children;
 
   constructor(props) {
     super (props);
     console.log(props);
-    this.children = props.children;
-    this.state = {creatures: []}
   }
 
   componentDidMount() {
-
   }
 
   render() {
     return (
       <div>
-      {this.children||
-        <div>creatures</div>
+      {this.props.children||
+        <UnderConstruction location={this.props.location}/>
       }
       </div>
     );

src/components/Category/Tribes.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import PageNotFound from '../PageNotFound';
-import URLS from '../Spreadsheet';
+import UnderConstruction from '../UnderConstruction';
 
 // This module handles tribe pages and subpages
 // Allows for urls such as
@@ -17,23 +16,17 @@ import URLS from '../Spreadsheet';
 // -> /{Tribe}/Mugic || /{Tribe}/Creatures
 
 export default class Tribes extends React.Component {
-  children;
 
   constructor(props) {
     super (props);
     console.log(props);
-    this.children = props.children;
-    this.state = {creatures: []}
-  }
-
-  componentDidMount() {
   }
 
   render() {
     return (
       <div>
-      {this.children||
-        <div>tribes</div>
+      {this.props.children||
+        <UnderConstruction location={this.props.location}/>
       }
       </div>
     );

src/components/Single/Creature.js

@@ -1,59 +1,95 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 // import {browserHistory} from 'react-router';
 import PageNotFound from '../PageNotFound';
 import Tribes from '../Category/Tribes';
 import UnderConstruction from '../UnderConstruction';
+import API from '../Spreadsheet';
 
-const propTypes = {
-  location: PropTypes.object.isRequired,
-  children: PropTypes.element,
-};
 
-function SingleCreature() {
-  let path = location.pathname.split("/");
-  if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+export default class SingleCreature extends React.Component {
 
-  // ** Process the tribe ** //
-  // /portal/Creatures/{Tribe}/{Name}
-  // /portal/{Tribe}/Creatures/{Name}
-  // The first / gets counted
-  if ( path.length !== 5 )
-  {
-    //PageNotFound
-    return(<PageNotFound location={location}/>);
-    //return(browserHistory.push('/PageNotFound'));
+  constructor(props) {
+    super (props);
+    this.location = props.location;
+    this.url = '';
+    this.state = {creatures: []}
   }
 
-  let Tribe = "";
-
-  //Handle both url layouts
-  if (path[2] === "Creatures") Tribe = path[3];
-  if (path[3] === "Creatures") Tribe = path[2];
-
-  // TODO
-  // Get spreadsheet data based on tribe/name
-  switch (Tribe) {
-    case 'Overworld':
-    case 'Underworld':
-    case 'Mipedian':
-    case 'Danian':
-    case 'Marrillian':
-    case 'Generic':
-      return(
-        <div><UnderConstruction location={location}/>
-        {path[4]}
-        </div>
-      );
-      break;
-    default:
-      return(<PageNotFound location={location}/>);
-      break;
+  componentDidMount() {
+    var self = this;
+    API.getSpreadsheet(this.url, function(data) {
+      console.log(data);
+      self.setState({creatures: data });
+    });
   }
 
-  return (<div className={Tribe}>test</div>);
+  render() {
+    let path = this.location.pathname.split("/");
+    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
+    // ** Process the tribe ** //
+    // /portal/Creatures/{Tribe}/{Name}
+    // /portal/{Tribe}/Creatures/{Name}
+    // The first / gets counted
+    if ( path.length !== 5 )
+    {
+      return(<PageNotFound location={this.location}/>);
+      //return(browserHistory.push('/PageNotFound'));
+    }
+
+    let tribe = "";
+    // return (<div className={Tribe}>test</div>);
+
+    //Handle both url layouts
+    if (path[2] === "Creatures") tribe = path[3];
+    if (path[3] === "Creatures") tribe = path[2];
+
+    // Get spreadsheet data based on tribe/name
+    switch (tribe) {
+      case 'Overworld':
+        this.url = API.Creature_Overworld;
+        break;
+      case 'Underworld':
+      case 'Mipedian':
+      case 'Danian':
+      case 'Marrillian':
+      case 'Generic':
+        break;
+      default:
+        return(<PageNotFound location={this.location}/>);
+    }
+
+    // TODO
+    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;
+    });
+
+    if (creature == null) {
+      return(<PageNotFound location={this.location}/>);
+    }
+
+    return(
+      <div className={"creature " + tribe.toLowerCase()}>
+        <UnderConstruction location={this.location}/>
+        {creature.gsx$name.$t}
+        <img className="splash" src={API.image + creature.gsx$splash.$t}></img>
+        <p>{creature.gsx$appearance.$t}</p>
+        <p>{creature.gsx$background.$t}</p>
+        <p>{creature.gsx$details.$t}</p>
+        <p>{creature.gsx$favoritebattlegear.$t}</p>
+        <p>{creature.gsx$favoritelocation.$t}</p>
+        <p>{creature.gsx$heightfeetinch.$t}</p>
+        <p>{creature.gsx$specialabilities.$t}</p>
+        <p>{creature.gsx$weightpounds.$t}</p>
+      </div>
+    );
+  }
 }
 
-SingleCreature.propTypes = propTypes;
-
-export default SingleCreature;
+// const creature = this.state.creature.map((item, i) => {
+//   return (
+//     <div>{item.title.$t}</div>
+//   );
+// });

src/components/Spreadsheet.js

@@ -6,6 +6,9 @@ class URLS {
   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="; }
+
   constructor() {}
 
   // Singleton
@@ -22,22 +25,26 @@ class URLS {
       return URLS.instance;
   }
 
-  static getSpreedsheet(spreadsheet) {
+  getSpreadsheet(spreadsheet, callback) {
     fetch(spreadsheet)
       .then(function(response) {
         return response.json();
       }).then(function(json) {
-        return json.feed.entry;
+        return callback(json.feed.entry);
       }).catch(function(err) {
         console.log('parsing failed', err);
-        return null;
-      })
+        return callback(null);
+      });
   }
 
   static path(spreadsheetID) {
     return URLS.base_url + spreadsheetID + URLS.data_format;
   }
 
+  get Creature_Card_Data() {
+    return URLS.path("1fUFYhG1NLLkSTzrdbevm6ZMKNP6xLiKUZvM1sY10pVI");
+  }
+
   get Creature_Overworld() {
     return URLS.path("1Z4_MmlV7uE34nLzrcxslqQKRwL4OBXNA15s7G8eteXU");
   }

src/css/legacy.css

@@ -1,3 +1,14 @@
+/* Creatures */
+#player {
+  width: calc(100% - 20px);
+  margin: 0 10px;
+}
+
+.creature .splash {
+  width: 100%;
+  display: block;
+}
+
 /*-------------- Content Formatting --------------*/
 /*------------------------------------------------------*/
 .shift-txt-tenR {margin-left:10px;}
@@ -77,10 +88,11 @@
 }
 /*-------------- Center Column --------------*/
 .center-column {
-  width:60% !important;
+  width: 80% !important;
+  margin: 0 auto;
+  /*float:left;*/
   /*width:392px !important;*/
-  margin:0 6px 0 6px;
-  float:left;
+  /*margin:0 6px 0 6px;*/
 }
 /*-------------- Right Column --------------*/
 .right-column {