Board can now be moved around in its own element

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/Board.css

@@ -1,8 +1,17 @@
 .Board {
-  display: block;
+  display: flex;
+  align-self: center;
+  position: relative;
+  width: 518px;
+  height: 450px;
+}
+
+/* Offset 'BorderBox' such that 0,0 is the center
+ * of 'Board' */
+.BoardBox {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  left: 50%;
+  top: 50%;
 }
 
 .Tile {

client/src/Board.js

@@ -5,7 +5,7 @@ const base = process.env.PUBLIC_URL;
 const assetsPath = `${base}/assets`;
 
 const Board = ({ game }) => {
-  const center = { x: 300, y: 350 }, rows = [3, 4, 5, 4, 3];
+  const center = { x: 0, y: 33.5 }, rows = [3, 4, 5, 4, 3];
   const [signature, setSignature] = useState("");
   const [pips, setPips] = useState(<></>);
   const [borders, setBorders] = useState(<></>);
@@ -123,10 +123,12 @@ const Board = ({ game }) => {
 
   return (
     <div className="Board">
+      <div className="BoardBox">
         { borders }
         { tiles }
         { pips }
       </div>
+    </div>
   );
 };
 

client/src/Table.css

@@ -4,7 +4,7 @@
   width: 100%;
   overflow: hidden;
   height: 100%;
-  justify-content: right;
+  justify-content: space-between; /* left-justify 'board', right-justify 'game' */
   background-image: url("./assets/tabletop.png");
 }