From 4934fdd9c22de03249e94d225086536b57bd34da Mon Sep 17 00:00:00 2001 From: Daniel Date: Sat, 11 Nov 2017 21:02:18 -0500 Subject: [PATCH] close #12 close #3 --- .babelrc | 3 +- package.json | 5 +- src/components/AppHelper.js | 39 ------- src/components/SpreadsheetData.js | 28 +++-- src/components/database/portal.js | 87 +++++++------- src/components/portal/Single/Creature.js | 140 ++++++++++++++++------- src/index.js | 7 ++ 7 files changed, 172 insertions(+), 137 deletions(-) delete mode 100644 src/components/AppHelper.js diff --git a/.babelrc b/.babelrc index 562a5e3..64fe89c 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["es2015", "react", "stage-1"] + "presets": ["es2015", "react", "stage-1"], + "plugins": ["transform-decorators-legacy"] } diff --git a/package.json b/package.json index 9cbaffe..177aea5 100644 --- a/package.json +++ b/package.json @@ -13,20 +13,23 @@ "author": "Danude Sandstorm", "license": "MIT", "dependencies": { + "lokijs": "^1.5.1", + "prop-types": "^15.6.0", "mobx": "^3.3.1", "mobx-react": "^4.3.3", - "prop-types": "^15.6.0", "react": "^16.0.0", "react-dom": "^16.0.0", "react-interactive": "^0.8.1", "react-router": "^3.2.0", "react-router-dom": "^4.2.2", + "rxjs": "^5.5.0", "whatwg-fetch": "^2.0.3" }, "devDependencies": { "babel-core": "^6.21.0", "babel-eslint": "^8.0.0", "babel-loader": "^6.2.10", + "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-1": "^6.16.0", diff --git a/src/components/AppHelper.js b/src/components/AppHelper.js deleted file mode 100644 index 28e07c4..0000000 --- a/src/components/AppHelper.js +++ /dev/null @@ -1,39 +0,0 @@ -import React from 'react'; - -export const language = "ENG"; -export const bkgrnd = "05"; - -export function ChangePage(asParams) { - let location = "#"; - switch (asParams) { - case 'collect': - location = '/collection/'; - break; - case 'register': - break; - case 'build': - location = 'http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82'; - break; - case 'centerOval': - location = '/'; - break; - case 'enterTheCode': - break; - case 'trade': - location = 'http://www.tradecardsonline.com/?action=selectCard&goal=&game_id=82'; - break; - case 'portal': - location = '/portal/'; - break; - case 'forum': - location = 'http://chaoticbackup.forumotion.com'; - break; - case 'playNow': - location = 'http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82'; - break; - default: - location = '/construction/'; - break; - } - return location; -} diff --git a/src/components/SpreadsheetData.js b/src/components/SpreadsheetData.js index 1688776..2eec047 100644 --- a/src/components/SpreadsheetData.js +++ b/src/components/SpreadsheetData.js @@ -1,8 +1,14 @@ import 'whatwg-fetch'; import CardsDB from './database/cards'; import PortalDB from './database/portal'; +import {observable} from "mobx"; class API { + @observable portal = null; + @observable cards = null; + @observable urls = null; + @observable instance = null; + static base_url = "https://spreadsheets.google.com/feeds/list/"; static data_format = "/od6/public/values?alt=json"; // + "/od6/public/basic?alt=json"; // Alternate data format @@ -10,10 +16,9 @@ class API { get base_image() { return "https://drive.google.com/uc?id="; } // Singleton - instance = null; static getInstance() { - if (!API.instance) { API.instance = new API(); } - return API.instance; + if (!this.instance) { this.instance = new API(); } + return this.instance; } static path(spreadsheetID) { @@ -21,17 +26,16 @@ class API { } constructor() { - var self = this; - // This sets up urls and kicks off db - this.urls = {}; - this.getSpreadsheet(API.path(API.base_spreadsheet), function(data) { + let urls = {}; + this.getSpreadsheet(API.path(API.base_spreadsheet), (data) => { if (data == null) return; - data.forEach(function(d) { - if (!self.urls[d.gsx$type.$t]) self.urls[d.gsx$type.$t] = {}; - self.urls[d.gsx$type.$t][d.gsx$subtype.$t] = API.path(d.gsx$url.$t); + data.forEach((d) => { + if (!urls[d.gsx$type.$t]) urls[d.gsx$type.$t] = {}; + urls[d.gsx$type.$t][d.gsx$subtype.$t] = API.path(d.gsx$url.$t); }); - self.setupDB(); + this.urls = urls; + this.setupDB(); }); } @@ -60,3 +64,5 @@ class API { } export default API.getInstance(); + +// export default new API(); diff --git a/src/components/database/portal.js b/src/components/database/portal.js index e6405aa..5ec5142 100644 --- a/src/components/database/portal.js +++ b/src/components/database/portal.js @@ -1,61 +1,63 @@ import loki from 'lokijs'; +import {observable, autorun} from "mobx"; export default class PortalDB { + @observable built = []; // Keeps track of what collections have been populated + constructor(API) { this.api = API; - this.setupDB(); - this.setupCreatures("Overworld"); - } - - setupDB() { - var self = this; - // let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' }); - let db = new loki("chaotic_portal.db"); // ignoring persistence for now + // 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; + } - // function databaseInitialize() { - // var entries; - // if ((entries = db.getCollection("attacks")) === null) - // entries = db.addCollection("attacks"); - // self.attacks = entries; + setupDB() { + var self = this; + let db = new loki("chaotic_portal.db", { autosave: true, autoload: true, autoloadCallback: databaseInitialize, autosaveInterval: 4000, persistenceMethod: 'localStorage' }); + this.db = db; - // if ((entries = db.getCollection("battlegear")) === null) - // entries = db.addCollection("battlegear"); - // self.battlegear = entries; + let databaseInitialize = () => { + var entries; + if ((entries = db.getCollection("attacks")) === null) + entries = db.addCollection("attacks"); + self.attacks = 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("battlegear")) === null) + entries = db.addCollection("battlegear"); + self.battlegear = entries; - // if ((entries = db.getCollection("locations")) === null) - // entries = db.addCollection("locations"); - // self.locations = 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("mugic")) === null) - // entries = db.addCollection("mugic"); - // self.mugic = entries; - // } + 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, function(data) { - data.map(function(item) { - // delete item.category; - // delete item.id; - // delete item.updated; - // delete item.content; - // delete item.link; - // delete item.title; - item.name = item.gsx$name.$t; - return item; - }); - callback(data); + 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; + })); }); } @@ -68,10 +70,9 @@ export default class PortalDB { } setupCreatures(tribe) { - // console.log(this); - var self = this; - this.setup(this.api.urls.Creatures[tribe], function(data) { - self.creatures.insert(data); + this.setup(this.api.urls.Creatures[tribe], (data) => { + this.creatures.insert(data); + this.built.push("creatures_"+tribe); }); } diff --git a/src/components/portal/Single/Creature.js b/src/components/portal/Single/Creature.js index 5c58ffa..39972b6 100644 --- a/src/components/portal/Single/Creature.js +++ b/src/components/portal/Single/Creature.js @@ -6,45 +6,25 @@ import PageNotFound from '../../PageNotFound'; import UnderConstruction from '../../UnderConstruction'; import API from '../../SpreadsheetData'; import s from '../../../styles/app.style'; +import {observer, inject} from 'mobx-react'; +@inject((stores, props, context) => props) @observer export default class SingleCreature extends React.Component { - constructor(props) { - super (props); - this.state = {tribe: '', creature: null, card_data: null}; - } - - componentWillReceiveProps(nextProps) { - this.getData(nextProps); - } - - componentDidMount() { - this.getData(this.props); - } - // ** Process the tribe ** // // /portal/Creatures/{Tribe}/{Name} // /portal/{Tribe}/Creatures/{Name} // The first / gets counted getData(props) { - let path = props.location.pathname.split("/"); - if (path[path.length-1] == "") path.pop(); // Remove trailing backslash - // Path too long - if ( path.length !== 5 ) { - return; - } - - //Handle both url layouts - let tribe = (() => { - if (path[2] === "Creatures") return path[3]; - if (path[3] === "Creatures") return path[2]; - })(); - this.setState({tribe: tribe}); var name = decodeURIComponent(path[4]); var self = this; + var creature = API.portal.creatures.findOne(name); + if (creature) self.setState({"creature": creature}); + else self.setState({creature: "n/a"}); + console.log(creature); API.getSpreadsheet(API.Creatures[tribe], (data) => { data.map((item, i) => { if (item.title.$t == name) @@ -67,28 +47,104 @@ export default class SingleCreature extends React.Component { } render() { - var self = this; + const store = API; - // Get spreadsheet data based on tribe/name - if (!(API.Creatures).hasOwnProperty(this.state.tribe)) { - return( - - //return(browserHistory.push('/PageNotFound')); - ); + 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(); } - // creature is the object to be used in the jsx - var creature = this.state.creature; - var card_data = this.state.card_data; + //Handle both url layouts + let tribe = (() => { + if (path[2] === "Creatures") return path[3]; + if (path[3] === "Creatures") return path[2]; + })(); - // TODO separate loading of card_data - if (creature == "n/a" || card_data == "n/a") return( - - ); + if (store.urls === null || + store.portal === null || + store.cards === null) { + return (Loading...); + } - if (creature == null || card_data == null) return( - Loading... + // Todo this isn't needed for now (handled by routes) + // if (!store.urls.Creatures.hasOwnProperty(tribe)) { + // return (Invalid Tribe: {tribe}); + // } + + if (!store.portal.built.includes("creatures_"+tribe)) { + store.portal.setupCreatures(tribe); + return (Loading...); + } + // TODO load card data + + const creature = store.portal.creatures.findOne({'gsx$name': path[4]}); + console.log(creature); + if (!creature) { + return(); + } + + const locations = creature.gsx$location.split(/[,]+\s*/).map((item, i) => { + return

