diff --git a/src/components/map/Map.js b/src/components/map/Map.js index 4fdd0cf..1d03a4d 100644 --- a/src/components/map/Map.js +++ b/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 diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js index e26f4b1..cdc8ce8 100644 --- a/src/components/map/MapToken.js +++ b/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"; diff --git a/src/components/token/TokenDragOverlay.js b/src/components/token/TokenDragOverlay.js index 38d5195..e1aafd1 100644 --- a/src/components/token/TokenDragOverlay.js +++ b/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) { diff --git a/src/components/token/TokenSettings.js b/src/components/token/TokenSettings.js index e11b9e8..07ec6e7 100644 --- a/src/components/token/TokenSettings.js +++ b/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({ - + + - + - + )} diff --git a/src/database.js b/src/database.js index b171650..edab6c0 100644 --- a/src/database.js +++ b/src/database.js @@ -172,6 +172,18 @@ function loadVersions(db) { } }); }); + // v1.5.1 - Added token prop category and remove isVehicle bool + db.version(10) + .stores({}) + .upgrade((tx) => { + return tx + .table("tokens") + .toCollection() + .modify((token) => { + token.category = token.isVehicle ? "vehicle" : "character"; + delete token.isVehicle; + }); + }); } // Get the dexie database used in DatabaseContext diff --git a/src/modals/SelectTokensModal.js b/src/modals/SelectTokensModal.js index 0feea1b..0c0933e 100644 --- a/src/modals/SelectTokensModal.js +++ b/src/modals/SelectTokensModal.js @@ -77,7 +77,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) { lastModified: Date.now(), owner: userId, defaultSize: 1, - isVehicle: false, + category: "character", hideInSidebar: false, }); setImageLoading(false); diff --git a/src/tokens/index.js b/src/tokens/index.js index 34704ff..f9141e4 100644 --- a/src/tokens/index.js +++ b/src/tokens/index.js @@ -85,7 +85,7 @@ export const tokens = Object.keys(tokenSources).map((key) => ({ name: Case.capital(key), type: "default", defaultSize: getDefaultTokenSize(key), - isVehicle: false, + category: "character", hideInSidebar: false, }));