Add HTML5 indicator to item preview page

src/app/ItemPage.js

@@ -20,8 +20,10 @@ import {
   WrapItem,
   Flex,
   usePrefersReducedMotion,
+  Icon,
 } from "@chakra-ui/react";
 import {
+  CheckCircleIcon,
   CheckIcon,
   ChevronRightIcon,
   EditIcon,
@@ -666,7 +668,11 @@ function ItemPageOutfitPreview({ itemId }) {
   // If there's an appearance loaded for this item, but it's empty, then the
   // item is incompatible. (There should only be one item appearance: this one!)
   const itemAppearance = appearance?.itemAppearances?.[0];
-  const isIncompatible = itemAppearance && itemAppearance.layers.length === 0;
+  const itemLayers = itemAppearance?.layers || [];
+  const isCompatible = itemLayers.length > 0;
+  const usesHTML5 = itemLayers.every(
+    (l) => l.svgUrl || l.canvasMovieLibraryUrl
+  );
 
   const borderColor = useColorModeValue("green.700", "green.400");
   const errorColor = useColorModeValue("red.600", "red.400");
@@ -714,10 +720,17 @@ function ItemPageOutfitPreview({ itemId }) {
         </AspectRatio>
         <Box display="flex" width="100%" alignItems="center">
           <Box
-            // This empty box grows at the same rate as the box on the right, so
+            // This box grows at the same rate as the box on the right, so the
-            // the middle box will be centered, if there's space!
+            // middle box will be centered, if there's space!
             flex="1 0 0"
-          />
+            display="flex"
+            justifyContent="center"
+            paddingRight="2"
+          >
+            {!appearance.loading && isCompatible && (
+              <HTML5Badge usesHTML5={usesHTML5} />
+            )}
+          </Box>
           <SpeciesColorPicker
             speciesId={petState.speciesId}
             colorId={petState.colorId}
@@ -736,22 +749,26 @@ function ItemPageOutfitPreview({ itemId }) {
             showPlaceholders
           />
           <Box flex="1 0 0" lineHeight="1">
-            {isIncompatible && (
+            {
-              <Tooltip
+              // Wait for us to start _requesting_ the appearance, and _then_
-                label={
+              // for it to load, and _then_ check compatibility.
-                  couldProbablyModelMoreData
+              !loadingGQL && !appearance.loading && !isCompatible && (
-                    ? "Item needs models"
+                <Tooltip
-                    : "Not compatible"
+                  label={
-                }
+                    couldProbablyModelMoreData
-                placement="top"
+                      ? "Item needs models"
-              >
+                      : "Not compatible"
-                <WarningIcon
+                  }
-                  color={errorColor}
+                  placement="top"
-                  transition="color 0.2"
+                >
-                  marginLeft="2"
+                  <WarningIcon
-                />
+                    color={errorColor}
-              </Tooltip>
+                    transition="color 0.2"
-            )}
+                    marginLeft="2"
+                  />
+                </Tooltip>
+              )
+            }
           </Box>
         </Box>
       </VStack>
@@ -863,6 +880,103 @@ function ExpandOnGroupHover({ children, ...props }) {
   );
 }
 
+function HTML5Badge({ usesHTML5 }) {
+  const greenBackground = useColorModeValue("green.100", "green.900");
+  const greenBorderColor = useColorModeValue("green.600", "green.500");
+  const greenTextColor = useColorModeValue("green.700", "white");
+
+  const yellowBackground = useColorModeValue("yellow.100", "yellow.900");
+  const yellowBorderColor = useColorModeValue("yellow.600", "yellow.500");
+  const yellowTextColor = useColorModeValue("yellow.700", "white");
+
+  if (usesHTML5) {
+    return (
+      <Tooltip
+        shouldWrapChildren
+        textAlign="center"
+        fontSize="xs"
+        placement="bottom-start"
+        label="This item is converted to HTML5, and ready to use on Neopets.com!"
+      >
+        <Flex
+          align="center"
+          border="1px solid"
+          backgroundColor={greenBackground}
+          borderColor={greenBorderColor}
+          color={greenTextColor}
+          borderRadius="md"
+          boxShadow="md"
+          paddingX="2"
+          paddingY="1"
+          transition="all 0.2s"
+          aria-label="HTML5 supported!"
+        >
+          <CheckCircleIcon fontSize="xs" />
+          <Icon
+            viewBox="0 0 36 36"
+            fontSize="xl"
+            // Visual re-balancing, there's too much visual right-padding here!
+            marginRight="-1"
+          >
+            {/* From Twemoji Keycap 5 */}
+            <path
+              fill="currentColor"
+              d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
+            />
+          </Icon>
+        </Flex>
+      </Tooltip>
+    );
+  } else {
+    return (
+      <Tooltip
+        shouldWrapChildren
+        textAlign="center"
+        fontSize="xs"
+        placement="bottom-start"
+        label={
+          <>
+            This item 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!
+          </>
+        }
+      >
+        <Flex
+          align="center"
+          border="1px solid"
+          backgroundColor={yellowBackground}
+          borderColor={yellowBorderColor}
+          color={yellowTextColor}
+          borderRadius="md"
+          boxShadow="md"
+          paddingX="2"
+          paddingY="1"
+          transition="all 0.2s"
+          aria-label="HTML5 not supported"
+        >
+          <WarningTwoIcon fontSize="xs" marginRight="1" />
+          <Icon viewBox="0 0 36 36" fontSize="xl">
+            {/* From Twemoji Keycap 5 */}
+            <path
+              fill="currentColor"
+              d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
+            />
+
+            {/* From Twemoji Not Allowed */}
+            <path
+              fill="#DD2E44"
+              opacity="0.75"
+              d="M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z"
+            />
+          </Icon>
+        </Flex>
+      </Tooltip>
+    );
+  }
+}
+
 function PlayPauseButton({ isPaused, onClick }) {
   return (
     <IconButton