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

Fix board resize to trigger on load

Browse Source 
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos 2022-03-13 03:27:56 -07:00
parent a281c539cc
commit 593267ec49
1 changed files with 45 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
client/src/Board.js
View File

@ -126,47 +126,8 @@ const Board = () => {
break; break;
} }
}; };
const refWsMessage = useRef(onWsMessage); const refWsMessage = useRef(onWsMessage);
useEffect(() => { refWsMessage.current = onWsMessage; }); useEffect(() => { refWsMessage.current = onWsMessage; });
useEffect(() => {
if (!board.current) {
return;
}
const onResize = debounce(() => {
if (!board.current) {
return;
}
/* Adjust the 'transform: scale' for the BoardBox
* so the board fills the Board
*
* The board is H tall, and H * hexRatio wide */
const width = board.current.offsetWidth,
height = board.current.offsetHeight;
let _transform;
if (height * hexRatio > width) {
_transform = width / (450. * hexRatio);
} else {
_transform = height / (450.);
}
const boardBox = board.current.querySelector('.BoardBox');
if (boardBox) {
console.log(`Setting transofrm scale to ${_transform}`);
boardBox.style.transform = `scale(${_transform})`;
}
}, 250);
window.addEventListener('resize', onResize);
onResize();
return () => {
window.removeEventListener('resize', onResize);
}
}, [board]);
useEffect(() => { useEffect(() => {
if (!ws) { if (!ws) {
return; return;
@ -179,17 +140,58 @@ const Board = () => {
ws.removeEventListener('message', cbMessage); ws.removeEventListener('message', cbMessage);
} }
}, [ws, refWsMessage]); }, [ws, refWsMessage]);
useEffect(() => { useEffect(() => {
if (!ws) { if (!ws) { return; }
return;
}
ws.send(JSON.stringify({ ws.send(JSON.stringify({
type: 'get', type: 'get',
fields fields
})); }));
}, [ws, fields]); }, [ws, fields]);
const onResize = debounce(() => {
if (!board.current) {
return;
}
console.log(`board - resize`);
/* Adjust the 'transform: scale' for the BoardBox
* so the board fills the Board
*
* The board is H tall, and H * hexRatio wide */
const width = board.current.innerWidth,
height = board.current.offsetHeight;
let _transform;
if (height * hexRatio > width) {
_transform = width / (450. * hexRatio);
} else {
_transform = height / (450.);
}
const boardBox = board.current.querySelector('.BoardBox');
if (boardBox) {
console.log(`Setting transofrm scale to ${_transform}`);
if (boardBox.style.transform !== `scale(${_transform})`) {
boardBox.style.transform = `scale(${_transform})`;
}
}
}, 250);
const refOnResize = useRef(onResize);
useEffect(() => { refOnResize.current = onResize; });
useEffect(() => {
const cbOnResize = e => refOnResize.current(e);
window.addEventListener('resize', cbOnResize);
onResize();
return () => {
window.removeEventListener('resize', cbOnResize);
}
}, [refOnResize]);
onResize();
const Tile = ({tile}) => { const Tile = ({tile}) => {
const onClick = (event) => { const onClick = (event) => {
console.log(`Tile clicked: ${tile.index}`); console.log(`Tile clicked: ${tile.index}`);