Separate out game state into its own component

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">
+        <GameState store={store} />
-          {this.gameState}
-        </div>
       </div>
     );
   }

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"];
   }

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;

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];
   }