Added token category option

src/components/map/Map.js

@@ -187,14 +187,29 @@ function Map({
     setIsTokenMenuOpen(true);
   }
 
+  function getMapTokenCategoryWeight(category) {
+    switch (category) {
+      case "character":
+        return 0;
+      case "vehicle":
+        return 1;
+      case "prop":
+        return 2;
+      default:
+        return 0;
+    }
+  }
+
   // Sort so vehicles render below other tokens
   function sortMapTokenStates(a, b, draggingTokenOptions) {
     const tokenA = tokensById[a.tokenId];
     const tokenB = tokensById[b.tokenId];
     if (tokenA && tokenB) {
-      // If one token is a vehicle and one isn't sort vehicles below
-      if (tokenB.isVehicle !== tokenA.isVehicle) {
-        return tokenB.isVehicle - tokenA.isVehicle;
+      // If categories are different sort in order "prop", "vehicle", "character"
+      if (tokenB.category !== tokenA.category) {
+        const aWeight = getMapTokenCategoryWeight(tokenA.category);
+        const bWeight = getMapTokenCategoryWeight(tokenB.category);
+        return bWeight - aWeight;
       } else if (
         draggingTokenOptions &&
         draggingTokenOptions.tokenState.id === a.id
@@ -206,6 +221,7 @@ function Map({
         draggingTokenOptions.tokenState.id === b.id
       ) {
         // If dragging token b move above
+
         return -1;
       } else {
         // Else sort so last modified is on top

src/components/map/MapToken.js

@@ -53,10 +53,10 @@ function MapToken({
     const tokenGroup = event.target;
     const tokenImage = imageRef.current;
 
-    if (token && token.isVehicle) {
+    if (token && token.category === "vehicle") {
       // Find all other tokens on the map
       const layer = tokenGroup.getLayer();
-      const tokens = layer.find(".token");
+      const tokens = layer.find(".character");
       for (let other of tokens) {
         if (other === tokenGroup) {
           continue;
@@ -101,9 +101,9 @@ function MapToken({
     const tokenGroup = event.target;
 
     const mountChanges = {};
-    if (token && token.isVehicle) {
+    if (token && token.category === "vehicle") {
       const parent = tokenGroup.getParent();
-      const mountedTokens = tokenGroup.find(".token");
+      const mountedTokens = tokenGroup.find(".character");
       for (let mountedToken of mountedTokens) {
         // Save and restore token position after moving layer
         const position = mountedToken.absolutePosition();
@@ -227,10 +227,10 @@ function MapToken({
     return null;
   }
 
-  // Token name is used by on click to find whether a token is a vehicle
+  // Token name is used by on click to find whether a token is a vehicle or prop
   let tokenName = "";
   if (token) {
-    tokenName = token.isVehicle ? "vehicle" : "token";
+    tokenName = token.category;
   }
   if (tokenState && tokenState.locked) {
     tokenName = tokenName + "-locked";

src/components/token/TokenDragOverlay.js

@@ -66,7 +66,7 @@ function TokenDragOverlay({
   useEffect(() => {
     function handleTokenDragEnd() {
       // Handle other tokens when a vehicle gets deleted
-      if (token && token.isVehicle) {
+      if (token && token.category === "vehicle") {
         const layer = tokenGroup.getLayer();
         const mountedTokens = tokenGroup.find(".token");
         for (let mountedToken of mountedTokens) {

src/components/token/TokenSettings.js

@@ -1,9 +1,23 @@
 import React from "react";
-import { Flex, Box, Input, IconButton, Label, Checkbox } from "theme-ui";
+import {
+  Flex,
+  Box,
+  Input,
+  IconButton,
+  Label,
+  Checkbox,
+  Select,
+} from "theme-ui";
 
 import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 import { isEmpty } from "../../helpers/shared";
 
+const categorySettings = [
+  { id: "character", name: "Character" },
+  { id: "prop", name: "Prop" },
+  { id: "vehicle", name: "Vehicle / Mount" },
+];
+
 function TokenSettings({
   token,
   onSettingsChange,
@@ -43,18 +57,21 @@ function TokenSettings({
           </Box>
           <Flex my={2}>
             <Box sx={{ flexGrow: 1 }}>
-              <Label>
-                <Checkbox
-                  checked={token && token.isVehicle}
-                  disabled={tokenEmpty || token.type === "default"}
-                  onChange={(e) =>
-                    onSettingsChange("isVehicle", e.target.checked)
-                  }
-                />
-                Vehicle / Mount
-              </Label>
+              <Label>Category</Label>
+              <Select
+                my={1}
+                value={!tokenEmpty && token.category}
+                disabled={tokenEmpty || token.type === "default"}
+                onChange={(e) => onSettingsChange("category", e.target.value)}
+              >
+                {categorySettings.map((category) => (
+                  <option key={category.id} value={category.id}>
+                    {category.name}
+                  </option>
+                ))}
+              </Select>
             </Box>
-            <Box sx={{ flexGrow: 1 }}>
+            <Flex sx={{ flexGrow: 1, alignItems: "center" }} ml={2}>
               <Label>
                 <Checkbox
                   checked={token && token.hideInSidebar}
@@ -65,7 +82,7 @@ function TokenSettings({
                 />
                 Hide in Sidebar
               </Label>
-            </Box>
+            </Flex>
           </Flex>
         </>
       )}