Added logic for playing number cards

src/components/Game.css

@@ -0,0 +1,6 @@
+.card {
+    border: 1px solid black;
+    padding: 20px;
+    margin: 20px;
+    display: inline-block;
+}

src/components/Game.js

@@ -1,24 +1,36 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import { CARD_PLAYED } from '../store/actions'
+
+import './Game.css'
 
 const Game = (props) => {
+    const player1active = props.turn === 'Player 1'
     return (
         <div>
-            <h1>Game</h1>
-            <div className='player1Deck'>
-                {props.player1Deck.map((item) => {
-                    return <h6>{item}</h6>
-                })}
+            <h1>Turn: {props.turn}</h1>
+            <div className='player1Deck' style={player1active ? null : {pointerEvents: 'none'}}>
+                {props.player1Deck.map((item) => (
+                    <span
+                    onClick={() => props.onCardPlayed(item)}
+                    className='card'>
+                        {item}
+                    </span>
+                ))}
             </div>
             <hr />
             <div>
-                <h1>Current Card: {props.playedCardsPile[0]}</h1>
+                <h1>Current Card: {props.playedCardsPile[props.playedCardsPile.length-1]}</h1>
             </div>
             <hr />
-            <div className='player2Deck'>
-                {props.player2Deck.map((item) => {
-                    return <h6>{item}</h6>
-                })}
+            <div className='player2Deck' style={player1active ? {pointerEvents: 'none'} : null}>
+                {props.player2Deck.map((item) => (
+                    <span
+                    onClick={() => props.onCardPlayed(item)}
+                    className='card'>
+                        {item}
+                    </span>
+                ))}
             </div>
         </div>
     )
@@ -37,4 +49,10 @@ const mapStateToProps = (state) => {
     }
 }
 
-export default connect(mapStateToProps)(Game)
+const mapDispatchToProps = (dispatch) => {
+    return {
+        onCardPlayed: (card) => dispatch({type: CARD_PLAYED, payload: {cardPlayed: card}})
+    }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Game)