Matchu
aae5c767bb
Oh right, this didn't show up in testing bc I only have a few models in the local db, but yeah I messed this up a bit!!
691 lines
22 KiB
JavaScript
691 lines
22 KiB
JavaScript
import React from "react";
|
|
import { useQuery } from "@apollo/client";
|
|
import gql from "graphql-tag";
|
|
import {
|
|
AspectRatio,
|
|
Box,
|
|
Button,
|
|
Flex,
|
|
Grid,
|
|
IconButton,
|
|
Tooltip,
|
|
useColorModeValue,
|
|
usePrefersReducedMotion,
|
|
} from "@chakra-ui/react";
|
|
import { EditIcon, WarningIcon } from "@chakra-ui/icons";
|
|
import { MdPause, MdPlayArrow } from "react-icons/md";
|
|
|
|
import HTML5Badge, { layerUsesHTML5 } from "./components/HTML5Badge";
|
|
import SpeciesColorPicker, {
|
|
useAllValidPetPoses,
|
|
getValidPoses,
|
|
getClosestPose,
|
|
} from "./components/SpeciesColorPicker";
|
|
import SpeciesFacesPicker, {
|
|
colorIsBasic,
|
|
} from "./ItemPage/SpeciesFacesPicker";
|
|
import {
|
|
itemAppearanceFragment,
|
|
petAppearanceFragment,
|
|
} from "./components/useOutfitAppearance";
|
|
import { useOutfitPreview } from "./components/OutfitPreview";
|
|
import { logAndCapture, useLocalStorage } from "./util";
|
|
import { useItemAppearances } from "./loaders/items";
|
|
|
|
function ItemPageOutfitPreview({ itemId }) {
|
|
const idealPose = React.useMemo(
|
|
() => (Math.random() > 0.5 ? "HAPPY_FEM" : "HAPPY_MASC"),
|
|
[],
|
|
);
|
|
const [petState, setPetState] = React.useState({
|
|
// We'll fill these in once the canonical appearance data arrives.
|
|
speciesId: null,
|
|
colorId: null,
|
|
pose: null,
|
|
isValid: false,
|
|
|
|
// We use appearance ID, in addition to the above, to give the Apollo cache
|
|
// a really clear hint that the canonical pet appearance we preloaded is
|
|
// the exact right one to show! But switching species/color will null this
|
|
// out again, and that's okay. (We'll do an unnecessary reload if you
|
|
// switch back to it though... we could maybe do something clever there!)
|
|
appearanceId: null,
|
|
});
|
|
const [preferredSpeciesId, setPreferredSpeciesId] = useLocalStorage(
|
|
"DTIItemPreviewPreferredSpeciesId",
|
|
null,
|
|
);
|
|
const [preferredColorId, setPreferredColorId] = useLocalStorage(
|
|
"DTIItemPreviewPreferredColorId",
|
|
null,
|
|
);
|
|
|
|
const setPetStateFromUserAction = React.useCallback(
|
|
(newPetState) =>
|
|
setPetState((prevPetState) => {
|
|
// When the user _intentionally_ chooses a species or color, save it in
|
|
// local storage for next time. (This won't update when e.g. their
|
|
// preferred species or color isn't available for this item, so we update
|
|
// to the canonical species or color automatically.)
|
|
//
|
|
// Re the "ifs", I have no reason to expect null to come in here, but,
|
|
// since this is touching client-persisted data, I want it to be even more
|
|
// reliable than usual!
|
|
if (
|
|
newPetState.speciesId &&
|
|
newPetState.speciesId !== prevPetState.speciesId
|
|
) {
|
|
setPreferredSpeciesId(newPetState.speciesId);
|
|
}
|
|
if (
|
|
newPetState.colorId &&
|
|
newPetState.colorId !== prevPetState.colorId
|
|
) {
|
|
if (colorIsBasic(newPetState.colorId)) {
|
|
// When the user chooses a basic color, don't index on it specifically,
|
|
// and instead reset to use default colors.
|
|
setPreferredColorId(null);
|
|
} else {
|
|
setPreferredColorId(newPetState.colorId);
|
|
}
|
|
}
|
|
|
|
return newPetState;
|
|
}),
|
|
[setPreferredColorId, setPreferredSpeciesId],
|
|
);
|
|
|
|
// We don't need to reload this query when preferred species/color change, so
|
|
// cache their initial values here to use as query arguments.
|
|
const [initialPreferredSpeciesId] = React.useState(preferredSpeciesId);
|
|
const [initialPreferredColorId] = React.useState(preferredColorId);
|
|
|
|
const {
|
|
data: itemAppearancesData,
|
|
loading: loadingAppearances,
|
|
error: errorAppearances,
|
|
} = useItemAppearances(itemId);
|
|
const itemName = itemAppearancesData?.name ?? "";
|
|
const itemAppearances = itemAppearancesData?.appearances ?? [];
|
|
const restrictedZones = itemAppearancesData?.restrictedZones ?? [];
|
|
|
|
// Start by loading the "canonical" pet and item appearance for the outfit
|
|
// preview. We'll use this to initialize both the preview and the picker.
|
|
//
|
|
// If the user has a preferred species saved from using the ItemPage in the
|
|
// past, we'll send that instead. This will return the appearance on that
|
|
// species if possible, or the default canonical species if not.
|
|
//
|
|
// TODO: If this is a non-standard pet color, like Mutant, we'll do an extra
|
|
// query after this loads, because our Apollo cache can't detect the
|
|
// shared item appearance. (For standard colors though, our logic to
|
|
// cover standard-color switches works for this preloading too.)
|
|
const {
|
|
loading: loadingGQL,
|
|
error: errorGQL,
|
|
data,
|
|
} = useQuery(
|
|
gql`
|
|
query ItemPageOutfitPreview(
|
|
$itemId: ID!
|
|
$preferredSpeciesId: ID
|
|
$preferredColorId: ID
|
|
) {
|
|
item(id: $itemId) {
|
|
id
|
|
canonicalAppearance(
|
|
preferredSpeciesId: $preferredSpeciesId
|
|
preferredColorId: $preferredColorId
|
|
) {
|
|
id
|
|
...ItemAppearanceForOutfitPreview
|
|
body {
|
|
id
|
|
canonicalAppearance(preferredColorId: $preferredColorId) {
|
|
id
|
|
species {
|
|
id
|
|
name
|
|
}
|
|
color {
|
|
id
|
|
}
|
|
pose
|
|
|
|
...PetAppearanceForOutfitPreview
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
${itemAppearanceFragment}
|
|
${petAppearanceFragment}
|
|
`,
|
|
{
|
|
variables: {
|
|
itemId,
|
|
preferredSpeciesId: initialPreferredSpeciesId,
|
|
preferredColorId: initialPreferredColorId,
|
|
},
|
|
onCompleted: (data) => {
|
|
const canonicalBody = data?.item?.canonicalAppearance?.body;
|
|
const canonicalPetAppearance = canonicalBody?.canonicalAppearance;
|
|
|
|
setPetState({
|
|
speciesId: canonicalPetAppearance?.species?.id,
|
|
colorId: canonicalPetAppearance?.color?.id,
|
|
pose: canonicalPetAppearance?.pose,
|
|
isValid: true,
|
|
appearanceId: canonicalPetAppearance?.id,
|
|
});
|
|
},
|
|
},
|
|
);
|
|
|
|
const compatibleBodies = itemAppearances?.map(({ body }) => body) || [];
|
|
|
|
// If there's only one compatible body, and the canonical species's name
|
|
// appears in the item name, then this is probably a species-specific item,
|
|
// and we should adjust the UI to avoid implying that other species could
|
|
// model it.
|
|
const speciesName =
|
|
data?.item?.canonicalAppearance?.body?.canonicalAppearance?.species?.name ??
|
|
"";
|
|
const isProbablySpeciesSpecific =
|
|
compatibleBodies.length === 1 &&
|
|
compatibleBodies[0] !== "all" &&
|
|
itemName.toLowerCase().includes(speciesName.toLowerCase());
|
|
const couldProbablyModelMoreData = !isProbablySpeciesSpecific;
|
|
|
|
// TODO: Does this double-trigger the HTTP request with SpeciesColorPicker?
|
|
const {
|
|
loading: loadingValids,
|
|
error: errorValids,
|
|
valids,
|
|
} = useAllValidPetPoses();
|
|
|
|
const [hasAnimations, setHasAnimations] = React.useState(false);
|
|
const [isPaused, setIsPaused] = useLocalStorage("DTIOutfitIsPaused", true);
|
|
|
|
// This is like <OutfitPreview />, but we can use the appearance data, too!
|
|
const { appearance, preview } = useOutfitPreview({
|
|
speciesId: petState.speciesId,
|
|
colorId: petState.colorId,
|
|
pose: petState.pose,
|
|
appearanceId: petState.appearanceId,
|
|
wornItemIds: [itemId],
|
|
isLoading: loadingGQL || loadingValids,
|
|
spinnerVariant: "corner",
|
|
engine: "canvas",
|
|
onChangeHasAnimations: setHasAnimations,
|
|
});
|
|
|
|
// If there's an appearance loaded for this item, but it's empty, then the
|
|
// item is incompatible. (There should only be one item appearance: this one!)
|
|
const itemAppearance = appearance?.itemAppearances?.[0];
|
|
const itemLayers = itemAppearance?.layers || [];
|
|
const isCompatible = itemLayers.length > 0;
|
|
const usesHTML5 = itemLayers.every(layerUsesHTML5);
|
|
|
|
const onChange = React.useCallback(
|
|
({ speciesId, colorId }) => {
|
|
const validPoses = getValidPoses(valids, speciesId, colorId);
|
|
const pose = getClosestPose(validPoses, idealPose);
|
|
setPetStateFromUserAction({
|
|
speciesId,
|
|
colorId,
|
|
pose,
|
|
isValid: true,
|
|
appearanceId: null,
|
|
});
|
|
},
|
|
[valids, idealPose, setPetStateFromUserAction],
|
|
);
|
|
|
|
const borderColor = useColorModeValue("green.700", "green.400");
|
|
const errorColor = useColorModeValue("red.600", "red.400");
|
|
|
|
const error = errorGQL || errorAppearances || errorValids;
|
|
if (error) {
|
|
return <Box color="red.400">{error.message}</Box>;
|
|
}
|
|
|
|
return (
|
|
<Grid
|
|
templateAreas={{
|
|
base: `
|
|
"preview"
|
|
"speciesColorPicker"
|
|
"speciesFacesPicker"
|
|
"zones"
|
|
`,
|
|
md: `
|
|
"preview speciesFacesPicker"
|
|
"speciesColorPicker zones"
|
|
`,
|
|
}}
|
|
// HACK: Really I wanted 400px to match the natural height of the
|
|
// preview in md, but in Chromium that creates a scrollbar and
|
|
// 401px doesn't, not sure exactly why?
|
|
templateRows={{
|
|
base: "auto auto 200px auto",
|
|
md: "401px auto",
|
|
}}
|
|
templateColumns={{
|
|
base: "minmax(min-content, 400px)",
|
|
md: "minmax(min-content, 400px) fit-content(480px)",
|
|
}}
|
|
rowGap="4"
|
|
columnGap="6"
|
|
justifyContent="center"
|
|
width="100%"
|
|
>
|
|
<AspectRatio
|
|
gridArea="preview"
|
|
maxWidth="400px"
|
|
maxHeight="400px"
|
|
ratio="1"
|
|
border="1px"
|
|
borderColor={borderColor}
|
|
transition="border-color 0.2s"
|
|
borderRadius="lg"
|
|
boxShadow="lg"
|
|
overflow="hidden"
|
|
>
|
|
<Box>
|
|
{petState.isValid && preview}
|
|
<CustomizeMoreButton
|
|
speciesId={petState.speciesId}
|
|
colorId={petState.colorId}
|
|
pose={petState.pose}
|
|
itemId={itemId}
|
|
isDisabled={!petState.isValid}
|
|
/>
|
|
{hasAnimations && (
|
|
<PlayPauseButton
|
|
isPaused={isPaused}
|
|
onClick={() => setIsPaused(!isPaused)}
|
|
/>
|
|
)}
|
|
</Box>
|
|
</AspectRatio>
|
|
<Flex gridArea="speciesColorPicker" alignSelf="start" align="center">
|
|
<Box
|
|
// This box grows at the same rate as the box on the right, so the
|
|
// middle box will be centered, if there's space!
|
|
flex="1 0 0"
|
|
/>
|
|
<SpeciesColorPicker
|
|
speciesId={petState.speciesId}
|
|
colorId={petState.colorId}
|
|
pose={petState.pose}
|
|
idealPose={idealPose}
|
|
onChange={(species, color, isValid, closestPose) => {
|
|
setPetStateFromUserAction({
|
|
speciesId: species.id,
|
|
colorId: color.id,
|
|
pose: closestPose,
|
|
isValid,
|
|
appearanceId: null,
|
|
});
|
|
}}
|
|
speciesIsDisabled={isProbablySpeciesSpecific}
|
|
size="sm"
|
|
showPlaceholders
|
|
/>
|
|
<Box flex="1 0 0" lineHeight="1" paddingLeft="1">
|
|
{
|
|
// Wait for us to start _requesting_ the appearance, and _then_
|
|
// for it to load, and _then_ check compatibility.
|
|
!loadingGQL &&
|
|
!loadingAppearances &&
|
|
!appearance.loading &&
|
|
petState.isValid &&
|
|
!isCompatible && (
|
|
<Tooltip
|
|
label={
|
|
couldProbablyModelMoreData
|
|
? "Item needs models"
|
|
: "Not compatible"
|
|
}
|
|
placement="top"
|
|
>
|
|
<WarningIcon
|
|
color={errorColor}
|
|
transition="color 0.2"
|
|
marginLeft="2"
|
|
borderRadius="full"
|
|
tabIndex="0"
|
|
_focus={{ outline: "none", boxShadow: "outline" }}
|
|
/>
|
|
</Tooltip>
|
|
)
|
|
}
|
|
</Box>
|
|
</Flex>
|
|
<Box
|
|
gridArea="speciesFacesPicker"
|
|
paddingTop="2"
|
|
overflow="auto"
|
|
padding="8px"
|
|
>
|
|
<SpeciesFacesPicker
|
|
selectedSpeciesId={petState.speciesId}
|
|
selectedColorId={petState.colorId}
|
|
compatibleBodies={compatibleBodies}
|
|
couldProbablyModelMoreData={couldProbablyModelMoreData}
|
|
onChange={onChange}
|
|
isLoading={loadingGQL || loadingAppearances || loadingValids}
|
|
/>
|
|
</Box>
|
|
<Flex gridArea="zones" justifySelf="center" align="center">
|
|
{itemAppearances.length > 0 && (
|
|
<ItemZonesInfo
|
|
itemAppearances={itemAppearances}
|
|
restrictedZones={restrictedZones}
|
|
/>
|
|
)}
|
|
<Box width="6" />
|
|
<Flex
|
|
// Avoid layout shift while loading
|
|
minWidth="54px"
|
|
>
|
|
<HTML5Badge
|
|
usesHTML5={usesHTML5}
|
|
// If we're not compatible, act the same as if we're loading:
|
|
// don't change the badge, but don't show one yet if we don't
|
|
// have one yet.
|
|
isLoading={appearance.loading || !isCompatible}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
function CustomizeMoreButton({ speciesId, colorId, pose, itemId, isDisabled }) {
|
|
const url =
|
|
`/outfits/new?species=${speciesId}&color=${colorId}&pose=${pose}&` +
|
|
`objects[]=${itemId}`;
|
|
|
|
// The default background is good in light mode, but in dark mode it's a
|
|
// very subtle transparent white... make it a semi-transparent black, for
|
|
// better contrast against light-colored background items!
|
|
const backgroundColor = useColorModeValue(undefined, "blackAlpha.700");
|
|
const backgroundColorHover = useColorModeValue(undefined, "blackAlpha.900");
|
|
|
|
return (
|
|
<LinkOrButton
|
|
href={isDisabled ? null : url}
|
|
role="group"
|
|
position="absolute"
|
|
top="2"
|
|
right="2"
|
|
size="sm"
|
|
background={backgroundColor}
|
|
_hover={{ backgroundColor: backgroundColorHover }}
|
|
_focus={{ backgroundColor: backgroundColorHover, boxShadow: "outline" }}
|
|
boxShadow="sm"
|
|
isDisabled={isDisabled}
|
|
>
|
|
<ExpandOnGroupHover paddingRight="2">Customize more</ExpandOnGroupHover>
|
|
<EditIcon />
|
|
</LinkOrButton>
|
|
);
|
|
}
|
|
|
|
function LinkOrButton({ href, ...props }) {
|
|
if (href != null) {
|
|
return <Button as="a" href={href} {...props} />;
|
|
} else {
|
|
return <Button {...props} />;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ExpandOnGroupHover starts at width=0, and expands to full width when a
|
|
* parent with role="group" gains hover or focus state.
|
|
*/
|
|
function ExpandOnGroupHover({ children, ...props }) {
|
|
const [measuredWidth, setMeasuredWidth] = React.useState(null);
|
|
const measurerRef = React.useRef(null);
|
|
const prefersReducedMotion = usePrefersReducedMotion();
|
|
|
|
React.useLayoutEffect(() => {
|
|
if (!measurerRef) {
|
|
// I don't think this is possible, but I'd like to know if it happens!
|
|
logAndCapture(
|
|
new Error(
|
|
`Measurer node not ready during effect. Transition won't be smooth.`,
|
|
),
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (measuredWidth != null) {
|
|
// Skip re-measuring when we already have a measured width. This is
|
|
// mainly defensive, to prevent the possibility of loops, even though
|
|
// this algorithm should be stable!
|
|
return;
|
|
}
|
|
|
|
const newMeasuredWidth = measurerRef.current.offsetWidth;
|
|
setMeasuredWidth(newMeasuredWidth);
|
|
}, [measuredWidth]);
|
|
|
|
return (
|
|
<Flex
|
|
// In block layout, the overflowing children would _also_ be constrained
|
|
// to width 0. But in flex layout, overflowing children _keep_ their
|
|
// natural size, so we can measure it even when not visible.
|
|
width="0"
|
|
overflow="hidden"
|
|
// Right-align the children, to keep the text feeling right-aligned when
|
|
// we expand. (To support left-side expansion, make this a prop!)
|
|
justify="flex-end"
|
|
// If the width somehow isn't measured yet, expand to width `auto`, which
|
|
// won't transition smoothly but at least will work!
|
|
_groupHover={{ width: measuredWidth ? measuredWidth + "px" : "auto" }}
|
|
_groupFocus={{ width: measuredWidth ? measuredWidth + "px" : "auto" }}
|
|
transition={!prefersReducedMotion && "width 0.2s"}
|
|
>
|
|
<Box ref={measurerRef} {...props}>
|
|
{children}
|
|
</Box>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
function PlayPauseButton({ isPaused, onClick }) {
|
|
return (
|
|
<IconButton
|
|
icon={isPaused ? <MdPlayArrow /> : <MdPause />}
|
|
aria-label={isPaused ? "Play" : "Pause"}
|
|
onClick={onClick}
|
|
borderRadius="full"
|
|
boxShadow="md"
|
|
color="gray.50"
|
|
backgroundColor="blackAlpha.700"
|
|
position="absolute"
|
|
bottom="2"
|
|
left="2"
|
|
_hover={{ backgroundColor: "blackAlpha.900" }}
|
|
_focus={{ backgroundColor: "blackAlpha.900" }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function ItemZonesInfo({ itemAppearances, restrictedZones }) {
|
|
// Reorganize the body-and-zones data, into zone-and-bodies data. Also, we're
|
|
// merging zones with the same label, because that's how user-facing zone UI
|
|
// generally works!
|
|
const zoneLabelsAndTheirBodiesMap = {};
|
|
for (const { body, swfAssets } of itemAppearances) {
|
|
for (const { zone } of swfAssets) {
|
|
if (!zoneLabelsAndTheirBodiesMap[zone.label]) {
|
|
zoneLabelsAndTheirBodiesMap[zone.label] = {
|
|
zoneLabel: zone.label,
|
|
bodies: [],
|
|
};
|
|
}
|
|
zoneLabelsAndTheirBodiesMap[zone.label].bodies.push(body);
|
|
}
|
|
}
|
|
const zoneLabelsAndTheirBodies = Object.values(zoneLabelsAndTheirBodiesMap);
|
|
|
|
const sortedZonesAndTheirBodies = [...zoneLabelsAndTheirBodies].sort((a, b) =>
|
|
buildSortKeyForZoneLabelsAndTheirBodies(a).localeCompare(
|
|
buildSortKeyForZoneLabelsAndTheirBodies(b),
|
|
),
|
|
);
|
|
|
|
const restrictedZoneLabels = [
|
|
...new Set(restrictedZones.map((z) => z.label)),
|
|
].sort();
|
|
|
|
// We only show body info if there's more than one group of bodies to talk
|
|
// about. If they all have the same zones, it's clear from context that any
|
|
// preview available in the list has the zones listed here.
|
|
const bodyGroups = new Set(
|
|
zoneLabelsAndTheirBodies.map(({ bodies }) =>
|
|
bodies.map((b) => b.id).join(","),
|
|
),
|
|
);
|
|
const showBodyInfo = bodyGroups.size > 1;
|
|
|
|
return (
|
|
<Flex
|
|
fontSize="sm"
|
|
textAlign="center"
|
|
// If the text gets too long, wrap Restricts onto another line, and center
|
|
// them relative to each other.
|
|
wrap="wrap"
|
|
justify="center"
|
|
data-test-id="item-zones-info"
|
|
>
|
|
<Box flex="0 0 auto" maxWidth="100%">
|
|
<Box as="header" fontWeight="bold" display="inline">
|
|
Occupies:
|
|
</Box>{" "}
|
|
<Box as="ul" listStyleType="none" display="inline">
|
|
{sortedZonesAndTheirBodies.map(({ zoneLabel, bodies }) => (
|
|
<Box
|
|
key={zoneLabel}
|
|
as="li"
|
|
display="inline"
|
|
_notLast={{ _after: { content: '", "' } }}
|
|
>
|
|
<Box
|
|
as="span"
|
|
// Don't wrap any of the list item content. But, by putting
|
|
// this in an extra container element, we _do_ allow wrapping
|
|
// _between_ list items.
|
|
whiteSpace="nowrap"
|
|
>
|
|
<ItemZonesInfoListItem
|
|
zoneLabel={zoneLabel}
|
|
bodies={bodies}
|
|
showBodyInfo={showBodyInfo}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
<Box width="4" flex="0 0 auto" />
|
|
<Box flex="0 0 auto" maxWidth="100%">
|
|
<Box as="header" fontWeight="bold" display="inline">
|
|
Restricts:
|
|
</Box>{" "}
|
|
{restrictedZoneLabels.length > 0 ? (
|
|
<Box as="ul" listStyleType="none" display="inline">
|
|
{restrictedZoneLabels.map((zoneLabel) => (
|
|
<Box
|
|
key={zoneLabel}
|
|
as="li"
|
|
display="inline"
|
|
_notLast={{ _after: { content: '", "' } }}
|
|
>
|
|
<Box
|
|
as="span"
|
|
// Don't wrap any of the list item content. But, by putting
|
|
// this in an extra container element, we _do_ allow wrapping
|
|
// _between_ list items.
|
|
whiteSpace="nowrap"
|
|
>
|
|
{zoneLabel}
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
) : (
|
|
<Box as="span" fontStyle="italic" opacity="0.8">
|
|
N/A
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
function ItemZonesInfoListItem({ zoneLabel, bodies, showBodyInfo }) {
|
|
let content = zoneLabel;
|
|
|
|
if (showBodyInfo) {
|
|
if (bodies.some((b) => b.representsAllBodies)) {
|
|
content = <>{content} (all species)</>;
|
|
} else {
|
|
// TODO: This is a bit reductive, if it's different for like special
|
|
// colors, e.g. Blue Acara vs Mutant Acara, this will just show
|
|
// "Acara" in either case! (We are at least gonna be defensive here
|
|
// and remove duplicates, though, in case both the Blue Acara and
|
|
// Mutant Acara body end up in the same list.)
|
|
const speciesNames = new Set(bodies.map((b) => b.species.humanName));
|
|
const speciesListString = [...speciesNames].sort().join(", ");
|
|
|
|
content = (
|
|
<>
|
|
{content}{" "}
|
|
<Tooltip
|
|
label={speciesListString}
|
|
textAlign="center"
|
|
placement="bottom"
|
|
>
|
|
<Box
|
|
as="span"
|
|
tabIndex="0"
|
|
_focus={{ outline: "none", boxShadow: "outline" }}
|
|
fontStyle="italic"
|
|
textDecoration="underline"
|
|
style={{ textDecorationStyle: "dotted" }}
|
|
opacity="0.8"
|
|
>
|
|
{/* Show the speciesNames count, even though it's less info,
|
|
* because it's more important that the tooltip content matches
|
|
* the count we show! */}
|
|
({speciesNames.size} species)
|
|
</Box>
|
|
</Tooltip>
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
return content;
|
|
}
|
|
|
|
function buildSortKeyForZoneLabelsAndTheirBodies({ zoneLabel, bodies }) {
|
|
// Sort by "represents all bodies", then by body count descending, then
|
|
// alphabetically.
|
|
const representsAllBodies = bodies.some((body) => body.representsAllBodies);
|
|
|
|
// To sort by body count _descending_, we subtract it from a large number.
|
|
// Then, to make it work in string comparison, we pad it with leading zeroes.
|
|
// Hacky but solid!
|
|
const inverseBodyCount = (9999 - bodies.length).toString().padStart(4, "0");
|
|
|
|
return `${representsAllBodies ? "A" : "Z"}-${inverseBodyCount}-${zoneLabel}`;
|
|
}
|
|
|
|
export default ItemPageOutfitPreview;
|