{item}

; + }); + + const battlegear = creature.gsx$battlegear.split(/[,]+\s*/).map((item, i) => { + return

{item}

; + }); + + return ( +
+ +

{creature.gsx$name}

+ +
+
+ Appearance:
+ {creature.gsx$appearance} +
+
+
+ Background:
+ {creature.gsx$background} +
+
+
+ Details:
+ {creature.gsx$details} +
+
+
+ Favorite Battlegear(s):
+ {battlegear} +
+
+
+ Favorite Location(s):
+ {locations} +
+
+
+ Height (ft):
+ {creature.gsx$height} +
+
+
+ Special Abilities:
+ {creature.gsx$specialabilities} +
+
+
+ Weight (lb):
+ {creature.gsx$weight} +
+
); + } + + fakerender() { + var self = this; const elements = card_data.gsx$elements.$t.split(/[ ,]+/).map((item, i) => { return {item}; diff --git a/src/index.js b/src/index.js index 56d20d9..edcd011 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,9 @@ import UnderConstruction from './components/UnderConstruction'; import ExampleComponent from './components/ExampleComponent'; import ExampleTwoDeepComponent from './components/ExampleTwoDeepComponent'; +/* SpreadsheetData */ +import API from './components/SpreadsheetData'; + /* Home Page */ import Home from './components/Home'; @@ -43,6 +46,8 @@ const routes = ( {/* Collection */} + + {/* Portal */} @@ -168,6 +173,8 @@ const routes = ( + +