Send a map clear before replace to ensure new state isn't show on old image

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}
+            {map && mapImage}
-            <MapDrawing
+            {map && mapDrawing}
-              width={map ? map.width : 0}
+            {map && mapTokens}
-              height={map ? map.height : 0}
-              selectedTool={selectedTool}
-              shapes={drawnShapes}
-              onShapeAdd={handleShapeAdd}
-              onShapeRemove={handleShapeRemove}
-              brushColor={brushColor}
-              useGridSnapping={useBrushGridSnapping}
-              gridSize={gridSizeNormalized}
-              useBrushBlending={useBrushBlending}
-              useBrushGesture={useBrushGesture}
-            />
-            {mapTokens}
           </Box>
         </Box>
         <MapControls

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, currentMapState);
-      onMapChange(selectedMap);
       onDone();
     }
     onDone();

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 });
     }
   }