Added map fog permissions

src/components/map/Map.js

@@ -29,7 +29,8 @@ function Map({
   onFogDraw,
   onMapUndo,
   onMapRedo,
-  allowDrawing,
+  allowMapDrawing,
+  allowFogDrawing,
   allowTokenChange,
   allowMapChange,
 }) {
@@ -139,7 +140,7 @@ function Map({
   if (!allowMapChange) {
     disabledControls.push("map");
   }
-  if (!allowDrawing) {
+  if (!allowMapDrawing) {
     disabledControls.push("drawing");
   }
   if (!map) {
@@ -152,6 +153,9 @@ function Map({
   if (!mapState || mapState.mapDrawActionIndex < 0) {
     disabledControls.push("undo");
   }
+  if (!allowFogDrawing) {
+    disabledControls.push("fog");
+  }
   if (
     !mapState ||
     mapState.mapDrawActionIndex === mapState.mapDrawActions.length - 1
@@ -266,7 +270,7 @@ function Map({
         map={map}
         aspectRatio={aspectRatio}
         isEnabled={selectedToolId === "pan"}
-        controls={(allowMapChange || allowDrawing) && mapControls}
+        controls={(allowMapChange || allowMapDrawing) && mapControls}
       >
         {map && mapImage}
         {map && mapDrawing}

src/components/map/MapControls.js

@@ -202,6 +202,13 @@ function MapContols({
     }
   }
 
+  // Move back to pan tool if selected tool becomes disabled
+  useEffect(() => {
+    if (disabledControls.includes(selectedToolId)) {
+      onSelectedToolChange("pan");
+    }
+  }, [disabledControls]);
+
   // Stop map drawing from happening when selecting controls
   // Not using react events as they seem to trigger after dom events
   useEffect(() => {

src/components/map/MapSettings.js

@@ -59,6 +59,16 @@ function MapSettings({
           <Box mt={2} sx={{ flexGrow: 1 }}>
             <Label>Allow others to edit</Label>
             <Flex my={1}>
+              <Label>
+                <Checkbox
+                  checked={
+                    mapState !== null && mapState.editFlags.includes("fog")
+                  }
+                  disabled={mapState === null}
+                  onChange={(e) => handleFlagChange(e, "fog")}
+                />
+                Fog
+              </Label>
               <Label>
                 <Checkbox
                   checked={

src/routes/Game.js

@@ -44,6 +44,7 @@ function Game() {
   const [map, setMap] = useState(null);
   const [mapState, setMapState] = useState(null);
 
+  // TODO: move into map, consider removing map lockdown
   const canChangeMap =
     map === null ||
     (map !== null &&
@@ -55,6 +56,11 @@ function Game() {
     mapState !== null &&
     (mapState.editFlags.includes("drawings") || map.owner === userId);
 
+  const canEditFogDrawing =
+    map !== null &&
+    mapState !== null &&
+    (mapState.editFlags.includes("fog") || map.owner === userId);
+
   const canEditTokens =
     map !== null &&
     mapState !== null &&
@@ -416,7 +422,8 @@ function Game() {
             onMapUndo={handleMapUndo}
             onMapRedo={handleMapRedo}
             onFogDraw={handleFogDraw}
-            allowDrawing={canEditMapDrawings}
+            allowMapDrawing={canEditMapDrawings}
+            allowFogDrawing={canEditFogDrawing}
             allowTokenChange={canEditTokens}
             allowMapChange={canChangeMap}
           />