Story1 Completed

src/newGame/reducer.js

@@ -1,31 +1,40 @@
-const initialState = {
-  team1: ['Player1.1',
-          'Player1.2',
-          'Player1.3',
-          'Player1.4',
-          'Player1.5',
-          'Player1.6',
-          'Player1.7',
-          'Player1.8',
-          'Player1.9',
-          'Player1.10',
-          'Player1.11'],
-  team2: ['Player2.1',
-          'Player2.2',
-          'Player2.3',
-          'Player2.4',
-          'Player2.5',
-          'Player2.6',
-          'Player2.7',
-          'Player2.8',
-          'Player2.9',
-          'Player2.10',
-          'Player2.11'],
-  numberOfOvers: 5,
-};
+export const initialState = {
+        team1: {
+            name: "team 1",
+            players: ['Player1.1',
+                'Player1.2',
+                'Player1.3',
+                'Player1.4',
+                'Player1.5',
+                'Player1.6',
+                'Player1.7',
+                'Player1.8',
+                'Player1.9',
+                'Player1.10',
+                'Player1.11']
+        }
+        ,
+        team2: {
+            name: "team 2",
+            players: ['Player2.1',
+                'Player2.2',
+                'Player2.3',
+                'Player2.4',
+                'Player2.5',
+                'Player2.6',
+                'Player2.7',
+                'Player2.8',
+                'Player2.9',
+                'Player2.10',
+                'Player2.11'
+            ]
+        },
+        numberOfOvers: 5
+    }
+;
 
 const reducer = (state = initialState, action) => {
-  return state;
+    return state;
 };
 
 export default reducer;

src/scorer/Scoreboard.jsx

@@ -1,36 +1,61 @@
 import React from 'react';
-import {Container,Row,Col} from 'reactstrap';
+import {Container, Row, Col} from 'reactstrap';
 
 
-const ScoreBoard = () =>
-  <Container>
-    <br/>
-    <Row>
-      <Col md= {{size:6,offset:3}}>
+const renderCurrentlyBattingTeamScore = (props) => {
+
+    let team = props.score.currentlyBattingTeamName === props.game.team1.name ? props.score.team1 : props.score.team2;
+
+    return (<Row>
+        <Col md="5" xs="4">
+            <b>{props.score.currentlyBattingTeamName}</b>
+        </Col>
+        <Col sm="1" xs="2"/>
+        <Col style={{textAlign: "right"}}>
+            <b>{team.score + "/" + team.wickets + " in " + team.overs + "/" + props.game.numberOfOvers}</b>
+        </Col>
+    </Row>)
+}
+
+const renderCurrentlyBowlingTeamScore = (props) => {
+
+    let team;
+    if (props.score.currentlyBattingTeamName === props.game.team1.name) {
+        team = props.score.team2;
+        team.name = props.game.team2.name;
+    }
+    else {
+        team = props.score.team1;
+        team.name = props.game.team1.name;
+    }
+
+    return (
+        <Row>
+            <Col>
+                {team.name}
+            </Col>
+            <Col style={{textAlign: "right"}}>
+                {team.score + "/" + team.wickets + " in " + team.overs + "/" + props.game.numberOfOvers}
+            </Col>
+        </Row>
+    );
+}
+
+
+const ScoreBoard = (props) =>
+    <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>
+            <Col md={{size: 6, offset: 3}}>
+                {renderCurrentlyBattingTeamScore(props)}
+            </Col>
         </Row>
-      </Col>
-    </Row>
-    <br/>
-    <Row>
-      <Col md= {{size:6,offset:3}} sm="12">
+        <br/>
         <Row>
-          <Col>
-            Team 2 scored
-          </Col>
-          <Col style ={{textAlign:"right"}}>
-            <b>120/5 in 12.1/20</b>
-          </Col>
+            <Col md={{size: 6, offset: 3}} sm="12">
+                {renderCurrentlyBowlingTeamScore(props)}
+            </Col>
         </Row>
-      </Col>
-    </Row>
-  </Container>;
+    </Container>
 
 export default ScoreBoard;

src/scorer/Scorer.jsx

@@ -1,11 +1,20 @@
 import React from 'react';
-import ScoreBoard from './Scoreboard';
+import Scoreboard from './Scoreboard';
+import {connect} from 'react-redux';
 
-const Scorer = () => (
+const Scorer = (props) => (
   <div>
-    <ScoreBoard />
-
+    <Scoreboard game={props.game} score={props.score}/>
   </div>
 );
 
-export default Scorer;
+
+
+export const mapStateToProps = (state) => {
+    return {
+        score: state.scoreInformation,
+        game:state.gameInformation
+    }
+}
+
+export default connect(mapStateToProps)(Scorer)

src/scorer/reducer.js

@@ -0,0 +1,22 @@
+import {initialState as gameState} from '../newGame/reducer'
+
+export const initialState = {
+    team1:
+        {
+            wickets: 0,
+            overs: 0,
+            score: 0
+        },
+    team2: {
+        wickets: 0,
+        overs: 0,
+        score: 0
+    },
+    currentlyBattingTeamName: gameState.team1.name
+};
+
+const reducer = (state = initialState, action) => {
+    return state;
+};
+
+export default reducer;

src/scorer/reducer.test.js

@@ -0,0 +1,22 @@
+import reducer from './reducer';
+import {initialState as gameState} from "../newGame/reducer";
+
+describe('gameInformation/reducer', () => {
+  it('should return initial state of scores of each team', () => {
+    const initialState = {
+        team1:
+            {
+                wickets: 0,
+                overs: 0,
+                score: 0
+            },
+        team2: {
+            wickets: 0,
+            overs: 0,
+            score: 0
+        },
+        currentlyBattingTeamName: gameState.team1.name
+    };
+    expect(reducer(undefined, {})).toEqual(initialState);
+  });
+});

src/store/rootReducer.js

@@ -1,8 +1,10 @@
 import { combineReducers } from 'redux';
 import gameInformationReducer from '../newGame/reducer';
+import scoreReducer from '../scorer/reducer';
 
 const rootReducer = combineReducers({
   gameInformation: gameInformationReducer,
+    scoreInformation: scoreReducer,
 });
 
 export default rootReducer;