From bb9345cb3da56b99663457d1201a6a082e269f21 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Thu, 3 Feb 2022 11:54:51 -0800
Subject: [PATCH] Board can now be moved around in its own element

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.css | 15 ++++++++++++---
 client/src/Board.js  | 10 ++++++----
 client/src/Table.css |  2 +-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/client/src/Board.css b/client/src/Board.css
index e3458df..cd7dd2c 100644
--- a/client/src/Board.css
+++ b/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 {
diff --git a/client/src/Board.js b/client/src/Board.js
index 4a738f6..f53c672 100644
--- a/client/src/Board.js
+++ b/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,9 +123,11 @@ const Board = ({ game }) => {
 
   return (
     <div className="Board">
-      { borders }
-      { tiles }
-      { pips }
+      <div className="BoardBox">
+        { borders }
+        { tiles }
+        { pips }
+      </div>
     </div>
   );
 };
diff --git a/client/src/Table.css b/client/src/Table.css
index e8ba052..74bee7d 100755
--- a/client/src/Table.css
+++ b/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");
 }