From 6ebbc4af026ca7f77599e676a7c27a31dee66c31 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 13 Mar 2021 01:48:12 -0800
Subject: [PATCH] Explain Static UC conflict in a new glitch UI

---
 src/app/WardrobePage/OutfitControls.js | 51 +++++++++++++++++++++++++-
 src/app/components/HTML5Badge.js       | 42 +++++++++++----------
 2 files changed, 73 insertions(+), 20 deletions(-)

diff --git a/src/app/WardrobePage/OutfitControls.js b/src/app/WardrobePage/OutfitControls.js
index 7da6534..3309db7 100644
--- a/src/app/WardrobePage/OutfitControls.js
+++ b/src/app/WardrobePage/OutfitControls.js
@@ -13,18 +13,24 @@ import {
   UnorderedList,
   useClipboard,
   useToast,
+  VStack,
 } from "@chakra-ui/react";
 import {
   ArrowBackIcon,
   CheckIcon,
   DownloadIcon,
   LinkIcon,
+  WarningTwoIcon,
 } from "@chakra-ui/icons";
+import { FaBug } from "react-icons/fa";
 import { MdPause, MdPlayArrow } from "react-icons/md";
 import { Link } from "react-router-dom";
 
 import { getBestImageUrlForLayer } from "../components/OutfitPreview";
-import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
+import HTML5Badge, {
+  GlitchBadgeLayout,
+  layerUsesHTML5,
+} from "../components/HTML5Badge";
 import PosePicker from "./PosePicker";
 import SpeciesColorPicker from "../components/SpeciesColorPicker";
 import { loadImage, useLocalStorage } from "../util";
@@ -184,6 +190,8 @@ function OutfitControls({
                 justify="center"
               >
                 <OutfitHTML5Badge appearance={appearance} />
+                <Box width="1" />
+                <OutfitKnownGlitchesBadge appearance={appearance} />
               </Flex>
               <Box flex="0 0 auto">
                 <DarkMode>
@@ -272,6 +280,47 @@ function OutfitHTML5Badge({ appearance }) {
   );
 }
 
+function OutfitKnownGlitchesBadge({ appearance }) {
+  const glitchMessages = [];
+
+  const petHasStaticZone = appearance.petAppearance?.layers.some(
+    (l) => l.zone.id === "46"
+  );
+  const itemHasStaticZone = appearance.itemAppearances
+    ?.map((a) => a.layers)
+    .flat()
+    .some((l) => l.zone.id === "46");
+  if (petHasStaticZone && itemHasStaticZone) {
+    glitchMessages.push(
+      <Box key="static-zone-conflict">
+        When you apply a Static-zone item to an Unconverted pet, it hides the
+        pet. This is a known bug on Neopets.com, so we reproduce it here, too.
+      </Box>
+    );
+  }
+
+  if (glitchMessages.length === 0) {
+    return null;
+  }
+
+  return (
+    <GlitchBadgeLayout
+      aria-label="Has known glitches"
+      tooltipLabel={
+        <Box>
+          <Box as="header" fontWeight="bold" fontSize="sm" marginBottom="1">
+            Known glitches
+          </Box>
+          <VStack spacing="1em">{glitchMessages}</VStack>
+        </Box>
+      }
+    >
+      <WarningTwoIcon fontSize="xs" marginRight="1" />
+      <FaBug />
+    </GlitchBadgeLayout>
+  );
+}
+
 /**
  * BackButton takes you back home, or to Your Outfits if this outfit is yours.
  */
diff --git a/src/app/components/HTML5Badge.js b/src/app/components/HTML5Badge.js
index 7e9a4fb..60e838e 100644
--- a/src/app/components/HTML5Badge.js
+++ b/src/app/components/HTML5Badge.js
@@ -3,14 +3,6 @@ import { Tooltip, useColorModeValue, Flex, Icon } from "@chakra-ui/react";
 import { CheckCircleIcon, WarningTwoIcon } from "@chakra-ui/icons";
 
 function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
-  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");
-
   // `delayedUsesHTML5` stores the last known value of `usesHTML5`, when
   // `isLoading` was `false`. This enables us to keep showing the badge, even
   // when loading a new appearance - because it's unlikely the badge will
@@ -25,10 +17,8 @@ function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
 
   if (delayedUsesHTML5 === true) {
     return (
-      <HTML5BadgeLayout
-        backgroundColor={greenBackground}
-        borderColor={greenBorderColor}
-        color={greenTextColor}
+      <GlitchBadgeLayout
+        hasGlitches={false}
         aria-label="HTML5 supported!"
         tooltipLabel={
           tooltipLabel ||
@@ -48,14 +38,12 @@ function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
             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>
-      </HTML5BadgeLayout>
+      </GlitchBadgeLayout>
     );
   } else if (delayedUsesHTML5 === false) {
     return (
-      <HTML5BadgeLayout
-        backgroundColor={yellowBackground}
-        borderColor={yellowBorderColor}
-        color={yellowTextColor}
+      <GlitchBadgeLayout
+        hasGlitches={true}
         aria-label="HTML5 not supported"
         tooltipLabel={
           tooltipLabel || (
@@ -83,7 +71,7 @@ function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
             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>
-      </HTML5BadgeLayout>
+      </GlitchBadgeLayout>
     );
   } else {
     // If no `usesHTML5` value has been provided yet, we're empty for now!
@@ -91,10 +79,23 @@ function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
   }
 }
 
-function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
+export function GlitchBadgeLayout({
+  hasGlitches = true,
+  children,
+  tooltipLabel,
+  ...props
+}) {
   const [isHovered, setIsHovered] = React.useState(false);
   const [isFocused, setIsFocused] = React.useState(false);
 
+  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");
+
   return (
     <Tooltip
       textAlign="center"
@@ -108,6 +109,9 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
     >
       <Flex
         align="center"
+        backgroundColor={hasGlitches ? yellowBackground : greenBackground}
+        borderColor={hasGlitches ? yellowBorderColor : greenBorderColor}
+        color={hasGlitches ? yellowTextColor : greenTextColor}
         border="1px solid"
         borderRadius="md"
         boxShadow="md"