Added draw new card functionality

src/components/Game.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
-import { CARD_PLAYED } from '../store/actions'
+import { CARD_DRAWN, CARD_PLAYED } from '../store/actions'
 
 import './Game.css'
 
@@ -22,6 +22,7 @@ const Game = (props) => {
             <hr />
             <div>
                 <h1>Current Card: {props.playedCardsPile[props.playedCardsPile.length-1]}</h1>
+                <button onClick={props.onCardDrawn}>DRAW CARD</button>
             </div>
             <hr />
             <div className='player2Deck' style={player1active ? {pointerEvents: 'none'} : null}>
@@ -53,7 +54,8 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        onCardPlayed: (card) => dispatch({type: CARD_PLAYED, payload: {cardPlayed: card}})
+        onCardPlayed: (card) => dispatch({type: CARD_PLAYED, payload: {cardPlayed: card}}),
+        onCardDrawn: () => dispatch({type: CARD_DRAWN})
     }
 }
 

src/store/actions.js

@@ -1,2 +1,3 @@
 export const START_GAME = 'START_GAME'
 export const CARD_PLAYED = 'CARD_PLAYED'
+export const CARD_DRAWN = 'CARD_DRAWN'

src/store/reducer.js

@@ -1,4 +1,4 @@
-import { CARD_PLAYED, START_GAME } from "./actions";
+import { CARD_DRAWN, CARD_PLAYED, START_GAME } from "./actions";
 
 //pack of 108 cards
 const CARDS = [
@@ -472,6 +472,104 @@ const reducer = (state = initialState, action) => {
             }
         }
         
+        case CARD_DRAWN: {
+            //extract player who drew the card
+            const cardDrawnBy = state.turn
+
+            //check who drew the card and return new state accordingly
+            if(cardDrawnBy === 'Player 1') {
+                //remove 1 new card from drawCardPile and add it to player1's deck (immutably)
+                //make a copy of drawCardPile array
+                const copiedDrawCardPileArray = [...state.drawCardPile]
+                //pull out last element from it
+                const drawCard = copiedDrawCardPileArray.pop()
+                console.log(drawCard);
+                
+                //extract number and color of drawn card
+                const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1)
+                let numberOfDrawnCard = drawCard.charAt(0)
+                if(drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY') {
+                    numberOfDrawnCard = 404
+                }
+                if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') {
+                    numberOfDrawnCard = 252
+                }
+                if(drawCard === 'W') {
+                    numberOfDrawnCard = 300
+                }
+                if(drawCard === 'D4W') {
+                    numberOfDrawnCard = 600
+                }
+
+                //check if drawn card is playable
+                if(numberOfDrawnCard === state.currentNumber || colorOfDrawnCard === state.currentColor) {
+                    //return new state
+                    return {
+                        ...state,
+                        turn: 'Player 2',
+                        playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
+                        currentColor: colorOfDrawnCard,
+                        currentNumber: numberOfDrawnCard
+                    }
+                }
+
+                //else add the drawn card to player1's deck
+                //return new state
+                return {
+                    ...state,
+                    turn: 'Player 2',
+                    player1Deck: [...state.player1Deck.slice(0, state.player1Deck.length), drawCard, ...state.player1Deck.slice(state.player1Deck.length)],
+                    drawCardPile: [...copiedDrawCardPileArray]
+                }
+                
+            }
+            else {
+                //remove 1 new card from drawCardPile and add it to player2's deck (immutably)
+                //make a copy of drawCardPile array
+                const copiedDrawCardPileArray = [...state.drawCardPile]
+                //pull out last element from it
+                const drawCard = copiedDrawCardPileArray.pop()
+                console.log(drawCard);
+                
+                //extract number and color of drawn card
+                const colorOfDrawnCard = drawCard.charAt(drawCard.length - 1)
+                let numberOfDrawnCard = drawCard.charAt(0)
+                if(drawCard === 'skipR' || drawCard === 'skipG' || drawCard === 'skipB' || drawCard === 'skipY') {
+                    numberOfDrawnCard = 404
+                }
+                if(drawCard === 'D2R' || drawCard === 'D2G' || drawCard === 'D2B' || drawCard === 'D2Y') {
+                    numberOfDrawnCard = 252
+                }
+                if(drawCard === 'W') {
+                    numberOfDrawnCard = 300
+                }
+                if(drawCard === 'D4W') {
+                    numberOfDrawnCard = 600
+                }
+
+                //check if drawn card is playable
+                if(numberOfDrawnCard === state.currentNumber || colorOfDrawnCard === state.currentColor) {
+                    //return new state
+                    return {
+                        ...state,
+                        turn: 'Player 1',
+                        playedCardsPile: [...state.playedCardsPile.slice(0, state.playedCardsPile.length), drawCard, ...state.playedCardsPile.slice(state.playedCardsPile.length)],
+                        currentColor: colorOfDrawnCard,
+                        currentNumber: numberOfDrawnCard
+                    }
+                }
+
+                //else add the drawn card to player2's deck
+                //return new state
+                return {
+                    ...state,
+                    turn: 'Player 1',
+                    player2Deck: [...state.player2Deck.slice(0, state.player2Deck.length), drawCard, ...state.player2Deck.slice(state.player2Deck.length)],
+                    drawCardPile: [...copiedDrawCardPileArray]
+                }
+            }
+        }
+        
         default:
             return state
     }