From fd5998ea176d17572d837fadb62e6362b1d57eb5 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Mon, 25 May 2020 20:37:17 +1000
Subject: [PATCH] Added dice tray resizing to match screen size

---
 src/components/map/MapDice.js           |   1 +
 src/components/map/dice/DiceButtons.js  |   2 +-
 src/components/map/dice/DiceControls.js |   3 +-
 src/components/map/dice/DiceScene.js    |  43 ++++++++++++------------
 src/components/map/dice/DiceTray.js     |   5 +--
 src/dice/diceTray/DiceTrayMesh.js       |   2 +-
 src/dice/meshes/diceTraySingle.glb      | Bin 11852 -> 11788 bytes
 7 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/components/map/MapDice.js b/src/components/map/MapDice.js
index fc64c04..fbf4a64 100644
--- a/src/components/map/MapDice.js
+++ b/src/components/map/MapDice.js
@@ -13,6 +13,7 @@ function MapDice() {
         position: "absolute",
         top: 0,
         left: 0,
+        bottom: 0,
         flexDirection: "column",
         alignItems: "flex-start",
       }}
diff --git a/src/components/map/dice/DiceButtons.js b/src/components/map/dice/DiceButtons.js
index 49319c9..29e95fa 100644
--- a/src/components/map/dice/DiceButtons.js
+++ b/src/components/map/dice/DiceButtons.js
@@ -24,7 +24,7 @@ function DiceButtons({ diceRolls, onDiceAdd }) {
   }
 
   return (
-    <Flex>
+    <Flex sx={{ justifyContent: "center", flexWrap: "wrap", width: "100%" }}>
       <DiceButton
         title="Add D20"
         count={diceCounts.d20}
diff --git a/src/components/map/dice/DiceControls.js b/src/components/map/dice/DiceControls.js
index 4e4dc58..189422c 100644
--- a/src/components/map/dice/DiceControls.js
+++ b/src/components/map/dice/DiceControls.js
@@ -102,8 +102,7 @@ function DiceControls({
         style={{
           position: "absolute",
           top: "24px",
-          left: "50%",
-          transform: "translateX(-50%)",
+          width: "100%",
         }}
       >
         <DiceButtons
diff --git a/src/components/map/dice/DiceScene.js b/src/components/map/dice/DiceScene.js
index c93ab85..bc68a15 100644
--- a/src/components/map/dice/DiceScene.js
+++ b/src/components/map/dice/DiceScene.js
@@ -2,6 +2,7 @@ import React, { useRef, useEffect } from "react";
 import * as BABYLON from "babylonjs";
 import * as AMMO from "ammo.js";
 import "babylonjs-loaders";
+import ReactResizeDetector from "react-resize-detector";
 
 function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
   const sceneRef = useRef();
@@ -25,7 +26,7 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
 
     let camera = new BABYLON.TargetCamera(
       "camera",
-      new BABYLON.Vector3(0, 27, 0),
+      new BABYLON.Vector3(0, 34, 0),
       scene
     );
     camera.fov = 0.65;
@@ -54,20 +55,6 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
         selectedMeshDeltaPositionRef.current = delta;
       }
     });
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      engine.resize();
-      for (let entry of entries) {
-        canvasRef.current.width = entry.contentRect.width;
-        canvasRef.current.height = entry.contentRect.height;
-      }
-    });
-
-    resizeObserver.observe(containerRef.current);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
   }, [onSceneMount]);
 
   const selectedMeshRef = useRef();
@@ -110,16 +97,30 @@ function DiceScene({ onSceneMount, onPointerDown, onPointerUp }) {
     onPointerUp();
   }
 
+  function handleResize(width, height) {
+    const engine = engineRef.current;
+    engine.resize();
+    canvasRef.current.width = width;
+    canvasRef.current.height = height;
+  }
+
   return (
     <div
-      style={{ width: "100%", height: "100%", overflow: "hidden" }}
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        overflow: "hidden",
+      }}
       ref={containerRef}
     >
-      <canvas
-        onPointerDown={handlePointerDown}
-        onPointerUp={handlePointerUp}
-        ref={canvasRef}
-      />
+      <ReactResizeDetector handleWidth handleHeight onResize={handleResize}>
+        <canvas
+          onPointerDown={handlePointerDown}
+          onPointerUp={handlePointerUp}
+          ref={canvasRef}
+        />
+      </ReactResizeDetector>
     </div>
   );
 }
diff --git a/src/components/map/dice/DiceTray.js b/src/components/map/dice/DiceTray.js
index 2a6327a..c90564a 100644
--- a/src/components/map/dice/DiceTray.js
+++ b/src/components/map/dice/DiceTray.js
@@ -218,8 +218,9 @@ function DiceTray({ isOpen }) {
   return (
     <Box
       sx={{
-        width: "300px",
-        height: "600px",
+        width: "500px",
+        maxWidth: "calc(50vh - 48px)",
+        paddingBottom: "200%",
         borderRadius: "4px",
         display: isOpen ? "block" : "none",
         position: "relative",
diff --git a/src/dice/diceTray/DiceTrayMesh.js b/src/dice/diceTray/DiceTrayMesh.js
index 9f11de5..5938f5a 100644
--- a/src/dice/diceTray/DiceTrayMesh.js
+++ b/src/dice/diceTray/DiceTrayMesh.js
@@ -6,7 +6,7 @@ import albedo from "./albedo.jpg";
 import metalRoughness from "./metalRoughness.jpg";
 import normal from "./normal.jpg";
 
-export const diceTraySize = { width: 8, height: 16 };
+export const diceTraySize = { width: 10, height: 20 };
 
 export default async function createDiceTray(scene, shadowGenerator) {
   let mesh = (
diff --git a/src/dice/meshes/diceTraySingle.glb b/src/dice/meshes/diceTraySingle.glb
index 6871a750761c8b87eaeee48ef5726a4f15e7c24c..efb0621436c6e5f9451f48906c00d984eb4e740b 100644
GIT binary patch
delta 25
gcmX>T(-Xs+o)hB6#K6G7qsPGDF_Cxi#t$*N0AHsEdH?_b

delta 90
zcmeB)ITOR1o)hB6#K6GdqsPF|F_Cw%gN{;ha$-)Zl2x>Uo`nGz7#dm{8CV)w>JT9k
JyKzH|E&%(v6~O=i