Sethuraman#1: Added Scoreboard and Scorer initial implementation.

Co-authored-by: Sravya Kanagarla <[email protected]>

src/scorer/Scoreboard.jsx

@@ -1,36 +1,64 @@
-import React from 'react';
-import {Container,Row,Col} from 'reactstrap';
+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>
+    );
+  }
 
-const ScoreBoard = () =>
-  <Container>
-    <br/>
-    <Row>
-      <Col md= {{size:6,offset:3}}>
+  render() {
+    return (
+      <Container>
+        <br />
         <Row>
-          <Col md="5" xs="4">
-            <b>Team 1</b>
-          </Col>
-          <Col sm="1" xs="2" />
-          <Col style ={{textAlign:"right"}}>
-            <b>120/5 in 12.1/20</b>
-          </Col>
-        </Row>
-      </Col>
-    </Row>
-    <br/>
-    <Row>
-      <Col md= {{size:6,offset:3}} sm="12">
-        <Row>
-          <Col>
-            Team 2 scored
-          </Col>
-          <Col style ={{textAlign:"right"}}>
-            <b>120/5 in 12.1/20</b>
+          <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>
-      </Col>
-    </Row>
-  </Container>;
+        <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;
+export default ScoreBoard;

src/scorer/Scorer.jsx

@@ -1,11 +1,51 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
 import ScoreBoard from './Scoreboard';
 
-const Scorer = () => (
-  <div>
-    <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}
+      />);
+  }
 
-  </div>
-);
+  render() {
+    return (
+      <div>
+        {this.renderBasedOnCurrentInning()}
+      </div>);
+  }
+}
 
-export default Scorer;
+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;