From 65caee7e6e5a17482207d3ff050a15ec8546fb2e Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Fri, 23 Feb 2018 16:00:44 -0500
Subject: [PATCH] Chess board is now a table

---
 assets/css/_board.scss                     | 14 ++------------
 assets/js/components/chess-board-square.js |  2 +-
 assets/js/components/chess-board.js        | 10 +++++++---
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/assets/css/_board.scss b/assets/css/_board.scss
index f317c42..bd4f1c8 100644
--- a/assets/css/_board.scss
+++ b/assets/css/_board.scss
@@ -1,8 +1,4 @@
-
 .board {
-  display: flex;
-  flex-direction: column;
-  font-size: 0;
   border: 0.3vmin solid black;
   margin: 0 auto;
   width: 80vmin;
@@ -10,16 +6,10 @@
 }
 
 .board-rank {
-  height: 12.5%;
 }
 
 .board-square {
-  position: relative;
   border: 0.2vmin solid $square-outline-color;
-  display: inline-block;
-  font-size: $base-font-size;
-  width: 12.5%;
-  height: 100%;
 
   background-size: 100%;
   background-repeat: no-repeat;
@@ -39,7 +29,7 @@
 
   &.selected {
     background-color: mix($black-square-color, $selected-square-color, 60%);
-    border: 0.2vmin solid $selected-outline-color;
+    outline: 0.2vmin solid $selected-outline-color;
   }
 }
 
@@ -48,7 +38,7 @@
 
   &.selected {
     background-color: mix($white-square-color, $selected-square-color, 60%);
-    border: 0.2vmin solid $selected-outline-color;
+    outline: 0.2vmin solid $selected-outline-color;
   }
 }
 
diff --git a/assets/js/components/chess-board-square.js b/assets/js/components/chess-board-square.js
index 0c6b3f0..7f3dea9 100644
--- a/assets/js/components/chess-board-square.js
+++ b/assets/js/components/chess-board-square.js
@@ -60,7 +60,7 @@ class ChessBoardSquare extends React.Component {
   }
 
   render() {
-    return <div
+    return <td
       id={this.squareId()}
       className={this.squareClass()}
       onClick={this.selectSquare.bind(this)}
diff --git a/assets/js/components/chess-board.js b/assets/js/components/chess-board.js
index 0c285a3..64282a4 100644
--- a/assets/js/components/chess-board.js
+++ b/assets/js/components/chess-board.js
@@ -43,15 +43,19 @@ class ChessBoard extends React.Component {
 
     return _.map(Object.keys(board).reverse(), (rankId) => {
       return (
-        <div className="board-rank" key={rankId}>
+        <tr className="board-rank" key={rankId}>
           {this.renderFiles(rankId)}
-        </div>
+        </tr>
       );
     });
   }
 
   render() {
-    return <div className="board">{this.renderRanks()}</div>;
+    return (
+      <table className="board">
+        <tbody>{this.renderRanks()}</tbody>
+      </table>
+    );
   }
 }