mirror of
https://github.com/chaoticbackup/chaoticbackup.github.io.git
synced 2026-04-18 22:57:29 -05:00
[change] state change event cycle
This commit is contained in:
Daniel
DanudeSandstorm
parent
46b7b92862
commit
52b4241490
|
|
@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
|
|||
import Interactive from 'react-interactive';
|
||||
import { Link } from 'react-router';
|
||||
import s from '../styles/app.style';
|
||||
import {ChangePage, language, bkgrnd } from './Helper';
|
||||
|
||||
const propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
|
|
@ -25,9 +26,9 @@ function App({ children, routes }) {
|
|||
.map((route, index, array) => (
|
||||
<span key={index}>
|
||||
<Interactive
|
||||
as="a"
|
||||
as={Link}
|
||||
{...s.link}
|
||||
href={nextPath(route)}
|
||||
to={nextPath(route)}
|
||||
>{route.mapMenuTitle}</Interactive>
|
||||
{(index + 1) < array.length && ' / '}
|
||||
</span>
|
||||
|
|
@ -35,44 +36,6 @@ function App({ children, routes }) {
|
|||
);
|
||||
}
|
||||
|
||||
function ChangePage(asParams) {
|
||||
let location = "#";
|
||||
switch (asParams) {
|
||||
case 'collect':
|
||||
location = 'http://www.tradecardsonline.com/im/editCollection/collection_type/1';
|
||||
break;
|
||||
// case 'register' :
|
||||
// location ='/Registration.aspx';
|
||||
// break;
|
||||
case 'build':
|
||||
location = 'http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82';
|
||||
break;
|
||||
case 'centerOval':
|
||||
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 = '/portal/UnderConstruction/';
|
||||
break;
|
||||
}
|
||||
return location;
|
||||
}
|
||||
|
||||
let language = "ENG";
|
||||
let bkgrnd = "05";
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="fix-pgBkgrnd-repeat-x">
|
||||
|
|
@ -158,37 +121,6 @@ function App({ children, routes }) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{ /*
|
||||
<div style={s.root}>
|
||||
<h1 style={s.title}>Single Page Apps for GitHub Pages</h1>
|
||||
|
||||
<Interactive
|
||||
as="a"
|
||||
href="https://github.com/rafrex/spa-github-pages"
|
||||
style={s.repoLink}
|
||||
{...s.link}
|
||||
>https://github.com/rafrex/spa-github-pages</Interactive>
|
||||
|
||||
<nav style={s.mapMenu}>
|
||||
{generateMapMenu()}
|
||||
</nav>
|
||||
{children}
|
||||
|
||||
<div style={s.creditLine}>
|
||||
<Interactive
|
||||
as="a"
|
||||
href="http://www.rafaelpedicini.com"
|
||||
interactiveChild
|
||||
focus={{}}
|
||||
touchActive={{}}
|
||||
touchActiveTapOnly
|
||||
>
|
||||
Code and concept by <span {...s.childLink}>Rafael Pedicini</span>
|
||||
</Interactive>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
*/ }
|
||||
<div className="legacy legacy-footer">
|
||||
<div className="footer-wrap">
|
||||
<div className="footer-repeat-x">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link } from 'react-router';
|
||||
import UnderConstruction from '../UnderConstruction';
|
||||
import PageNotFound from '../PageNotFound';
|
||||
import API from '../Spreadsheet';
|
||||
import s from '../../styles/app.style';
|
||||
|
|
@ -10,58 +9,75 @@ export default class Creatures extends React.Component {
|
|||
|
||||
constructor(props) {
|
||||
super (props);
|
||||
this.tribe = '';
|
||||
this.state = {creatures: {}};
|
||||
this.state = {tribe: '', creatures: {}};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.getData(nextProps);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.children) return;
|
||||
var self = this;
|
||||
let urls = (this.tribe == "All") ? API.Creatures : {[this.tribe]: API.Creatures[this.tribe]};
|
||||
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], function(data) {
|
||||
self.setState({creatures: Object.assign(self.state.creatures, {[tribe]: data})});
|
||||
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>);
|
||||
}
|
||||
let path = this.props.location.pathname.split("/");
|
||||
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
|
||||
|
||||
// ** Process the tribe ** //
|
||||
// /portal/Creatures/
|
||||
// /portal/{Tribe}/Creatures/
|
||||
// The first / gets counted
|
||||
var self = this;
|
||||
if ( path.length === 4) {
|
||||
this.tribe = path[2];
|
||||
|
||||
if (!(API.Creatures).hasOwnProperty(this.tribe)) {
|
||||
// If tribe
|
||||
if (this.state.tribe !== "All") {
|
||||
if (!(API.Creatures).hasOwnProperty(this.state.tribe)) {
|
||||
return(
|
||||
<PageNotFound location={this.props.location}/>
|
||||
);
|
||||
}
|
||||
else return (
|
||||
<div>{list_creatures(this.tribe)}</div>
|
||||
<div>{list_creatures(this.state.tribe)}</div>
|
||||
);
|
||||
}
|
||||
// No tribe specified
|
||||
// Display all creatures
|
||||
else {
|
||||
this.tribe = "All";
|
||||
const creatures = Object.keys(this.state.creatures).map(function(tribe, i) {
|
||||
return (
|
||||
<div key={i}>
|
||||
<Interactive as="a" {...s.link}
|
||||
href={"/portal/Mipedian"+tribe}
|
||||
><span>{tribe}</span></Interactive>
|
||||
{list_creatures(tribe)}
|
||||
<Interactive as={Link} {...s.link}
|
||||
to={"/portal/"+tribe}
|
||||
><span style={s.title}>{tribe}</span></Interactive>
|
||||
{list_creatures(tribe, "Creatures/"+tribe+"/")}
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
|
|
@ -70,18 +86,20 @@ export default class Creatures extends React.Component {
|
|||
}
|
||||
|
||||
// Map creatures of the tribe
|
||||
function list_creatures(tribe) {
|
||||
function list_creatures(tribe, path="Creatures/") {
|
||||
if (!self.state.creatures[tribe]) {
|
||||
return (<span>Loading...</span>);
|
||||
}
|
||||
else return self.state.creatures[tribe].map((creature, i) => {
|
||||
return (
|
||||
<div key={i}>
|
||||
<Interactive as="a" {...s.link} href={"Creatures/"+creature.gsx$name.$t}><span>{creature.gsx$name.$t}</span></Interactive>
|
||||
<Interactive as={Link} {...s.link}
|
||||
to={path+creature.gsx$name.$t}
|
||||
onClick={self.hacks}
|
||||
><span>{creature.gsx$name.$t}</span></Interactive>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
import React from 'react';
|
||||
import Interactive from 'react-interactive';
|
||||
import { Link } from 'react-router';
|
||||
import UnderConstruction from '../UnderConstruction';
|
||||
import PageNotFound from '../PageNotFound';
|
||||
import API from '../Spreadsheet';
|
||||
import s from '../../styles/app.style';
|
||||
|
||||
export default class Mugic extends React.Component {
|
||||
|
||||
|
|
|
|||
39
src/components/Helper.js
Normal file
39
src/components/Helper.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
|
||||
export const language = "ENG";
|
||||
export const bkgrnd = "05";
|
||||
|
||||
export function ChangePage(asParams) {
|
||||
let location = "#";
|
||||
switch (asParams) {
|
||||
case 'collect':
|
||||
location = 'http://www.tradecardsonline.com/im/editCollection/collection_type/1';
|
||||
break;
|
||||
// case 'register' :
|
||||
// location ='/Registration.aspx';
|
||||
// break;
|
||||
case 'build':
|
||||
location = 'http://www.tradecardsonline.com/?action=selectCard&goal=DK&game_id=82';
|
||||
break;
|
||||
case 'centerOval':
|
||||
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 = '/portal/UnderConstruction/';
|
||||
break;
|
||||
}
|
||||
return location;
|
||||
}
|
||||
|
|
@ -4,48 +4,28 @@ import { Link } from 'react-router';
|
|||
import s from '../styles/home.style';
|
||||
|
||||
function Home() {
|
||||
const repoReadmeLink = text => (
|
||||
<Interactive
|
||||
as="a"
|
||||
{...s.link}
|
||||
href="https://github.com/rafrex/spa-github-pages#readme"
|
||||
>{text}</Interactive>
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Interactive as="a" {...s.link}
|
||||
href="/portal/Creatures"
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Creatures"
|
||||
>Creatures</Interactive>
|
||||
<br />
|
||||
<Interactive as="a" {...s.link}
|
||||
href="/portal/Danian"
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Danian/Creatures"
|
||||
>Danian</Interactive>
|
||||
<br />
|
||||
<Interactive as="a" {...s.link}
|
||||
href="/portal/Overworld"
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Overworld/Creatures"
|
||||
>Overworld</Interactive>
|
||||
<br />
|
||||
<Interactive as="a" {...s.link}
|
||||
href="/portal/Underworld"
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Underworld/Creatures"
|
||||
>Underworld</Interactive>
|
||||
<br />
|
||||
<Interactive as="a" {...s.link}
|
||||
href="/portal/Mipedian"
|
||||
<Interactive as={Link} {...s.link}
|
||||
to="/portal/Mipedian/Creatures"
|
||||
>Mipedian</Interactive>
|
||||
<br />
|
||||
{/*<p style={s.p}>
|
||||
This is an example single page app built
|
||||
with React and React Router using {' '}
|
||||
{s.code('browserHistory')}. Navigate with the links below and
|
||||
refresh the page or copy/paste the url to test out the redirect
|
||||
functionality deployed to overcome GitHub Pages incompatibility
|
||||
with single page apps (like this one).
|
||||
</p>
|
||||
<p style={s.p}>
|
||||
Please see the {repoReadmeLink('repo readme')} for instructions on how to
|
||||
use this boilerplate to deploy your own single page app using GitHub Pages.
|
||||
</p>*/}
|
||||
<br />
|
||||
<br />
|
||||
<div style={s.pageLinkContainer}>
|
||||
|
|
|
|||
|
|
@ -11,25 +11,53 @@ export default class SingleCreature extends React.Component {
|
|||
|
||||
constructor(props) {
|
||||
super (props);
|
||||
this.tribe = '';
|
||||
this.card = '';
|
||||
this.state = {creature: null, card_data: null};
|
||||
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;
|
||||
API.getSpreadsheet(API.Creatures[this.tribe], function(data) {
|
||||
API.getSpreadsheet(API.Creatures[tribe], (data) => {
|
||||
data.map((item, i) => {
|
||||
if (item.title.$t == self.card) self.setState({creature: item });
|
||||
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, function(data) {
|
||||
API.getSpreadsheet(API.Creatures_Card_Data, (data) => {
|
||||
data.map((item, i) => {
|
||||
if (item.title.$t == self.card) self.setState({card_data: item });
|
||||
if (item.title.$t == name) self.setState({card_data: item });
|
||||
});
|
||||
// If no card_data set as false
|
||||
if (!self.state.card_data) {
|
||||
|
|
@ -39,41 +67,22 @@ export default class SingleCreature extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
let path = this.props.location.pathname.split("/");
|
||||
if (path[path.length-1] == "") path.pop(); // Remove trailing backslash
|
||||
|
||||
// ** Process the tribe ** //
|
||||
// /portal/Creatures/{Tribe}/{Name}
|
||||
// /portal/{Tribe}/Creatures/{Name}
|
||||
// The first / gets counted
|
||||
if ( path.length !== 5 )
|
||||
{
|
||||
return(
|
||||
<PageNotFound location={this.props.location}/>
|
||||
);
|
||||
//return(browserHistory.push('/PageNotFound'));
|
||||
}
|
||||
|
||||
//Handle both url layouts
|
||||
if (path[2] === "Creatures") this.tribe = path[3];
|
||||
if (path[3] === "Creatures") this.tribe = path[2];
|
||||
var self = this;
|
||||
|
||||
// Get spreadsheet data based on tribe/name
|
||||
if (!(API.Creatures).hasOwnProperty(this.tribe)) {
|
||||
if (!(API.Creatures).hasOwnProperty(this.state.tribe)) {
|
||||
return(
|
||||
<PageNotFound location={this.props.location}/>
|
||||
//return(browserHistory.push('/PageNotFound'));
|
||||
);
|
||||
}
|
||||
|
||||
// this.card is a string for the api call,
|
||||
this.card = decodeURIComponent(path[4]);
|
||||
|
||||
// creature is the object to be used in the jsx
|
||||
var creature = this.state.creature;
|
||||
var card_data = this.state.card_data;
|
||||
|
||||
// TODO separate loading of card_data
|
||||
if (creature == "n/a") return(
|
||||
if (creature == "n/a" || card_data == "n/a") return(
|
||||
<PageNotFound location={this.props.location}/>
|
||||
);
|
||||
|
||||
|
|
@ -94,7 +103,7 @@ export default class SingleCreature extends React.Component {
|
|||
});
|
||||
|
||||
return(
|
||||
<div className={"creature " + this.tribe.toLowerCase()}>
|
||||
<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 />
|
||||
|
|
@ -154,8 +163,8 @@ export default class SingleCreature extends React.Component {
|
|||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<strong>Tribe: </strong>{this.tribe}
|
||||
<img className="icon" src={"/portal/src/img/icons/tribes/"+this.tribe.toLowerCase()+".png"}></img>
|
||||
<strong>Tribe: </strong>{this.state.tribe}
|
||||
<img className="icon" src={"/portal/src/img/icons/tribes/"+this.state.tribe.toLowerCase()+".png"}></img>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user