From 8a5aa8f0bcdb56e113276036cf2fb6f9da4bfcfb Mon Sep 17 00:00:00 2001 From: Daniel Date: Tue, 14 Nov 2017 21:12:16 -0500 Subject: [PATCH] updated portal home page --- src/components/CollectionDB.js | 90 --------------- src/components/SpreadsheetData.js | 96 +++++++++++++++- src/components/portal/Category/Attacks.js | 16 +++ src/components/portal/Category/Battlegear.js | 16 +++ src/components/portal/Category/Locations.js | 16 +++ src/components/portal/Category/Mugic.js | 1 - src/components/portal/Category/Tribes.js | 46 ++++---- src/components/portal/Home.js | 51 +++++++-- src/components/portal/Single/Attack.js | 16 +++ src/components/portal/Single/Battlegear.js | 16 +++ src/components/portal/Single/Location.js | 16 +++ src/index.js | 111 +++++++++---------- src/styles/portal/home.style.js | 20 ++++ 13 files changed, 324 insertions(+), 187 deletions(-) delete mode 100644 src/components/CollectionDB.js create mode 100644 src/styles/portal/home.style.js diff --git a/src/components/CollectionDB.js b/src/components/CollectionDB.js deleted file mode 100644 index 3924237..0000000 --- a/src/components/CollectionDB.js +++ /dev/null @@ -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); - }); - } -} diff --git a/src/components/SpreadsheetData.js b/src/components/SpreadsheetData.js index eebf412..b29f8bf 100644 --- a/src/components/SpreadsheetData.js +++ b/src/components/SpreadsheetData.js @@ -1,6 +1,6 @@ import 'whatwg-fetch'; -import CollectionDB from './CollectionDB'; -import {observable} from "mobx"; +import loki from 'lokijs'; +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.cards = new CollectionDB(this, "cards"); + this.portal = new CollectionDB(this); + 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); + }); + } +} diff --git a/src/components/portal/Category/Attacks.js b/src/components/portal/Category/Attacks.js index e69de29..9b51f78 100644 --- a/src/components/portal/Category/Attacks.js +++ b/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 (); + } +} diff --git a/src/components/portal/Category/Battlegear.js b/src/components/portal/Category/Battlegear.js index e69de29..51a1e51 100644 --- a/src/components/portal/Category/Battlegear.js +++ b/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 (); + } +} diff --git a/src/components/portal/Category/Locations.js b/src/components/portal/Category/Locations.js index e69de29..92fc3fc 100644 --- a/src/components/portal/Category/Locations.js +++ b/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 (); + } +} diff --git a/src/components/portal/Category/Mugic.js b/src/components/portal/Category/Mugic.js index bdf2766..17ebf2b 100644 --- a/src/components/portal/Category/Mugic.js +++ b/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 diff --git a/src/components/portal/Category/Tribes.js b/src/components/portal/Category/Tribes.js index a1c93b1..4f49ecd 100644 --- a/src/components/portal/Category/Tribes.js +++ b/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 -// 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 - +@inject((stores, props, context) => props) @observer export default class Tribes extends React.Component { - constructor(props) { - super (props); - } - + // /{Tribe} + // 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 (
{this.props.children}
); } + let path = this.props.location.pathname.split("/"); if (path[path.length-1] == "") path.pop(); // Remove trailing backslash - return ( - - ); + let tribe = path[2]; - // return (
- // {} - // {mugic.gsx$name.$t} - //
- // ); + return ( +
+
Tribe Summary Here

+ Creatures
+ Mugic +
+ ); } } diff --git a/src/components/portal/Home.js b/src/components/portal/Home.js index 642bb13..0395d58 100644 --- a/src/components/portal/Home.js +++ b/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 ( -
- Creatures -
- Mugic +
+
+

Explore Types


+ Attacks +

+ Battlegear +

+ Creatures +

+ Mugic +

+ Locations +
+
+

Explore Tribes


+ Danian +

+ Mipedian +

+ OverWorld +

+ UnderWorld +
); } diff --git a/src/components/portal/Single/Attack.js b/src/components/portal/Single/Attack.js index e69de29..4f955ed 100644 --- a/src/components/portal/Single/Attack.js +++ b/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 (); + } +} diff --git a/src/components/portal/Single/Battlegear.js b/src/components/portal/Single/Battlegear.js index e69de29..8e75e81 100644 --- a/src/components/portal/Single/Battlegear.js +++ b/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 (); + } +} diff --git a/src/components/portal/Single/Location.js b/src/components/portal/Single/Location.js index e69de29..7a33df4 100644 --- a/src/components/portal/Single/Location.js +++ b/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 (); + } +} diff --git a/src/index.js b/src/index.js index 745fb40..1997594 100644 --- a/src/index.js +++ b/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 SingleAttack from './components/portal/Category/Attacks'; -// import Battlegear from './components/portal/Category/Battlegear'; -// import SingleBattlegear from './components/portal/Category/Battlegear'; +import Attacks from './components/portal/Category/Attacks'; +import SingleAttack from './components/portal/Category/Attacks'; +import Battlegear 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 SingleLocation from './components/portal/Category/Locations'; +import Locations 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 = ( {/* Construction */} - + {/* Collection */} @@ -56,113 +59,113 @@ const routes = ( {/* Attacks */} - - + + {/* Battlegear */} - - + + {/* Locations */} - - + + {/* Creatures */} {/* Todo this isn't needed (tribe checking handled by components) */} - - + + - + - + - + {/* Mugic */} - - + + - + - + - + - + {/* OverWorld */} - - + + - - + + {/* UnderWorld */} - - + + - - + + {/* Mipedian */} - - + + - - + + {/* Danian */} - - + + - - + + {/* M'arrillian */} - - + + - - + + {/* Generic */} - - + + - - + + @@ -173,12 +176,6 @@ const routes = ( ); -function mapMenuTitle(location, depth=1) { - let path = location.pathname.split("/"); - if (path[path.length-1] == "") path.pop(); // Remove trailing backslash - return path[depth]; -} - render(