second commit

Author: carlosfdev

src/components/Card/Card.css

@@ -1,18 +1,24 @@
 :root {
-    --primary-red: #d36e7a;
+    --primary-red: #b35a65;
+    --primary-blue: #6989b9;
 }
 
 .Card {
     background-color: white;
     border-radius: 10px;
     margin: 15px auto;
-    padding: 40px;
+    padding: 20px;
     border: 1px solid #eee;
     box-shadow: 0 2px 3px #ccc;
     width: 100%;
     text-align: center;
 }
 
+.Card--selected {
+    background-color: var(--primary-blue);
+    color:white;
+}
+
 .button {
     font: inherit;
     cursor: pointer;
@@ -31,4 +37,12 @@
 .button:hover {
     color: white;
     background-color: var(--primary-red);
+}
+
+.button--currentTurn {
+    color: var(--primary-blue);
+}
+
+.button--currentTurn:hover {
+    background-color: var(--primary-blue);
 }

src/components/Card/Card.js

@@ -1,13 +1,18 @@
 import React from 'react';
 import './Card.css';
 
-const Card = ({ character, onHitCard, isHisTurn, ...props }) => (
-    <div className="Card">
+const Card = ({ character, onHitCard, isHisTurn, onGetPower, isSelected, hasAnyCardBeenSelected, ...props }) => (
+    <div className={`Card ${isSelected ? 'Card--selected' : ''}`}>
         <h3>{character.name}</h3>
         <p>{character.race}</p>
         <p>Health {character.health}</p>
         <p>Power {character.power}</p>
-        <button onClick={onHitCard} disabled={isHisTurn} className="button">Hit Card</button>
+        {
+                isHisTurn ?
+                <button onClick={onGetPower} className="button button--currentTurn">Pick Hitter</button>
+                :
+                <button onClick={onHitCard} disabled={!hasAnyCardBeenSelected} className="button">Hit Card</button>
+        }
     </div>
 );
 

src/containers/Board/Board.js

@@ -13,13 +13,22 @@ class Board extends Component {
     constructor(props) {
         super(props)
         this.state = {
-
+            hitterCardId: null,
+            hitterCardPower: 0
         }
     }
 
     handleHit = (isFirstPlayer, id, damage) => {
-        this.props.onPassTurn()
         this.props.onHitCard(isFirstPlayer, id, damage)
+        this.props.onPassTurn()
+        this.setState({
+            hitterCardId: null,
+            hitterCardPower: 0
+        })
+    }
+
+    handleGetPower = (hitterCardId, hitterCardPower) => {
+        this.setState({ hitterCardId: hitterCardId, hitterCardPower: hitterCardPower})
     }
 
     render() {
@@ -30,7 +39,10 @@ class Board extends Component {
                     <Card
                         key={card.id}
                         character={card}
-                        onHitCard={() => this.handleHit(this.props.isFirstPlayer, card.id, 20)}
+                        hasAnyCardBeenSelected = {this.state.hitterCardId !== null}
+                        isSelected={card.id === this.state.hitterCardId}
+                        onHitCard={() => this.handleHit(this.props.isFirstPlayer, card.id, this.state.hitterCardPower)}
+                        onGetPower={() => this.handleGetPower(card.id, card.power)}
                         isHisTurn={this.props.isFirstPlayer}
                     />
                 )
@@ -43,7 +55,10 @@ class Board extends Component {
                     <Card
                         key={card.id}
                         character={card}
-                        onHitCard={() => this.handleHit(this.props.isFirstPlayer, card.id, 20)}
+                        hasAnyCardBeenSelected = {this.state.hitterCardId !== null}
+                        isSelected={card.id === this.state.hitterCardId}
+                        onHitCard={() => this.handleHit(this.props.isFirstPlayer, card.id, this.state.hitterCardPower)}
+                        onGetPower={() => this.handleGetPower(card.id, card.power)}
                         isHisTurn={!this.props.isFirstPlayer}
                     />
                 )

src/store/reducers/board.js

@@ -3,16 +3,16 @@ import * as actionTypes from '../actions/actionTypes'
 const initialState = {
     player1: {
         cards: [
-            {id: 1, name: 'Tranchetemon', race: 'Digimon', health: '150', power: '200'},
-            {id: 2, name: 'Tranchete Gris', race: 'Mage', health: '75', power: '300'},
-            {id: 3, name: 'Tranchete Dobby', race: 'Domestic Elf', health: '50', power: '500'},
+            {id: 1, name: 'Tranchetemon', race: 'Digimon', health: '1300', power: '200'},
+            {id: 2, name: 'Tranchete Gris', race: 'Mage', health: '1100', power: '300'},
+            {id: 3, name: 'Tranchete Dobby', race: 'Domestic Elf', health: '1000', power: '500'},
         ]
     },
     player2: {
         cards: [
-            {id: 4, name: 'Tranchetemon 2', race: 'Digimon', health: '150', power: '200'},
-            {id: 5, name: 'Tranchete Gris 2', race: 'Mage', health: '75', power: '300'},
-            {id: 6, name: 'Tranchete Dobby 2', race: 'Domestic Elf', health: '50', power: '500'},
+            {id: 4, name: 'Tranchetemon 2', race: 'Digimon', health: '1500', power: '200'},
+            {id: 5, name: 'Tranchete Gris 2', race: 'Mage', health: '1200', power: '300'},
+            {id: 6, name: 'Tranchete Dobby 2', race: 'Domestic Elf', health: '1000', power: '500'},
         ]
     },
 }