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

45
client/src/Board.js
View File

@ -10,21 +10,22 @@ 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 const scale = 1;
hexRatio = 1.1547, const
tileWidth = scale * 67, hexRatio = 1.1547,
tileHalfWidth = tileWidth * 0.5, tileWidth = scale * 67,
tileHeight = tileWidth * hexRatio, tileHalfWidth = tileWidth * 0.5,
borderOffset = scale * 86; /* ~1/10th border image width... hand tuned */ tileHeight = tileWidth * hexRatio,
borderOffset = scale * 86; /* ~1/10th border image width... hand tuned */
/* Actual sizing */ /* Actual sizing */
const const
tileImageWidth = scale * 90, /* Based on hand tuned and image width */ tileImageWidth = scale * 90, /* Based on hand tuned and image width */
tileImageHeight = tileImageWidth/hexRatio, tileImageHeight = tileImageWidth/hexRatio,
borderImageWidth = (2 + 2/3) * tileImageWidth, /* 2.667 * .Tile.width */ borderImageWidth = (2 + 2/3) * tileImageWidth, /* 2.667 * .Tile.width */
borderImageHeight = borderImageWidth * 0.29; /* 0.29 * .Border.height */ borderImageHeight = borderImageWidth * 0.29; /* 0.29 * .Border.height */
const generatePips = () => { const generatePips = () => {
@ -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">