diff --git a/client/src/Board.js b/client/src/Board.js index 87f2576..8f45fcc 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -10,22 +10,23 @@ const Board = ({ game }) => { const [pips, setPips] = useState(<>>); const [borders, setBorders] = useState(<>>); const [tiles, setTiles] = useState(<>>); - const [scale] = useState(1); + const [transform, setTransform] = useState(1); -const - hexRatio = 1.1547, - tileWidth = scale * 67, - tileHalfWidth = tileWidth * 0.5, - tileHeight = tileWidth * hexRatio, - borderOffset = scale * 86; /* ~1/10th border image width... hand tuned */ + const scale = 1; + const + hexRatio = 1.1547, + tileWidth = scale * 67, + tileHalfWidth = tileWidth * 0.5, + tileHeight = tileWidth * hexRatio, + borderOffset = scale * 86; /* ~1/10th border image width... hand tuned */ /* Actual sizing */ -const - tileImageWidth = scale * 90, /* Based on hand tuned and image width */ - tileImageHeight = tileImageWidth/hexRatio, - borderImageWidth = (2 + 2/3) * tileImageWidth, /* 2.667 * .Tile.width */ - borderImageHeight = borderImageWidth * 0.29; /* 0.29 * .Border.height */ - + const + tileImageWidth = scale * 90, /* Based on hand tuned and image width */ + tileImageHeight = tileImageWidth/hexRatio, + borderImageWidth = (2 + 2/3) * tileImageWidth, /* 2.667 * .Tile.width */ + borderImageHeight = borderImageWidth * 0.29; /* 0.29 * .Border.height */ + const generatePips = () => { let row = 0, rowCount = 0; @@ -132,6 +133,26 @@ const } } + const board = document.querySelector('.Board'); + if (board) { + const width = board.offsetWidth, + height = board.offsetHeight; + let _transform; + if (width * hexRatio > height) { + _transform = height / (450. * hexRatio); + } else { + _transform = width / (450. * hexRatio); + } + if (_transform != transform) { + const boardBox = board.querySelector('.BoardBox'); + if (boardBox) { + console.log(`Setting transofrm scale to ${_transform}`); + boardBox.style.transform = `scale(${_transform})`; + } + setTransform(_transform); + } + } + return (