closes #15 with database entry remaining

src/components/portal/Category/Mugic.js

@@ -10,9 +10,13 @@ import {observer, inject} from 'mobx-react';
 @inject((stores, props, context) => props) @observer
 export default class Mugic extends React.Component {
 
+  // ** Process the tribe ** //
+  // /portal/Mugic/
+  // /portal/{Tribe}/Mugic/
+  // The first / gets counted
   render() {
     if (this.props.children) {
-      return (<div>{this.props.children}</div>);
+      return (<div className="mugic">{this.props.children}</div>);
     }
     const store = API;
 
@@ -86,35 +90,4 @@ export default class Mugic extends React.Component {
 
     return (<div>{output}</div>);
   }
-
-  fakerender() {
-    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/portal/Single/Creature.js

@@ -30,13 +30,14 @@ export default class SingleCreature extends React.Component {
       if (path[3] === "Creatures") return path[2];
     })();
 
+    let name = decodeURIComponent(path[4]);
+
     if (store.urls === null ||
       store.portal === null ||
       store.cards === null) {
       return (<span>Loading...</span>);
     }
 
-    // Todo this isn't needed for now (handled by routes)
     if (!store.urls.Creatures.hasOwnProperty(tribe)) {
       return (<span>Invalid Tribe: {tribe}</span>);
     }
@@ -51,8 +52,8 @@ export default class SingleCreature extends React.Component {
       return (<span>Loading...</span>);
     }
 
-    const creature = store.portal.creatures.findOne({'gsx$name': path[4]});
-    const card_data = store.cards.creatures.findOne({'gsx$name': path[4]});
+    const creature = store.portal.creatures.findOne({'gsx$name': name});
+    const card_data = store.cards.creatures.findOne({'gsx$name': name});
     if (!creature) {
       return(<PageNotFound location={this.props.location}/>);
     }

src/components/portal/Single/Mugic.js

@@ -8,11 +8,79 @@ import {observer, inject} from 'mobx-react';
 import UnderConstruction from '../../UnderConstruction';
 
 @inject((stores, props, context) => props) @observer
-export default class SingleCreature extends React.Component {
+export default class SingleMugic extends React.Component {
 
+  // ** Process the tribe ** //
+  // /portal/Mugic/{Tribe}/{Name}
+  // /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}/>);
+    }
+
+    //Handle both url layouts
+    let tribe = (() => {
+      if (path[2] === "Mugic") return path[3];
+      if (path[3] === "Mugic") return path[2];
+    })();
+
+    let name = decodeURIComponent(path[4]);
+
+    if (store.urls === null ||
+      store.portal === null ||
+      store.cards === null) {
+      return (<span>Loading...</span>);
+    }
+
+    if (!store.urls.Mugic.hasOwnProperty(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_"+tribe)) {
+      store.portal.setupMugic(tribe);
+      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}/>);
+    }
+
+    // TODO mugic card details
+    // TODO mugic splash art
     return (
-      <UnderConstruction location={this.props.location}/>
+      <div className={tribe.toLowerCase()}>
+        <h1>{mugic.gsx$name}</h1>
+        <img className="splash" src={store.base_image + mugic.gsx$splash}></img>
+        <hr />
+        <div>
+          <strong>Background:</strong><br />
+          {mugic.gsx$background}
+        </div>
+        <hr />
+        <div>
+          <strong>Details:</strong><br />
+          {mugic.gsx$details}
+        </div>
+        <hr />
+        <div>
+          <strong>Tribe: </strong>
+          <img className="icon" style={{width: "20px"}} src={"/src/img/icons/tribes/"+tribe.toLowerCase()+".png"}></img>{tribe}
+        </div>
+      </div>
     );
   }
 }

src/index.js

@@ -71,6 +71,7 @@ const routes = (
       </Route>
 
       {/* Creatures */}
+      {/* Todo this isn't needed (tribe checking handled by components) */}
       <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,2)}>
         <Route path="OverWorld" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
           <Route path="*" component={SingleCreature} />