diff --git a/client/src/Board.css b/client/src/Board.css index cd6ba12..ffdbabe 100644 --- a/client/src/Board.css +++ b/client/src/Board.css @@ -1,9 +1,9 @@ .Board { display: flex; - align-self: center; + align-self: stretch; position: relative; - width: 518px; - height: 450px; + flex: 1; + align-items: stretch; } /* Offset 'BorderBox' such that 0,0 is the center diff --git a/client/src/Board.js b/client/src/Board.js index d4d8604..87f2576 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -1,10 +1,16 @@ -import React, { useState, useEffect } from "react"; +import React, { useState } from "react"; import "./Board.css"; const base = process.env.PUBLIC_URL; const assetsPath = `${base}/assets`; -const scale = 1; +const Board = ({ game }) => { + const rows = [3, 4, 5, 4, 3]; + const [signature, setSignature] = useState(""); + const [pips, setPips] = useState(<>>); + const [borders, setBorders] = useState(<>>); + const [tiles, setTiles] = useState(<>>); + const [scale] = useState(1); const hexRatio = 1.1547, @@ -20,12 +26,6 @@ const borderImageWidth = (2 + 2/3) * tileImageWidth, /* 2.667 * .Tile.width */ borderImageHeight = borderImageWidth * 0.29; /* 0.29 * .Border.height */ -const Board = ({ game }) => { - const rows = [3, 4, 5, 4, 3]; - const [signature, setSignature] = useState(""); - const [pips, setPips] = useState(<>>); - const [borders, setBorders] = useState(<>>); - const [tiles, setTiles] = useState(<>>); const generatePips = () => { let row = 0, rowCount = 0; @@ -107,6 +107,7 @@ const Board = ({ game }) => { return