Add turn indicator

assets/css/_board.scss

@@ -1,16 +1,68 @@
+@mixin move-indicator {
+  display: block;
+  content: "";
+  width: 2vmin;
+  height: 2vmin;
+  position: absolute;
+  right: 2vmin;
+  border-radius: 50%;
+}
+
 .board {
   background: lighten($black-square-color, 7%);
   border-collapse: unset;
+  border-spacing: 1px;
   color: $white-square-color;
   border-radius: 2vmin;
   box-shadow: 0 0.5vmin 3vmin rgba(0, 0, 0, 0.4);
-  height: 80vmin;
+  position: relative;
-  margin: 0 auto;
+  height: 90vmin;
-  width: 80vmin;
+  width: 90vmin;
 
   th {
+    font-size: 0.6rem;
     color: darken($black-square-color, 10%);
   }
+
+  &.white-to-move:before {
+    @include move-indicator;
+    background: #fff;
+  }
+
+  &.black-to-move:before {
+    @include move-indicator;
+    background: #000;
+  }
+
+  &.player-is-white.white-to-move:before,
+  &.player-is-black.black-to-move:before {
+    bottom: 2vmin;
+  }
+
+  &.player-is-white.black-to-move:before,
+  &.player-is-black.white-to-move:before {
+    top: 2vmin;
+  }
+}
+
+@media (min-width: 480px) {
+  .board {
+    border-spacing: 2px;
+
+    th {
+      font-size: 0.8rem;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .board {
+    border-spacing: 3px;
+
+    th {
+      font-size: 1rem;
+    }
+  }
 }
 
 .board-square {
@@ -30,7 +82,7 @@
 
 .board-border-top,
 .board-border-bottom {
-  height: 4vmin;
+  height: 5%;
 
   th {
     padding: 0;
@@ -41,7 +93,7 @@
 
 .board-border-left,
 .board-border-right {
-  width: 4vmin;
+  width: 5%;
 
   padding: 0;
   vertical-align: middle;

assets/css/_layout.scss

@@ -1,4 +1,4 @@
-body {
+html {
   background: $background-color;
   color: mix($background-color, $foreground-color, 20%);
 }
@@ -21,7 +21,7 @@ h1 {
 
 .container {
   margin: 0 auto;
-  width: 80%;
+  width: 90%;
 }
 
 .form-group {

assets/js/components/chess-board-square.js

@@ -71,7 +71,7 @@ class ChessBoardSquare extends React.Component {
         this.props.piece.type,
         this.props.piece.colour,
         { "selected": this.isSelectedSquare() }
-      )
+      );
     }
   }
 

assets/js/components/chess-board.js

@@ -2,12 +2,14 @@ import React from "react";
 import _ from "lodash";
 import $ from "jquery";
 import { connect } from "react-redux";
+import classNames from "classnames";
+
+import socket from "../socket";
+
 import { setPlayer, setGame, setGameId } from "../store/actions";
 
 import ChessBoardSquare from "./chess-board-square";
 
-import socket from "../socket";
-
 class ChessBoard extends React.Component {
   componentWillMount() {
     const { gameId, store } = this.props;
@@ -28,6 +30,11 @@ class ChessBoard extends React.Component {
     });
   }
 
+  getTurn() {
+    const { store } = this.props;
+    return store.getState().turn;
+  }
+
   getBoard() {
     const { store } = this.props;
     return store.getState().board;
@@ -61,9 +68,9 @@ class ChessBoard extends React.Component {
     return _.map(this.ranks(), (rankId) => {
       return (
         <tr className="board-rank" key={rankId}>
-          <th class="board-border-left">{rankId}</th>
+          <th className="board-border-left">{rankId}</th>
           {this.renderFiles(rankId)}
-          <td class="board-border-left"></td>
+          <td className="board-border-left"></td>
         </tr>
       );
     });
@@ -92,12 +99,23 @@ class ChessBoard extends React.Component {
     }
   }
 
+  boardClass() {
+    const turn = this.getTurn();
+    const player = this.getPlayer();
+
+    return classNames(
+      "board",
+      turn + "-to-move",
+      "player-is-" + player
+    );
+  }
+
   render() {
     return (
-      <table class="board">
+      <table className={this.boardClass()}>
         <thead>
-          <tr class="board-border-top">
+          <tr className="board-border-top">
-            <th class="board-border-left"></th>
+            <th className="board-border-left"></th>
             <th>a</th>
             <th>b</th>
             <th>c</th>
@@ -106,15 +124,15 @@ class ChessBoard extends React.Component {
             <th>f</th>
             <th>g</th>
             <th>h</th>
-            <th class="board-border-left"></th>
+            <th className="board-border-left"></th>
           </tr>
         </thead>
         <tbody>{this.renderRanks()}</tbody>
         <tfoot>
-          <tr class="board-border-bottom">
+          <tr className="board-border-bottom">
-            <th class="board-border-left"></th>
+            <th className="board-border-left"></th>
             <th colspan="8"></th>
-            <th class="board-border-left"></th>
+            <th className="board-border-left"></th>
           </tr>
         </tfoot>
       </table>