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

Refactor: Extract OutfitHTML5Badge

Browse source 
I'm gonna add glitch stuff too, and I want all this better encapsulated!
This commit is contained in:
Emi Matchu 2021-03-13 01:15:29 -08:00
parent d44315de2c
commit d7fe05c42c
1 changed files with 56 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
src/app/WardrobePage/OutfitControls.js
View file

@ -88,17 +88,6 @@ function OutfitControls({
}
};
const petIsUsingHTML5 = appearance.petAppearance?.layers.every(
layerUsesHTML5
);
const itemsNotUsingHTML5 = appearance.items.filter((item) =>
item.appearance.layers.some((l) => !layerUsesHTML5(l))
);
itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name));
const usesHTML5 = petIsUsingHTML5 && itemsNotUsingHTML5.length === 0;
return (
<ClassNames>
{({ css, cx }) => (
@ -194,44 +183,7 @@ function OutfitControls({
align="center"
justify="center"
>
<HTML5Badge
usesHTML5={usesHTML5}
isLoading={appearance.loading}
tooltipLabel={
usesHTML5 ? (
<>
This outfit is converted to HTML5, and ready to use on
Neopets.com!
</>
) : (
<Box>
<Box as="p">
This outfit isn't converted to HTML5 yet, so it might
not appear in Neopets.com customization yet. Once it's
ready, it could look a bit different than our
temporary preview here. It might even be animated!
</Box>
{!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:
</Box>
<UnorderedList>
{itemsNotUsingHTML5.map((item) => (
<ListItem key={item.id}>{item.name}</ListItem>
))}
</UnorderedList>
</>
)}
</Box>
)
}
/>
<OutfitHTML5Badge appearance={appearance} />
</Flex>
<Box flex="0 0 auto">
<DarkMode>
@ -265,6 +217,61 @@ function OutfitControls({
);
}
function OutfitHTML5Badge({ appearance }) {
const petIsUsingHTML5 = appearance.petAppearance?.layers.every(
layerUsesHTML5
);
const itemsNotUsingHTML5 = appearance.items.filter((item) =>
item.appearance.layers.some((l) => !layerUsesHTML5(l))
);
itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name));
const usesHTML5 = petIsUsingHTML5 && itemsNotUsingHTML5.length === 0;
let tooltipLabel;
if (usesHTML5) {
tooltipLabel = (
<>This outfit is converted to HTML5, and ready to use on Neopets.com!</>
);
} else {
tooltipLabel = (
<Box>
<Box as="p">
This outfit isn't converted to HTML5 yet, so it might not appear in
Neopets.com customization yet. Once it's ready, it could look a bit
different than our temporary preview here. It might even be animated!
</Box>
{!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:
</Box>
<UnorderedList>
{itemsNotUsingHTML5.map((item) => (
<ListItem key={item.id}>{item.name}</ListItem>
))}
</UnorderedList>
</>
)}
</Box>
);
}
return (
<HTML5Badge
usesHTML5={usesHTML5}
isLoading={appearance.loading}
tooltipLabel={tooltipLabel}
/>
);
}
/**
* BackButton takes you back home, or to Your Outfits if this outfit is yours.
*/