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