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";