From 46b7b928625a7ac54d6a524da053f394207a8991 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 15 Sep 2017 22:56:42 -0400 Subject: [PATCH] [in progress] mugic/tribe pages --- src/components/Category/Creatures.js | 4 ++- src/components/Category/Mugic.js | 54 ++++++++++++++++++++++++++++ src/components/Category/Tribes.js | 19 ++++++---- src/components/Home.js | 16 ++++----- src/components/Spreadsheet.js | 14 ++++++-- src/index.js | 2 +- 6 files changed, 90 insertions(+), 19 deletions(-) diff --git a/src/components/Category/Creatures.js b/src/components/Category/Creatures.js index 13d6331..c7682fc 100644 --- a/src/components/Category/Creatures.js +++ b/src/components/Category/Creatures.js @@ -58,7 +58,9 @@ export default class Creatures extends React.Component { const creatures = Object.keys(this.state.creatures).map(function(tribe, i) { return (
- {tribe} + {tribe} {list_creatures(tribe)}
diff --git a/src/components/Category/Mugic.js b/src/components/Category/Mugic.js index e69de29..0ea7911 100644 --- a/src/components/Category/Mugic.js +++ b/src/components/Category/Mugic.js @@ -0,0 +1,54 @@ +import React from 'react'; +import UnderConstruction from '../UnderConstruction'; + +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 (
{this.props.children}
); + } + let path = this.props.location.pathname.split("/"); + if (path[path.length-1] == "") path.pop(); // Remove trailing backslash + + // ** Process the tribe ** // + // /portal/Mugic/ + // /portal/{Tribe}/Mugic/ + // The first / gets counted + + return ( + + ); + + // Map creatures of the tribe + function list_Mugic(tribe) { + if (!self.state.Mugic[tribe]) { + return (Loading...); + } + else return self.state.Mugic[tribe].map((mugic, i) => { + return ( +
+ {mugic.gsx$name.$t} +
+ ); + }); + } + } +} diff --git a/src/components/Category/Tribes.js b/src/components/Category/Tribes.js index af24213..0ece25a 100644 --- a/src/components/Category/Tribes.js +++ b/src/components/Category/Tribes.js @@ -19,16 +19,23 @@ export default class Tribes extends React.Component { constructor(props) { super (props); - console.log(props); } 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 ( -
- {this.props.children|| - - } -
+ ); + + // return (
+ // {} + // {mugic.gsx$name.$t} + //
+ // ); } } diff --git a/src/components/Home.js b/src/components/Home.js index 908b96b..e66c43d 100644 --- a/src/components/Home.js +++ b/src/components/Home.js @@ -19,20 +19,20 @@ function Home() { >Creatures
Danian Creatures + href="/portal/Danian" + >Danian
Overworld Creatures + href="/portal/Overworld" + >Overworld
Underworld Creatures + href="/portal/Underworld" + >Underworld
Mipedian Creatures + href="/portal/Mipedian" + >Mipedian
{/*

This is an example single page app built diff --git a/src/components/Spreadsheet.js b/src/components/Spreadsheet.js index 298b135..4eab3a0 100644 --- a/src/components/Spreadsheet.js +++ b/src/components/Spreadsheet.js @@ -49,9 +49,17 @@ class URLS { 'Overworld': URLS.path("1Z4_MmlV7uE34nLzrcxslqQKRwL4OBXNA15s7G8eteXU"), 'Underworld': URLS.path("1c_XAxQsDIWVdzUxWl5t-K_mQumNjX-yrg0X-0NsZVts"), 'Mipedian': URLS.path("1P4FKASfnhR46j2bqm89T9xhI1Yyyy-jiZ1CkRglSy2k"), - 'Danian': URLS.path("1-Lz-itwOobEvqr8HSLFFwg3JFkT64NbwyGFEPfj9rxU"), - // 'Marrillian': URLS.path("1rLlzND9hHgxJuEtcTE4nbIVb16IjRme8V-I4vyryIEU"), - // 'Generic': URLS.path("1pnDahSxGDNKvDmwRfYF4Cd75q5plmtb9tvGvU7RM05g") + 'Danian': URLS.path("1-Lz-itwOobEvqr8HSLFFwg3JFkT64NbwyGFEPfj9rxU") + }; + } + + get Mugic() { + return { + 'Overworld': URLS.path("1KsVX5SkygwPP6I8yd6xgcN8gB746o_FTh6SK1TvAcbU"), + 'Underworld': URLS.path("1F7FHlob52cb_7J65cddM3The7w-kFiStBRd5wm4JRlA"), + 'Mipedian': URLS.path("1QDsiSUuBV_4Jn6mvl96EGU06XEoVqILGN4suYKvh9CA"), + 'Danian': URLS.path("1tEuwPGixJH2A03YtYL6Ar-MSFvtfrlaveT98GwJhw1g"), + 'Generic': URLS.path("1M9iAbpYAHq_ppwm0PZKUvZGfu-zbrK1CZMY16m4Plf8") }; } diff --git a/src/index.js b/src/index.js index 076fe26..986c0ba 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,7 @@ import ExampleTwoDeepComponent from './components/ExampleTwoDeepComponent'; // import Battlegear from './component/Category/Battlegear'; import Creatures from './components/Category/Creatures'; // import Locations from './component/Category/Locations'; -// import Mugic from './component/Category/Mugic'; +import Mugic from './components/Category/Mugic'; import Tribes from './components/Category/Tribes'; // import SingleAttack from './component/Category/Attacks'; // import SingleBattlegear from './component/Category/Battlegear';