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, DarkMode,
Flex, Flex,
IconButton, IconButton,
ListItem,
Portal, Portal,
Stack, Stack,
Tooltip, Tooltip,
UnorderedList,
useClipboard, useClipboard,
useToast, useToast,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
@ -90,6 +92,10 @@ function OutfitControls({
const usesHTML5 = itemLayers.every( const usesHTML5 = itemLayers.every(
(l) => l.svgUrl || l.canvasMovieLibraryUrl (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 ( return (
<ClassNames> <ClassNames>
@ -196,12 +202,22 @@ function OutfitControls({
Neopets.com! Neopets.com!
</> </>
) : ( ) : (
<> <Box>
<Box as="p" marginBottom="1em">
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 temporary ready, it could look a bit different than our
preview here. It might even be animated! 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) { items(ids: $wornItemIds) {
id id
name # HACK: This is for HTML5 detection UI in OutfitControls!
appearance: appearanceOn(speciesId: $speciesId, colorId: $colorId) { appearance: appearanceOn(speciesId: $speciesId, colorId: $colorId) {
...ItemAppearanceForOutfitPreview ...ItemAppearanceForOutfitPreview
} }
@ -87,7 +88,7 @@ export default function useOutfitAppearance(outfitState) {
); );
const petAppearance = data1?.petAppearance; const petAppearance = data1?.petAppearance;
const items = data2?.items; const items = data2?.items || [];
const itemAppearances = React.useMemo( const itemAppearances = React.useMemo(
() => (items || []).map((i) => i.appearance), () => (items || []).map((i) => i.appearance),
[items] [items]