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

47
client/src/Board.js
View File

@ -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 (
<div className="Board">
<div className="BoardBox">