From a4e1a898adc3c9ee25381fc88bf96b3b181ff35f Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 24 Apr 2020 16:18:48 +1000
Subject: [PATCH] Send a map clear before replace to ensure new state isn't
 show on old image

---
 src/components/map/Map.js    | 34 +++++++++++++++++++---------------
 src/modals/SelectMapModal.js |  5 ++---
 src/routes/Game.js           |  6 +++++-
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/components/map/Map.js b/src/components/map/Map.js
index 12abc21..922a86c 100644
--- a/src/components/map/Map.js
+++ b/src/components/map/Map.js
@@ -251,6 +251,22 @@ function Map({
     </Box>
   );
 
+  const mapDrawing = (
+    <MapDrawing
+      width={map ? map.width : 0}
+      height={map ? map.height : 0}
+      selectedTool={selectedTool}
+      shapes={drawnShapes}
+      onShapeAdd={handleShapeAdd}
+      onShapeRemove={handleShapeRemove}
+      brushColor={brushColor}
+      useGridSnapping={useBrushGridSnapping}
+      gridSize={gridSizeNormalized}
+      useBrushBlending={useBrushBlending}
+      useBrushGesture={useBrushGesture}
+    />
+  );
+
   return (
     <>
       <Box
@@ -282,21 +298,9 @@ function Map({
                 paddingBottom: `${(1 / aspectRatio) * 100}%`,
               }}
             />
-            {mapImage}
-            <MapDrawing
-              width={map ? map.width : 0}
-              height={map ? map.height : 0}
-              selectedTool={selectedTool}
-              shapes={drawnShapes}
-              onShapeAdd={handleShapeAdd}
-              onShapeRemove={handleShapeRemove}
-              brushColor={brushColor}
-              useGridSnapping={useBrushGridSnapping}
-              gridSize={gridSizeNormalized}
-              useBrushBlending={useBrushBlending}
-              useBrushGesture={useBrushGesture}
-            />
-            {mapTokens}
+            {map && mapImage}
+            {map && mapDrawing}
+            {map && mapTokens}
           </Box>
         </Box>
         <MapControls
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index 757d4f3..e1635fd 100644
--- a/src/modals/SelectMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -141,7 +141,7 @@ function SelectMapModal({
     });
     // Removed the map from the map screen if needed
     if (currentMap && currentMap.id === selectedMap.id) {
-      onMapChange(null);
+      onMapChange(null, null);
     }
   }
 
@@ -165,8 +165,7 @@ function SelectMapModal({
     if (selectedMap) {
       let currentMapState =
         (await db.table("states").get(selectedMap.id)) || defaultMapState;
-      onMapStateChange(currentMapState);
-      onMapChange(selectedMap);
+      onMapChange(selectedMap, currentMapState);
       onDone();
     }
     onDone();
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 4b512e8..bc3bb8f 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -48,9 +48,13 @@ function Game() {
     }
   }, [debouncedMapState]);
 
-  function handleMapChange(newMap) {
+  function handleMapChange(newMap, newMapState) {
+    setMapState(newMapState);
     setMap(newMap);
     for (let peer of Object.values(peers)) {
+      // Clear the map so the new map state isn't shown on an old map
+      peer.connection.send({ id: "map", data: null });
+      peer.connection.send({ id: "mapState", data: newMapState });
       peer.connection.send({ id: "map", data: newMap });
     }
   }