Mugic Category Page

src/components/CollectionDB.js

@@ -80,7 +80,11 @@ export default class CollectionDB {
 
   }
 
-  setupMugic(tribe) {
+  // Portal or Cards
-
+  setupMugic(tribe="Generic") {
+    this.setup(this.api.urls.Mugic[tribe], (data) => {
+      this.mugic.insert(data);
+      this.built.push("mugic_"+tribe);
+    });
   }
 }

src/components/portal/Category/Creatures.js

@@ -4,7 +4,6 @@ import { Link } from 'react-router';
 import PageNotFound from '../../PageNotFound';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
-import UnderConstruction from '../../UnderConstruction';
 import {observer, inject} from 'mobx-react';
 
 @inject((stores, props, context) => props) @observer
@@ -45,12 +44,12 @@ export default class Creatures extends React.Component {
           >Danian</Interactive>
           <br />
           <Interactive as={Link} {...s.link}
-            to="/portal/Creatures/Overworld"
+            to="/portal/Creatures/OverWorld"
-          >Overworld</Interactive>
+          >OverWorld</Interactive>
           <br />
           <Interactive as={Link} {...s.link}
-            to="/portal/Creatures/Underworld"
+            to="/portal/Creatures/UnderWorld"
-          >Underworld</Interactive>
+          >UnderWorld</Interactive>
           <br />
           <Interactive as={Link} {...s.link}
             to="/portal/Creatures/Mipedian"

src/components/portal/Category/Mugic.js

@@ -1,20 +1,90 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import UnderConstruction from '../../UnderConstruction';
 import PageNotFound from '../../PageNotFound';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
+import UnderConstruction from '../../UnderConstruction';
+import {observer, inject} from 'mobx-react';
 
+@inject((stores, props, context) => props) @observer
 export default class Mugic extends React.Component {
 
   render() {
     if (this.props.children) {
       return (<div>{this.props.children}</div>);
     }
-    return (
+    const store = API;
-      <UnderConstruction location={this.props.location}/>
+
-    );
+    let path = this.props.location.pathname.split("/");
+    if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+
+    let tribe = (() => {
+      if (path.length !== 4) return "None";
+      if (path[2] === "Mugic") return path[3];
+      if (path[3] === "Mugic") return path[2];
+    })();
+
+    if (store.urls === null ||
+      store.portal === null ||
+      store.cards === null) {
+      return (<span>Loading...</span>);
+    }
+
+    // If there isn't a supported tribe,
+    // Displays list of tribes
+    if (!store.urls.Mugic.hasOwnProperty(tribe)) {
+      return(
+        <div>
+          <Interactive as={Link} {...s.link}
+            to="/portal/Mugic/Generic"
+            >Generic</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Mugic/Danian"
+          >Danian</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Mugic/OverWorld"
+          >OverWorld</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Mugic/UnderWorld"
+          >UnderWorld</Interactive>
+          <br />
+          <Interactive as={Link} {...s.link}
+            to="/portal/Mugic/Mipedian"
+          >Mipedian</Interactive>
+        </div>
+      );
+    }
+
+    if (!store.cards.built.includes("mugic_Cards")) {
+      store.cards.setupMugic("Cards");
+      return (<span>Loading...</span>);
+    }
+
+    if (!store.portal.built.includes("mugic_"+tribe)) {
+      store.portal.setupMugic(tribe);
+      return (<span>Loading...</span>);
+    }
+
+    const mugic = store.portal.mugic.find({'gsx$tribe': tribe});
+    const output = mugic.map((single_mugic, i) => {
+      const card_data = store.cards.mugic.findOne({'gsx$name': single_mugic.gsx$name});
+      return (
+        <div key={i}>
+          <Interactive as={Link} {...s.link}
+            to={'/portal/Mugic/'+tribe+'/'+single_mugic.gsx$name}
+          >
+            <span>{single_mugic.gsx$name}</span><br />
+            {/* TODO <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img> */}
+          </Interactive>
+        </div>
+      );
+    });
+
+    return (<div>{output}</div>);
   }
 
   fakerender() {

src/components/portal/Home.js

@@ -10,6 +10,9 @@ export default function PortalHome() {
         to="/portal/Creatures"
       >Creatures</Interactive>
       <br />
+      <Interactive as={Link} {...s.link}
+        to="/portal/Mugic"
+      >Mugic</Interactive>
     </div>
   );
 }

src/components/portal/Single/Mugic.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
+import PageNotFound from '../../PageNotFound';
+import API from '../../SpreadsheetData';
+import s from '../../../styles/app.style';
+import {observer, inject} from 'mobx-react';
+import UnderConstruction from '../../UnderConstruction';
+
+@inject((stores, props, context) => props) @observer
+export default class SingleCreature extends React.Component {
+
+  render() {
+    return (
+      <UnderConstruction location={this.props.location}/>
+    );
+  }
+}

src/index.js

@@ -20,16 +20,17 @@ import CollectionHome from './components/collection/Home';
 /* Portal */
 import PortalHome from './components/portal/Home';
 // import Attacks from './components/portal/Category/Attacks';
-// import Battlegear from './components/portal/Category/Battlegear';
-import Creatures from './components/portal/Category/Creatures';
-// import Locations from './components/portal/Category/Locations';
-import Mugic from './components/portal/Category/Mugic';
-import Tribes from './components/portal/Category/Tribes';
 // import SingleAttack from './components/portal/Category/Attacks';
+// import Battlegear from './components/portal/Category/Battlegear';
 // import SingleBattlegear from './components/portal/Category/Battlegear';
+import Creatures from './components/portal/Category/Creatures';
 import SingleCreature from './components/portal/Single/Creature';
+// import Locations from './components/portal/Category/Locations';
 // import SingleLocation from './components/portal/Category/Locations';
-// import SingleMugic from './components/portal/Category/Mugic';
+import Mugic from './components/portal/Category/Mugic';
+import SingleMugic from './components/portal/Single/Mugic';
+import Tribes from './components/portal/Category/Tribes';
+
 
 const routes = (
   <Route path="/" component={App} mapMenuTitle="Home">
@@ -55,111 +56,111 @@ const routes = (
       <IndexRoute component={PortalHome} />
 
       {/* Attacks */}
-      <Route path="Attacks" component={UnderConstruction} mapMenuTitle="Attacks">
+      <Route path="Attacks" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,2)}>
         <Route path="*" component={UnderConstruction} />
       </Route>
 
       {/* Battlegear */}
-      <Route path="Battlegear" component={UnderConstruction} mapMenuTitle="Battlegear">
+      <Route path="Battlegear" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,2)}>
         <Route path="*" component={UnderConstruction} />
       </Route>
 
       {/* Locations */}
