Leahnaya/chaoticbackup.github.io
1
0
Fork 0
mirror of https://github.com/chaoticbackup/chaoticbackup.github.io.git synced 2026-04-18 22:57:29 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #32 from chaoticbackup/development

Browse Source 
Development
This commit is contained in:
DanudeSandstorm 2018-01-23 14:01:52 -05:00 committed by GitHub
commit 59e1235fe5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 505 additions and 619 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
build/bundle.js
View File

File diff suppressed because one or more lines are too long

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "chaoticbackup",
"version": "1.0.0",
"version": "1.0.1",
"description": "Chaotic Backup",
"scripts": {
"start": "webpack-dev-server -d --inline --host 0.0.0.0 --history-api-fallback --progress",
@ -22,7 +22,7 @@
"react-dom": "^16.0.0",
"react-interactive": "^0.8.1",
"react-process-string": "^1.2.0",
"react-router": "^3.2.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-transition-group": "^1.2.1",
"whatwg-fetch": "^2.0.3"

128
src/components/Base.js
View File

@ -1,128 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import s from '../styles/app.style';
const language = "ENG";
const bkgrnd = "05";
const propTypes = {
children: PropTypes.element.isRequired,
routes: PropTypes.array.isRequired,
};
function App({ children, routes }) {
return (
<div>
<div className="fix-pgBkgrnd-repeat-x">
<div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
</div>
<div className="pgBkgrnd-repeat-x">
<div className="img-bkgrnd">
<div className="content-wrap">
<div className="legacy legacy-header">
<div className="header">
<div id="nav">
<div className="zero-clear-line headerSpriteNav-wrap">
<ul id="unity-sprite" className={language}>
<li id="unity-nav1" className={language}></li>
<li id="unity-nav2" className={language}><Link to={`/collection/`}><span>Collect</span></Link></li>
<li id="unity-nav3" className={language}><a href="http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82"><span>Build</span></a></li>
<li id="unity-nav4" className={language}><a href="http://www.tradecardsonline.com/?action=selectCard&goal=&game_id=82"><span>Trade</span></a></li>
<li id="unity-nav5" className={language}><Link to={`/`}><span>Home</span></Link></li>
<li id="unity-nav6" className={language}><a href="http://chaoticbackup.forumotion.com"><span>Forums</span></a></li>
<li id="unity-nav7" className={language}><Link to={`/portal/`}><span>Portal</span></Link></li>
<li id="unity-nav8" className={language}><a href="http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82"><span>Play</span></a></li>
<li id="unity-nav9" className={language}></li>
</ul>
<ul id="unityETC-sprite" className={language}>
<li id="unity-nav10" className={language}><Link to={`/EnterTheCode`}><span>Enter the Code</span></Link></li>
</ul>
</div>
</div>
</div>
</div>
<div className="legacy content">
<div className="left-column">
<div className="full-width clear-line" style={{marginBottom: "5px"}}>
</div>
</div>
<div className="full-column">
<div className="pods-wrap pad5px-btm">
<div className="clear-line full-width">
<div className="adPod-top-wrap">
<div className="videoAdPod-topleft">
<div className="videoAdPod-topLeft-repeat-x"></div>
</div>
<div className="videoAdPod-topright">
<div className="videoAdPod-topRight-repeat-x"></div>
</div>
</div>
</div>
<div className="content-area-repeat-xy">
<div className="content-area-top-repeat-x">
<div className="content-area-left-repeat-y">
<div className="content-area-right-repeat-y">
<div style={{margin: "0 8px 0 10px"}}>
<div id="player" style={{textAlign: "center"}}>
{children}
</div>
</div>
</div>
</div>
</div>
</div>
<div className="content-btm-wrap">
<div className="content-area-btm-left">
<div className="content-left-btm-repeat-x">
</div>
</div>
<div className="content-area-btm-right">
<div className="content-right-btm-repeat-x">
</div>
</div>
</div>
</div>
</div>
<div className="right-column">
<div className="full-width clear-line" style={{marginBottom: "5px"}}>
</div>
</div>
</div>
<div className="legacy legacy-footer">
<div className="footer-wrap">
<div className="footer-repeat-x">
<div className="footer-left">
<div className="footer-right">
<div className="footer-text">
<div className="footer-search"></div>
<div className="footer-nav">
<div className="copyright">
©2008 Chaotic USA Entertainment Group, Inc.
<br />
U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved.
</div>
</div>
<div className="footer-language">
<a href="javascript:showLanguageSelection();" className="page-options" title="Change Language">
<img src="http://web.archive.org/web/20130304153151im_/http://chaoticgame.com/Images/flag_usa_.gif" alt="English (Change Language)" width="40" height="27"/>
<br />English (Change Language)
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
App.propTypes = propTypes;
export default App;

8
src/components/Home.js
View File

@ -1,9 +1,7 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import s from '../styles/home.style';
import { Route, Link } from 'react-router-dom';
function Home() {
export default function Home() {
return (
<div>
<link rel="stylesheet" href="/src/css/with_love.css" />
@ -21,5 +19,3 @@ function Home() {
</div>
);
}
export default Home;

2
src/components/Snippets.js
View File

@ -3,7 +3,7 @@ import API from './SpreadsheetData';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import processString from 'react-process-string';
import s from '../styles/pageNotFound.style';
import s from '../styles/app.style';
export function UnderConstruction(props) {
return (

2
src/components/collection/Home.js → src/components/collection/index.js
View File

@ -7,7 +7,7 @@ import CardList from './List';
import SearchForm from './Search';
@inject((stores, props, context) => props) @observer
export default class CollectionHome extends React.Component {
export default class Home extends React.Component {
@observable n = 10;
@observable p = 1;
@observable content = [];

2
src/components/example/Base.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';
import s from '../../styles/app.style';
const propTypes = {

2
src/components/example/ExampleComponent.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';
import s from '../../styles/exampleComponent.style';
const propTypes = {

2
src/components/example/ExampleTwoDeepComponent.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';
import s from '../../styles/exampleTwoDeepComponent.style';
const propTypes = {

2
src/components/example/Home.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';
import s from '../../styles/home.style';
function ExampleHome() {

315
src/components/index.js
View File

@ -1,180 +1,151 @@
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import { Link } from 'react-router-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import s from '../styles/app.style';
/* Common Components */
import App from './Base';
/* Components */
import {PageNotFound, UnderConstruction} from './Snippets';
/* Home Component */
import Home from './Home';
import EnterTheCode from './account/EnterTheCode';
/* Test Components */
import ExampleHome from './example/Home';
import ExampleBase from './example/Base';
import ExampleComponent from './example/ExampleComponent';
import ExampleTwoDeepComponent from './example/ExampleTwoDeepComponent';
/* Collection */
import CollectionHome from './collection/Home';
/* Portal */
import PortalBase from './portal/Base';
import PortalHome from './portal/Home';
import Attacks from './portal/Category/Attacks';
import SingleAttack from './portal/Single/Attack';
import Battlegear from './portal/Category/Battlegear';
import SingleBattlegear from './portal/Single/Battlegear';
import Creatures from './portal/Category/Creatures';
import SingleCreature from './portal/Single/Creature';
import Locations from './portal/Category/Locations';
import SingleLocation from './portal/Single/Location';
import Mugic from './portal/Category/Mugic';
import SingleMugic from './portal/Single/Mugic';
import Tribes from './portal/Category/Tribes';
const routes = (
<Route path="/" component={App} >
<IndexRoute component={Home} />
{/* Test */}
<Route path="example" mapMenuTitle="Example" component={ExampleBase}>
<IndexRoute component={ExampleComponent} />
<Route path="two-deep" mapMenuTitle="Two Deep" component={ExampleTwoDeepComponent} />
</Route>
{/* Construction */}
<Route path="Construction" component={UnderConstruction} />
{/* EnterTheCode */}
<Route path="EnterTheCode" component={EnterTheCode} />
{/* Collection */}
<Route path="collection">
<IndexRoute component={CollectionHome} />
<Route path="*" component={CollectionHome} />
</Route>
{/* Portal */}
<Route path="portal" component={PortalBase} >
<IndexRoute component={PortalHome} />
{/* Attacks */}
<Route path="Attacks" component={Attacks} >
<Route path="*" component={SingleAttack} />
</Route>
{/* Battlegear */}
<Route path="Battlegear" component={Battlegear} >
<Route path="*" component={SingleBattlegear} />
</Route>
{/* 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" >
<IndexRoute component={Creatures} />
<Route path="OverWorld" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="UnderWorld" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mipedian" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Danian" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
</Route>
{/* Mugic */}
<Route path="Mugic">
<IndexRoute component={Mugic} />
<Route path="OverWorld" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
<Route path="UnderWorld" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
<Route path="Mipedian" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
<Route path="Danian" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
<Route path="Generic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* OverWorld */}
<Route path="OverWorld" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* UnderWorld */}
<Route path="UnderWorld" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* Mipedian */}
<Route path="Mipedian" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* Danian */}
<Route path="Danian" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
{/* Generic */}
<Route path="Generic" component={Tribes} >
<Route path="Creatures" component={Creatures} >
<Route path="*" component={SingleCreature} />
</Route>
<Route path="Mugic" component={Mugic} >
<Route path="*" component={SingleMugic} />
</Route>
</Route>
<Route path="*" component={PageNotFound} />
</Route>
<Route path="*" component={PageNotFound} />
</Route>
);
import Collection from './collection/index';
import Portal from './portal/index';
import Home from './Home';
render(
<Router
history={browserHistory}
routes={routes}
/>,
document.getElementById('root'),
<Router>
<div>
<Route path="/" component={Base}/>
</div>
</Router>
, document.getElementById('root'),
);
function Routing(props) {
return (
<div>
<Route exact path="/" component={Home} />
<Route path="/PageNotFound" component={PageNotFound} />
<Route path="/UnderConstruction" component={UnderConstruction} />
<Route path="/EnterTheCode" component={EnterTheCode} />
<Route path="/collection" component={Collection} />
<Route path="/portal" component={Portal} />
</div>
);
}
const language = "ENG";
const bkgrnd = "05";
function Base(props) {
const children = <Routing {...props} />;
return (
<div>
<div className="fix-pgBkgrnd-repeat-x">
<div className={"fix-img-bkgrnd fix-img-bkgrnd_"+bkgrnd}></div>
</div>
<div className="pgBkgrnd-repeat-x">
<div className="img-bkgrnd">
<div className="content-wrap">
<div className="legacy legacy-header">
<div className="header">
<div id="nav">
<div className="zero-clear-line headerSpriteNav-wrap">
<ul id="unity-sprite" className={language}>
<li id="unity-nav1" className={language}></li>
<li id="unity-nav2" className={language}><Link to={`/collection/`}><span>Collect</span></Link></li>
<li id="unity-nav3" className={language}><a href="http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82"><span>Build</span></a></li>
<li id="unity-nav4" className={language}><a href="http://www.tradecardsonline.com/?action=selectCard&goal=&game_id=82"><span>Trade</span></a></li>
<li id="unity-nav5" className={language}><Link to={`/`}><span>Home</span></Link></li>
<li id="unity-nav6" className={language}><a href="http://chaoticbackup.forumotion.com"><span>Forums</span></a></li>
<li id="unity-nav7" className={language}><Link to={`/portal/`}><span>Portal</span></Link></li>
<li id="unity-nav8" className={language}><a href="http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82"><span>Play</span></a></li>
<li id="unity-nav9" className={language}></li>
</ul>
<ul id="unityETC-sprite" className={language}>
<li id="unity-nav10" className={language}><Link to={`/EnterTheCode`}><span>Enter the Code</span></Link></li>
</ul>
</div>
</div>
</div>
</div>
<div className="legacy content">
<div className="left-column">
<div className="full-width clear-line" style={{marginBottom: "5px"}}>
</div>
</div>
<div className="full-column">
<div className="pods-wrap pad5px-btm">
<div className="clear-line full-width">
<div className="adPod-top-wrap">
<div className="videoAdPod-topleft">
<div className="videoAdPod-topLeft-repeat-x"></div>
</div>
<div className="videoAdPod-topright">
<div className="videoAdPod-topRight-repeat-x"></div>
</div>
</div>
</div>
<div className="content-area-repeat-xy">
<div className="content-area-top-repeat-x">
<div className="content-area-left-repeat-y">
<div className="content-area-right-repeat-y">
<div style={{margin: "0 8px 0 10px"}}>
<div id="player" style={{textAlign: "center"}}>
{children}
</div>
</div>
</div>
</div>
</div>
</div>
<div className="content-btm-wrap">
<div className="content-area-btm-left">
<div className="content-left-btm-repeat-x">
</div>
</div>
<div className="content-area-btm-right">
<div className="content-right-btm-repeat-x">
</div>
</div>
</div>
</div>
</div>
<div className="right-column">
<div className="full-width clear-line" style={{marginBottom: "5px"}}>
</div>
</div>
</div>
<div className="legacy legacy-footer">
<div className="footer-wrap">
<div className="footer-repeat-x">
<div className="footer-left">
<div className="footer-right">
<div className="footer-text">
<div className="footer-search"></div>
<div className="footer-nav">
<div className="copyright">
©2008 Chaotic USA Entertainment Group, Inc.
<br />
U.S. Pat 5810666 and 5954332 and other pending patent applications. All Rights Reserved.
</div>
</div>
<div className="footer-language">
<a href="javascript:showLanguageSelection();" className="page-options" title="Change Language">
<img src="http://web.archive.org/web/20130304153151im_/http://chaoticgame.com/Images/flag_usa_.gif" alt="English (Change Language)" width="40" height="27"/>
<br />English (Change Language)
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}

30
src/components/portal/Category/Attacks.js
View File

@ -1,46 +1,46 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import { Link, Route } from 'react-router-dom';
import {observer, inject} from 'mobx-react';
import s from '../../../styles/app.style';
import API from '../../SpreadsheetData';
import Attack from '../Single/Attack';
@inject((stores, props, context) => props) @observer
export default class Attacks extends React.Component {
render() {
const store = API;
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
if (!store.cards.built.includes("attacks_cards")) {
store.cards.setupAttacks("cards");
if (!API.cards.built.includes("attacks_cards")) {
API.cards.setupAttacks("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("attacks_portal")) {
store.portal.setupAttacks("portal");
if (!API.portal.built.includes("attacks_portal")) {
API.portal.setupAttacks("portal");
return (<span>Loading...</span>);
}
const attacks = store.portal.attacks.data;
const attacks = API.portal.attacks.data;
const output = attacks.map((attack, i) => {
const card_data = store.cards.attacks.findOne({'gsx$name': attack.gsx$name});
const card_data = API.cards.attacks.findOne({'gsx$name': attack.gsx$name});
return (
<div key={i}>
<Interactive as={Link} {...s.link}
to={'/portal/Attacks/'+attack.gsx$name}
>
<span>{attack.gsx$name}</span><br />
<img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
<img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
</Interactive>
</div>
);
@ -52,7 +52,7 @@ export default class Attacks extends React.Component {
{output}
</div>
<div className="right">
{this.props.children}
<Route path={`${this.props.match.url}/:card`} component={Attack} />
</div>
</div>);
}

31
src/components/portal/Category/Battlegear.js
View File

@ -1,46 +1,47 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import { Link, Route } from 'react-router-dom';
import {observer, inject} from 'mobx-react';
import s from '../../../styles/app.style';
import API from '../../SpreadsheetData';
import SingleBattlegear from '../Single/Battlegear';
@inject((stores, props, context) => props) @observer
export default class Battlegear extends React.Component {
render() {
const store = API;
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
if (!store.cards.built.includes("battlegear_cards")) {
store.cards.setupBattlegear("cards");
if (!API.cards.built.includes("battlegear_cards")) {
API.cards.setupBattlegear("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("battlegear_portal")) {
store.portal.setupBattlegear("portal");
if (!API.portal.built.includes("battlegear_portal")) {
API.portal.setupBattlegear("portal");
return (<span>Loading...</span>);
}
const battlegear = store.portal.battlegear.data;
const battlegear = API.portal.battlegear.data;
const output = battlegear.map((single_battlegear, i) => {
const card_data = store.cards.battlegear.findOne({'gsx$name': single_battlegear.gsx$name});
const card_data = API.cards.battlegear.findOne({'gsx$name': single_battlegear.gsx$name});
return (
<div key={i}>
<Interactive as={Link} {...s.link}
to={'/portal/Battlegear/'+single_battlegear.gsx$name}
>
<span>{single_battlegear.gsx$name}</span><br />
<img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
<img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
</Interactive>
</div>
);
@ -52,7 +53,7 @@ export default class Battlegear extends React.Component {
{output}
</div>
<div className="right">
{this.props.children}
<Route path={`${this.props.match.url}/:card`} component={SingleBattlegear} />
</div>
</div>);
}

85
src/components/portal/Category/Creatures.js
View File

@ -1,86 +1,61 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import { Link, Route } from 'react-router-dom';
import {observer, inject} from 'mobx-react';
import s from '../../../styles/app.style';
import API from '../../SpreadsheetData';
import Creature from '../Single/Creature';
@inject((stores, props, context) => props) @observer
export default class Creatures extends React.Component {
// ** Process the tribe ** //
// /portal/Creatures/
// /portal/{Tribe}/Creatures/
// /portal/Creatures/{Tribe}
// The first / gets counted
render() {
const store = API;
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
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")) {
store.cards.setupCreatures("cards");
if (!API.cards.built.includes("creatures_cards")) {
API.cards.setupCreatures("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("creatures_portal")) {
store.portal.setupCreatures("portal");
if (!API.portal.built.includes("creatures_portal")) {
API.portal.setupCreatures("portal");
return (<span>Loading...</span>);
}
const tribe = (() => {
if (path.length >= 4 && API.ribes.includes(path[3])) return path[3];
else return null;
})();
const creatures = (() => {
if (path.length >= 4 && path[3] === "Creatures") {
return store.portal.creatures.find({'gsx$tribe': tribe});
if (tribe) {
return API.portal.creatures.find({'gsx$tribe': tribe});
}
else {
return store.portal.creatures.chain().simplesort('gsx$name').data();
return API.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});
const card_data = API.cards.creatures.findOne({'gsx$name': creature.gsx$name});
let url = (() => {
if (path[2] === "Creatures")
if (tribe)
return "/portal/Creatures/"+creature.gsx$tribe+"/"+creature.gsx$name;
else if (path[3] === "Creatures")
return "/portal/"+creature.gsx$tribe+"/Creatures/"+creature.gsx$name;
else
return "/portal/Creatures/"+creature.gsx$name;
})();
return (
@ -89,19 +64,27 @@ export default class Creatures extends React.Component {
to={url}
>
<span>{creature.gsx$name}</span><br />
<img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
<img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
</Interactive>
</div>
);
});
let tribes = ["Danian", "Mipedian", "OverWorld", "UnderWorld"].map((tribe, i) => (
<Route key={i} path={`${this.props.match.url}/${tribe}/:card`} component={Creature} />
));
if (!tribe) {
tribes.push(<Route key={5} path={`${this.props.match.url}/:card`} component={Creature} />)
}
return (<div className="entry creatures">
<div className="left">
<div className="title">{path[2]}<hr /></div>
{output}
</div>
<div className="right">
{this.props.children}
{tribes}
</div>
</div>);
}

30
src/components/portal/Category/Locations.js
View File

@ -1,46 +1,46 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import { Link, Route } from 'react-router-dom';
import {observer, inject} from 'mobx-react';
import s from '../../../styles/app.style';
import API from '../../SpreadsheetData';
import Location from '../Single/Location';
@inject((stores, props, context) => props) @observer
export default class Locations extends React.Component {
render() {
const store = API;
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
if (!store.cards.built.includes("locations_cards")) {
store.cards.setupLocations("cards");
if (!API.cards.built.includes("locations_cards")) {
API.cards.setupLocations("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("locations_portal")) {
store.portal.setupLocations("portal");
if (!API.portal.built.includes("locations_portal")) {
API.portal.setupLocations("portal");
return (<span>Loading...</span>);
}
const locations = store.portal.locations.data;
const locations = API.portal.locations.data;
const output = locations.map((location, i) => {
const card_data = store.cards.locations.findOne({'gsx$name': location.gsx$name});
const card_data = API.cards.locations.findOne({'gsx$name': location.gsx$name});
return (
<div key={i}>
<Interactive as={Link} {...s.link}
to={'/portal/Locations/'+location.gsx$name}
>
<span>{location.gsx$name}</span><br />
<img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
<img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
</Interactive>
</div>
);
@ -52,7 +52,7 @@ export default class Locations extends React.Component {
{output}
</div>
<div className="right">
{this.props.children}
<Route path={`${this.props.match.url}/:card`} component={Location} />
</div>
</div>);
}

86
src/components/portal/Category/Mugic.js
View File

@ -1,9 +1,10 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import { Link, Route } from 'react-router-dom';
import {observer, inject} from 'mobx-react';
import s from '../../../styles/app.style';
import API from '../../SpreadsheetData';
import SingleMugic from '../Single/Mugic';
@inject((stores, props, context) => props) @observer
export default class Mugic extends React.Component {
@ -18,73 +19,44 @@ export default class Mugic extends React.Component {
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
let tribe = null;
if (path.length >= 4) {
if (path[2] === "Mugic") tribe = path[3];
else if (path[3] === "Mugic") 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/Mugic/Generic"
>Generic</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Mugic/Danian"
>Danian</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Mugic/Mipedian"
>Mipedian</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Mugic/OverWorld"
>OverWorld</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Mugic/UnderWorld"
>UnderWorld</Interactive>
</div>
);
}
}
if (!store.cards.built.includes("mugic_cards")) {
store.cards.setupMugic("cards");
if (!API.cards.built.includes("mugic_cards")) {
API.cards.setupMugic("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("mugic_portal")) {
store.portal.setupMugic("portal");
if (!API.portal.built.includes("mugic_portal")) {
API.portal.setupMugic("portal");
return (<span>Loading...</span>);
}
const tribe = (() => {
if (path.length >= 4 && API.tribes.includes(path[3])) return path[3];
else return null;
})();
const mugic = (() => {
if (path.length >= 4 && path[3] === "Mugic") {
return store.portal.mugic.find({'gsx$tribe': tribe});
if (tribe) {
return API.portal.mugic.find({'gsx$tribe': tribe});
}
else {
return store.portal.mugic.chain().simplesort('gsx$name').data();
return API.portal.mugic.chain().simplesort('gsx$name').data();
}
})();
const output = mugic.map((single_mugic, i) => {
const card_data = store.cards.mugic.findOne({'gsx$name': single_mugic.gsx$name});
const card_data = API.cards.mugic.findOne({'gsx$name': single_mugic.gsx$name});
let url = (() => {
if (path[2] === "Mugic")
if (tribe)
return "/portal/Mugic/"+single_mugic.gsx$tribe+"/"+encodeURIComponent(single_mugic.gsx$name);
else if (path[3] === "Mugic")
return "/portal/"+single_mugic.gsx$tribe+"/Mugic/"+encodeURIComponent(single_mugic.gsx$name);
else
return "/portal/Mugic/"+encodeURIComponent(single_mugic.gsx$name);
})();
return (
@ -93,19 +65,27 @@ export default class Mugic extends React.Component {
to={url}
>
<span>{single_mugic.gsx$name}</span><br />
<img className="thumb" src={store.base_image + card_data.gsx$thumb}></img>
<img className="thumb" src={API.base_image + card_data.gsx$thumb}></img>
</Interactive>
</div>
);
});
const tribes = API.tribes.map((tribe, i) => (
<Route key={i} path={`${this.props.match.url}/${tribe}/:card`} component={SingleMugic} />
));
if (!tribe) {
tribes.push(<Route key={5} path={`${this.props.match.url}/:card`} component={SingleMugic} />)
}
return (<div className="entry mugic">
<div className="left">
<div className="title">{path[2]}<hr /></div>
{output}
</div>
<div className="right">
{this.props.children}
{tribes}
</div>
</div>);
}

119
src/components/portal/Category/Tribes.js
View File

@ -1,34 +1,127 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import { Link, Route } from 'react-router-dom';
import {observer, inject} from 'mobx-react';
import loki from 'lokijs';
import s from '../../../styles/app.style';
import API from '../../SpreadsheetData';
import Creature from '../Single/Creature';
import Mugic from '../Single/Mugic';
@inject((stores, props, context) => props) @observer
export default class Tribes extends React.Component {
constructor() {
super();
this.filter = new loki("filter.db");
}
// /{Tribe}
// gives a brief summary and the option of "mugic" or "tribe"
// to display the respective subcategories
// -> /{Tribe}/Mugic || /{Tribe}/Creatures
render() {
if (this.props.children) {
return (<div>{this.props.children}</div>);
}
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
let tribe = path[2];
return (
<div>
<h1>{tribe}</h1>
<br />
<Interactive as={Link} {...s.link} to={"/portal/"+tribe+"/Creatures"}>Creatures</Interactive><br />
<Interactive as={Link} {...s.link} to={"/portal/"+tribe+"/Mugic"}>Mugic</Interactive>
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
if (!API.tribes.includes(tribe)) {
return(
<div>
<Interactive as={Link} {...s.link}
to="/portal/Danian"
>Danian</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/OverWorld"
>OverWorld</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/UnderWorld"
>UnderWorld</Interactive>
<br />
<Interactive as={Link} {...s.link}
to="/portal/Mipedian"
>Mipedian</Interactive>
</div>
);
}
if (!API.cards.built.includes("mugic_cards")) {
API.cards.setupMugic("cards");
return (<span>Loading...</span>);
}
if (!API.portal.built.includes("mugic_portal")) {
API.portal.setupMugic("portal");
return (<span>Loading...</span>);
}
if (!API.cards.built.includes("creatures_cards")) {
API.cards.setupCreatures("cards");
return (<span>Loading...</span>);
}
if (!API.portal.built.includes("creatures_portal")) {
API.portal.setupCreatures("portal");
return (<span>Loading...</span>);
}
let filter = this.filter.addCollection('filter');
var pview = filter.addDynamicView('filter');
pview.applySimpleSort('gsx$name');
let temp;
temp = API.portal.creatures.find({'gsx$tribe': tribe});
temp.forEach((v) => { delete v.$loki });
filter.insert(temp);
temp = API.portal.mugic.find({'gsx$tribe': tribe});
temp.forEach((v) => { delete v.$loki });
filter.insert(temp);
let results = pview.data();
this.filter.removeCollection('filter');
const output = results.map((card, i) => {
let card_data, url;
if (card.gsx$type == "Mugic") {
card_data = API.cards.mugic.findOne({'gsx$name': card.gsx$name});
url = "/portal/" + tribe + "/Mugic/" + encodeURIComponent(card.gsx$name);
}
if (card.gsx$type == "Creature") {
card_data = API.cards.creatures.findOne({'gsx$name': card.gsx$name});
url = "/portal/" + tribe + "/Creatures/" + encodeURIComponent(card.gsx$name);
}
return (<div key={i}>
<Interactive as={Link} {...s.link} to={url}>
<span>{card.gsx$name}</span><br />
<img className="thumb" src={API.base_image + card_data.gsx$thumb} />
</Interactive>
</div>);
});
return (<div className="entry creatures">
<div className="left">
<div className="title">{path[2]}<hr /></div>
{output}
</div>
);
<div className="right">
<Route path={`${this.props.match.url}/Creatures/:card`} component={Creature} />
<Route path={`${this.props.match.url}/Mugic/:card`} component={Mugic} />
</div>
</div>);
}
}

2
src/components/portal/Home.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import API from '../SpreadsheetData';
export default class PortalHome extends React.Component {
export default class Home extends React.Component {
componentDidMount() {
this.coin = null;

24
src/components/portal/Single/Attack.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
@ -10,7 +10,6 @@ import {PageNotFound} from '../../Snippets';
export default class SingleAttack extends React.Component {
render() {
const store = API;
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
@ -22,33 +21,32 @@ export default class SingleAttack extends React.Component {
let name = decodeURIComponent(path[3]);
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
if (!store.cards.built.includes("attacks_cards")) {
store.cards.setupAttacks("cards");
if (!API.cards.built.includes("attacks_cards")) {
API.cards.setupAttacks("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("attacks_portal")) {
store.portal.setupAttacks("portal");
if (!API.portal.built.includes("attacks_portal")) {
API.portal.setupAttacks("portal");
return (<span>Loading...</span>);
}
const attack = store.portal.attacks.findOne({'gsx$name': name});
const attack = API.portal.attacks.findOne({'gsx$name': name});
if (!attack) {
return(<PageNotFound location={this.props.location}/>);
}
const card_data = store.cards.attacks.findOne({'gsx$name': name});
const card_data = API.cards.attacks.findOne({'gsx$name': name});
return (
<div>
<img className="splash" src={store.base_image + card_data.gsx$splash}></img>
<br />
<img className="splash" src={API.base_image + card_data.gsx$splash} />
<div className="title">{attack.gsx$name}</div>
<hr />
<div>

24
src/components/portal/Single/Battlegear.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
@ -11,7 +11,6 @@ import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '
export default class SingleBattlegear extends React.Component {
render() {
const store = API;
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
@ -23,33 +22,32 @@ export default class SingleBattlegear extends React.Component {
let name = decodeURIComponent(path[3]);
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
if (!store.cards.built.includes("battlegear_cards")) {
store.cards.setupBattlegear("cards");
if (!API.cards.built.includes("battlegear_cards")) {
API.cards.setupBattlegear("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("battlegear_portal")) {
store.portal.setupBattlegear("portal");
if (!API.portal.built.includes("battlegear_portal")) {
API.portal.setupBattlegear("portal");
return (<span>Loading...</span>);
}
const battlegear = store.portal.battlegear.findOne({'gsx$name': name});
const battlegear = API.portal.battlegear.findOne({'gsx$name': name});
if (!battlegear) {
return(<PageNotFound location={this.props.location}/>);
}
const card_data = store.cards.battlegear.findOne({'gsx$name': name});
const card_data = API.cards.battlegear.findOne({'gsx$name': name});
return (
<div>
<img className="splash" src={store.base_image + card_data.gsx$splash}></img>
<br />
<img className="splash" src={API.base_image + card_data.gsx$splash} />
<div className="title">{battlegear.gsx$name}</div>
<hr />
<div>

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

@ -1,11 +1,10 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import {PageNotFound} from '../../Snippets';
import { Link } from 'react-router-dom';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class SingleCreature extends React.Component {
@ -15,50 +14,40 @@ export default class SingleCreature extends React.Component {
// /portal/{Tribe}/Creatures/{Name}
// The first / gets counted
render() {
const store = API;
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}/>);
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
//Handle both url layouts
let tribe = (() => {
if (path[2] === "Creatures") return path[3];
if (path[3] === "Creatures") return path[2];
if (!API.cards.built.includes("creatures_cards")) {
API.cards.setupCreatures("cards");
return (<span>Loading...</span>);
}
if (!API.portal.built.includes("creatures_portal")) {
API.portal.setupCreatures("portal");
return (<span>Loading...</span>);
}
const name = (() => {
if (path.length >= 5) return decodeURIComponent(path[4]);
if (path.length == 4) return decodeURIComponent(path[3]);
})();
let name = decodeURIComponent(path[4]);
const creature = API.portal.creatures.findOne({'gsx$name': name});
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
return (<span>Loading...</span>);
}
if (!store.tribes.includes(tribe)) {
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_portal")) {
store.portal.setupCreatures("portal");
return (<span>Loading...</span>);
}
const creature = store.portal.creatures.findOne({'gsx$name': name});
if (!creature) {
return(<PageNotFound location={this.props.location}/>);
}
const card_data = store.cards.creatures.findOne({'gsx$name': name});
const tribe = creature.gsx$tribe;
const card_data = API.cards.creatures.findOne({'gsx$name': name});
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>;
@ -75,8 +64,7 @@ export default class SingleCreature extends React.Component {
return (
<div>
<img className="splash" src={store.base_image + card_data.gsx$splash}></img>
<br />
<img className="splash" src={API.base_image + card_data.gsx$splash} />
<div className="title">{creature.gsx$name}</div>
<hr />
<div>

24
src/components/portal/Single/Location.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import { Link } from 'react-router-dom';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
@ -11,7 +11,6 @@ import {Rarity, Unique, Name, Ability, Initiative} from '../../Snippets';
export default class SingleLocation extends React.Component {
render() {
const store = API;
let path = this.props.location.pathname.split("/");
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
@ -23,33 +22,32 @@ export default class SingleLocation extends React.Component {
let name = decodeURIComponent(path[3]);
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
if (!store.cards.built.includes("locations_cards")) {
store.cards.setupLocations("cards");
if (!API.cards.built.includes("locations_cards")) {
API.cards.setupLocations("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("locations_portal")) {
store.portal.setupLocations("portal");
if (!API.portal.built.includes("locations_portal")) {
API.portal.setupLocations("portal");
return (<span>Loading...</span>);
}
const location = store.portal.locations.findOne({'gsx$name': name});
const location = API.portal.locations.findOne({'gsx$name': name});
if (!location) {
return(<PageNotFound location={this.props.location}/>);
}
const card_data = store.cards.locations.findOne({'gsx$name': name});
const card_data = API.cards.locations.findOne({'gsx$name': name});
return (
<div>
<img className="splash" src={store.base_image + card_data.gsx$splash}></img>
<br />
<img className="splash" src={API.base_image + card_data.gsx$splash} />
<div className="title">{location.gsx$name}</div>
<hr />
<div>

61
src/components/portal/Single/Mugic.js
View File

@ -1,11 +1,10 @@
import React from 'react';
import Interactive from 'react-interactive';
import { Link } from 'react-router';
import {PageNotFound} from '../../Snippets';
import { Link } from 'react-router-dom';
import API from '../../SpreadsheetData';
import s from '../../../styles/app.style';
import {observer, inject} from 'mobx-react';
import {Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
import {PageNotFound, Rarity, Unique, Name, Element, Mugic, Discipline, Ability, Tribe} from '../../Snippets';
@inject((stores, props, context) => props) @observer
export default class SingleMugic extends React.Component {
@ -15,50 +14,41 @@ export default class SingleMugic extends React.Component {
// /portal/{Tribe}/Mugic/{Name}
// The first / gets counted
render() {
const store = API;
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}/>);
if (API.urls === null ||
API.portal === null ||
API.cards === null) {
return (<span>Loading...</span>);
}
//Handle both url layouts
let tribe = (() => {
if (path[2] === "Mugic") return path[3];
if (path[3] === "Mugic") return path[2];
if (!API.cards.built.includes("mugic_cards")) {
API.cards.setupMugic("cards");
return (<span>Loading...</span>);
}
if (!API.portal.built.includes("mugic_portal")) {
API.portal.setupMugic("portal");
return (<span>Loading...</span>);
}
const name = (() => {
if (path.length >= 5) return decodeURIComponent(path[4]);
if (path.length == 4) return decodeURIComponent(path[3]);
})();
let name = decodeURIComponent(path[4]);
const mugic = API.portal.mugic.findOne({'gsx$name': name});
if (store.urls === null ||
store.portal === null ||
store.cards === null) {
return (<span>Loading...</span>);
}
if (!store.tribes.includes(tribe)) {
return (<span>Invalid Tribe: {tribe}</span>);
}
if (!store.cards.built.includes("mugic_cards")) {
store.cards.setupMugic("cards");
return (<span>Loading...</span>);
}
if (!store.portal.built.includes("mugic_portal")) {
store.portal.setupMugic("portal");
return (<span>Loading...</span>);
}
const mugic = store.portal.mugic.findOne({'gsx$name': name});
const card_data = store.cards.mugic.findOne({'gsx$name': name});
if (!mugic) {
return(<PageNotFound location={this.props.location}/>);
}
const tribe = mugic.gsx$tribe;
const card_data = API.cards.mugic.findOne({'gsx$name': name});
let cost = [];
if (card_data.gsx$cost == 0) {
cost.push(<span key={0}>0</span>);
@ -74,8 +64,7 @@ export default class SingleMugic extends React.Component {
return (
<div>
<img className="splash" src={store.base_image + card_data.gsx$splash}></img>
<br />
<img className="splash" src={API.base_image + card_data.gsx$splash} />
<div className="title">{mugic.gsx$name}</div>
<hr />
<div>

45
src/components/portal/Base.js → src/components/portal/index.js
View File

@ -1,14 +1,20 @@
import React from 'react';
import PropTypes from 'prop-types';
import s from '../../styles/app.style';
import Interactive from 'react-interactive';
import {observable} from "mobx";
import {observer, inject} from 'mobx-react';
import { Link } from 'react-router';
import {Link, Route} from 'react-router-dom';
import API from '../SpreadsheetData';
import Home from './Home';
import Search from './Search';
import Attacks from './Category/Attacks';
import Battlegear from './Category/Battlegear';
import Creatures from './Category/Creatures';
import Locations from './Category/Locations';
import Mugic from './Category/Mugic';
import Tribes from './Category/Tribes';
@inject((stores, props, context) => props) @observer
export default class PortalBase extends React.Component {
export default class Base extends React.Component {
render() {
return (
@ -16,18 +22,37 @@ export default class PortalBase extends React.Component {
<link rel="stylesheet" href="/src/css/portal.css" />
<Header />
<br />
{this.props.children}
<Routing {...this.props} />
</div>
);
}
}
function Header(props) {
function Routing(props) {
const match = props.match;
const tribes = API.tribes.map((tribe, i) => (
<Route key={i} path={`${match.url}/${tribe}`} component={Tribes} />
));
return (
<div>
<Route exact path={match.url} component={Home} />
<Route path={`${match.url}/Attacks`} component={Attacks} />
<Route path={`${match.url}/Battlegear`} component={Battlegear} />
<Route path={`${match.url}/Creatures`} component={Creatures} />
<Route path={`${match.url}/Locations`} component={Locations} />
<Route path={`${match.url}/Mugic`} component={Mugic} />
{tribes}
</div>
);
}
function Header() {
const types = (() => {
return (
<li className="dropdown">
<Link to="javascript:void(0)" className="dropbtn">Types</Link>
<Link to=" " className="dropbtn">Types</Link>
<div className="dropdown-content">
<Link to="/portal/Attacks">Attacks</Link>
<Link to="/portal/Battlegear">Battlegear</Link>
@ -44,8 +69,8 @@ function Header(props) {
<li key={i} className="dropdown">
<Link to={"/portal/"+tribe} className="dropbtn">{tribe}</Link>
<div className="dropdown-content">
<Link to={"/portal/"+tribe+"/Creatures"}> Creatures</Link>
<Link to={"/portal/"+tribe+"/Mugic"}> Mugic</Link>
<Link to={"/portal/Creatures/"+tribe}> Creatures</Link>
<Link to={"/portal/Mugic/"+tribe}> Mugic</Link>
</div>
</li>
);

2
src/css/portal.css
View File

@ -20,7 +20,7 @@
.splash {
max-width: 100%;
display: block;
padding-bottom: 10px;
}
.navbar h1 {

5
src/styles/pageNotFound.style.js
View File

@ -1,5 +0,0 @@
import style from './style';
const s = Object.create(style);
export default s;