mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-03-22 01:34:20 -05:00
single creature updated
stubbed other types
This commit is contained in:
Daniel
parent
4934fdd9c2
commit
c57760bb11
86
src/components/CollectionDB.js
Normal file
86
src/components/CollectionDB.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
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() {
|
||||
|
||||
}
|
||||
|
||||
setupMugic(tribe) {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,12 @@
|
|||
import 'whatwg-fetch';
|
||||
import CardsDB from './database/cards';
|
||||
import PortalDB from './database/portal';
|
||||
import CollectionDB from './CollectionDB';
|
||||
import {observable} from "mobx";
|
||||
|
||||
class API {
|
||||
@observable portal = null;
|
||||
@observable cards = null;
|
||||
@observable urls = null;
|
||||
@observable instance = null;
|
||||
instance = null;
|
||||
|
||||
static base_url = "https://spreadsheets.google.com/feeds/list/";
|
||||
static data_format = "/od6/public/values?alt=json";
|
||||
|
|
@ -54,8 +53,8 @@ class API {
|
|||
|
||||
setupDB() {
|
||||
try {
|
||||
this.portal = new PortalDB(this);
|
||||
this.cards = new CardsDB(this);
|
||||
this.portal = new CollectionDB(this, "portal");
|
||||
this.cards = new CollectionDB(this, "cards");
|
||||
}
|
||||
catch (err) {
|
||||
console.log('setting up database failed', err);
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
export default class CardsDB {
|
||||
constructor(API) {
|
||||
// this.api = API;
|
||||
// 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;
|
||||
}
|
||||
|
||||
setupCreatures(spreadsheet) {
|
||||
this.getSpreadsheet(spreadsheet, function(json) {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
setupMugic(spreadsheet) {
|
||||
this.getSpreadsheet(spreadsheet, function(json) {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
setupBattleGear(spreadsheet) {
|
||||
this.getSpreadsheet(spreadsheet, function(json) {
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
setupLocations(spreadsheet) {
|
||||
this.getSpreadsheet(spreadsheet, function(json) {
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
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;
|
||||
// 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) {
|
||||
this.setup(this.api.urls.Creatures[tribe], (data) => {
|
||||
this.creatures.insert(data);
|
||||
this.built.push("creatures_"+tribe);
|
||||
});
|
||||
}
|
||||
|
||||
setupLocations() {
|
||||
|
||||
}
|
||||
|
||||
setupMugic(tribe) {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -4,54 +4,20 @@ import { Link } from 'react-router';
|
|||
import PageNotFound from '../../PageNotFound';
|
||||
import API from '../../SpreadsheetData';
|
||||
import s from '../../../styles/app.style';
|
||||
import UnderConstruction from '../../UnderConstruction';
|
||||
|
||||
export default class Creatures extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super (props);
|
||||
this.state = {tribe: '', creatures: {}};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.getData(nextProps);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getData(this.props);
|
||||
}
|
||||
|
||||
// ** Process the tribe ** //
|
||||
// /portal/Creatures/
|
||||
// /portal/{Tribe}/Creatures/
|
||||
// The first / gets counted
|
||||
getData(props) {
|
||||
if (props.children) return this.props = props;
|
||||
let path = props.location.pathname.split("/");
|
||||
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
|
||||
|
||||
// Set tribe
|
||||
let tribe = (path.length === 4) ? path[2] : "All";
|
||||
this.setState({tribe: tribe});
|
||||
|
||||
// For each tribe, get its spreadsheet, set the state
|
||||
var self = this;
|
||||
let urls = (tribe == "All") ? API.Creatures : {[tribe]: API.Creatures[tribe]};
|
||||
Object.keys(urls).map((tribe) => {
|
||||
API.getSpreadsheet(urls[tribe], (data) => {
|
||||
self.setState({creatures:
|
||||
Object.assign(self.state.creatures, {[tribe]: data})
|
||||
});
|
||||
});
|
||||
});
|
||||
// self.setState({creatures: this.state.creatures.concat([data])});
|
||||
}
|
||||
|
||||
hacks(event) {
|
||||
console.log(event);
|
||||
this.setState({click: true});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.children) {
|
||||
return (<div>{this.props.children}</div>);
|
||||
}
|
||||
return (
|
||||
<UnderConstruction location={this.props.location}/>
|
||||
);
|
||||
}
|
||||
|
||||
fakerender() {
|
||||
if (this.props.children) {
|
||||
return (<div>{this.props.children}</div>);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,25 +8,16 @@ import s from '../../../styles/app.style';
|
|||
|
||||
export default class Mugic extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super (props);
|
||||
this.tribe = '';
|
||||
this.state = {mugic: {}};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.children) return;
|
||||
var self = this;
|
||||
let urls = (this.tribe == "All") ? API.Mugic : {[this.tribe]: API.Mugic[this.tribe]};
|
||||
// For each tribe, get its spreadsheet, set the state
|
||||
Object.keys(urls).map((tribe) => {
|
||||
API.getSpreadsheet(urls[tribe], function(data) {
|
||||
self.setState({mugic: Object.assign(self.state.mugic, {[tribe]: data})});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.props.children) {
|
||||
return (<div>{this.props.children}</div>);
|
||||
}
|
||||
return (
|
||||
<UnderConstruction location={this.props.location}/>
|
||||
);
|
||||
}
|
||||
|
||||
fakerender() {
|
||||
if (this.props.children) {
|
||||
return (<div>{this.props.children}</div>);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link } from 'react-router';
|
||||
// import {browserHistory} from 'react-router';
|
||||
import PageNotFound from '../../PageNotFound';
|
||||
import UnderConstruction from '../../UnderConstruction';
|
||||
import API from '../../SpreadsheetData';
|
||||
import s from '../../../styles/app.style';
|
||||
import {observer, inject} from 'mobx-react';
|
||||
|
|
@ -15,37 +13,6 @@ export default class SingleCreature extends React.Component {
|
|||
// /portal/Creatures/{Tribe}/{Name}
|
||||
// /portal/{Tribe}/Creatures/{Name}
|
||||
// The first / gets counted
|
||||
getData(props) {
|
||||
|
||||
|
||||
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)
|
||||
self.setState({creature: item });
|
||||
});
|
||||
// If no creature set as false
|
||||
if (!self.state.creature) {
|
||||
self.setState({creature: "n/a"});
|
||||
}
|
||||
});
|
||||
API.getSpreadsheet(API.Creatures_Card_Data, (data) => {
|
||||
data.map((item, i) => {
|
||||
if (item.title.$t == name) self.setState({card_data: item });
|
||||
});
|
||||
// If no card_data set as false
|
||||
if (!self.state.card_data) {
|
||||
self.setState({card_data: "n/a"});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const store = API;
|
||||
|
||||
|
|
@ -74,14 +41,18 @@ export default class SingleCreature extends React.Component {
|
|||
// return (<span>Invalid Tribe: {tribe}</span>);
|
||||
// }
|
||||
|
||||
if (!store.cards.built.includes("creatures_Cards")) {
|
||||
store.cards.setupCreatures("Cards");
|
||||
return (<span>Loading...</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);
|
||||
const card_data = store.cards.creatures.findOne({'gsx$name': path[4]});
|
||||
if (!creature) {
|
||||
return(<PageNotFound location={this.props.location}/>);
|
||||
}
|
||||
|
|
@ -94,9 +65,12 @@ export default class SingleCreature extends React.Component {
|
|||
return <p key={i}><Interactive as={Link} {...s.link} to={"/portal/Battlegear/"+item}><span>{item}</span></Interactive></p>;
|
||||
});
|
||||
|
||||
const elements = card_data.gsx$elements.split(/[ ,]+/).map((item, i) => {
|
||||
return <img className="icon" src={"/src/img/icons/elements/"+item.toLowerCase()+".png"} alt={item} key={i}></img>;
|
||||
});
|
||||
|
||||
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 />
|
||||
|
|
@ -139,113 +113,60 @@ export default class SingleCreature extends React.Component {
|
|||
<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>;
|
||||
});
|
||||
|
||||
const locations = creature.gsx$location.$t.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.$t.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 " + this.state.tribe.toLowerCase()}>
|
||||
<h1>{creature.gsx$name.$t}</h1>
|
||||
<img className="splash" src={API.base_image + creature.gsx$splash.$t}></img>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Appearance:</strong><br />
|
||||
{creature.gsx$appearance.$t}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Background:</strong><br />
|
||||
{creature.gsx$background.$t}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Details:</strong><br />
|
||||
{creature.gsx$details.$t}
|
||||
</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.$t}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Special Abilities:</strong><br />
|
||||
{creature.gsx$specialabilities.$t}
|
||||
{creature.gsx$specialabilities}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Weight (lb):</strong><br />
|
||||
{creature.gsx$weight.$t}
|
||||
{creature.gsx$weight}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Card ID: </strong>
|
||||
{card_data.gsx$cardid.$t}
|
||||
{card_data.gsx$cardid}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Set: </strong>
|
||||
{card_data.gsx$set.$t}
|
||||
{card_data.gsx$set}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Rarity: </strong>
|
||||
{card_data.gsx$rarity.$t}
|
||||
{card_data.gsx$rarity}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Tribe: </strong>{this.state.tribe}
|
||||
<img className="icon" src={"/src/img/icons/tribes/"+this.state.tribe.toLowerCase()+".png"}></img>
|
||||
<strong>Tribe: </strong>{tribe}
|
||||
<img className="icon" src={"/src/img/icons/tribes/"+tribe.toLowerCase()+".png"}></img>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Ability:</strong><br />
|
||||
{card_data.gsx$ability.$t}
|
||||
{card_data.gsx$ability}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Courage: </strong>
|
||||
{card_data.gsx$courage.$t}
|
||||
{card_data.gsx$courage}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Power: </strong>
|
||||
{card_data.gsx$power.$t}
|
||||
{card_data.gsx$power}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Speed: </strong>
|
||||
{card_data.gsx$speed.$t}
|
||||
{card_data.gsx$speed}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Wisdom: </strong>
|
||||
{card_data.gsx$wisdom.$t}
|
||||
{card_data.gsx$wisdom}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
|
|
@ -254,17 +175,17 @@ export default class SingleCreature extends React.Component {
|
|||
<hr />
|
||||
<div>
|
||||
<strong>Energy: </strong>
|
||||
{card_data.gsx$energy.$t}
|
||||
{card_data.gsx$energy}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Flavortext:</strong><br />
|
||||
{card_data.gsx$flavortext.$t}
|
||||
{card_data.gsx$flavortext}
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Mugic Ability: </strong>
|
||||
{card_data.gsx$mugicability.$t}
|
||||
{card_data.gsx$mugicability}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user