updated portal home page

src/components/CollectionDB.js

@@ -1,90 +0,0 @@
-import loki from 'lokijs';
-import {observable, autorun} from "mobx";
-
-export default class CollectionDB {
-  @observable built = []; // Keeps track of what collections have been populated
-
-  constructor(API) {
-    this.api = API;
-    // ignoring persistence for now
-    // this.setupDB();
-    //autorun(() => console.log(this.creatures));
-    let db = new loki("chaotic_portal.db");
-    this.attacks = db.addCollection('attacks');
-    this.battlegear = db.addCollection('battlegear');
-    this.creatures = db.addCollection('creatures');
-    this.locations = db.addCollection('locations');
-    this.mugic = db.addCollection('mugic');
-    this.db = db;
-  }
-
-  // setupDB() {
-  //   var self = this;
-  //   let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' });
-  //   this.db = db;
-
-  //   let databaseInitialize = () => {
-  //     var entries;
-  //     if ((entries = db.getCollection("attacks")) === null)
-  //       entries = db.addCollection("attacks");
-  //     self.attacks = entries;
-
-  //     if ((entries = db.getCollection("battlegear")) === null)
-  //       entries = db.addCollection("battlegear");
-  //     self.battlegear = entries;
-
-  //     console.log(db.getCollection("creatures"));
-  //     if ((entries = db.getCollection("creatures")) === null)
-  //       entries = db.addCollection("creatures");
-  //     self.creatures = db.addCollection('creatures');
-
-  //     if ((entries = db.getCollection("locations")) === null)
-  //       entries = db.addCollection("locations");
-  //     self.locations = entries
-
-  //     if ((entries = db.getCollection("mugic")) === null)
-  //       entries = db.addCollection("mugic");
-  //     self.mugic = entries;
-  //   };
-  // }
-
-  setup(spreadsheet, callback) {
-    this.api.getSpreadsheet(spreadsheet, (data) => {
-      callback(data.map((item) => {
-        let temp = {};
-        delete item.content;
-        for (const key of Object.keys(item)) {
-          temp[key] = item[key].$t;
-        }
-        return temp;
-      }));
-    });
-  }
-
-  setupAttacks() {
-
-  }
-
-  setupBattleGear() {
-
-  }
-
-  setupCreatures(tribe="Generic") {
-    this.setup(this.api.urls.Creatures[tribe], (data) => {
-      this.creatures.insert(data);
-      this.built.push("creatures_"+tribe);
-    });
-  }
-
-  setupLocations() {
-
-  }
-
-  // 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/SpreadsheetData.js

@@ -1,6 +1,6 @@
 import 'whatwg-fetch';
-import CollectionDB from './CollectionDB';
+import loki from 'lokijs';
-import {observable} from "mobx";
+import {observable, autorun} from "mobx";
 
 class API {
   @observable portal = null;
@@ -53,8 +53,8 @@ class API {
 
   setupDB() {
     try {
-      this.portal = new CollectionDB(this, "portal");
+      this.portal = new CollectionDB(this);
-      this.cards = new CollectionDB(this, "cards");
+      this.cards = new CollectionDB(this);
     }
     catch (err) {
       console.log('setting up database failed', err);
@@ -65,3 +65,91 @@ class API {
 export default API.getInstance();
 
 // export default new API();
+
+class CollectionDB {
+  @observable built = []; // Keeps track of what collections have been populated
+
+  constructor(API) {
+    this.api = API;
+    // ignoring persistence for now
+    // this.setupDB();
+    //autorun(() => console.log(this.creatures));
+    let db = new loki("chaotic_portal.db");
+    this.attacks = db.addCollection('attacks');
+    this.battlegear = db.addCollection('battlegear');
+    this.creatures = db.addCollection('creatures');
+    this.locations = db.addCollection('locations');
+    this.mugic = db.addCollection('mugic');
+    this.db = db;
+  }
+
+  // setupDB() {
+  //   var self = this;
+  //   let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' });
+  //   this.db = db;
+
+  //   let databaseInitialize = () => {
+  //     var entries;
+  //     if ((entries = db.getCollection("attacks")) === null)
+  //       entries = db.addCollection("attacks");
+  //     self.attacks = entries;
+
+  //     if ((entries = db.getCollection("battlegear")) === null)
+  //       entries = db.addCollection("battlegear");
+  //     self.battlegear = entries;
+
+  //     console.log(db.getCollection("creatures"));
+  //     if ((entries = db.getCollection("creatures")) === null)
+  //       entries = db.addCollection("creatures");
+  //     self.creatures = db.addCollection('creatures');
+
+  //     if ((entries = db.getCollection("locations")) === null)
+  //       entries = db.addCollection("locations");
+  //     self.locations = entries
+
+  //     if ((entries = db.getCollection("mugic")) === null)
+  //       entries = db.addCollection("mugic");
+  //     self.mugic = entries;
+  //   };
+  // }
+
+  setup(spreadsheet, callback) {
+    this.api.getSpreadsheet(spreadsheet, (data) => {
+      callback(data.map((item) => {
+        let temp = {};
+        delete item.content;
+        for (const key of Object.keys(item)) {
+          temp[key] = item[key].$t;
+        }
+        return temp;
+      }));
+    });
+  }
+
+  setupAttacks() {
+
+  }
+
+  setupBattleGear() {
+
+  }
+
+  setupCreatures(tribe="Generic") {
+    this.setup(this.api.urls.Creatures[tribe], (data) => {
+      this.creatures.insert(data);
+      this.built.push("creatures_"+tribe);
+    });
+  }
+
+  setupLocations() {
+
+  }
+
+  // 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/Attacks.js

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

src/components/portal/Category/Battlegear.js

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

src/components/portal/Category/Locations.js

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

src/components/portal/Category/Mugic.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

src/components/portal/Category/Tribes.js

@@ -1,41 +1,35 @@
 import React from 'react';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
+import API from '../../SpreadsheetData';
+import s from '../../../styles/app.style';
+import {observer, inject} from 'mobx-react';
+import PageNotFound from '../../PageNotFound';
 import UnderConstruction from '../../UnderConstruction';
 
-// This module handles tribe pages and subpages
+@inject((stores, props, context) => props) @observer
-// Allows for urls such as
-// /Creatures/{Tribe}
-// /{Tribe}/Creatures}
-
-// /Mugic/{Tribe}
-// /{Tribe}/Mugic
-// to display the respective subcategories
-// (list of tribe's mugic/creatures)
-
-// /{Tribe}
-// gives a brief summary and the option of "mugic" or "tribe"
-// -> /{Tribe}/Mugic || /{Tribe}/Creatures
-
 export default class Tribes extends React.Component {
 
-  constructor(props) {
+  // /{Tribe}
-    super (props);
+  // gives a brief summary and the option of "mugic" or "tribe"
-  }
+  // to display the respective subcategories
-
+  // -> /{Tribe}/Mugic || /{Tribe}/Creatures
   render() {
     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
 
-    return (
+    let tribe = path[2];
-      <UnderConstruction location={this.props.location}/>
-    );
 
-    // return (<div>
+    return (
-    //   <Interactive as="a" {...s.link} href={"Mugic"}><span>{}</span></Interactive>
+      <div>
-    //   <Interactive as="a" {...s.link} href={"Mugic/"+mugic.gsx$name.$t}><span>{mugic.gsx$name.$t}</span></Interactive>
+        <div><i>Tribe Summary Here</i></div><br />
-    //   </div>
+        <Interactive as="a" {...s.link} href={"/portal/"+tribe+"/Creatures"}>Creatures</Interactive><br />
-    // );
+        <Interactive as="a" {...s.link} href={"/portal/"+tribe+"/Mugic"}>Mugic</Interactive>
+      </div>
+    );
   }
 }

src/components/portal/Home.js

@@ -1,18 +1,51 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import s from '../../styles/home.style';
+import s from '../../styles/portal/home.style';
 
 export default function PortalHome() {
   return (
-    <div>
+    <div style={s.wrapper}>
-      <Interactive as={Link} {...s.link}
+      <div style={s.types}>
-        to="/portal/Creatures"
+        <p>Explore Types</p><br />
-      >Creatures</Interactive>
+        <Interactive as={Link} {...s.link}
-      <br />
+          to="/portal/Attacks"
-      <Interactive as={Link} {...s.link}
+        >Attacks</Interactive>
-        to="/portal/Mugic"
+        <br /><br />
-      >Mugic</Interactive>
+        <Interactive as={Link} {...s.link}
+          to="/portal/Battlegear"
+        >Battlegear</Interactive>
+        <br /><br />
+        <Interactive as={Link} {...s.link}
+          to="/portal/Creatures"
+        >Creatures</Interactive>
+        <br /><br />
+        <Interactive as={Link} {...s.link}
+          to="/portal/Mugic"
+        >Mugic</Interactive>
+        <br /><br />
+        <Interactive as={Link} {...s.link}
+          to="/portal/Locations"
+        >Locations</Interactive>
+      </div>
+      <div style={s.tribes}>
+        <p>Explore Tribes</p><br />
+        <Interactive as={Link} {...s.link}
+          to="/portal/Danian"
+        >Danian</Interactive>
+        <br /><br />
+        <Interactive as={Link} {...s.link}
+          to="/portal/Mipedian"
+        >Mipedian</Interactive>
+        <br /><br />
+        <Interactive as={Link} {...s.link}
+          to="/portal/OverWorld"
+        >OverWorld</Interactive>
+        <br /><br />
+        <Interactive as={Link} {...s.link}
+          to="/portal/UnderWorld"
+        >UnderWorld</Interactive>
+      </div>
     </div>
   );
 }

src/components/portal/Single/Attack.js

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

src/components/portal/Single/Battlegear.js

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

src/components/portal/Single/Location.js

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

src/index.js

@@ -2,31 +2,34 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
+/* Common Components */
 import App from './Base';
 import PageNotFound from './components/PageNotFound';
 import UnderConstruction from './components/UnderConstruction';
+
+/* Home Component */
+import Home from './components/Home';
+
+/* Test Components */
 import ExampleComponent from './components/ExampleComponent';
 import ExampleTwoDeepComponent from './components/ExampleTwoDeepComponent';
 
 /* SpreadsheetData */
 import API from './components/SpreadsheetData';
 
-/* Home Page */
-import Home from './components/Home';
-
 /* Collection */
 import CollectionHome from './components/collection/Home';
 
 /* Portal */
 import PortalHome from './components/portal/Home';
-// import Attacks from './components/portal/Category/Attacks';
+import Attacks from './components/portal/Category/Attacks';
-// import SingleAttack from './components/portal/Category/Attacks';
+import SingleAttack from './components/portal/Category/Attacks';
-// import Battlegear from './components/portal/Category/Battlegear';
+import Battlegear from './components/portal/Category/Battlegear';
-// import SingleBattlegear 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 Locations from './components/portal/Category/Locations';
-// import SingleLocation from './components/portal/Category/Locations';
+import SingleLocation from './components/portal/Category/Locations';
 import Mugic from './components/portal/Category/Mugic';
 import SingleMugic from './components/portal/Single/Mugic';
 import Tribes from './components/portal/Category/Tribes';
@@ -42,7 +45,7 @@ const routes = (
     </Route>
 
     {/* Construction */}
-    <Route path="construction/" component={UnderConstruction} />
+    <Route path="Construction" component={UnderConstruction} />
 
     {/* Collection */}
     <Route path="collection/" mapMenuTitle="Collection">
@@ -56,113 +59,113 @@ const routes = (
       <IndexRoute component={PortalHome} />
 
       {/* Attacks */}
-      <Route path="Attacks" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Attacks" component={Attacks} mapMenuTitle="Attacks">
-        <Route path="*" component={UnderConstruction} />
+        <Route path="*" component={SingleAttack} />
       </Route>
 
       {/* Battlegear */}
-      <Route path="Battlegear" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Battlegear" component={Battlegear} mapMenuTitle="Battlegear">
-        <Route path="*" component={UnderConstruction} />
+        <Route path="*" component={SingleBattlegear} />
       </Route>
 
       {/* Locations */}
-      <Route path="Locations" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Locations" component={Locations} mapMenuTitle="Locations">
-        <Route path="*" component={UnderConstruction} />
+        <Route path="*" component={SingleLocation} />
       </Route>
 
       {/* Creatures */}
       {/* Todo this isn't needed (tribe checking handled by components) */}
-      <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
-        <Route path="OverWorld" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
+        <Route path="OverWorld" component={Creatures} mapMenuTitle="OverWorld">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="UnderWorld" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
+        <Route path="UnderWorld" component={Creatures} mapMenuTitle="UnderWorld">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mipedian" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
+        <Route path="Mipedian" component={Creatures} mapMenuTitle="Mipedian">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Danian" component={Creatures} mapMenuTitle={mapMenuTitle(location, 3)}>
+        <Route path="Danian" component={Creatures} mapMenuTitle="Danian">
           <Route path="*" component={SingleCreature} />
         </Route>
       </Route>
 
       {/* Mugic */}
-      <Route path="Mugic" component={Mugic} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
-        <Route path="OverWorld" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="OverWorld" component={Mugic} mapMenuTitle="OverWorld">
           <Route path="*" component={SingleMugic} />
         </Route>
-        <Route path="UnderWorld" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="UnderWorld" component={Mugic} mapMenuTitle="UnderWorld">
           <Route path="*" component={SingleMugic} />
         </Route>
-        <Route path="Mipedian" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Mipedian" component={Mugic} mapMenuTitle="Mipedian">
           <Route path="*" component={SingleMugic} />
         </Route>
-        <Route path="Danian" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Danian" component={Mugic} mapMenuTitle="Danian">
           <Route path="*" component={SingleMugic} />
         </Route>
-        <Route path="Generic" component={Mugic} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Generic" component={Mugic} mapMenuTitle="Generic">
           <Route path="*" component={SingleMugic} />
         </Route>
       </Route>
 
       {/* OverWorld */}
-      <Route path="OverWorld" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="OverWorld" component={Tribes} mapMenuTitle="OverWorld">
-        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
       </Route>
 
       {/* UnderWorld */}
-      <Route path="UnderWorld" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="UnderWorld" component={Tribes} mapMenuTitle="UnderWorld">
-        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
       </Route>
 
       {/* Mipedian */}
-      <Route path="Mipedian" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Mipedian" component={Tribes} mapMenuTitle="Mipedian">
-        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
       </Route>
 
       {/* Danian */}
-      <Route path="Danian" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Danian" component={Tribes} mapMenuTitle="Danian">
-        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
       </Route>
 
       {/* M'arrillian */}
-      <Route path="Marrillian" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Marrillian" component={Tribes} mapMenuTitle="Marrillian">
-        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
       </Route>
 
       {/* Generic */}
-      <Route path="Generic" component={Tribes} mapMenuTitle={mapMenuTitle(location,2)}>
+      <Route path="Generic" component={Tribes} mapMenuTitle="Generic">
-        <Route path="Creatures" component={Creatures} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
           <Route path="*" component={SingleCreature} />
         </Route>
-        <Route path="Mugic" component={UnderConstruction} mapMenuTitle={mapMenuTitle(location,3)}>
+        <Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
-          <Route path="*" component={UnderConstruction} />
+          <Route path="*" component={SingleMugic} />
         </Route>
       </Route>
 
@@ -173,12 +176,6 @@ 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
     history={browserHistory}

src/styles/portal/home.style.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import style from '../home.style';
+
+const s = Object.create(style);
+
+s.wrapper = {
+	margin: '0 auto',
+	textAlign: 'left',
+	maxWidth: '300px'
+};
+
+s.types = {
+	float: 'left'
+};
+
+s.tribes = {
+	float: 'right'
+};
+
+export default s;