From aad89bed57b42baa7ff857e1340cccfa4eb94771 Mon Sep 17 00:00:00 2001
From: David Katz <15Dkatz@shcp.edu>
Date: Mon, 24 Oct 2022 12:26:54 -0700
Subject: [PATCH] Track Card Component

---
 evens-or-odds/src/components/App.js       |  2 ++
 evens-or-odds/src/components/GameState.js | 20 ++++++++++++++++++++
 evens-or-odds/src/reducers/gameState.js   | 19 +++++++++++++++++--
 3 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 evens-or-odds/src/components/GameState.js

diff --git a/evens-or-odds/src/components/App.js b/evens-or-odds/src/components/App.js
index 151b3bc..097bd98 100644
--- a/evens-or-odds/src/components/App.js
+++ b/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 />
diff --git a/evens-or-odds/src/components/GameState.js b/evens-or-odds/src/components/GameState.js
new file mode 100644
index 0000000..78aecd5
--- /dev/null
+++ b/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);
diff --git a/evens-or-odds/src/reducers/gameState.js b/evens-or-odds/src/reducers/gameState.js
index 3d36777..fa0b1ca 100644
--- a/evens-or-odds/src/reducers/gameState.js
+++ b/evens-or-odds/src/reducers/gameState.js
@@ -1,6 +1,9 @@
-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) {
@@ -8,6 +11,18 @@ const gameStateReducer = (state = DEFAULT_GAME_STATE, action) => {
       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;
   }