Add board labels

assets/css/_board.scss

@@ -43,6 +43,50 @@ $board-size: 90vmin;
   }
 }
 
+.board-rank-labels {
+  display: flex;
+  height: 90%;
+  left: 0;
+  position: absolute;
+  width: 5%;
+}
+
+.board.player-is-white {
+  .board-rank-labels {
+    flex-direction: column-reverse;
+  }
+
+  .board-file-labels {
+    flex-direction: row;
+  }
+}
+
+.board.player-is-black {
+  .board-rank-labels {
+    flex-direction: column;
+  }
+
+  .board-file-labels {
+    flex-direction: row-reverse;
+  }
+}
+
+.board-file-labels {
+  display: flex;
+  height: 5%;
+  position: absolute;
+  top: 0;
+  width: 90%;
+}
+
+.board-label {
+  align-items: center;
+  display: flex;
+  flex-grow: 1;
+  font-size: $board-size / 40;
+  justify-content: center;
+}
+
 .board-body {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
@@ -130,18 +174,10 @@ $board-size: 90vmin;
   .board-body {
     grid-gap: 1px;
   }
-
-  .board-label {
-    font-size: 0.8rem;
-  }
 }
 
 @media (min-width: 768px) {
   .board-body {
-    grid-gap: 1.5px;
+    grid-gap: 2px;
-  }
-
-  .board-label {
-    font-size: 1rem;
   }
 }

assets/js/components/chess-board.js

@@ -25,40 +25,6 @@ class ChessBoard extends React.Component {
     return store.getState().player;
   }
 
-  renderSquares() {
-    const board = this.getBoard();
-    const { store, channel } = this.props;
-
-    return _.map(this.ranks(), (rankId) => {
-      const rank = this.getBoard()[rankId];
-
-      return _.map(this.files(rank), (fileId) => {
-        return (
-          <ChessBoardSquare
-            file={fileId}
-            key={fileId}
-            rank={rankId}
-            piece={board[rankId][fileId]}
-            store={store}
-            channel={channel}
-          />
-        );
-      });
-    });
-  }
-
-  renderRanks() {
-    const board = this.getBoard();
-
-    return _.map(this.ranks(), rankId => {
-      return (
-        <div className="board-rank" key={rankId}>
-          {this.renderFiles(rankId)}
-        </div>
-      );
-    });
-  }
-
   files(rank) {
     const player = this.getPlayer();
 
@@ -84,6 +50,28 @@ class ChessBoard extends React.Component {
     }
   }
 
+  renderSquares() {
+    const board = this.getBoard();
+    const { store, channel } = this.props;
+
+    return _.map(this.ranks(), (rankId) => {
+      const rank = this.getBoard()[rankId];
+
+      return _.map(this.files(rank), (fileId) => {
+        return (
+          <ChessBoardSquare
+            file={fileId}
+            key={fileId}
+            rank={rankId}
+            piece={board[rankId][fileId]}
+            store={store}
+            channel={channel}
+          />
+        );
+      });
+    });
+  }
+
   get boardClass() {
     const turn = this.getTurn();
     const player = this.getPlayer();
@@ -91,9 +79,40 @@ class ChessBoard extends React.Component {
     return classNames("board", turn + "-to-move", "player-is-" + player);
   }
 
+  get rankLabels() {
+    return [1, 2, 3, 4, 5, 6, 7, 8];
+  }
+
+  get fileLabels() {
+    return ["a", "b", "c", "d", "e", "f", "g", "h"];
+  }
+
+  renderRankLabels() {
+    return _.map(this.rankLabels, (rankLabel) => {
+      return (
+        <div key={rankLabel} className="board-label">{rankLabel}</div>
+      );
+    });
+  }
+
+  renderFileLabels() {
+    return _.map(this.fileLabels, (fileLabel) => {
+      return (
+        <div key={fileLabel} className="board-label">{fileLabel}</div>
+      );
+    });
+  }
+
   render() {
     return (
       <div className={this.boardClass}>
+        <div className="board-rank-labels">
+          {this.renderRankLabels()}
+        </div>
+        <div className="board-file-labels">
+          {this.renderFileLabels()}
+        </div>
+
         <div className="board-body">
           {this.renderSquares()}
         </div>