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

28
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>
This outfit isn't converted to HTML5 yet, so it might <Box as="p" marginBottom="1em">
not appear in Neopets.com customization yet. Once it's This outfit isn't converted to HTML5 yet, so it might
ready, it could look a bit different than our temporary not appear in Neopets.com customization yet. Once it's
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) { 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]