diff --git a/src/ScoreHeader/CurrentScoreHeading.js b/src/ScoreHeader/CurrentScoreHeading.js new file mode 100644 index 0000000..5f0c639 --- /dev/null +++ b/src/ScoreHeader/CurrentScoreHeading.js @@ -0,0 +1,68 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import Container from 'reactstrap/lib/Container'; +import Row from 'reactstrap/lib/Row'; +import Col from 'reactstrap/lib/Col'; + +const CurrentScoreHandling = props => + ( + <Container> + <br /> + <Row> + <Col md={{ size: 6, offset: 3 }}> + <Row> + <Col md="5" xs="4"> + <b>{props.battingTeam}</b> + </Col> + <Col sm="1" xs="2" /> + <Col className="text-align-right"> + <p> + <b> + {props.currentInningScore.runsScored}/ + {props.currentInningScore.wicketsFallen} in + {props.currentInningScore.oversBowled}. + {props.currentBowlsBowled}/{props.totalOvers} + </b> + </p> + </Col> + </Row> + </Col> + </Row> + <br /> + <Row> + <Col md={{ size: 6, offset: 3 }} sm="12"> + <Row> + <Col> + <p> + {props.bowlingTeam} scored + {props.previousInningScore.runsScored}/ + {props.previousInningScore.wicketsFallen} in + {props.previousInningScore.oversBowled} + </p> + </Col> + </Row> + </Col> + </Row> + </Container> + ); + +CurrentScoreHandling.propTypes = { + previousInningScore: PropTypes.instanceOf(Object).isRequired, + currentInningScore: PropTypes.instanceOf(Object).isRequired, + currentBowlsBowled: PropTypes.number.isRequired, + totalOvers: PropTypes.number.isRequired, + battingTeam: PropTypes.string.isRequired, + bowlingTeam: PropTypes.string.isRequired, +}; + +const mapStateToProps = state => ({ + previousInningScore: state.totalScorerReducer.previousInningScore, + currentInningScore: state.totalScorerReducer.currentInningScore, + currentBowlsBowled: state.totalScorerReducer.currentBowlsBowled, + totalOvers: state.totalScorerReducer.totalOvers, + battingTeam: state.totalScorerReducer.battingTeam, + bowlingTeam: state.totalScorerReducer.bowlingTeam, +}); + +export default connect(mapStateToProps)(CurrentScoreHandling); diff --git a/src/home/Home.css b/src/home/Home.css index ac10e9c..7d13a89 100644 --- a/src/home/Home.css +++ b/src/home/Home.css @@ -4,4 +4,8 @@ html, body { #root { height: 100% +} + +.text-align-right{ + text-align: 'right' } \ No newline at end of file diff --git a/src/home/Home.jsx b/src/home/Home.jsx index cf3709e..e841bcb 100644 --- a/src/home/Home.jsx +++ b/src/home/Home.jsx @@ -5,11 +5,13 @@ import './Home.css'; import { createGameAction } from './actions'; import ThisOver from '../ThisOver/ThisOver'; import Scorer from '../scorer/scorer'; +import CurrentScoreHeading from '../ScoreHeader/CurrentScoreHeading'; const Home = () => ( <Container className="h-100"> + <CurrentScoreHeading /> <ThisOver /> <Scorer /> </Container> diff --git a/src/scorer/Scoreboard.jsx b/src/scorer/Scoreboard.jsx deleted file mode 100644 index ecd99e9..0000000 --- a/src/scorer/Scoreboard.jsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { Container, Row, Col } from 'reactstrap'; - -class ScoreBoard extends Component { - renderPreviousTeamScoreDetails() { - return ( - <Row> - <Col md={{ size: 6, offset: 3 }} sm="12"> - <Row> - <Col> - <p> - {this.props.previousInning.bowlingCard.name} scored - {this.props.previousInning.runsScored}/ - {this.props.previousInning.wicketsFallen} in - {this.props.previousInning.oversBowled} - </p> - </Col> - </Row> - </Col> - </Row> - ); - } - - render() { - return ( - <Container> - <br /> - <Row> - <Col md={{ size: 6, offset: 3 }}> - <Row> - <Col md="5" xs="4"> - <b>{this.props.currentInning.battingCard.name}</b> - </Col> - <Col sm="1" xs="2" /> - <Col style={{ textAlign: 'right' }}> - <b> - {this.props.currentInning.runsScored}/ - {this.props.currentInning.wicketsFallen} in - {this.props.currentInning.oversBowled}. - {this.props.currentInning.validBallsInCurrentOver}/{this.props.totalOvers} - </b> - </Col> - </Row> - </Col> - </Row> - <br /> - {!(this.props.isFirstInning) ? - this.renderPreviousTeamScoreDetails() : - null - } - </Container> - ); - } -} - -ScoreBoard.propTypes = { - isFirstInning: PropTypes.bool.isRequired, - previousInning: PropTypes.instanceOf(Object).isRequired, - currentInning: PropTypes.instanceOf(Object).isRequired, - totalOvers: PropTypes.number.isRequired, -}; - -export default ScoreBoard; diff --git a/src/scorer/Scorer.jsx b/src/scorer/Scorer.jsx deleted file mode 100644 index cdf257e..0000000 --- a/src/scorer/Scorer.jsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, { Component } from 'react'; -import { connect } from 'react-redux'; -import PropTypes from 'prop-types'; -import ScoreBoard from './Scoreboard'; - -class Scorer extends Component { - renderBasedOnCurrentInning() { - if (this.props.isFirstInning) { - return ( - <ScoreBoard - currentInning={this.props.firstInning} - previousInning={undefined} - totalOvers={this.props.totalOvers} - isFirstInning={this.props.isFirstInning} - />); - } - return ( - <ScoreBoard - currentInning={this.props.secondInning} - previousInning={this.props.firstInning} - totalOvers={this.props.totalOvers} - isFirstInning={this.props.isFirstInning} - />); - } - - render() { - return ( - <div> - {this.renderBasedOnCurrentInning()} - </div>); - } -} - -Scorer.propTypes = { - isFirstInning: PropTypes.bool.isRequired, - firstInning: PropTypes.instanceOf(Object).isRequired, - secondInning: PropTypes.instanceOf(Object).isRequired, - totalOvers: PropTypes.number.isRequired, -}; - -const mapStateToProps = state => ({ - isFirstInning: state.gameInformation.isFirstInning, - firstInning: state.gameInformation.firstInning, - secondInning: state.gameInformation.secondInning, - totalOvers: state.gameInformation.totalOvers, -}); - - -const connectedScorerComponent = connect(mapStateToProps)(Scorer); - -export default connectedScorerComponent; diff --git a/src/state.1.json b/src/state.1.json index 5ba62e2..c3934c4 100644 --- a/src/state.1.json +++ b/src/state.1.json @@ -1,15 +1,15 @@ { "previousInningScore": { - "runsScored": 0, - "wicketsFallen": 0, + "runsScored": 150, + "wicketsFallen": 7, "oversBowled": 20 }, "currentInningScore": { - "runsScored": 0, - "wicketsFallen": 0, - "oversBowled": 0 + "runsScored": 120, + "wicketsFallen": 4, + "oversBowled": 10 }, - "validBallsInCurrentOver": 0, + "validBallsInCurrentOver": 4, "currentOver": [ "1", "w", diff --git a/src/store/actions.js b/src/store/actions.js index 96b27b2..b718019 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -19,4 +19,4 @@ function getTotalScoreUpdateAction(runs, incrementBalls, incrementWicket) { return getaction; }; -export { getRecordBatsmanScoreAction, getTotalScoreUpdateAction }; +export default { getRecordBatsmanScoreAction, getTotalScoreUpdateAction }; diff --git a/src/store/rootReducer.js b/src/store/rootReducer.js index 179119d..d981de1 100644 --- a/src/store/rootReducer.js +++ b/src/store/rootReducer.js @@ -3,9 +3,11 @@ import gameInformationReducer from '../newGame/reducer'; import thisOverReducer from '../ThisOver/reducer'; import batsManScorerReducer from '../batsmanScorer/reducer'; import bowlerScorerReducer from '../BowlerScorer/reducer'; +import totalScoreReducer from '../totalReducer/reducer'; const rootReducer = combineReducers({ gameInformation: gameInformationReducer, + totalScorerReducer: totalScoreReducer, thisOver: thisOverReducer, batsManScorer: batsManScorerReducer, bowlerScorer: bowlerScorerReducer,