diff --git a/src/app/WardrobePage/Item.js b/src/app/WardrobePage/Item.js index f12837d..63d5b42 100644 --- a/src/app/WardrobePage/Item.js +++ b/src/app/WardrobePage/Item.js @@ -78,7 +78,9 @@ function Item({ {item.isNc ? ( - NC + + NC + ) : ( // The main purpose of the NP badge is alignment: if there are // zone badges, we want them to start at the same rough position, @@ -86,32 +88,15 @@ function Item({ // generally avoids zone badges, we'd rather have the NC badge be // a little extra that might pop up and hide the NP case, rather // than try to line things up like a table. - NP + + NP + )} {occupiedZoneLabels.map((zoneLabel) => ( - {getZoneShorthand(zoneLabel)} + ))} {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)} - - - + ))} @@ -413,18 +398,51 @@ function getZoneLabels(zones) { 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 +function ZoneBadge({ variant, zoneLabel }) { + // Shorten the label when necessary, to make the badges less bulky + const shorthand = 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"); + + if (variant === "restricts") { + return ( + + + + {shorthand} + + + + ); + } + + if (shorthand !== zoneLabel) { + return ( + + {shorthand} + + ); + } + + return {shorthand}; +} + +function ItemBadgeTooltip({ label, children }) { + return ( + {label}} + placement="top" + openDelay={400} + > + {children} + + ); } /**