[in progress] mugic/tribe pages

src/components/Category/Creatures.js

@@ -58,7 +58,9 @@ export default class Creatures extends React.Component {
       const creatures = Object.keys(this.state.creatures).map(function(tribe, i) {
         return (
           <div key={i}>
-            <span>{tribe}</span>
+            <Interactive as="a" {...s.link}
+              href={"/portal/Mipedian"+tribe}
+            ><span>{tribe}</span></Interactive>
             {list_creatures(tribe)}
             <hr />
           </div>

src/components/Category/Mugic.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import UnderConstruction from '../UnderConstruction';
+
+export default class Mugic extends React.Component {
+
+  constructor(props) {
+    super (props);
+    this.tribe = '';
+    this.state = {mugic: {}};
+  }
+
+  componentDidMount() {
+    if (this.props.children) return;
+    var self = this;
+    let urls = (this.tribe == "All") ? API.Mugic : {[this.tribe]: API.Mugic[this.tribe]};
+    // For each tribe, get its spreadsheet, set the state
+    Object.keys(urls).map((tribe) => {
+      API.getSpreadsheet(urls[tribe], function(data) {
+        self.setState({mugic: Object.assign(self.state.mugic, {[tribe]: data})});
+      });
+    });
+  }
+
+  render() {
+    if (this.props.children) {
+      return (<div>{this.props.children}</div>);
+    }
+    let path = this.props.location.pathname.split("/");
+    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
+    // ** Process the tribe ** //
+    // /portal/Mugic/
+    // /portal/{Tribe}/Mugic/
+    // The first / gets counted
+
+    return (
+      <UnderConstruction location={this.props.location}/>
+    );
+
+    // Map creatures of the tribe
+    function list_Mugic(tribe) {
+      if (!self.state.Mugic[tribe]) {
+        return (<span>Loading...</span>);
+      }
+      else return self.state.Mugic[tribe].map((mugic, i) => {
+        return (
+          <div key={i}>
+            <Interactive as="a" {...s.link} href={"Mugic/"+mugic.gsx$name.$t}><span>{mugic.gsx$name.$t}</span></Interactive>
+          </div>
+        );
+      });
+    }
+  }
+}

src/components/Category/Tribes.js

@@ -19,16 +19,23 @@ export default class Tribes extends React.Component {
 
   constructor(props) {
     super (props);
-    console.log(props);
   }
 
   render() {
+    if (this.props.children) {
+      return (<div>{this.props.children}</div>);
+    }
+    let path = this.props.location.pathname.split("/");
+    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
     return (
-      <div>
-      {this.props.children||
-        <UnderConstruction location={this.props.location}/>
-      }
-      </div>
+      <UnderConstruction location={this.props.location}/>
     );
+
+    // return (<div>
+    //   <Interactive as="a" {...s.link} href={"Mugic"}><span>{}</span></Interactive>
+    //   <Interactive as="a" {...s.link} href={"Mugic/"+mugic.gsx$name.$t}><span>{mugic.gsx$name.$t}</span></Interactive>
+    //   </div>
+    // );
   }
 }

src/components/Home.js

@@ -19,20 +19,20 @@ function Home() {
       >Creatures</Interactive>
       <br />
       <Interactive as="a" {...s.link}
-        href="/portal/Danian/Creatures"
-      >Danian Creatures</Interactive>
+        href="/portal/Danian"
+      >Danian</Interactive>
       <br />
       <Interactive as="a" {...s.link}
-        href="/portal/Overworld/Creatures"
-      >Overworld Creatures</Interactive>
+        href="/portal/Overworld"
+      >Overworld</Interactive>
       <br />
       <Interactive as="a" {...s.link}
-        href="/portal/Underworld/Creatures"
-      >Underworld Creatures</Interactive>
+        href="/portal/Underworld"
+      >Underworld</Interactive>
       <br />
       <Interactive as="a" {...s.link}
-        href="/portal/Mipedian/Creatures"
-      >Mipedian Creatures</Interactive>
+        href="/portal/Mipedian"
+      >Mipedian</Interactive>
       <br />
       {/*<p style={s.p}>
         This is an example single page app built

src/components/Spreadsheet.js

@@ -49,9 +49,17 @@ class URLS {
       'Overworld': URLS.path("1Z4_MmlV7uE34nLzrcxslqQKRwL4OBXNA15s7G8eteXU"),
       'Underworld': URLS.path("1c_XAxQsDIWVdzUxWl5t-K_mQumNjX-yrg0X-0NsZVts"),
       'Mipedian': URLS.path("1P4FKASfnhR46j2bqm89T9xhI1Yyyy-jiZ1CkRglSy2k"),
-      'Danian': URLS.path("1-Lz-itwOobEvqr8HSLFFwg3JFkT64NbwyGFEPfj9rxU"),
-      // 'Marrillian': URLS.path("1rLlzND9hHgxJuEtcTE4nbIVb16IjRme8V-I4vyryIEU"),
-      // 'Generic': URLS.path("1pnDahSxGDNKvDmwRfYF4Cd75q5plmtb9tvGvU7RM05g")
+      'Danian': URLS.path("1-Lz-itwOobEvqr8HSLFFwg3JFkT64NbwyGFEPfj9rxU")
+    };
+  }
+
+  get Mugic() {
+    return {
+      'Overworld': URLS.path("1KsVX5SkygwPP6I8yd6xgcN8gB746o_FTh6SK1TvAcbU"),
+      'Underworld': URLS.path("1F7FHlob52cb_7J65cddM3The7w-kFiStBRd5wm4JRlA"),
+      'Mipedian': URLS.path("1QDsiSUuBV_4Jn6mvl96EGU06XEoVqILGN4suYKvh9CA"),
+      'Danian': URLS.path("1tEuwPGixJH2A03YtYL6Ar-MSFvtfrlaveT98GwJhw1g"),
+      'Generic': URLS.path("1M9iAbpYAHq_ppwm0PZKUvZGfu-zbrK1CZMY16m4Plf8")
     };
   }
 

src/index.js

@@ -13,7 +13,7 @@ import ExampleTwoDeepComponent from './components/ExampleTwoDeepComponent';
 // import Battlegear from './component/Category/Battlegear';
 import Creatures from './components/Category/Creatures';
 // import Locations from './component/Category/Locations';
-// import Mugic from './component/Category/Mugic';
+import Mugic from './components/Category/Mugic';
 import Tribes from './components/Category/Tribes';
 // import SingleAttack from './component/Category/Attacks';
 // import SingleBattlegear from './component/Category/Battlegear';