js_react__github-battle/app/components/ConfirmBattle.js
2016-04-04 22:32:41 +02:00

46 lines
1.5 KiB
JavaScript

import React from "react";
import { Link } from "react-router";
import styles from "../styles/";
import Loading from "../components/Loading";
import MainContainer from "../containers/MainContainer";
import UserDetails from "../components/UserDetails";
import UserDetailsWrapper from "../components/UserDetailsWrapper";
const PropTypes = React.PropTypes;
const ConfirmBattle = (props) => {
return props.isLoading === true
? <Loading speed={400} text="Hold on a moment" />
: (
<MainContainer>
<h1>Confirm Players</h1>
<div className="col-sm-8 col-sm-offset-2">
<UserDetailsWrapper header="Player One">
<UserDetails info={props.playerInfo[0]} />
</UserDetailsWrapper>
<UserDetailsWrapper header="Player Two">
<UserDetails info={props.playerInfo[1]} />
</UserDetailsWrapper>
</div>
<div className="col-sm-8 col-sm-offset-2">
<div className="col-sm-12" style={styles.space}>
<button type="button" className="btn btn-lg btn-success" onClick={props.onInitiateBattle}>
Initiate Battle!</button>
</div>
<div className="col-sm-12" style={styles.space}>
<Link to="/playerOne">
<button type="button" className="btn btn-lg btn-danger">Reselect players!</button>
</Link>
</div>
</div>
</MainContainer>
);
};
ConfirmBattle.propTypes = {
isLoading: PropTypes.bool.isRequired,
onInitiateBattle: PropTypes.func.isRequired,
playerInfo: PropTypes.array.isRequired
};
export default ConfirmBattle;