From 86de09b285858689dfca423fb7159fa151591e50 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 10 Feb 2021 14:02:18 -0800
Subject: [PATCH] Add pet status to wardrobe page HTML5Badge

---
 src/app/WardrobePage/OutfitControls.js | 34 +++++++++++++++++---------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index 4e25d52..7d8e0e9 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -88,14 +88,17 @@ function OutfitControls({
     }
   };
 
-  const itemLayers = appearance.itemAppearances.map((a) => a.layers).flat();
-  const usesHTML5 = itemLayers.every(layerUsesHTML5);
+  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 }) => (
@@ -202,20 +205,29 @@ function OutfitControls({
                       </>
                     ) : (
                       <Box>
-                        <Box as="p" marginBottom="1em">
+                        <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>
-                        <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>
+                        {!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>
                     )
                   }