#4 finished new loading method

bonus: fixed css not working

src/components/SpreadsheetData.js

@@ -1,6 +1,6 @@
 import 'whatwg-fetch';
 import loki from 'lokijs';
-import {observable, autorun} from "mobx";
+import {observable, observe} from "mobx";
 
 class API {
   @observable portal = null;
@@ -112,7 +112,6 @@ export default API.getInstance();
 
 class CollectionDB {
   // Keeps track of what collections have been populated
-  @observable built = [];
   @observable building = {};
 
   constructor(API, format) {
@@ -121,48 +120,7 @@ class CollectionDB {
     this.setupDB();
   }
 
-  setupDB() {
-    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;
-
-    // ignoring persistence for now
-    //autorun(() => console.log(this.creatures));
-
-  //   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, type, callback) {
+  getSpreadsheetData(spreadsheet, type, callback) {
     this.api.getSpreadsheet(spreadsheet, (data) => {
       callback(data.map((item) => {
         let temp = {};
@@ -194,49 +152,49 @@ class CollectionDB {
     else {
       this.building[type] = "building";
       let uc_type = type.charAt(0).toUpperCase() + type.slice(1);
-      console.log(type, this.format, this.building[type]);
-      return this.setup(this.api.urls[uc_type][this.format], uc_type, (data) => {
+      return this.getSpreadsheetData(this.api.urls[uc_type][this.format], uc_type, (data) => {
         this[type].insert(data);
         this.building[type] = "built";
-        console.log(type, this.format, this.building[type]);
         resolve();
       });
     }
   }
 
-  setupAttacks(type="portal") {
-    this.setup(this.api.urls.Attacks[type], "Attack", (data) => {
-      this.attacks.insert(data);
-      this.built.push("attacks_"+type);
-    });
-  }
+  setupDB() {
+    // ignoring persistence for now
+    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;
 
-  setupBattlegear(type="portal") {
-    this.setup(this.api.urls.Battlegear[type], "Battlegear", (data) => {
-      this.battlegear.insert(data);
-      this.built.push("battlegear_"+type);
-    });
-  }
+  //   let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' });
+  //   this.db = db;
 
-  setupCreatures(type="portal") {
-    this.setup(this.api.urls.Creatures[type], "Creature", (data) => {
-      this.creatures.insert(data);
-      this.built.push("creatures_"+type);
-    });
-  }
+  //   let databaseInitialize = () => {
+  //     var entries;
+  //     if ((entries = db.getCollection("attacks")) === null)
+  //       entries = db.addCollection("attacks");
+  //     this.attacks = entries;
 
-  setupLocations(type="portal") {
-    this.setup(this.api.urls.Locations[type], "Location", (data) => {
-      this.locations.insert(data);
-      this.built.push("locations_"+type);
-    });
-  }
+  //     if ((entries = db.getCollection("battlegear")) === null)
+  //       entries = db.addCollection("battlegear");
+  //     this.battlegear = entries;
 
-  setupMugic(type="portal") {
-    this.setup(this.api.urls.Mugic[type], "Mugic", (data) => {
-      this.mugic.insert(data);
-      this.built.push("mugic_"+type);
-    });
-  }
+  //     console.log(db.getCollection("creatures"));
+  //     if ((entries = db.getCollection("creatures")) === null)
+  //       entries = db.addCollection("creatures");
+  //     this.creatures = db.addCollection('creatures');
 
+  //     if ((entries = db.getCollection("locations")) === null)
+  //       entries = db.addCollection("locations");
+  //     this.locations = entries
+
+  //     if ((entries = db.getCollection("mugic")) === null)
+  //       entries = db.addCollection("mugic");
+  //     this.mugic = entries;
+  //   };
+  }
 }

src/components/index.js

@@ -11,11 +11,12 @@ import Collection from './collection/index';
 import Portal from './portal/index';
 import Home from './Home';
 
-const BlockAvoider = withRouter(Base)
+// const BlockAvoider = withRouter(Base)
 
 render(
   <Router>
-    <BlockAvoider />
+    {/* <BlockAvoider /> */}
+    <Base path="/*" href="/" />
   </Router>
   , document.getElementById('root'),
 );
@@ -33,10 +34,11 @@ function Routing(props) {
   );
 }
 
-const language = "ENG";
-const bkgrnd = "05";
-
 function Base(props) {
+  // Configuration for the language and background
+  // Images managed in css file
+  const language = "ENG";
+  const bkgrnd = "05";
 
   const children = <Routing {...props} />;
 

src/components/portal/Category/Battlegear.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link, Route } from 'react-router-dom';
+import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
@@ -8,10 +9,9 @@ import SingleBattlegear from '../Single/Battlegear';
 
 @inject((stores, props, context) => props) @observer
 export default class Battlegear extends React.Component {
+  @observable loaded = false;
 
     render() {
-
-
       let path = this.props.location.pathname.split("/");
       if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
@@ -21,13 +21,11 @@ export default class Battlegear extends React.Component {
         return (<span>Loading...</span>);
       }
 
-      if (!API.cards.built.includes("battlegear_cards")) {
-        API.cards.setupBattlegear("cards");
-        return (<span>Loading...</span>);
-      }
-
-      if (!API.portal.built.includes("battlegear_portal")) {
-        API.portal.setupBattlegear("portal");
+      if (this.loaded == false) {
+        API.buildCollection([{'cards': 'battlegear'}, {'portal': 'battlegear'}])
+        .then(() => {
+          this.loaded = true;
+        });
         return (<span>Loading...</span>);
       }
 

src/components/portal/Category/Creatures.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link, Route } from 'react-router-dom';
+import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
@@ -8,13 +9,13 @@ import Creature from '../Single/Creature';
 
 @inject((stores, props, context) => props) @observer
 export default class Creatures extends React.Component {
+  @observable loaded = false;
 
   // ** Process the tribe ** //
   // /portal/Creatures/
   // /portal/Creatures/{Tribe}
   // The first / gets counted
   render() {
-
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
@@ -24,13 +25,11 @@ export default class Creatures extends React.Component {
       return (<span>Loading...</span>);
     }
 
-    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");
+    if (this.loaded == false) {
+      API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}])
+      .then(() => {
+        this.loaded = true;
+      });
       return (<span>Loading...</span>);
     }
 

src/components/portal/Category/Locations.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link, Route } from 'react-router-dom';
+import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
@@ -8,6 +9,7 @@ import Location from '../Single/Location';
 
 @inject((stores, props, context) => props) @observer
 export default class Locations extends React.Component {
+  @observable loaded = false;
 
   render() {
 
@@ -20,13 +22,11 @@ export default class Locations extends React.Component {
       return (<span>Loading...</span>);
     }
 
-    if (!API.cards.built.includes("locations_cards")) {
-      API.cards.setupLocations("cards");
-      return (<span>Loading...</span>);
-    }
-
-    if (!API.portal.built.includes("locations_portal")) {
-      API.portal.setupLocations("portal");
+    if (this.loaded == false) {
+      API.buildCollection([{'cards': 'locations'}, {'portal': 'locations'}])
+      .then(() => {
+        this.loaded = true;
+      });
       return (<span>Loading...</span>);
     }
 

src/components/portal/Category/Mugic.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link, Route } from 'react-router-dom';
+import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
@@ -8,6 +9,7 @@ import SingleMugic from '../Single/Mugic';
 
 @inject((stores, props, context) => props) @observer
 export default class Mugic extends React.Component {
+  @observable loaded = false;
 
   // ** Process the tribe ** //
   // /portal/Mugic/
@@ -25,13 +27,11 @@ export default class Mugic extends React.Component {
       return (<span>Loading...</span>);
     }
 
-    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");
+    if (this.loaded == false) {
+      API.buildCollection([{'cards': 'mugic'}, {'portal': 'mugic'}])
+      .then(() => {
+        this.loaded = true;
+      });
       return (<span>Loading...</span>);
     }
 

src/components/portal/Category/Tribes.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Interactive from 'react-interactive';
 import { Link, Route } from 'react-router-dom';
+import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import loki from 'lokijs';
 import s from '../../../styles/app.style';
@@ -10,6 +11,7 @@ import Mugic from '../Single/Mugic';
 
 @inject((stores, props, context) => props) @observer
 export default class Tribes extends React.Component {
+  @observable loaded = false;
 
   constructor() {
     super();
@@ -55,23 +57,11 @@ export default class Tribes extends React.Component {
       );
     }
 
-    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>);
-    }
-
-    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");
+    if (this.loaded == false) {
+      API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}])
+      .then(() => {
+        this.loaded = true;
+      });
       return (<span>Loading...</span>);
     }
 
@@ -100,7 +90,7 @@ export default class Tribes extends React.Component {
         url = "/portal/" + tribe + "/Mugic/" + encodeURIComponent(card.gsx$name);
       }
 
-      if (card.gsx$type == "Creature") {
+      if (card.gsx$type == "Creatures") {
         card_data = API.cards.creatures.findOne({'gsx$name': card.gsx$name});
         url = "/portal/" + tribe + "/Creatures/" + encodeURIComponent(card.gsx$name);
       }

src/components/portal/Single/Attack.js

@@ -21,22 +21,6 @@ export default class SingleAttack extends React.Component {
 
     let name = decodeURIComponent(path[3]);
 
-    if (API.urls === null ||
-      API.portal === null ||
-      API.cards === null) {
-      return (<span>Loading...</span>);
-    }
-
-    if (!API.cards.built.includes("attacks_cards")) {
-      API.cards.setupAttacks("cards");
-      return (<span>Loading...</span>);
-    }
-
-    if (!API.portal.built.includes("attacks_portal")) {
-      API.portal.setupAttacks("portal");
-      return (<span>Loading...</span>);
-    }
-
     const attack = API.portal.attacks.findOne({'gsx$name': name});
     if (!attack) {
       return(<PageNotFound location={this.props.location}/>);

src/components/portal/Single/Battlegear.js

@@ -22,22 +22,6 @@ export default class SingleBattlegear extends React.Component {
 
     let name = decodeURIComponent(path[3]);
 
-    if (API.urls === null ||
-      API.portal === null ||
-      API.cards === null) {
-      return (<span>Loading...</span>);
-    }
-
-    if (!API.cards.built.includes("battlegear_cards")) {
-      API.cards.setupBattlegear("cards");
-      return (<span>Loading...</span>);
-    }
-
-    if (!API.portal.built.includes("battlegear_portal")) {
-      API.portal.setupBattlegear("portal");
-      return (<span>Loading...</span>);
-    }
-
     const battlegear = API.portal.battlegear.findOne({'gsx$name': name});
     if (!battlegear) {
       return(<PageNotFound location={this.props.location}/>);

src/components/portal/Single/Creature.js

@@ -18,22 +18,6 @@ export default class SingleCreature extends React.Component {
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-    if (API.urls === null ||
-      API.portal === null ||
-      API.cards === null) {
-      return (<span>Loading...</span>);
-    }
-
-    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]);

src/components/portal/Single/Location.js

@@ -22,22 +22,6 @@ export default class SingleLocation extends React.Component {
 
     let name = decodeURIComponent(path[3]);
 
-    if (API.urls === null ||
-      API.portal === null ||
-      API.cards === null) {
-      return (<span>Loading...</span>);
-    }
-
-    if (!API.cards.built.includes("locations_cards")) {
-      API.cards.setupLocations("cards");
-      return (<span>Loading...</span>);
-    }
-
-    if (!API.portal.built.includes("locations_portal")) {
-      API.portal.setupLocations("portal");
-      return (<span>Loading...</span>);
-    }
-
     const location = API.portal.locations.findOne({'gsx$name': name});
     if (!location) {
       return(<PageNotFound location={this.props.location}/>);

src/components/portal/Single/Mugic.js

@@ -18,22 +18,6 @@ export default class SingleMugic extends React.Component {
     let path = this.props.location.pathname.split("/");
     if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
 
-    if (API.urls === null ||
-      API.portal === null ||
-      API.cards === null) {
-      return (<span>Loading...</span>);
-    }
-
-    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]);