/Creatures/<tribe>/<name> results in all creatures on the side bar, and the specific displayed
/<tribe>/Creatures/<name> results in only that tribe's creatures in the sidebar
This commit is contained in:
Daniel
2018-01-12 18:53:58 -05:00
parent 0089b2386a
commit c22a1920b7
3 changed files with 93 additions and 86 deletions

File diff suppressed because one or more lines are too long

View File

@@ -58,116 +58,108 @@ const routes = (
</Route>
{/* Portal */}
<Route path="portal" component={PortalBase} mapMenuTitle="Portal">
<Route path="portal" component={PortalBase} >
<IndexRoute component={PortalHome} />
{/* Attacks */}
<Route path="Attacks" component={Attacks} mapMenuTitle="Attacks">
<Route path="Attacks" component={Attacks} >
<Route path="*" component={SingleAttack} />
</Route>
{/* Battlegear */}
<Route path="Battlegear" component={Battlegear} mapMenuTitle="Battlegear">
<Route path="Battlegear" component={Battlegear} >
<Route path="*" component={SingleBattlegear} />
</Route>
{/* Locations */}
<Route path="Locations" component={Locations} mapMenuTitle="Locations">
<Route path="Locations" component={Locations} >
<Route path="*" component={SingleLocation} />
</Route>
{/* Creatures */}
{/* Todo this isn't needed (tribe checking handled by components) */}
<Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
<Route path="OverWorld" component={Creatures} mapMenuTitle="OverWorld">
<Route path="Creatures" >
<IndexRoute component={Creatures} />
<Route path="OverWorld" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="UnderWorld" component={Creatures} mapMenuTitle="UnderWorld">
<Route path="UnderWorld" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mipedian" component={Creatures} mapMenuTitle="Mipedian">
<Route path="Mipedian" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Danian" component={Creatures} mapMenuTitle="Danian">
<Route path="Danian" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
</Route>
{/* Mugic */}
<Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
<Route path="OverWorld" component={Mugic} mapMenuTitle="OverWorld">
<Route path="Mugic">
<IndexRoute component={Mugic} />
<Route path="OverWorld" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
<Route path="UnderWorld" component={Mugic} mapMenuTitle="UnderWorld">
<Route path="UnderWorld" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
<Route path="Mipedian" component={Mugic} mapMenuTitle="Mipedian">
<Route path="Mipedian" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
<Route path="Danian" component={Mugic} mapMenuTitle="Danian">
<Route path="Danian" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
<Route path="Generic" component={Mugic} mapMenuTitle="Generic">
<Route path="Generic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* OverWorld */}
<Route path="OverWorld" component={Tribes} mapMenuTitle="OverWorld">
<Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
<Route path="OverWorld" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* UnderWorld */}
<Route path="UnderWorld" component={Tribes} mapMenuTitle="UnderWorld">
<Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
<Route path="UnderWorld" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* Mipedian */}
<Route path="Mipedian" component={Tribes} mapMenuTitle="Mipedian">
<Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
<Route path="Mipedian" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* Danian */}
<Route path="Danian" component={Tribes} mapMenuTitle="Danian">
<Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
<Route path="Danian" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* M'arrillian */}
<Route path="Marrillian" component={Tribes} mapMenuTitle="Marrillian">
<Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* Generic */}
<Route path="Generic" component={Tribes} mapMenuTitle="Generic">
<Route path="Creatures" component={Creatures} mapMenuTitle="Creatures">
<Route path="Generic" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} mapMenuTitle="Mugic">
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>

View File

@@ -18,40 +18,40 @@ export default class Creatures extends React.Component {
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
let tribe = (() => {
if (path[2] === "Creatures") return path[3];
else if (path[3] === "Creatures") return path[2];
else return "None";
})();
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
return (<span>Loading...</span>);
}
// If there isn't a supported tribe,
// Displays list of tribes
if (!store.tribes.includes(tribe)) {
return(
<div>
<Interactive as={Link} {...s.link}
to="/portal/Creatures/Danian"
>Danian</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Creatures/OverWorld"
>OverWorld</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Creatures/UnderWorld"
>UnderWorld</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Creatures/Mipedian"
>Mipedian</Interactive>
</div>
);
let tribe = null;
if (path.length >= 4) {
if (path[2] === "Creatures") tribe = path[3];
else if (path[3] === "Creatures") tribe = path[2];
// If there isn't a supported tribe,
// Displays list of tribes
if (!store.tribes.includes(tribe)) {
return(
<div>
<Interactive as={Link} {...s.link}
to="/portal/Creatures/Danian"
>Danian</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Creatures/OverWorld"
>OverWorld</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Creatures/UnderWorld"
>UnderWorld</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Creatures/Mipedian"
>Mipedian</Interactive>
</div>
);
}
}
if (!store.cards.built.includes("creatures_cards")) {
@@ -64,13 +64,28 @@ export default class Creatures extends React.Component {
return (<span>Loading...</span>);
}
const creatures = store.portal.creatures.find({'gsx$tribe': tribe});
const creatures = (() => {
if (path.length >= 4 && path[3] === "Creatures") {
return store.portal.creatures.find({'gsx$tribe': tribe});
}
else {
return store.portal.creatures.chain().simplesort('gsx$name').data();
}
})();
const output = creatures.map((creature, i) => {
const card_data = store.cards.creatures.findOne({'gsx$name': creature.gsx$name});
let url = (() => {
if (path[2] === "Creatures")
return "/portal/Creatures/"+creature.gsx$tribe+"/"+creature.gsx$name;
else if (path[3] === "Creatures")
return "/portal/"+creature.gsx$tribe+"/Creatures/"+creature.gsx$name;
})();
return (
<div key={i}>
<Interactive as={Link} {...s.link}
to={'/portal/'+tribe+'/Creatures/'+creature.gsx$name}
to={url}
>
<span>{creature.gsx$name}</span><br />
<img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
@@ -81,7 +96,7 @@ export default class Creatures extends React.Component {
return (<div className="entry creatures">
<div className="left">
<div className="title">{tribe}<hr /></div>
<div className="title">{path[2]}<hr /></div>
{output}
</div>
<div className="right">