finalized route changes

src/components/Snippets.js

@@ -3,7 +3,7 @@ import API from './SpreadsheetData';
 import {observable} from "mobx";
 import {observer, inject} from 'mobx-react';
 import processString from 'react-process-string';
-import s from '../styles/pageNotFound.style';
+import s from '../styles/app.style';
 
 export function UnderConstruction(props) {
   return (

src/components/portal/Category/Attacks.js

@@ -10,38 +10,37 @@ import Attack from '../Single/Attack';
 export default class Attacks extends React.Component {
 
   render() {
-    const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("attacks_cards")) {
-      store.cards.setupAttacks("cards");
+    if (!API.cards.built.includes("attacks_cards")) {
+      API.cards.setupAttacks("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("attacks_portal")) {
-      store.portal.setupAttacks("portal");
+    if (!API.portal.built.includes("attacks_portal")) {
+      API.portal.setupAttacks("portal");
       return (<span>Loading...</span>);
     }
 
-    const attacks = store.portal.attacks.data;
+    const attacks = API.portal.attacks.data;
 
     const output = attacks.map((attack, i) => {
-      const card_data = store.cards.attacks.findOne({'gsx$name': attack.gsx$name});
+      const card_data = API.cards.attacks.findOne({'gsx$name': attack.gsx$name});
       return (
         <div key={i}>
           <Interactive as={Link} {...s.link}
             to={'/portal/Attacks/'+attack.gsx$name}
           >
             <span>{attack.gsx$name}</span><br />
-            <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
+            <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
           </Interactive>
         </div>
       );

src/components/portal/Category/Battlegear.js

@@ -10,38 +10,38 @@ import SingleBattlegear from '../Single/Battlegear';
 export default class Battlegear extends React.Component {
 
     render() {
-      const store = API;
+
 
       let path = this.props.location.pathname.split("/");
       if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-      if (store.urls === null ||
-        store.portal === null ||
-        store.cards === null) {
+      if (API.urls === null ||
+        API.portal === null ||
+        API.cards === null) {
         return (<span>Loading...</span>);
       }
 
-      if (!store.cards.built.includes("battlegear_cards")) {
-        store.cards.setupBattlegear("cards");
+      if (!API.cards.built.includes("battlegear_cards")) {
+        API.cards.setupBattlegear("cards");
         return (<span>Loading...</span>);
       }
 
-      if (!store.portal.built.includes("battlegear_portal")) {
-        store.portal.setupBattlegear("portal");
+      if (!API.portal.built.includes("battlegear_portal")) {
+        API.portal.setupBattlegear("portal");
         return (<span>Loading...</span>);
       }
 
-      const battlegear = store.portal.battlegear.data;
+      const battlegear = API.portal.battlegear.data;
 
       const output = battlegear.map((single_battlegear, i) => {
-        const card_data = store.cards.battlegear.findOne({'gsx$name': single_battlegear.gsx$name});
+        const card_data = API.cards.battlegear.findOne({'gsx$name': single_battlegear.gsx$name});
         return (
           <div key={i}>
             <Interactive as={Link} {...s.link}
               to={'/portal/Battlegear/'+single_battlegear.gsx$name}
             >
               <span>{single_battlegear.gsx$name}</span><br />
-              <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
+              <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
             </Interactive>
           </div>
         );

src/components/portal/Category/Creatures.js

@@ -11,77 +11,51 @@ export default class Creatures extends React.Component {
 
   // ** Process the tribe ** //
   // /portal/Creatures/
-  // /portal/{Tribe}/Creatures/
+  // /portal/Creatures/{Tribe}
   // The first / gets counted
   render() {
-    const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    let tribe = null;
-    if (path.length >= 4) {
-      if (path[2] === "Creatures") tribe = path[3];
-      else if (path[3] === "Creatures") tribe = path[2];
-
-      // If there isn't a supported tribe,
-      // Displays list of tribes
-      if (!store.tribes.includes(tribe)) {
-        return(
-          <div>
-            <Interactive as={Link} {...s.link}
-              to="/portal/Creatures/Danian"
-            >Danian</Interactive>
-            <br />
-            <Interactive as={Link} {...s.link}
-              to="/portal/Creatures/OverWorld"
-            >OverWorld</Interactive>
-            <br />
-            <Interactive as={Link} {...s.link}
-              to="/portal/Creatures/UnderWorld"
-            >UnderWorld</Interactive>
-            <br />
-            <Interactive as={Link} {...s.link}
-              to="/portal/Creatures/Mipedian"
-            >Mipedian</Interactive>
-          </div>
-        );
-      }
-    }
-
-    if (!store.cards.built.includes("creatures_cards")) {
-      store.cards.setupCreatures("cards");
+    if (!API.cards.built.includes("creatures_cards")) {
+      API.cards.setupCreatures("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("creatures_portal")) {
-      store.portal.setupCreatures("portal");
+    if (!API.portal.built.includes("creatures_portal")) {
+      API.portal.setupCreatures("portal");
       return (<span>Loading...</span>);
     }
 
+    const tribe = (() => {
+      if (path.length >= 4 && API.ribes.includes(path[3])) return path[3];
+      else return null;
+    })();
+
     const creatures = (() => {
-      if (path.length >= 4 && path[3] === "Creatures") {
-        return store.portal.creatures.find({'gsx$tribe': tribe});
+      if (tribe) {
+        return API.portal.creatures.find({'gsx$tribe': tribe});
       }
       else {
-        return store.portal.creatures.chain().simplesort('gsx$name').data();
+        return API.portal.creatures.chain().simplesort('gsx$name').data();
       }
     })();
 
     const output = creatures.map((creature, i) => {
-      const card_data = store.cards.creatures.findOne({'gsx$name': creature.gsx$name});
+      const card_data = API.cards.creatures.findOne({'gsx$name': creature.gsx$name});
 
       let url = (() => {
-        if (path[2] === "Creatures")
+        if (tribe)
           return "/portal/Creatures/"+creature.gsx$tribe+"/"+creature.gsx$name;
-        else if (path[3] === "Creatures")
-          return "/portal/"+creature.gsx$tribe+"/Creatures/"+creature.gsx$name;
+        else
+          return "/portal/Creatures/"+creature.gsx$name;
       })();
 
       return (
@@ -90,16 +64,20 @@ export default class Creatures extends React.Component {
             to={url}
           >
             <span>{creature.gsx$name}</span><br />
-            <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
+            <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
           </Interactive>
         </div>
       );
     });
 
-    const tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => (
+    let tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => (
       <Route key={i} path={`${this.props.match.url}/${tribe}/:card`} component={Creature} />
     ));
 
+    if (!tribe) {
+      tribes.push(<Route key={5} path={`${this.props.match.url}/:card`} component={Creature} />)
+    }
+
     return (<div className="entry creatures">
       <div className="left">
         <div className="title">{path[2]}<hr /></div>

src/components/portal/Category/Locations.js

@@ -10,38 +10,37 @@ import Location from '../Single/Location';
 export default class Locations extends React.Component {
 
   render() {
-    const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("locations_cards")) {
-      store.cards.setupLocations("cards");
+    if (!API.cards.built.includes("locations_cards")) {
+      API.cards.setupLocations("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("locations_portal")) {
-      store.portal.setupLocations("portal");
+    if (!API.portal.built.includes("locations_portal")) {
+      API.portal.setupLocations("portal");
       return (<span>Loading...</span>);
     }
 
-    const locations = store.portal.locations.data;
+    const locations = API.portal.locations.data;
 
     const output = locations.map((location, i) => {
-      const card_data = store.cards.locations.findOne({'gsx$name': location.gsx$name});
+      const card_data = API.cards.locations.findOne({'gsx$name': location.gsx$name});
       return (
         <div key={i}>
           <Interactive as={Link} {...s.link}
             to={'/portal/Locations/'+location.gsx$name}
           >
             <span>{location.gsx$name}</span><br />
-            <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
+            <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
           </Interactive>
         </div>
       );

src/components/portal/Category/Mugic.js

@@ -19,73 +19,44 @@ export default class Mugic extends React.Component {
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    let tribe = null;
-    if (path.length >= 4) {
-      if (path[2] === "Mugic") tribe = path[3];
-      else if (path[3] === "Mugic") tribe = path[2];
-
-      // If there isn't a supported tribe,
-      // Displays list of tribes
-      if (!store.tribes.includes(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/Mipedian"
-            >Mipedian</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>
-          </div>
-        );
-      }
-    }
-
-    if (!store.cards.built.includes("mugic_cards")) {
-      store.cards.setupMugic("cards");
+    if (!API.cards.built.includes("mugic_cards")) {
+      API.cards.setupMugic("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("mugic_portal")) {
-      store.portal.setupMugic("portal");
+    if (!API.portal.built.includes("mugic_portal")) {
+      API.portal.setupMugic("portal");
       return (<span>Loading...</span>);
     }
 
+    const tribe = (() => {
+      if (path.length >= 4 && API.tribes.includes(path[3])) return path[3];
+      else return null;
+    })();
+
     const mugic = (() => {
-      if (path.length >= 4 && path[3] === "Mugic") {
-        return store.portal.mugic.find({'gsx$tribe': tribe});
+      if (tribe) {
+        return API.portal.mugic.find({'gsx$tribe': tribe});
       }
       else {
-        return store.portal.mugic.chain().simplesort('gsx$name').data();
+        return API.portal.mugic.chain().simplesort('gsx$name').data();
       }
     })();
 
     const output = mugic.map((single_mugic, i) => {
-      const card_data = store.cards.mugic.findOne({'gsx$name': single_mugic.gsx$name});
+      const card_data = API.cards.mugic.findOne({'gsx$name': single_mugic.gsx$name});
 
       let url = (() => {
-        if (path[2] === "Mugic")
+        if (tribe)
           return "/portal/Mugic/"+single_mugic.gsx$tribe+"/"+encodeURIComponent(single_mugic.gsx$name);
-        else if (path[3] === "Mugic")
-          return "/portal/"+single_mugic.gsx$tribe+"/Mugic/"+encodeURIComponent(single_mugic.gsx$name);
+        else
+          return "/portal/Mugic/"+encodeURIComponent(single_mugic.gsx$name);
       })();
 
       return (
@@ -94,16 +65,20 @@ export default class Mugic extends React.Component {
             to={url}
           >
             <span>{single_mugic.gsx$name}</span><br />
-            <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
+            <img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
           </Interactive>
         </div>
       );
     });
 
-    const tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => (
+    const tribes = API.tribes.map((tribe, i) => (
       <Route key={i} path={`${this.props.match.url}/${tribe}/:card`} component={SingleMugic} />
     ));
 
+    if (!tribe) {
+      tribes.push(<Route key={5} path={`${this.props.match.url}/:card`} component={SingleMugic} />)
+    }
+
     return (<div className="entry mugic">
       <div className="left">
         <div className="title">{path[2]}<hr /></div>

src/components/portal/Category/Tribes.js

@@ -22,20 +22,18 @@ export default class Tribes extends React.Component {
   // -> /{Tribe}/Mugic || /{Tribe}/Creatures
   render() {
 
-    const store = API;
-
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
     let tribe = path[2];
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    if (!store.tribes.includes(tribe)) {
+    if (!API.tribes.includes(tribe)) {
       return(
         <div>
           <Interactive as={Link} {...s.link}
@@ -57,23 +55,23 @@ export default class Tribes extends React.Component {
       );
     }
 
-    if (!store.cards.built.includes("mugic_cards")) {
-      store.cards.setupMugic("cards");
+    if (!API.cards.built.includes("mugic_cards")) {
+      API.cards.setupMugic("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("mugic_portal")) {
-      store.portal.setupMugic("portal");
+    if (!API.portal.built.includes("mugic_portal")) {
+      API.portal.setupMugic("portal");
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("creatures_cards")) {
-      store.cards.setupCreatures("cards");
+    if (!API.cards.built.includes("creatures_cards")) {
+      API.cards.setupCreatures("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("creatures_portal")) {
-      store.portal.setupCreatures("portal");
+    if (!API.portal.built.includes("creatures_portal")) {
+      API.portal.setupCreatures("portal");
       return (<span>Loading...</span>);
     }
 
@@ -83,11 +81,11 @@ export default class Tribes extends React.Component {
 
     let temp;
 
-    temp = store.portal.creatures.find({'gsx$tribe': tribe});
+    temp = API.portal.creatures.find({'gsx$tribe': tribe});
     temp.forEach((v) => { delete v.$loki });
     filter.insert(temp);
 
-    temp = store.portal.mugic.find({'gsx$tribe': tribe});
+    temp = API.portal.mugic.find({'gsx$tribe': tribe});
     temp.forEach((v) => { delete v.$loki });
     filter.insert(temp);
 
@@ -98,19 +96,19 @@ export default class Tribes extends React.Component {
       let card_data, url;
 
       if (card.gsx$type == "Mugic") {
-        card_data = store.cards.mugic.findOne({'gsx$name': card.gsx$name});
+        card_data = API.cards.mugic.findOne({'gsx$name': card.gsx$name});
         url = "/portal/" + tribe + "/Mugic/" + encodeURIComponent(card.gsx$name);
       }
 
       if (card.gsx$type == "Creature") {
-        card_data = store.cards.creatures.findOne({'gsx$name': card.gsx$name});
+        card_data = API.cards.creatures.findOne({'gsx$name': card.gsx$name});
         url = "/portal/" + tribe + "/Creatures/" + encodeURIComponent(card.gsx$name);
       }
 
       return (<div key={i}>
         <Interactive as={Link} {...s.link} to={url}>
           <span>{card.gsx$name}</span><br />
-          <img className="thumb" src={store.base_image + card_data.gsx$thumb} />
+          <img className="thumb" src={API.base_image + card_data.gsx$thumb} />
         </Interactive>
       </div>);
     });

src/components/portal/Single/Attack.js

@@ -10,7 +10,6 @@ import {PageNotFound} from '../../Snippets';
 export default class SingleAttack extends React.Component {
 
   render() {
-    const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
@@ -22,33 +21,32 @@ export default class SingleAttack extends React.Component {
 
     let name = decodeURIComponent(path[3]);
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("attacks_cards")) {
-      store.cards.setupAttacks("cards");
+    if (!API.cards.built.includes("attacks_cards")) {
+      API.cards.setupAttacks("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("attacks_portal")) {
-      store.portal.setupAttacks("portal");
+    if (!API.portal.built.includes("attacks_portal")) {
+      API.portal.setupAttacks("portal");
       return (<span>Loading...</span>);
     }
 
-    const attack = store.portal.attacks.findOne({'gsx$name': name});
+    const attack = API.portal.attacks.findOne({'gsx$name': name});
     if (!attack) {
       return(<PageNotFound location={this.props.location}/>);
     }
 
-    const card_data = store.cards.attacks.findOne({'gsx$name': name});
+    const card_data = API.cards.attacks.findOne({'gsx$name': name});
 
     return (
       <div>
-        <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
-        <br />
+        <img className="splash" src={API.base_image + card_data.gsx$splash} />
         <div className="title">{attack.gsx$name}</div>
         <hr />
         <div>

src/components/portal/Single/Battlegear.js

@@ -11,7 +11,6 @@ import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '
 export default class SingleBattlegear extends React.Component {
 
   render() {
-    const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
@@ -23,33 +22,32 @@ export default class SingleBattlegear extends React.Component {
 
     let name = decodeURIComponent(path[3]);
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("battlegear_cards")) {
-      store.cards.setupBattlegear("cards");
+    if (!API.cards.built.includes("battlegear_cards")) {
+      API.cards.setupBattlegear("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("battlegear_portal")) {
-      store.portal.setupBattlegear("portal");
+    if (!API.portal.built.includes("battlegear_portal")) {
+      API.portal.setupBattlegear("portal");
       return (<span>Loading...</span>);
     }
 
-    const battlegear = store.portal.battlegear.findOne({'gsx$name': name});
+    const battlegear = API.portal.battlegear.findOne({'gsx$name': name});
     if (!battlegear) {
       return(<PageNotFound location={this.props.location}/>);
     }
 
-    const card_data = store.cards.battlegear.findOne({'gsx$name': name});
+    const card_data = API.cards.battlegear.findOne({'gsx$name': name});
 
     return (
       <div>
-        <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
-        <br />
+        <img className="splash" src={API.base_image + card_data.gsx$splash} />
         <div className="title">{battlegear.gsx$name}</div>
         <hr />
         <div>

src/components/portal/Single/Creature.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router-dom';
-import {PageNotFound} from '../../Snippets';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
+import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleCreature extends React.Component {
@@ -15,50 +14,40 @@ export default class SingleCreature extends React.Component {
   // /portal/{Tribe}/Creatures/{Name}
   // The first / gets counted
   render() {
-    const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-    // Path too long
-    if ( path.length !== 5 ) {
-      return(<PageNotFound location={this.props.location}/>);
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
+      return (<span>Loading...</span>);
     }
 
-    //Handle both url layouts
-    let tribe = (() => {
-      if (path[2] === "Creatures") return path[3];
-      if (path[3] === "Creatures") return path[2];
+    if (!API.cards.built.includes("creatures_cards")) {
+      API.cards.setupCreatures("cards");
+      return (<span>Loading...</span>);
+    }
+
+    if (!API.portal.built.includes("creatures_portal")) {
+      API.portal.setupCreatures("portal");
+      return (<span>Loading...</span>);
+    }
+
+    const name = (() => {
+      if (path.length >= 5) return decodeURIComponent(path[4]);
+      if (path.length == 4) return decodeURIComponent(path[3]);
     })();
 
-    let name = decodeURIComponent(path[4]);
+    const creature = API.portal.creatures.findOne({'gsx$name': name});
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
-      return (<span>Loading...</span>);
-    }
-
-    if (!store.tribes.includes(tribe)) {
-      return (<span>Invalid Tribe: {tribe}</span>);
-    }
-
-    if (!store.cards.built.includes("creatures_cards")) {
-      store.cards.setupCreatures("cards");
-      return (<span>Loading...</span>);
-    }
-
-    if (!store.portal.built.includes("creatures_portal")) {
-      store.portal.setupCreatures("portal");
-      return (<span>Loading...</span>);
-    }
-
-    const creature = store.portal.creatures.findOne({'gsx$name': name});
     if (!creature) {
       return(<PageNotFound location={this.props.location}/>);
     }
 
-    const card_data = store.cards.creatures.findOne({'gsx$name': name});
+    const tribe = creature.gsx$tribe;
+
+    const card_data = API.cards.creatures.findOne({'gsx$name': name});
 
     const locations = creature.gsx$location.split(/[,]+\s*/).map((item, i) => {
       return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Locations/"+item}><span>{item}</span></Interactive></p>;
@@ -75,8 +64,7 @@ export default class SingleCreature extends React.Component {
 
     return (
       <div>
-        <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
-        <br />
+        <img className="splash" src={API.base_image + card_data.gsx$splash} />
         <div className="title">{creature.gsx$name}</div>
         <hr />
         <div>

src/components/portal/Single/Location.js

@@ -11,7 +11,6 @@ import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
 export default class SingleLocation extends React.Component {
 
   render() {
-    const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
@@ -23,33 +22,32 @@ export default class SingleLocation extends React.Component {
 
     let name = decodeURIComponent(path[3]);
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    if (!store.cards.built.includes("locations_cards")) {
-      store.cards.setupLocations("cards");
+    if (!API.cards.built.includes("locations_cards")) {
+      API.cards.setupLocations("cards");
       return (<span>Loading...</span>);
     }
 
-    if (!store.portal.built.includes("locations_portal")) {
-      store.portal.setupLocations("portal");
+    if (!API.portal.built.includes("locations_portal")) {
+      API.portal.setupLocations("portal");
       return (<span>Loading...</span>);
     }
 
-    const location = store.portal.locations.findOne({'gsx$name': name});
+    const location = API.portal.locations.findOne({'gsx$name': name});
     if (!location) {
       return(<PageNotFound location={this.props.location}/>);
     }
 
-    const card_data = store.cards.locations.findOne({'gsx$name': name});
+    const card_data = API.cards.locations.findOne({'gsx$name': name});
 
     return (
       <div>
-        <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
-        <br />
+        <img className="splash" src={API.base_image + card_data.gsx$splash} />
         <div className="title">{location.gsx$name}</div>
         <hr />
         <div>

src/components/portal/Single/Mugic.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router-dom';
-import {PageNotFound} from '../../Snippets';
 import API from '../../SpreadsheetData';
 import s from '../../../styles/app.style';
 import {observer, inject} from 'mobx-react';
-import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
+import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class SingleMugic extends React.Component {
@@ -15,50 +14,41 @@ export default class SingleMugic extends React.Component {
   // /portal/{Tribe}/Mugic/{Name}
   // The first / gets counted
   render() {
-    const store = API;
 
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-    // Path too long
-    if ( path.length !== 5 ) {
-      return(<PageNotFound location={this.props.location}/>);
+    if (API.urls === null ||
+      API.portal === null ||
+      API.cards === null) {
+      return (<span>Loading...</span>);
     }
 
-    //Handle both url layouts
-    let tribe = (() => {
-      if (path[2] === "Mugic") return path[3];
-      if (path[3] === "Mugic") return path[2];
+    if (!API.cards.built.includes("mugic_cards")) {
+      API.cards.setupMugic("cards");
+      return (<span>Loading...</span>);
+    }
+
+    if (!API.portal.built.includes("mugic_portal")) {
+      API.portal.setupMugic("portal");
+      return (<span>Loading...</span>);
+    }
+
+    const name = (() => {
+      if (path.length >= 5) return decodeURIComponent(path[4]);
+      if (path.length == 4) return decodeURIComponent(path[3]);
     })();
 
-    let name = decodeURIComponent(path[4]);
+    const mugic = API.portal.mugic.findOne({'gsx$name': name});
 
-    if (store.urls === null ||
-      store.portal === null ||
-      store.cards === null) {
-      return (<span>Loading...</span>);
-    }
-
-    if (!store.tribes.includes(tribe)) {
-      return (<span>Invalid Tribe: {tribe}</span>);
-    }
-
-    if (!store.cards.built.includes("mugic_cards")) {
-      store.cards.setupMugic("cards");
-      return (<span>Loading...</span>);
-    }
-
-    if (!store.portal.built.includes("mugic_portal")) {
-      store.portal.setupMugic("portal");
-      return (<span>Loading...</span>);
-    }
-
-    const mugic = store.portal.mugic.findOne({'gsx$name': name});
-    const card_data = store.cards.mugic.findOne({'gsx$name': name});
     if (!mugic) {
       return(<PageNotFound location={this.props.location}/>);
     }
 
+    const tribe = mugic.gsx$tribe;
+
+    const card_data = API.cards.mugic.findOne({'gsx$name': name});
+
     let cost = [];
     if (card_data.gsx$cost == 0) {
       cost.push(<span key={0}>0</span>);
@@ -74,8 +64,7 @@ export default class SingleMugic extends React.Component {
 
     return (
       <div>
-        <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
-        <br />
+        <img className="splash" src={API.base_image + card_data.gsx$splash} />
         <div className="title">{mugic.gsx$name}</div>
         <hr />
         <div>

src/components/portal/index.js

@@ -69,8 +69,8 @@ function Header() {
       <li key={i} className="dropdown">
         <Link to={"/portal/"+tribe} className="dropbtn">{tribe}</Link>
         <div className="dropdown-content">
-          <Link to={"/portal/"+tribe+"/Creatures"}> Creatures</Link>
-          <Link to={"/portal/"+tribe+"/Mugic"}> Mugic</Link>
+          <Link to={"/portal/Creatures/"+tribe}> Creatures</Link>
+          <Link to={"/portal/Mugic/"+tribe}> Mugic</Link>
         </div>
       </li>
     );

src/css/portal.css

@@ -20,7 +20,7 @@
 
 .splash {
     max-width: 100%;
-    display: block;
+    padding-bottom: 10px;
 }
 
 .navbar h1 {

src/styles/pageNotFound.style.js

@@ -1,5 +0,0 @@
-import style from './style';
-
-const s = Object.create(style);
-
-export default s;