diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js index 2009c76..95970da 100644 --- a/src/app/WardrobePage/Item.js +++ b/src/app/WardrobePage/Item.js @@ -8,10 +8,16 @@ import { Image, Skeleton, Tooltip, + Wrap, useColorModeValue, useTheme, } from "@chakra-ui/core"; -import { EditIcon, DeleteIcon, InfoIcon } from "@chakra-ui/icons"; +import { + EditIcon, + DeleteIcon, + InfoIcon, + NotAllowedIcon, +} from "@chakra-ui/icons"; import loadable from "@loadable/component"; import { safeImageUrl } from "../util"; @@ -39,9 +45,27 @@ const LoadableItemSupportDrawer = loadable(() => * wearing/unwearing items being noticeably slower on lower-power * devices. */ -function Item({ item, itemNameId, isWorn, isInOutfit, dispatchToOutfit }) { +function Item({ + item, + itemNameId, + isWorn, + isInOutfit, + dispatchToOutfit, + hideSimpleZones = false, +}) { const [supportDrawerIsOpen, setSupportDrawerIsOpen] = React.useState(false); + const occupiedZoneLabels = getZoneLabels( + item.appearanceOn.layers.map((l) => l.zone) + ); + const restrictedZoneLabels = getZoneLabels( + item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems) + ); + const zonesAreSimple = + occupiedZoneLabels.length <= 1 && restrictedZoneLabels.length === 0; + const shouldHideZones = hideSimpleZones && zonesAreSimple; + const shouldShowZones = !shouldHideZones; + return ( <> @@ -55,7 +79,36 @@ function Item({ item, itemNameId, isWorn, isInOutfit, dispatchToOutfit }) { {item.name} - {item.isNc && NC} + + {shouldShowZones && + occupiedZoneLabels.map((zoneLabel) => ( + {getZoneShorthand(zoneLabel)} + ))} + {shouldShowZones && + restrictedZoneLabels.map((zoneLabel) => ( + + Restricted: This isn't a {zoneLabel} item, but you can't + wear {zoneLabel} items with it + + } + placement="top" + openDelay={250} + > + + {getZoneShorthand(zoneLabel)} + + + + ))} + {item.isNc && NC} + @@ -328,6 +381,32 @@ export function ItemListSkeleton({ count }) { ); } +/** + * getZoneLabels returns the set of labels for the given zones. Sometimes an + * item occupies multiple zones of the same name, so it's especially important + * to de-duplicate them here! + */ +function getZoneLabels(zones) { + let labels = zones.map((z) => z.label); + labels = new Set(labels); + labels = [...labels].sort(); + return labels; +} + +/** + * getZoneShorthand returns a potentially shortened version of the zone label, + * to make the Item badges a bit less bulky! + */ +function getZoneShorthand(zoneLabel) { + return zoneLabel + .replace("Background Item", "BG Item") + .replace("Foreground Item", "FG Item") + .replace("Lower-body", "Lower") + .replace("Upper-body", "Upper") + .replace("Transient", "Trans") + .replace("Biology", "Bio"); +} + /** * containerHasFocus is a common CSS selector, for the case where our parent * .item-container is hovered or the adjacent hidden radio/checkbox is diff --git a/src/app/WardrobePage/ItemsPanel.js b/src/app/WardrobePage/ItemsPanel.js index 118ab18..7714ed7 100644 --- a/src/app/WardrobePage/ItemsPanel.js +++ b/src/app/WardrobePage/ItemsPanel.js @@ -123,6 +123,7 @@ function ItemZoneGroup({ zoneLabel, items, outfitState, dispatchToOutfit }) { isWorn={outfitState.wornItemIds.includes(item.id)} isInOutfit={outfitState.allItemIds.includes(item.id)} dispatchToOutfit={dispatchToOutfit} + hideSimpleZones /> diff --git a/src/app/WardrobePage/SearchPanel.js b/src/app/WardrobePage/SearchPanel.js index b1eb8df..ef20297 100644 --- a/src/app/WardrobePage/SearchPanel.js +++ b/src/app/WardrobePage/SearchPanel.js @@ -229,6 +229,7 @@ function useSearchResults(query, outfitState) { id name thumbnailUrl + isNc appearanceOn(speciesId: $speciesId, colorId: $colorId) { # This enables us to quickly show the item when the user clicks it! @@ -242,6 +243,11 @@ function useSearchResults(query, outfitState) { label @client } } + restrictedZones { + id + label @client + isCommonlyUsedByItems @client + } } } } diff --git a/src/app/WardrobePage/useOutfitState.js b/src/app/WardrobePage/useOutfitState.js index 57bde6a..f566a10 100644 --- a/src/app/WardrobePage/useOutfitState.js +++ b/src/app/WardrobePage/useOutfitState.js @@ -51,6 +51,11 @@ function useOutfitState() { label @client } } + restrictedZones { + id + label @client + isCommonlyUsedByItems @client + } } }