Track Card Component

evens-or-odds/src/components/App.js

@@ -7,6 +7,7 @@ import Instructions from './Instructions';
 import DrawCard from './DrawCard';
 import Card from './Card';
 import Guess from './Guess';
+import GameState from './GameState';
 
 class App extends Component {
   startGame = () => {
@@ -33,6 +34,7 @@ class App extends Component {
           this.props.gameStarted ? (
             <div>
               <h3>The game is on!</h3>
+              <GameState />
               <br />
               <Guess />
               <br />

evens-or-odds/src/components/GameState.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+const GameState = ({ correctGuesses, remaining }) => {
+  const guessText = correctGuesses === 1 ? 'guess' : 'guesses';
+
+  return (
+    <div>
+      <p>{remaining} cards remaining</p>
+      <p>{correctGuesses} correct {guessText}</p>
+    </div>
+  )
+}
+
+export default connect(
+  ({
+    deck: { remaining },
+    gameState: { correctGuesses }
+  }) => ({ remaining, correctGuesses })
+)(GameState);

evens-or-odds/src/reducers/gameState.js

@@ -1,13 +1,28 @@
-import { SET_GUESS, SET_GAME_STARTED } from '../actions/types';
+import { SET_GUESS, SET_GAME_STARTED, DECK_DRAW } from '../actions/types';
 
-const DEFAULT_GAME_STATE = { guess: '' };
+const DEFAULT_GAME_STATE = { guess: '', correctGuesses: 0 };
+
+const EVENS = ['2', '4', '6', '8', '10'];
+const ODDS = ['ACE', '3', '5', '7', '9'];
 
 const gameStateReducer = (state = DEFAULT_GAME_STATE, action) => {
   switch(action.type) {
     case SET_GUESS:
       return { ...state, guess: action.guess };
     case SET_GAME_STARTED:
       return DEFAULT_GAME_STATE;
+    case DECK_DRAW.FETCH_SUCCESS:
+      const { value } = action.cards[0];
+      const { guess, correctGuesses } = state;
+
+      if (
+        (guess === 'even' && EVENS.includes(value)) ||
+        (guess === 'odd' && ODDS.includes(value))
+      ) {
+        return { ...state, correctGuesses: correctGuesses+1 };
+      }
+
+      return state;
     default:
       return state;
   }