Added permissions functionality

src/components/map/Map.js

@@ -29,6 +29,9 @@ function Map({
   onMapDraw,
   onMapDrawUndo,
   onMapDrawRedo,
+  allowDrawing,
+  allowTokenChange,
+  allowMapChange,
 }) {
   const mapSource = useDataSource(map, defaultMapSources);
 
@@ -305,6 +308,7 @@ function Map({
             {map && mapTokens}
           </Box>
         </Box>
+        {(allowMapChange || allowDrawing) && (
           <MapControls
             onMapChange={onMapChange}
             onMapStateChange={onMapStateChange}
@@ -328,8 +332,13 @@ function Map({
             onBrushBlendingChange={setUseBrushBlending}
             useBrushGesture={useBrushGesture}
             onBrushGestureChange={setUseBrushGesture}
+            allowDrawing={allowDrawing}
+            allowMapChange={allowMapChange}
           />
+        )}
       </Box>
+      {allowTokenChange && (
+        <>
           <ProxyToken
             tokenClassName={mapTokenProxyClassName}
             onProxyDragEnd={handleProxyDragEnd}
@@ -341,6 +350,8 @@ function Map({
             tokens={mapState && mapState.tokens}
           />
         </>
+      )}
+    </>
   );
 }
 

src/components/map/MapControls.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { Flex, Box, IconButton, Label } from "theme-ui";
+import { Flex, Box, IconButton, Label, Divider } from "theme-ui";
 
 import SelectMapButton from "./SelectMapButton";
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
@@ -40,6 +40,8 @@ function MapControls({
   onBrushBlendingChange,
   useBrushGesture,
   onBrushGestureChange,
+  allowDrawing,
+  allowMapChange,
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -198,49 +200,24 @@ function MapControls({
 
   const expanedMenuRef = useRef();
 
-  return (
-    <>
-      <Flex
-        sx={{
-          position: "absolute",
-          top: 0,
-          right: 0,
-          flexDirection: "column",
-          alignItems: "center",
-        }}
-        mx={1}
-      >
-        <IconButton
-          aria-label={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
-          title={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
-          onClick={() => setIsExpanded(!isExpanded)}
-          sx={{
-            transform: `rotate(${isExpanded ? "0" : "180deg"})`,
-            display: "block",
-            backgroundColor: "overlay",
-            borderRadius: "50%",
-          }}
-          m={2}
-        >
-          <ExpandMoreIcon />
-        </IconButton>
-        <Box
-          sx={{
-            flexDirection: "column",
-            alignItems: "center",
-            display: isExpanded ? "flex" : "none",
-            backgroundColor: "overlay",
-            borderRadius: "4px",
-          }}
-          p={2}
-          ref={expanedMenuRef}
-        >
+  const sections = [];
+  if (allowMapChange) {
+    sections.push({
+      id: "map",
+      component: (
         <SelectMapButton
           onMapChange={onMapChange}
           onMapStateChange={onMapStateChange}
           currentMap={currentMap}
         />
-          {divider}
+      ),
+    });
+  }
+  if (allowDrawing) {
+    sections.push({
+      id: "drawing",
+      component: (
+        <>
           <IconButton
             aria-label="Pan Tool"
             title="Pan Tool"
@@ -285,7 +262,78 @@ function MapControls({
           >
             <RedoIcon />
           </IconButton>
+        </>
+      ),
+    });
+  }
+
+  let controls = null;
+  if (sections.length === 1 && sections[0].id === "map") {
+    controls = (
+      <Box
+        sx={{
+          display: "block",
+          backgroundColor: "overlay",
+          borderRadius: "4px",
+        }}
+        m={2}
+      >
+        {sections[0].component}
       </Box>
+    );
+  } else if (sections.length > 0) {
+    controls = (
+      <>
+        <IconButton
+          aria-label={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
+          title={isExpanded ? "Hide Map Controls" : "Show Map Controls"}
+          onClick={() => setIsExpanded(!isExpanded)}
+          sx={{
+            transform: `rotate(${isExpanded ? "0" : "180deg"})`,
+            display: "block",
+            backgroundColor: "overlay",
+            borderRadius: "50%",
+          }}
+          m={2}
+        >
+          <ExpandMoreIcon />
+        </IconButton>
+
+        <Box
+          sx={{
+            flexDirection: "column",
+            alignItems: "center",
+            display: isExpanded ? "flex" : "none",
+            backgroundColor: "overlay",
+            borderRadius: "4px",
+          }}
+          p={2}
+          ref={expanedMenuRef}
+        >
+          {sections.map((section, index) => (
+            <>
+              {section.component}
+              {index !== sections.length - 1 && <Divider />}
+            </>
+          ))}
+        </Box>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Flex
+        sx={{
+          position: "absolute",
+          top: 0,
+          right: 0,
+          flexDirection: "column",
+          alignItems: "center",
+        }}
+        mx={1}
+      >
+        {controls}
       </Flex>
       <MapMenu
         isOpen={!!currentSubmenu}

src/components/map/MapSettings.js

@@ -79,6 +79,14 @@ function MapSettings({
             />
             Tokens
           </Label>
+          <Label>
+            <Checkbox
+              checked={mapState !== null && mapState.editFlags.includes("map")}
+              disabled={mapState === null}
+              onChange={(e) => handleFlagChange(e, "map")}
+            />
+            Map
+          </Label>
         </Flex>
       </Box>
     </Flex>

src/modals/SelectMapModal.js

@@ -20,7 +20,7 @@ const defaultMapState = {
   drawActionIndex: -1,
   drawActions: [],
   // Flags to determine what other people can edit
-  editFlags: ["drawings", "tokens"],
+  editFlags: ["map", "drawings", "tokens"],
 };
 
 const defaultMapProps = {

src/routes/Game.js

@@ -43,6 +43,22 @@ function Game() {
   const [map, setMap] = useState(null);
   const [mapState, setMapState] = useState(null);
 
+  const canChangeMap =
+    map === null ||
+    (map !== null &&
+      mapState !== null &&
+      (mapState.editFlags.includes("map") || map.owner === userId));
+
+  const canEditMapDrawings =
+    map !== null &&
+    mapState !== null &&
+    (mapState.editFlags.includes("drawings") || map.owner === userId);
+
+  const canEditTokens =
+    map !== null &&
+    mapState !== null &&
+    (mapState.editFlags.includes("tokens") || map.owner === userId);
+
   // Sync the map state to the database after 500ms of inactivity
   const debouncedMapState = useDebounce(mapState, 500);
   useEffect(() => {
@@ -361,11 +377,16 @@ function Game() {
             onMapDraw={handleMapDraw}
             onMapDrawUndo={handleMapDrawUndo}
             onMapDrawRedo={handleMapDrawRedo}
+            allowDrawing={canEditMapDrawings}
+            allowTokenChange={canEditTokens}
+            allowMapChange={canChangeMap}
           />
+          {canEditTokens && (
             <Tokens
               tokens={tokens}
               onCreateMapTokenState={handleMapTokenStateChange}
             />
+          )}
         </Flex>
       </Flex>
       <Banner isOpen={!!peerError} onRequestClose={() => setPeerError(null)}>