Move dice to overlay and move map interaction to prevent map movement while interacting with dice

src/components/map/MapControls.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment, useEffect, useRef } from "react";
+import React, { useState, Fragment, useRef } from "react";
 import { IconButton, Flex, Box } from "theme-ui";
 
 import RadioIconButton from "./controls/RadioIconButton";
@@ -178,35 +178,6 @@ function MapContols({
     }
   }
 
-  // Stop map drawing from happening when selecting controls
-  // Not using react events as they seem to trigger after dom events
-  useEffect(() => {
-    function stopPropagation(e) {
-      e.stopPropagation();
-    }
-    const controls = controlsRef.current;
-    if (controls) {
-      controls.addEventListener("mousedown", stopPropagation);
-      controls.addEventListener("touchstart", stopPropagation);
-    }
-    const settings = settingsRef.current;
-    if (settings) {
-      settings.addEventListener("mousedown", stopPropagation);
-      settings.addEventListener("touchstart", stopPropagation);
-    }
-
-    return () => {
-      if (controls) {
-        controls.removeEventListener("mousedown", stopPropagation);
-        controls.removeEventListener("touchstart", stopPropagation);
-      }
-      if (settings) {
-        settings.removeEventListener("mousedown", stopPropagation);
-        settings.removeEventListener("touchstart", stopPropagation);
-      }
-    };
-  });
-
   return (
     <>
       <Flex

src/components/map/MapDice.js

@@ -79,6 +79,10 @@ function MapDice() {
 
   function update(scene) {
     const die = dieRef.current;
+    if (die.length === 0) {
+      return;
+    }
+
     for (let i = 0; i < die.length; i++) {
       const dice = die[i];
       const diceAsleep = dieSleepRef.current[i];
@@ -134,9 +138,12 @@ function MapDice() {
         position: "absolute",
         top: 0,
         left: 0,
-        right: 0,
-        bottom: 0,
+        width: "500px",
+        height: "500px",
+        borderRadius: "4px",
       }}
+      bg="overlay"
+      m={2}
     >
       <Scene onSceneMount={handleSceneMount} />
       <div

src/components/map/MapInteraction.js

@@ -118,7 +118,6 @@ function MapInteraction({
 
   return (
     <Box
-      className="map"
       sx={{
         flexGrow: 1,
         position: "relative",
@@ -128,15 +127,16 @@ function MapInteraction({
         touchAction: "none",
       }}
       bg="background"
-      ref={mapContainerRef}
     >
       <Box
+        className="map"
         sx={{
           position: "relative",
           top: "50%",
           left: "50%",
           transform: "translate(-50%, -50%)",
         }}
+        ref={mapContainerRef}
       >
         <Box ref={mapMoveContainerRef}>
           <Box