From 07e85f46a30d7d868ea0354eefdd1669a5600d23 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 8 May 2020 14:22:02 +1000
Subject: [PATCH] Move dice to overlay and move map interaction to prevent map
 movement while interacting with dice

---
 src/components/map/MapControls.js    | 31 +---------------------------
 src/components/map/MapDice.js        | 11 ++++++++--
 src/components/map/MapInteraction.js |  4 ++--
 3 files changed, 12 insertions(+), 34 deletions(-)

diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
index 7399798..7f5bfdf 100644
--- a/src/components/map/MapControls.js
+++ b/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
diff --git a/src/components/map/MapDice.js b/src/components/map/MapDice.js
index bbcbba3..87e3b63 100644
--- a/src/components/map/MapDice.js
+++ b/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
diff --git a/src/components/map/MapInteraction.js b/src/components/map/MapInteraction.js
index af60f34..5bac21a 100644
--- a/src/components/map/MapInteraction.js
+++ b/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