#11 mugic

src/components/portal/Base.js

@@ -58,6 +58,12 @@ function Header(props) {
         <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>
       </ul>
     </div>
   );

src/components/portal/Category/Mugic.js

@@ -13,18 +13,15 @@ export default class Mugic extends React.Component {
   // /portal/{Tribe}/Mugic/
   // The first / gets counted
   render() {
-    if (this.props.children) {
-      return (<div className="mugic">{this.props.children}</div>);
-    }
     const store = API;
 
     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];
+      else if (path[3] === "Mugic") return path[2];
+      else return "None";
     })();
 
     if (store.urls === null ||
@@ -86,6 +83,14 @@ export default class Mugic extends React.Component {
       );
     });
 
-    return (<div>{output}</div>);
+    return (<div className="entry mugic">
+      <div className="left">
+        <div className="title">{tribe}<hr /></div>
+        {output}
+      </div>
+      <div className="right">
+        {this.props.children}
+      </div>
+    </div>);
   }
 }

src/components/portal/Single/Creature.js

@@ -72,7 +72,7 @@ export default class SingleCreature extends React.Component {
     });
 
     return (
-      <div className={"creature " + tribe.toLowerCase()}>
+      <div>
         <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
         <br />
         <div className="title">{creature.gsx$name}</div>

src/components/portal/Single/Mugic.js

@@ -63,11 +63,11 @@ export default class SingleMugic extends React.Component {
       cost.push(<img key={i} className="icon" src={"/src/img/icons/mugic/"+tribe.toLowerCase()+".png"} alt="mugic counter"/>);
     }
 
-    // TODO mugic splash art
     return (
-      <div className={tribe.toLowerCase()}>
-        <h1>{mugic.gsx$name}</h1>
+      <div>
         <img className="splash" src={store.base_image + card_data.gsx$splash}></img>
+        <br />
+        <div className="title">{mugic.gsx$name}</div>
         <hr />
         <div>
           <strong>Background:</strong><br />