Add pet status to wardrobe page HTML5Badge

This commit is contained in:
Emi Matchu 2021-02-10 14:02:18 -08:00
parent ab21f3a8a5
commit 86de09b285

View file

@ -88,14 +88,17 @@ function OutfitControls({
} }
}; };
const itemLayers = appearance.itemAppearances.map((a) => a.layers).flat(); const petIsUsingHTML5 = appearance.petAppearance?.layers.every(
const usesHTML5 = itemLayers.every(layerUsesHTML5); layerUsesHTML5
);
const itemsNotUsingHTML5 = appearance.items.filter((item) => const itemsNotUsingHTML5 = appearance.items.filter((item) =>
item.appearance.layers.some((l) => !layerUsesHTML5(l)) item.appearance.layers.some((l) => !layerUsesHTML5(l))
); );
itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name)); itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name));
const usesHTML5 = petIsUsingHTML5 && itemsNotUsingHTML5.length === 0;
return ( return (
<ClassNames> <ClassNames>
{({ css, cx }) => ( {({ css, cx }) => (
@ -202,13 +205,20 @@ function OutfitControls({
</> </>
) : ( ) : (
<Box> <Box>
<Box as="p" marginBottom="1em"> <Box as="p">
This outfit isn't converted to HTML5 yet, so it might This outfit isn't converted to HTML5 yet, so it might
not appear in Neopets.com customization yet. Once it's not appear in Neopets.com customization yet. Once it's
ready, it could look a bit different than our ready, it could look a bit different than our
temporary preview here. It might even be animated! temporary preview here. It might even be animated!
</Box> </Box>
<Box as="header" fontWeight="bold"> {!petIsUsingHTML5 && (
<Box as="p" marginTop="1em" fontWeight="bold">
This pet is not yet converted.
</Box>
)}
{itemsNotUsingHTML5.length > 0 && (
<>
<Box as="header" marginTop="1em" fontWeight="bold">
The following items aren't yet converted: The following items aren't yet converted:
</Box> </Box>
<UnorderedList> <UnorderedList>
@ -216,6 +226,8 @@ function OutfitControls({
<ListItem key={item.id}>{item.name}</ListItem> <ListItem key={item.id}>{item.name}</ListItem>
))} ))}
</UnorderedList> </UnorderedList>
</>
)}
</Box> </Box>
) )
} }