-      <Route path="Locations" component={UnderConstruction} mapMenuTitle="Locations">
+      <Route path="Locations" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,2)}>
         <Route path="*" component={UnderConstruction} />
       </Route>
 
       {/* Creatures */}
-      <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
+      <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,2)}>
-        <Route path="Overworld" component={Creatures} mapMenuTitle="Overworld">
+        <Route path="OverWorld" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Underworld" component={Creatures} mapMenuTitle="Underworld">
+        <Route path="UnderWorld" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mipedian" component={Creatures} mapMenuTitle="Mipedian">
+        <Route path="Mipedian" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Danian" component={Creatures} mapMenuTitle="Danian">
+        <Route path="Danian" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
       </Route>
 
       {/* Mugic */}
-      <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+      <Route path="Mugic" component={Mugic} mapMenuTitle={mapMenuTitle(location,2)}>
-        <Route path="Overworld" component={Tribes} mapMenuTitle="Overworld">
+        <Route path="OverWorld" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
-        <Route path="Underworld" component={Tribes} mapMenuTitle="Underworld">
+        <Route path="UnderWorld" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
-        <Route path="Mipedian" component={Tribes} mapMenuTitle="Mipedian">
+        <Route path="Mipedian" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
-        <Route path="Danian" component={Tribes} mapMenuTitle="Danian">
+        <Route path="Danian" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
-        <Route path="Generic" component={Tribes} mapMenuTitle="Generic">
+        <Route path="Generic" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
+          <Route path="*" component={SingleMugic} />
+        </Route>
+      </Route>
+
+      {/* OverWorld */}
+      <Route path="OverWorld" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
+        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
+          <Route path="*" component={SingleCreature} />
+        </Route>
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={UnderConstruction} />
         </Route>
       </Route>
 
-      {/* Overworld */}
+      {/* UnderWorld */}
-      <Route path="Overworld" component={Tribes} mapMenuTitle="Overworld">
+      <Route path="UnderWorld" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
-        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
+        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
-          <Route path="*" component={UnderConstruction} />
-        </Route>
-      </Route>
-
-      {/* Underworld */}
-      <Route path="Underworld" component={Tribes} mapMenuTitle="Underworld">
-        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
-          <Route path="*" component={SingleCreature} />
-        </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
           <Route path="*" component={UnderConstruction} />
         </Route>
       </Route>
 
       {/* Mipedian */}
-      <Route path="Mipedian" component={Tribes} mapMenuTitle="Mipedian">
+      <Route path="Mipedian" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
-        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
+        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={UnderConstruction} />
         </Route>
       </Route>
 
       {/* Danian */}
-      <Route path="Danian" component={Tribes} mapMenuTitle="Danian">
+      <Route path="Danian" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
-        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
+        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={UnderConstruction} />
         </Route>
       </Route>
 
       {/* M'arrillian */}
-      <Route path="Marrillian" component={Tribes} mapMenuTitle="Marrillian">
+      <Route path="Marrillian" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
-        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
+        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={UnderConstruction} />
         </Route>
       </Route>
 
       {/* Generic */}
-      <Route path="Generic" component={Tribes} mapMenuTitle="Generic">
+      <Route path="Generic" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
-        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
+        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle="Mugic">
+        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
           <Route path="*" component={UnderConstruction} />
         </Route>
       </Route>
@@ -171,6 +172,11 @@ const routes = (
   </Route>
 );
 
+function mapMenuTitle(location, depth=1) {
+  let path = location.pathname.split("/");
+  if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
+  return path[depth];
+}
 
 render(
   <Router