From 68f6860c1f8ac511d88bf3fb7047080277129d0c Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 6 Sep 2020 15:47:31 +1000
Subject: [PATCH] Update dice tray size calculation with full screen

---
 src/components/dice/DiceTrayOverlay.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/dice/DiceTrayOverlay.js b/src/components/dice/DiceTrayOverlay.js
index 5a44556..e0ee084 100644
--- a/src/components/dice/DiceTrayOverlay.js
+++ b/src/components/dice/DiceTrayOverlay.js
@@ -24,6 +24,7 @@ import DiceTray from "../../dice/diceTray/DiceTray";
 import DiceLoadingContext from "../../contexts/DiceLoadingContext";
 
 import { getDiceRoll } from "../../helpers/dice";
+import useSetting from "../../helpers/useSetting";
 
 function DiceTrayOverlay({
   isOpen,
@@ -45,6 +46,7 @@ function DiceTrayOverlay({
   const { assetLoadStart, assetLoadFinish, isLoading } = useContext(
     DiceLoadingContext
   );
+  const [fullScreen] = useSetting("map.fullScreen");
 
   function handleAssetLoadStart() {
     assetLoadStart();
@@ -236,6 +238,8 @@ function DiceTrayOverlay({
   });
 
   useEffect(() => {
+    let renderTimeout;
+    let renderCleanup;
     function handleResize() {
       const map = document.querySelector(".map");
       const mapRect = map.getBoundingClientRect();
@@ -251,6 +255,11 @@ function DiceTrayOverlay({
         height = diceTraySize === "single" ? width * 2 : width;
       }
 
+      // Debounce a timeout to force re-rendering on resize
+      renderTimeout = setTimeout(() => {
+        renderCleanup = forceRender();
+      }, 100);
+
       setTraySize({ width, height });
     }
 
@@ -260,8 +269,14 @@ function DiceTrayOverlay({
 
     return () => {
       window.removeEventListener("resize", handleResize);
+      if (renderTimeout) {
+        clearTimeout(renderTimeout);
+      }
+      if (renderCleanup) {
+        renderCleanup();
+      }
     };
-  }, [diceTraySize]);
+  }, [diceTraySize, fullScreen, isOpen]);
 
   // Update dice rolls
   useEffect(() => {