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 (