jketreno/peddlers-of-ketran
1
0
Fork 0
Code Issues 42 Activity

Transform scaling is working

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-02-03 18:08:37 -08:00
parent 6b6f1211f1
commit ade3bb0830
1 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/Board.js
View File

@ -10,8 +10,9 @@ const Board = ({ game }) => {
const [pips, setPips] = useState(<></>); const [pips, setPips] = useState(<></>);
const [borders, setBorders] = useState(<></>); const [borders, setBorders] = useState(<></>);
const [tiles, setTiles] = useState(<></>); const [tiles, setTiles] = useState(<></>);
const [scale] = useState(1); const [transform, setTransform] = useState(1);
const scale = 1;
const const
hexRatio = 1.1547, hexRatio = 1.1547,
tileWidth = scale * 67, tileWidth = scale * 67,
@ -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 ( return (
<div className="Board"> <div className="Board">
<div className="BoardBox"> <div className="BoardBox">