From c4a1f9cf3cd589be0262a3a0bea42e8e76a64f0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Molero?= <victor.molero@gmail.com>
Date: Tue, 6 Mar 2018 23:12:28 +0100
Subject: [PATCH 1/6] fix some small bits

---
 src/components/DealComponent.tsx         | 2 --
 src/{ => components}/SimpleBlackJack.tsx | 2 +-
 src/css/enhanced.css                     | 4 ++--
 src/index.tsx                            | 2 +-
 src/tests/SimpleBlackJack.test.tsx       | 2 +-
 5 files changed, 5 insertions(+), 7 deletions(-)
 rename src/{ => components}/SimpleBlackJack.tsx (90%)

diff --git a/src/components/DealComponent.tsx b/src/components/DealComponent.tsx
index ffae083..41d4064 100644
--- a/src/components/DealComponent.tsx
+++ b/src/components/DealComponent.tsx
@@ -14,10 +14,8 @@ interface DealPropsInterface {
 export default class DealComponent extends React.Component<DealPropsInterface> {
   public render() {
     let board: Board = this.props.board;
-    let gameOver: string = board.isGameOver() ? 'Deal Over' : 'Deal On';
     return (
       <div id="gamezone">
-          <div>{gameOver}</div> 
           <div id="gamebuttons">
               <span id="playeramount"><span id="player">{board.getPlayerScore()}</span> </span>
               <input 
diff --git a/src/SimpleBlackJack.tsx b/src/components/SimpleBlackJack.tsx
similarity index 90%
rename from src/SimpleBlackJack.tsx
rename to src/components/SimpleBlackJack.tsx
index 879d112..565a87b 100644
--- a/src/SimpleBlackJack.tsx
+++ b/src/components/SimpleBlackJack.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import BoardComponent from './components/BoardComponent';
+import BoardComponent from './BoardComponent';
 
 class SimpleBlackJack extends React.Component {
   render() {
diff --git a/src/css/enhanced.css b/src/css/enhanced.css
index 296ab2b..25a3593 100755
--- a/src/css/enhanced.css
+++ b/src/css/enhanced.css
@@ -3,11 +3,11 @@
 @media all and (min-width: 600px) 
 {
 	#player:before {
-		content: "Player ";
+		content: "You ";
 	}
 
 	#bank:after {
-		content: " Dealer";
+		content: " House";
 	}
 	
 	#table {
diff --git a/src/index.tsx b/src/index.tsx
index 8f55069..29e5a34 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import SimpleBlackJack from './SimpleBlackJack';
+import SimpleBlackJack from './components/SimpleBlackJack';
 import registerServiceWorker from './registerServiceWorker';
 import './css/base.css';
 import './css/enhanced.css';
diff --git a/src/tests/SimpleBlackJack.test.tsx b/src/tests/SimpleBlackJack.test.tsx
index cec1a14..22b7fb0 100644
--- a/src/tests/SimpleBlackJack.test.tsx
+++ b/src/tests/SimpleBlackJack.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import SimpleBlackJack from '../SimpleBlackJack';
+import SimpleBlackJack from '../components/SimpleBlackJack';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');

From 182f80f40f43da8728114b20175da4898cd83517 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Molero?= <victor.molero@gmail.com>
Date: Wed, 7 Mar 2018 15:59:50 +0100
Subject: [PATCH 2/6] add save button handler

---
 src/components/BoardComponent.tsx  | 31 ++++++++++++++++++++++++++----
 src/components/SimpleBlackJack.tsx | 27 ++++++++++++++++++++++++--
 2 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/components/BoardComponent.tsx b/src/components/BoardComponent.tsx
index 9e975e0..992996b 100644
--- a/src/components/BoardComponent.tsx
+++ b/src/components/BoardComponent.tsx
@@ -11,12 +11,25 @@ interface BoardStateInterface {
   btnPlayerClass: string;
 }
 
-export default class BoardComponent extends React.Component<{}, BoardStateInterface> {
+interface BoardPropsInterface {
+  board: string;
+  onSaveBoardClick: Function;
+}
+
+export default class BoardComponent extends React.Component<BoardPropsInterface, BoardStateInterface> {
   
-  constructor(props: {}) {
+  constructor(props: BoardPropsInterface) {
     super(props);
+    let board: Board = Board.newGame();
+    if (this.props.board.length > 0) {
+      try {
+        board = JSON.parse(this.props.board);
+      } catch (invalidJson) {
+        alert('Cannot parse Board json');
+      }
+    }
     this.state = {
-      board: Board.newGame(),
+      board: board,
       handNumber: 0,
       playerScore: 0,
       houseScore: 0,
@@ -52,12 +65,22 @@ export default class BoardComponent extends React.Component<{}, BoardStateInterf
     this.setNewState(newState);
   }
 
+  public handleSaveBoard() {
+    let jsonBoard: string = JSON.stringify(this.state.board);
+    return this.props.onSaveBoardClick(jsonBoard);
+  }
+
   public render() {
     return (
       <div id="table">
         <aside id="subheader">
           <div id="localstoragebuttons">
-            <input type="button" id="btnSave" value="Save globals" />
+            <input 
+                    type="button" 
+                    id="btnSave" 
+                    value="Save globals" 
+                    onClick={() => this.handleSaveBoard()} 
+            />
             <input type="button" id="btnReset" value="Reset Counters" />
           </div>
           <div id="globalinfopanel">
diff --git a/src/components/SimpleBlackJack.tsx b/src/components/SimpleBlackJack.tsx
index 565a87b..4ccb840 100644
--- a/src/components/SimpleBlackJack.tsx
+++ b/src/components/SimpleBlackJack.tsx
@@ -2,6 +2,26 @@ import * as React from 'react';
 import BoardComponent from './BoardComponent';
 
 class SimpleBlackJack extends React.Component {
+  private readonly KEY: string = 'board';
+
+  setItem(key: string, data: string) {
+    localStorage.setItem(key, data);
+  }
+  getItem(key: string): string {
+    const jsonBoard: string | null = localStorage.getItem(key);
+    if (jsonBoard !== null) {
+      return jsonBoard;
+    }
+    return '';
+  }
+  handleSaveBoard(board: string): boolean {
+    try {
+      this.setItem(this.KEY, board);
+    } catch (errorOnSave) {
+      return false;
+    }
+    return true;
+  }
   render() {
     return (
       <div className="container">
@@ -10,11 +30,14 @@ class SimpleBlackJack extends React.Component {
             <span>simple</span>BlackJack
           </h1>
         </header>
-        <BoardComponent />
+        <BoardComponent 
+                        board={this.getItem('board')}  
+                        onSaveBoardClick={(board: string) => this.handleSaveBoard(board)}
+        />
         <footer id="footer">
           <div id="gameinfo">
             <p id="txtMessage">
-              Wellcome to the Víctor Molero's BlackJack Game. Press 'Deal!' to start playing.
+              Welcome to vmolero's BlackJack Game. Press 'Deal!' to start playing.
             </p>
           </div>
         </footer>

From b2c04a21552823517af639ae2eae2491bb2ade81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Molero?= <victor.molero@gmail.com>
Date: Thu, 8 Mar 2018 21:47:47 +0100
Subject: [PATCH 3/6] save globals

---
 src/CardDeck.ts                    | 12 ++++++---
 src/Deal.ts                        |  1 -
 src/components/BoardComponent.tsx  | 42 +++++++++++++++++++++++-------
 src/components/SimpleBlackJack.tsx | 41 +++++++++++++++++++++--------
 src/tests/CardDeck.test.ts         |  7 -----
 5 files changed, 70 insertions(+), 33 deletions(-)

diff --git a/src/CardDeck.ts b/src/CardDeck.ts
index e1b1025..ea411d7 100644
--- a/src/CardDeck.ts
+++ b/src/CardDeck.ts
@@ -5,6 +5,10 @@ export default class CardDeck {
     public readonly RANKS = 13;
     private deck: Array<Card>;
 
+    public get cards(): Array<Card> {
+        return this.deck;
+    }
+
     public static createStandard52CardDeck() {
         let deck: Array<Card> = new Array<Card>();
         for (let suit: Suit = Suit.Clubs; suit <= Suit.Diamonds; suit++) {
@@ -14,7 +18,7 @@ export default class CardDeck {
             }
         }
 
-        return new CardDeck(deck);
+        return this.shuffle(new CardDeck(deck));
     }
 
     /** 
@@ -22,15 +26,15 @@ export default class CardDeck {
      * 
      * @see https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
      */
-    public shuffle() {
+    public static shuffle(deck: CardDeck) {
         let randomizedDeck: Array<Card> = [];
-        let array: Array<Card> = this.deck.slice();
+        let array: Array<Card> = deck.cards.slice();
         while (array.length !== 0) {
             let rIndex = Math.floor(array.length * Math.random());
             randomizedDeck.push(array[rIndex]);
             array.splice(rIndex, 1);
         }
-        this.deck = randomizedDeck;
+        return new CardDeck(randomizedDeck);
     }
 
     public getLength(): number {
diff --git a/src/Deal.ts b/src/Deal.ts
index de22ca1..8f16620 100644
--- a/src/Deal.ts
+++ b/src/Deal.ts
@@ -6,7 +6,6 @@ export default class Deal {
 
     public constructor(cardDeck?: CardDeck) {
         this.cardDeck = cardDeck || CardDeck.createStandard52CardDeck();
-        this.cardDeck.shuffle();
     }
 
     public pullCard(): Card {
diff --git a/src/components/BoardComponent.tsx b/src/components/BoardComponent.tsx
index 992996b..6bba5f8 100644
--- a/src/components/BoardComponent.tsx
+++ b/src/components/BoardComponent.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import DealComponent from './DealComponent';
 import Board from '../Board';
 
-interface BoardStateInterface {
+export interface BoardStateInterface {
   board: Board;
   handNumber: number;
   playerScore: number;
@@ -12,24 +12,47 @@ interface BoardStateInterface {
 }
 
 interface BoardPropsInterface {
-  board: string;
+  jsonState: JsonStateInterface;
   onSaveBoardClick: Function;
 }
 
-export default class BoardComponent extends React.Component<BoardPropsInterface, BoardStateInterface> {
+export interface JsonStateInterface {
+  handNumber: number;
+  playerScore: number;
+  houseScore: number;
+}
+
+export class BoardComponent extends React.Component<BoardPropsInterface, BoardStateInterface> {
   
   constructor(props: BoardPropsInterface) {
     super(props);
-    let board: Board = Board.newGame();
-    if (this.props.board.length > 0) {
+    this.state = this.resetState();
+    if (Object.keys(this.props.jsonState).length > 0 && 
+       this.props.jsonState.constructor === Object) {
       try {
-        board = JSON.parse(this.props.board);
+        this.state = this.fromSavedState(this.props.jsonState);
       } catch (invalidJson) {
         alert('Cannot parse Board json');
       }
     }
-    this.state = {
-      board: board,
+  }
+
+  public fromSavedState(stateObject: JsonStateInterface): BoardStateInterface {
+    let state: BoardStateInterface = {
+      board: Board.newGame(),
+      handNumber: stateObject.handNumber,
+      playerScore: stateObject.playerScore,
+      houseScore: stateObject.houseScore,
+      btnDealerClass: '',
+      btnPlayerClass: 'invisible'
+    };
+
+    return state;
+  }
+
+  public resetState(): BoardStateInterface {
+    return {
+      board: Board.newGame(),
       handNumber: 0,
       playerScore: 0,
       houseScore: 0,
@@ -66,8 +89,7 @@ export default class BoardComponent extends React.Component<BoardPropsInterface,
   }
 
   public handleSaveBoard() {
-    let jsonBoard: string = JSON.stringify(this.state.board);
-    return this.props.onSaveBoardClick(jsonBoard);
+    return this.props.onSaveBoardClick(this.state);
   }
 
   public render() {
diff --git a/src/components/SimpleBlackJack.tsx b/src/components/SimpleBlackJack.tsx
index 4ccb840..c45fc16 100644
--- a/src/components/SimpleBlackJack.tsx
+++ b/src/components/SimpleBlackJack.tsx
@@ -1,22 +1,41 @@
 import * as React from 'react';
-import BoardComponent from './BoardComponent';
+import { BoardComponent, BoardStateInterface, JsonStateInterface } from './BoardComponent';
 
 class SimpleBlackJack extends React.Component {
-  private readonly KEY: string = 'board';
+  private readonly KEY: string = 'blackjack';
 
   setItem(key: string, data: string) {
     localStorage.setItem(key, data);
   }
-  getItem(key: string): string {
-    const jsonBoard: string | null = localStorage.getItem(key);
-    if (jsonBoard !== null) {
-      return jsonBoard;
+  
+  getItem(key: string): JsonStateInterface {
+    const jsonState: string | null = localStorage.getItem(key);
+    if (jsonState !== null) {
+      return JSON.parse(jsonState);
     }
-    return '';
+    return {
+      handNumber: 0,
+      playerScore: 0,
+      houseScore: 0,
+    };
   }
-  handleSaveBoard(board: string): boolean {
+
+  saveGame(state: BoardStateInterface) {
+    let jsonSate: JsonStateInterface = {
+      handNumber: state.handNumber,
+      playerScore: state.playerScore,
+      houseScore: state.houseScore,
+    };
+    this.setItem(this.KEY, JSON.stringify(jsonSate));
+  }
+
+  loadGame(): JsonStateInterface {
+    return this.getItem(this.KEY);
+  }
+
+  handleSaveBoard(state: BoardStateInterface): boolean {
     try {
-      this.setItem(this.KEY, board);
+      this.saveGame(state);
     } catch (errorOnSave) {
       return false;
     }
@@ -31,8 +50,8 @@ class SimpleBlackJack extends React.Component {
           </h1>
         </header>
         <BoardComponent 
-                        board={this.getItem('board')}  
-                        onSaveBoardClick={(board: string) => this.handleSaveBoard(board)}
+                        jsonState={this.loadGame()}  
+                        onSaveBoardClick={(state: BoardStateInterface) => this.handleSaveBoard(state)}
         />
         <footer id="footer">
           <div id="gameinfo">
diff --git a/src/tests/CardDeck.test.ts b/src/tests/CardDeck.test.ts
index 49e51d5..b259c3e 100644
--- a/src/tests/CardDeck.test.ts
+++ b/src/tests/CardDeck.test.ts
@@ -7,15 +7,8 @@ test('A new deck is filled with Cards', () => {
     return expect(deck.getLength()).toBe(13 * 4);
 });
 
-test('A new deck has ordered cards', () => {
-    let deck: CardDeck = CardDeck.createStandard52CardDeck();
-    
-    return expect(areCardsInOrder(deck)).toBeTruthy();
-});
-
 test('A shuffled deck has no ordered cards', () => {
     let deck: CardDeck = CardDeck.createStandard52CardDeck();
-    deck.shuffle();
     
     return expect(areCardsInOrder(deck)).toBeFalsy();
 });

From 00f7b31140a689aa7816db9530702f8c5286fe80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Molero?= <victor.molero@gmail.com>
Date: Fri, 9 Mar 2018 09:42:52 +0100
Subject: [PATCH 4/6] add reset globals functionality

---
 src/components/BoardComponent.tsx  | 23 +++++++++++++++++------
 src/components/SimpleBlackJack.tsx | 15 +++++++++++++--
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/BoardComponent.tsx b/src/components/BoardComponent.tsx
index 6bba5f8..39428a2 100644
--- a/src/components/BoardComponent.tsx
+++ b/src/components/BoardComponent.tsx
@@ -13,7 +13,8 @@ export interface BoardStateInterface {
 
 interface BoardPropsInterface {
   jsonState: JsonStateInterface;
-  onSaveBoardClick: Function;
+  onSaveGameClick: Function;
+  onResetGameClick: Function;
 }
 
 export interface JsonStateInterface {
@@ -32,7 +33,7 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
       try {
         this.state = this.fromSavedState(this.props.jsonState);
       } catch (invalidJson) {
-        alert('Cannot parse Board json');
+        alert('Cannot parse json');
       }
     }
   }
@@ -88,8 +89,13 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
     this.setNewState(newState);
   }
 
-  public handleSaveBoard() {
-    return this.props.onSaveBoardClick(this.state);
+  public handleSaveGame() {
+    return this.props.onSaveGameClick(this.state);
+  }
+
+  public handleResetGame() {
+    this.setState(this.resetState());
+    return this.props.onResetGameClick();
   }
 
   public render() {
@@ -101,9 +107,14 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
                     type="button" 
                     id="btnSave" 
                     value="Save globals" 
-                    onClick={() => this.handleSaveBoard()} 
+                    onClick={() => this.handleSaveGame()} 
+            />
+            <input 
+                    type="button" 
+                    id="btnReset" 
+                    value="Reset Counters"
+                    onClick={() => this.handleResetGame()}
             />
-            <input type="button" id="btnReset" value="Reset Counters" />
           </div>
           <div id="globalinfopanel">
             <p>
diff --git a/src/components/SimpleBlackJack.tsx b/src/components/SimpleBlackJack.tsx
index c45fc16..1fb8cac 100644
--- a/src/components/SimpleBlackJack.tsx
+++ b/src/components/SimpleBlackJack.tsx
@@ -33,7 +33,7 @@ class SimpleBlackJack extends React.Component {
     return this.getItem(this.KEY);
   }
 
-  handleSaveBoard(state: BoardStateInterface): boolean {
+  handleSaveGame(state: BoardStateInterface): boolean {
     try {
       this.saveGame(state);
     } catch (errorOnSave) {
@@ -41,6 +41,16 @@ class SimpleBlackJack extends React.Component {
     }
     return true;
   }
+  
+  handleResetGame(): boolean {
+    try {
+      localStorage.clear();
+    } catch (errorOnSave) {
+      return false;
+    }
+    return true;
+  }
+
   render() {
     return (
       <div className="container">
@@ -51,7 +61,8 @@ class SimpleBlackJack extends React.Component {
         </header>
         <BoardComponent 
                         jsonState={this.loadGame()}  
-                        onSaveBoardClick={(state: BoardStateInterface) => this.handleSaveBoard(state)}
+                        onSaveGameClick={(state: BoardStateInterface) => this.handleSaveGame(state)}
+                        onResetGameClick={() => this.handleResetGame()}
         />
         <footer id="footer">
           <div id="gameinfo">

From 7f019e8fceae1824349063d58548da1e91bde001 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Molero?= <victor.molero@gmail.com>
Date: Fri, 9 Mar 2018 14:43:25 +0100
Subject: [PATCH 5/6] add 1 sec delay for house card dealt

---
 src/components/BoardComponent.tsx  | 46 ++++++++++++++++++++++--------
 src/components/DealComponent.tsx   |  7 +++--
 src/components/SimpleBlackJack.tsx |  9 +-----
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/components/BoardComponent.tsx b/src/components/BoardComponent.tsx
index 39428a2..917d993 100644
--- a/src/components/BoardComponent.tsx
+++ b/src/components/BoardComponent.tsx
@@ -8,7 +8,8 @@ export interface BoardStateInterface {
   playerScore: number;
   houseScore: number;
   btnDealerClass: string;
-  btnPlayerClass: string;
+  btnHitClass: string;
+  btnStandClass: string;
 }
 
 interface BoardPropsInterface {
@@ -45,7 +46,8 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
       playerScore: stateObject.playerScore,
       houseScore: stateObject.houseScore,
       btnDealerClass: '',
-      btnPlayerClass: 'invisible'
+      btnHitClass: 'invisible',
+      btnStandClass: 'invisible'
     };
 
     return state;
@@ -58,7 +60,8 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
       playerScore: 0,
       houseScore: 0,
       btnDealerClass: '',
-      btnPlayerClass: 'invisible'
+      btnHitClass: 'invisible',
+      btnStandClass: 'invisible'
     };
   }
 
@@ -68,7 +71,8 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
         board: this.state.board.newDeal(),
         handNumber: this.state.handNumber + 1,
         btnDealerClass: 'invisible',
-        btnPlayerClass: ''
+        btnHitClass: '',
+        btnStandClass: ''
       }
     );
   }
@@ -79,14 +83,21 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
     this.setNewState(newState);
   }
 
-  public handleStandClick() {
+  public sleep(ms: number) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  public async handleStandClick() {
     let newState: BoardStateInterface = this.state;
     let board: Board = this.state.board;
+    newState.btnHitClass = 'invisible';
+    this.setNewState(newState);
     while (!board.isGameOver()) {
       board = board.dealHouse();
+      newState.board = board;
+      this.setNewState(newState);
+      await this.sleep(1000);
     }
-    newState.board = board;
-    this.setNewState(newState);
   }
 
   public handleSaveGame() {
@@ -94,8 +105,10 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
   }
 
   public handleResetGame() {
-    this.setState(this.resetState());
-    return this.props.onResetGameClick();
+    if (confirm('Are you sure?')) {
+      this.setState(this.resetState());
+      return this.props.onResetGameClick();
+    }
   }
 
   public render() {
@@ -130,11 +143,19 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
         <DealComponent 
                        board={this.state.board}
                        btnDealerClass={this.state.btnDealerClass}
-                       btnPlayerClass={this.state.btnPlayerClass}
+                       btnHitClass={this.state.btnHitClass}
+                       btnStandClass={this.state.btnStandClass}
                        onDealClick={() => this.handleDealClick()} 
                        onHitClick={() => this.handleHitClick()} 
                        onStandClick={() => this.handleStandClick()} 
-        />        
+        />
+        <footer id="footer">
+          <div id="gameinfo">
+            <p id="txtMessage">
+              Welcome to vmolero's BlackJack Game. Press 'Deal!' to start playing.
+            </p>
+          </div>
+        </footer>        
       </div>
       );
     }
@@ -147,7 +168,8 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
           newState.playerScore += 1;
         }
         newState.btnDealerClass = '';
-        newState.btnPlayerClass = 'invisible';
+        newState.btnHitClass = 'invisible';
+        newState.btnStandClass = 'invisible';
       }
       this.setState(newState);
     }
diff --git a/src/components/DealComponent.tsx b/src/components/DealComponent.tsx
index 41d4064..e694806 100644
--- a/src/components/DealComponent.tsx
+++ b/src/components/DealComponent.tsx
@@ -5,7 +5,8 @@ import Board from '../Board';
 interface DealPropsInterface {
   board: Board;
   btnDealerClass: string;
-  btnPlayerClass: string;
+  btnHitClass: string;
+  btnStandClass: string;
   onDealClick: Function;
   onHitClick: Function;
   onStandClick: Function;
@@ -26,14 +27,14 @@ export default class DealComponent extends React.Component<DealPropsInterface> {
                     onClick={() => this.props.onDealClick()} 
               />
               <input 
-                    className={this.props.btnPlayerClass} 
+                    className={this.props.btnHitClass} 
                     type="button" 
                     id="btnHit" 
                     value="Hit" 
                     onClick={() => this.props.onHitClick()} 
               />
               <input 
-                    className={this.props.btnPlayerClass}
+                    className={this.props.btnStandClass}
                     type="button" 
                     id="btnStand" 
                     value="Stand" 
diff --git a/src/components/SimpleBlackJack.tsx b/src/components/SimpleBlackJack.tsx
index 1fb8cac..e7f519d 100644
--- a/src/components/SimpleBlackJack.tsx
+++ b/src/components/SimpleBlackJack.tsx
@@ -63,14 +63,7 @@ class SimpleBlackJack extends React.Component {
                         jsonState={this.loadGame()}  
                         onSaveGameClick={(state: BoardStateInterface) => this.handleSaveGame(state)}
                         onResetGameClick={() => this.handleResetGame()}
-        />
-        <footer id="footer">
-          <div id="gameinfo">
-            <p id="txtMessage">
-              Welcome to vmolero's BlackJack Game. Press 'Deal!' to start playing.
-            </p>
-          </div>
-        </footer>
+        />      
       </div>
     );
   }

From c006b640e3fcf943fb8a1452af61ae8732f334ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Molero?= <victor.molero@gmail.com>
Date: Fri, 9 Mar 2018 22:45:04 +0100
Subject: [PATCH 6/6] add messages footer messages

---
 src/components/BoardComponent.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/BoardComponent.tsx b/src/components/BoardComponent.tsx
index 917d993..0e1594c 100644
--- a/src/components/BoardComponent.tsx
+++ b/src/components/BoardComponent.tsx
@@ -10,6 +10,7 @@ export interface BoardStateInterface {
   btnDealerClass: string;
   btnHitClass: string;
   btnStandClass: string;
+  message: string;
 }
 
 interface BoardPropsInterface {
@@ -47,7 +48,8 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
       houseScore: stateObject.houseScore,
       btnDealerClass: '',
       btnHitClass: 'invisible',
-      btnStandClass: 'invisible'
+      btnStandClass: 'invisible',
+      message: 'Welcome to vmolero\'s BlackJack Game. Press \'Deal!\' to start playing.'
     };
 
     return state;
@@ -61,7 +63,8 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
       houseScore: 0,
       btnDealerClass: '',
       btnHitClass: 'invisible',
-      btnStandClass: 'invisible'
+      btnStandClass: 'invisible',
+      message: 'Welcome to vmolero\'s BlackJack Game. Press \'Deal!\' to start playing.'
     };
   }
 
@@ -72,7 +75,8 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
         handNumber: this.state.handNumber + 1,
         btnDealerClass: 'invisible',
         btnHitClass: '',
-        btnStandClass: ''
+        btnStandClass: '',
+        message: 'Game ON!'
       }
     );
   }
@@ -152,7 +156,7 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
         <footer id="footer">
           <div id="gameinfo">
             <p id="txtMessage">
-              Welcome to vmolero's BlackJack Game. Press 'Deal!' to start playing.
+              {this.state.message}
             </p>
           </div>
         </footer>        
@@ -164,8 +168,10 @@ export class BoardComponent extends React.Component<BoardPropsInterface, BoardSt
       if (newState.board.isGameOver()) {
         if (newState.board.isHouseWinning()) {
           newState.houseScore += 1;
+          newState.message = 'Aww, you lose, press \'Deal!\' to play another hand.';
         } else {
           newState.playerScore += 1;
+          newState.message = 'YOU WIN !! Press \'Deal!\' to play another hand.';
         }
         newState.btnDealerClass = '';
         newState.btnHitClass = 'invisible';