From 94eb98ee37fe22b1f72cffbd13291ba435c7d168 Mon Sep 17 00:00:00 2001
From: James Ketrenos <james_eikona@ketrenos.com>
Date: Sun, 13 Mar 2022 14:08:18 -0700
Subject: [PATCH] Fix resize

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
---
 client/src/Board.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/client/src/Board.js b/client/src/Board.js
index a8f8d0b..2ab8c11 100644
--- a/client/src/Board.js
+++ b/client/src/Board.js
@@ -25,6 +25,7 @@ const
 const Board = () => {
   const { ws } = useContext(GlobalContext);
   const board = useRef();
+  const [transform, setTransform] = useState(1.);
   const [pipElements, setPipElements] = useState(<></>);
   const [borderElements, setBorderElements] = useState(<></>);
   const [tileElements, setTileElements] = useState(<></>);
@@ -148,12 +149,19 @@ const Board = () => {
     }));
   }, [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(() => {
     if (!board.current) {
       return;
     }
 
-    console.log(`board - resize`);
    /* Adjust the 'transform: scale' for the BoardBox
     * so the board fills the Board 
     *
@@ -167,12 +175,8 @@ const Board = () => {
       _transform = height / (450.);
     }
     
-    const boardBox = board.current.querySelector('.BoardBox');
-    if (boardBox) {
-      console.log(`board - setting transform scale to ${_transform}`);
-      if (boardBox.style.transform !== `scale(${_transform})`) {
-        boardBox.style.transform = `scale(${_transform})`;
-      }
+    if (transform !== transform) {
+      setTransform(_transform);
     }
   }, 250);