From 10e47115bd940c5f681c4885c1477792fad5fbc1 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 10 Feb 2021 13:47:02 -0800
Subject: [PATCH] List non-HTML5 items in wardrobe page

---
 src/app/WardrobePage/OutfitControls.js    | 28 ++++++++++++++++++-----
 src/app/components/useOutfitAppearance.js |  3 ++-
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index 52604898..d2c9c903 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -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!
                       </>
                     ) : (
-                      <>
-                        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>
+                        <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!
+                        </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>
                     )
                   }
                 />
diff --git a/src/app/components/useOutfitAppearance.js b/src/app/components/useOutfitAppearance.js
index 3420b103..9b5ffedc 100644
--- a/src/app/components/useOutfitAppearance.js
+++ b/src/app/components/useOutfitAppearance.js
@@ -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]