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

List non-HTML5 items in wardrobe page

Browse source
This commit is contained in:
Emi Matchu 2021-02-10 13:47:02 -08:00
parent 0c80491f99
commit 10e47115bd
2 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,9 +6,11 @@ import {
DarkMode,
Flex,
IconButton,
ListItem,
Portal,
Stack,
Tooltip,
UnorderedList,
useClipboard,
useToast,
} from "@chakra-ui/react";
@ -90,6 +92,10 @@ function OutfitControls({
const usesHTML5 = itemLayers.every(
(l) => l.svgUrl || l.canvasMovieLibraryUrl
);
const itemsNotUsingHTML5 = appearance.items.filter((item) =>
item.appearance.layers.some((l) => !l.svgUrl && !l.canvasMovieLibraryUrl)
);
itemsNotUsingHTML5.sort((a, b) => a.name.localeCompare(b.name));
return (
<ClassNames>
@ -196,12 +202,22 @@ function OutfitControls({
Neopets.com!
</>
) : (
<>
<Box>
<Box as="p" marginBottom="1em">
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!
</>
ready, it could look a bit different than our
temporary preview here. It might even be animated!
</Box>
<Box as="header" fontWeight="bold">
The following items aren't yet converted:
</Box>
<UnorderedList>
{itemsNotUsingHTML5.map((item) => (
<ListItem key={item.id}>{item.name}</ListItem>
))}
</UnorderedList>
</Box>
)
}
/>

3
src/app/components/useOutfitAppearance.js
View file

@ -69,6 +69,7 @@ export default function useOutfitAppearance(outfitState) {
) {
items(ids: $wornItemIds) {
id
name # HACK: This is for HTML5 detection UI in OutfitControls!
appearance: appearanceOn(speciesId: $speciesId, colorId: $colorId) {
...ItemAppearanceForOutfitPreview
}
@ -87,7 +88,7 @@ export default function useOutfitAppearance(outfitState) {
);
const petAppearance = data1?.petAppearance;
const items = data2?.items;
const items = data2?.items || [];
const itemAppearances = React.useMemo(
() => (items || []).map((i) => i.appearance),
[items]