From d86d94dc707de7267f764456e36dc7598075573c Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Sat, 7 Apr 2018 18:19:46 -0400
Subject: [PATCH] Separate out game state into its own component

---
 assets/js/components/chess-board.js | 13 ++++------
 assets/js/components/file-labels.js |  5 ----
 assets/js/components/game-state.js  | 37 +++++++++++++++++++++++++++++
 assets/js/components/rank-labels.js |  5 ----
 4 files changed, 41 insertions(+), 19 deletions(-)
 create mode 100644 assets/js/components/game-state.js

diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js
index e8af715..a755029 100644
--- a/assets/js/components/chess-board.js
+++ b/assets/js/components/chess-board.js
@@ -6,6 +6,7 @@ import classNames from "classnames";
 import ChessBoardSquare from "./chess-board-square";
 import RankLabels from "./rank-labels";
 import FileLabels from "./file-labels";
+import GameState from "./game-state";
 
 class ChessBoard extends React.Component {
   componentWillMount() {
@@ -74,12 +75,6 @@ class ChessBoard extends React.Component {
     });
   }
 
-  get gameState() {
-    const { store } = this.props;
-    console.log(store.getState().state);
-    return store.getState().state;
-  }
-
   get boardClass() {
     const turn = this.getTurn();
     const player = this.getPlayer();
@@ -88,6 +83,8 @@ class ChessBoard extends React.Component {
   }
 
   render() {
+    const { store } = this.props;
+
     return (
       <div className={this.boardClass}>
         <RankLabels />
@@ -97,9 +94,7 @@ class ChessBoard extends React.Component {
           {this.renderSquares()}
         </div>
 
-        <div className="board-game-state">
-          {this.gameState}
-        </div>
+        <GameState store={store} />
       </div>
     );
   }
diff --git a/assets/js/components/file-labels.js b/assets/js/components/file-labels.js
index 81cc3da..e69ff5a 100644
--- a/assets/js/components/file-labels.js
+++ b/assets/js/components/file-labels.js
@@ -1,12 +1,7 @@
 import React from "react";
 import _ from "lodash";
-import classNames from "classnames";
 
 class FileLabels extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
   get fileLabels() {
     return ["a", "b", "c", "d", "e", "f", "g", "h"];
   }
diff --git a/assets/js/components/game-state.js b/assets/js/components/game-state.js
new file mode 100644
index 0000000..9fd09eb
--- /dev/null
+++ b/assets/js/components/game-state.js
@@ -0,0 +1,37 @@
+import React from "react";
+import classNames from "classnames";
+
+class GameState extends React.Component {
+  get gameStates() {
+    return {
+      "checkmate": "Checkmate!",
+      "stalemate": "Stalemate",
+      "check": "Check",
+    };
+  }
+
+  get gameState() {
+    const { store } = this.props;
+    return store.getState().state;
+  }
+
+  get friendlyGameState() {
+    return this.gameStates[this.gameState];
+  }
+
+  get gameStateClass() {
+    const state = this.gameState;
+
+    return classNames("board-game-state", state);
+  }
+
+  render() {
+    return (
+      <div className={this.gameStateClass}>
+        {this.friendlyGameState}
+      </div>
+    );
+  }
+}
+
+export default GameState;
diff --git a/assets/js/components/rank-labels.js b/assets/js/components/rank-labels.js
index 00781f7..16633ed 100644
--- a/assets/js/components/rank-labels.js
+++ b/assets/js/components/rank-labels.js
@@ -1,12 +1,7 @@
 import React from "react";
 import _ from "lodash";
-import classNames from "classnames";
 
 class RankLabels extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
   get rankLabels() {
     return [1, 2, 3, 4, 5, 6, 7, 8];
   }