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

Fix resize

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-03-13 14:08:18 -07:00
parent 7270d29a81
commit 94eb98ee37
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/Board.js
View File

@ -25,6 +25,7 @@ const
const Board = () => { const Board = () => {
const { ws } = useContext(GlobalContext); const { ws } = useContext(GlobalContext);
const board = useRef(); const board = useRef();
const [transform, setTransform] = useState(1.);
const [pipElements, setPipElements] = useState(<></>); const [pipElements, setPipElements] = useState(<></>);
const [borderElements, setBorderElements] = useState(<></>); const [borderElements, setBorderElements] = useState(<></>);
const [tileElements, setTileElements] = useState(<></>); const [tileElements, setTileElements] = useState(<></>);
@ -148,12 +149,19 @@ const Board = () => {
})); }));
}, [ws, fields]); }, [ws, fields]);
useEffect(() => {
const boardBox = board.current.querySelector('.BoardBox');
if (boardBox) {
console.log(`board - setting transform scale to ${transform}`);
boardBox.style.transform = `scale(${transform})`;
}
}, [transform]);
const onResize = debounce(() => { const onResize = debounce(() => {
if (!board.current) { if (!board.current) {
return; return;
} }
console.log(`board - resize`);
/* Adjust the 'transform: scale' for the BoardBox /* Adjust the 'transform: scale' for the BoardBox
* so the board fills the Board * so the board fills the Board
* *
@ -167,12 +175,8 @@ const Board = () => {
_transform = height / (450.); _transform = height / (450.);
} }
const boardBox = board.current.querySelector('.BoardBox'); if (transform !== transform) {
if (boardBox) { setTransform(_transform);
console.log(`board - setting transform scale to ${_transform}`);
if (boardBox.style.transform !== `scale(${_transform})`) {
boardBox.style.transform = `scale(${_transform})`;
}
} }
}, 250); }, 250);