OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Add pet status to wardrobe page HTML5Badge

Browse source
This commit is contained in:
Emi Matchu 2021-02-10 14:02:18 -08:00
parent ab21f3a8a5
commit 86de09b285
1 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/app/WardrobePage/OutfitControls.js
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,20 +205,29 @@ 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 && (
The following items aren't yet converted: <Box as="p" marginTop="1em" fontWeight="bold">
</Box> This pet is not yet converted.
<UnorderedList> </Box>
{itemsNotUsingHTML5.map((item) => ( )}
<ListItem key={item.id}>{item.name}</ListItem> {itemsNotUsingHTML5.length > 0 && (
))} <>
</UnorderedList> <Box as="header" marginTop="1em" fontWeight="bold">
The following items aren't yet converted:
</Box>
<UnorderedList>
{itemsNotUsingHTML5.map((item) => (
<ListItem key={item.id}>{item.name}</ListItem>
))}
</UnorderedList>
</>
)}
</Box> </Box>
) )
} }