Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-03-21 17:24:14 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

close #12 close #3

Browse Source
This commit is contained in:
Daniel 2017-11-11 21:02:18 -05:00
parent 2fcf3557b4
commit 4934fdd9c2
7 changed files with 172 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc
View File

@ -1,3 +1,4 @@
{
"presets": ["es2015", "react", "stage-1"]
"presets": ["es2015", "react", "stage-1"],
"plugins": ["transform-decorators-legacy"]
}

5
package.json
View File

@ -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",

39
src/components/AppHelper.js
View File

@ -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;
}

28
src/components/SpreadsheetData.js
View File

@ -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();

87
src/components/database/portal.js
View File

@ -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);
});
}

140
src/components/portal/Single/Creature.js
View File

@ -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(
<PageNotFound location={this.props.location}/>
//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(<PageNotFound location={this.props.location}/>);
}
// 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(
<PageNotFound location={this.props.location}/>
);
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
return (<span>Loading...</span>);
}
if (creature == null || card_data == 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>);
// }
if (!store.portal.built.includes("creatures_"+tribe)) {
store.portal.setupCreatures(tribe);
return (<span>Loading...</span>);
}
// TODO load card data
const creature = store.portal.creatures.findOne({'gsx$name': path[4]});
console.log(creature);
if (!creature) {
return(<PageNotFound location={this.props.location}/>);
}
const locations = creature.gsx$location.split(/[,]+\s*/).map((item, i) => {
return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Locations/"+item}><span>{item}</span></Interactive></p>;
});
const battlegear = creature.gsx$battlegear.split(/[,]+\s*/).map((item, i) => {
return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Battlegear/"+item}><span>{item}</span></Interactive></p>;
});
return (
<div className={"creature " + tribe.toLowerCase()}>
<UnderConstruction location={this.props.location}/>
<h1>{creature.gsx$name}</h1>
<img className="splash" src={store.base_image + creature.gsx$splash}></img>
<hr />
<div>
<strong>Appearance:</strong><br />
{creature.gsx$appearance}
</div>
<hr />
<div>
<strong>Background:</strong><br />
{creature.gsx$background}
</div>
<hr />
<div>
<strong>Details:</strong><br />
{creature.gsx$details}
</div>
<hr />
<div>
<strong>Favorite Battlegear(s):</strong><br />
{battlegear}
</div>
<hr />
<div>
<strong>Favorite Location(s):</strong><br />
{locations}
</div>
<hr />
<div>
<strong>Height (ft):</strong><br />
{creature.gsx$height}
</div>
<hr />
<div>
<strong>Special Abilities:</strong><br />
{creature.gsx$specialabilities}
</div>
<hr />
<div>
<strong>Weight (lb):</strong><br />
{creature.gsx$weight}
</div>
</div>
);
}
fakerender() {
var self = this;
const elements = card_data.gsx$elements.$t.split(/[ ,]+/).map((item, i) => {
return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;

7
src/index.js
View File

@ -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 */}
<Route path="collection/" mapMenuTitle="Collection">
<IndexRoute component={CollectionHome} />
<Route path="*" component={PageNotFound} />
</Route>
{/* Portal */}
@ -168,6 +173,8 @@ const routes = (
</Route>
</Route>
<Route path="*" component={PageNotFound} />
</Route>
<Route path="*" component={PageNotFound} />
</Route>