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}
+
+ );
}
/**