#11 mugic (check previous commit)

src/components/portal/Base.js

@@ -57,13 +57,13 @@ function Header(props) {
         <li><Link to="/portal/">Home</Link></li>
         <li><Link to="javascript:void(0)"><Search /></Link></li>
         {types}
-        {tribes}
         <li className="dropdown">
           <Link to={"/portal/Generic"} className="dropbtn">Generic</Link>
           <div className="dropdown-content">
             <Link to={"/portal/Generic/Mugic"}>Mugic</Link>
           </div>
         </li>
+        {tribes}
       </ul>
     </div>
   );

src/components/portal/Category/Creatures.js

@@ -82,6 +82,7 @@ export default class Creatures extends React.Component {
         else if (path[3] === "Creatures")
           return "/portal/"+creature.gsx$tribe+"/Creatures/"+creature.gsx$name;
       })();
+
       return (
         <div key={i}>
           <Interactive as={Link} {...s.link}
@@ -104,5 +105,4 @@ export default class Creatures extends React.Component {
       </div>
     </div>);
   }
-
 }

src/components/portal/Category/Mugic.js

@@ -18,44 +18,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
 
-    let tribe = (() => {
-      if (path[2] === "Mugic") return path[3];
-      else if (path[3] === "Mugic") return path[2];
-      else return "None";
-    })();
-
     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.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/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>
-      );
+    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")) {
@@ -68,13 +68,29 @@ export default class Mugic extends React.Component {
       return (<span>Loading...</span>);
     }
 
-    const mugic = store.portal.mugic.find({'gsx$tribe': tribe});
+    const mugic = (() => {
+      if (path.length >= 4 && path[3] === "Mugic") {
+        return store.portal.mugic.find({'gsx$tribe': tribe});
+      }
+      else {
+        return store.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});
+
+      let url = (() => {
+        if (path[2] === "Mugic")
+          return "/portal/Mugic/"+single_mugic.gsx$tribe+"/"+single_mugic.gsx$name;
+        else if (path[3] === "Mugic")
+          return "/portal/"+single_mugic.gsx$tribe+"/Mugic/"+single_mugic.gsx$name;
+      })();
+
       return (
         <div key={i}>
           <Interactive as={Link} {...s.link}
-            to={'/portal/'+tribe+'/Mugic/'+single_mugic.gsx$name}
+            to={url}
           >
             <span>{single_mugic.gsx$name}</span><br />
             <img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
@@ -85,7 +101,7 @@ export default class Mugic extends React.Component {
 
     return (<div className="entry mugic">
       <div className="left">
-        <div className="title">{tribe}<hr /></div>
+        <div className="title">{path[2]}<hr /></div>
         {output}
       </div>
       <div className="right">