61 lines
1.6 KiB
JavaScript
61 lines
1.6 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 StartOver = () => {
|
|
return (
|
|
<div className="col-sm-12" style={styles.space}>
|
|
<Link to="/playerOne">
|
|
<button type="button" className="btn btn-lg btn-danger">Start over</button>
|
|
</Link>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Results = (props) => {
|
|
if (props.isLoading === true) {
|
|
return <Loading text="One moment" speed={50} />;
|
|
}
|
|
|
|
if (props.scores[0] === props.scores[1]) {
|
|
return (
|
|
<MainContainer>
|
|
<h1>It's a tie</h1>
|
|
<StartOver path="/playerOne" />
|
|
</MainContainer>
|
|
);
|
|
}
|
|
|
|
const winningIndex = props.scores[0] > props.scores[1] ? 0 : 1;
|
|
const losingIndex = winningIndex ? 0 : 1;
|
|
|
|
return (
|
|
<MainContainer>
|
|
<h1>Results</h1>
|
|
<div className="col-sm-8 col-sm-offset-2">
|
|
<UserDetailsWrapper header="Winner">
|
|
<UserDetails score={props.scores[winningIndex]} info={props.playerInfo[winningIndex]} />
|
|
</UserDetailsWrapper>
|
|
<UserDetailsWrapper header="Loser">
|
|
<UserDetails score={props.scores[losingIndex]} info={props.playerInfo[losingIndex]} />
|
|
</UserDetailsWrapper>
|
|
</div>
|
|
|
|
<StartOver />
|
|
</MainContainer>
|
|
);
|
|
};
|
|
|
|
Results.propTypes = {
|
|
isLoading: PropTypes.bool.isRequired,
|
|
playerInfo: PropTypes.array.isRequired,
|
|
scores: PropTypes.array.isRequired
|
|
};
|
|
|
|
export default Results;
|