impress/app/javascript/wardrobe-2020/WardrobePage/OutfitKnownGlitchesBadge.js

import React from "react";
import { Box, VStack } from "@chakra-ui/react";
import { WarningTwoIcon } from "@chakra-ui/icons";
import { FaBug } from "react-icons/fa";
import { GlitchBadgeLayout, layerUsesHTML5 } from "../components/HTML5Badge";
import getVisibleLayers from "../components/getVisibleLayers";
import { useLocalStorage } from "../util";

function OutfitKnownGlitchesBadge({ appearance }) {
  const [hiResMode] = useLocalStorage("DTIHiResMode", false);
  const { petAppearance, items } = appearance;

  const glitchMessages = [];

  // Look for UC/Invisible/etc incompatibilities that we hid, that we should
  // just mark Incompatible someday instead; or with correctly partially-hidden
  // art.
  //
  // NOTE: This particular glitch is checking for the *absence* of layers, so
  //       we skip it if we're still loading!
  if (!appearance.loading) {
    for (const item of items) {
      // HACK: We use `getVisibleLayers` with just this pet appearance and item
      //       appearance, to run the logic for which layers are compatible with
      //       this pet. But `getVisibleLayers` does other things too, so it's
      //       plausible that this could do not quite what we want in some cases!
      const allItemLayers = item.appearance.layers;
      const compatibleItemLayers = getVisibleLayers(petAppearance, [
        item.appearance,
      ]).filter((l) => l.source === "item");

      if (compatibleItemLayers.length === 0 && allItemLayers.length > 0) {
        glitchMessages.push(
          <Box key={`total-uc-conflict-for-item-${item.id}`}>
            <i>{item.name}</i> isn't actually compatible with this special pet.
            We're hiding the item art, which is outdated behavior, and we should
            instead be treating it as entirely incompatible. Fixing this is in
            our todo list, sorry for the confusing UI!
          </Box>,
        );
      } else if (compatibleItemLayers.length < allItemLayers.length) {
        glitchMessages.push(
          <Box key={`partial-uc-conflict-for-item-${item.id}`}>
            <i>{item.name}</i>'s compatibility with this pet is complicated, but
            we believe this is how it looks: some zones are visible, and some
            zones are hidden. If this isn't quite right, please email me at
            matchu@openneo.net and let me know!
          </Box>,
        );
      }
    }
  }

  // Look for items with the OFFICIAL_SWF_IS_INCORRECT glitch.
  for (const item of items) {
    const itemHasBrokenOnNeopetsDotCom = item.appearance.layers.some((l) =>
      (l.knownGlitches || []).includes("OFFICIAL_SWF_IS_INCORRECT"),
    );
    const itemHasBrokenUnconvertedLayers = item.appearance.layers.some(
      (l) =>
        (l.knownGlitches || []).includes("OFFICIAL_SWF_IS_INCORRECT") &&
        !layerUsesHTML5(l),
    );
    if (itemHasBrokenOnNeopetsDotCom) {
      glitchMessages.push(
        <Box key={`official-swf-is-incorrect-for-item-${item.id}`}>
          {itemHasBrokenUnconvertedLayers ? (
            <>
              We're aware of a glitch affecting the art for <i>{item.name}</i>.
              Last time we checked, this glitch affected its appearance on
              Neopets.com, too. Hopefully this will be fixed once it's converted
              to HTML5!
            </>
          ) : (
            <>
              We're aware of a previous glitch affecting the art for{" "}
              <i>{item.name}</i>, but it might have been resolved during HTML5
              conversion. Please use the feedback form on the homepage to let us
              know if it looks right, or still looks wrong! Thank you!
            </>
          )}
        </Box>,
      );
    }
  }

  // Look for items with the OFFICIAL_MOVIE_IS_INCORRECT glitch.
  for (const item of items) {
    const itemHasGlitch = item.appearance.layers.some((l) =>
      (l.knownGlitches || []).includes("OFFICIAL_MOVIE_IS_INCORRECT"),
    );
    if (itemHasGlitch) {
      glitchMessages.push(
        <Box key={`official-movie-is-incorrect-for-item-${item.id}`}>
          There's a glitch in the art for <i>{item.name}</i>, and we believe it
          looks this way on-site, too. But our version might be out of date! If
          you've seen it look better on-site, please email me at
          matchu@openneo.net so we can fix it!
        </Box>,
      );
    }
  }

  // Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch. Only show this
  // if hi-res mode is on, because otherwise it doesn't affect the user anyway!
  if (hiResMode) {
    for (const item of items) {
      const itemHasOfficialSvgIsIncorrect = item.appearance.layers.some((l) =>
        (l.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT"),
      );
      if (itemHasOfficialSvgIsIncorrect) {
        glitchMessages.push(
          <Box key={`official-svg-is-incorrect-for-item-${item.id}`}>
            There's a glitch in the art for <i>{item.name}</i> that prevents us
            from showing the SVG image for Hi-Res Mode. Instead, we're showing a
            PNG, which might look a bit blurry on larger screens.
          </Box>,
        );
      }
    }
  }

  // Look for items with the DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN glitch.
  for (const item of items) {
    const itemHasGlitch = item.appearance.layers.some((l) =>
      (l.knownGlitches || []).includes(
        "DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN",
      ),
    );
    if (itemHasGlitch) {
      glitchMessages.push(
        <Box key={`displays-incorrectly-but-cause-unknown-for-item-${item.id}`}>
          There's a glitch in the art for <i>{item.name}</i> that causes it to
          display incorrectly—but we're not sure if it's on our end, or TNT's.
          If you own this item, please email me at matchu@openneo.net to let us
          know how it looks in the on-site customizer!
        </Box>,
      );
    }
  }

  // Look for items with the OFFICIAL_BODY_ID_IS_INCORRECT glitch.
  for (const item of items) {
    const itemHasOfficialBodyIdIsIncorrect = item.appearance.layers.some((l) =>
      (l.knownGlitches || []).includes("OFFICIAL_BODY_ID_IS_INCORRECT"),
    );
    if (itemHasOfficialBodyIdIsIncorrect) {
      glitchMessages.push(
        <Box key={`official-body-id-is-incorrect-for-item-${item.id}`}>
          Last we checked, <i>{item.name}</i> actually is compatible with this
          pet, even though it seems like it shouldn't be. But TNT might change
          this at any time, so be careful!
        </Box>,
      );
    }
  }

  // Look for Dyeworks items that aren't converted yet.
  for (const item of items) {
    const itemIsDyeworks = item.name.includes("Dyeworks");
    const itemIsConverted = item.appearance.layers.every(layerUsesHTML5);

    if (itemIsDyeworks && !itemIsConverted) {
      glitchMessages.push(
        <Box key={`unconverted-dyeworks-warning-for-item-${item.id}`}>
          <i>{item.name}</i> isn't converted to HTML5 yet, and our Classic DTI
          code often shows old Dyeworks items in the wrong color. Once it's
          converted, we'll display it correctly!
        </Box>,
      );
    }
  }

  // Look for Baby Body Paint items.
  for (const item of items) {
    const itemIsBabyBodyPaint = item.name.includes("Baby Body Paint");
    if (itemIsBabyBodyPaint) {
      glitchMessages.push(
        <Box key={`baby-body-paint-warning-for-item-${item.id}`}>
          <i>{item.name}</i> seems to have new zone restriction rules that our
          system doesn't support yet, whuh oh! This might require major changes
          to how we handle zones. Until then, this item will be very buggy,
          sorry!
        </Box>,
      );
    }
  }

  // Check whether the pet is Invisible. If so, we'll show a blanket warning.
  if (petAppearance?.color?.id === "38") {
    glitchMessages.push(
      <Box key={`invisible-pet-warning`}>
        Invisible pets are affected by a number of glitches, including faces
        sometimes being visible on-site, and errors in the HTML5 conversion. If
        this pose looks incorrect, you can try another by clicking the emoji
        face next to the species/color picker. But be aware that Neopets.com
        might look different!
      </Box>,
    );
  }

  // Check if this is a Faerie Uni. If so, we'll explain the dithering horns.
  if (
    petAppearance?.color?.id === "26" &&
    petAppearance?.species?.id === "49"
  ) {
    glitchMessages.push(
      <Box key={`faerie-uni-dithering-horn-warning`}>
        The Faerie Uni is a "dithering" pet: its horn is sometimes blue, and
        sometimes yellow. To help you design for both cases, we show the blue
        horn with the feminine design, and the yellow horn with the masculine
        design—but the pet's gender does not actually affect which horn you'll
        get, and it will often change over time!
      </Box>,
    );
  }

  // Check whether the pet appearance is marked as Glitched.
  if (petAppearance?.isGlitched) {
    glitchMessages.push(
      // NOTE: This message assumes that the current pet appearance is the
      //       best canonical one, but it's _possible_ to view Glitched
      //       appearances even if we _do_ have a better one saved... but
      //       only the Support UI ever takes you there.
      <Box key={`pet-appearance-is-glitched`}>
        We know that the art for this pet is incorrect, but we still haven't
        seen a <em>correct</em> model for this pose yet. Once someone models the
        correct data, we'll use that instead. For now, you could also try
        switching to another pose, by clicking the emoji face next to the
        species/color picker!
      </Box>,
    );
  }

  const petLayers = petAppearance?.layers || [];

  // Look for pet layers with the OFFICIAL_SWF_IS_INCORRECT glitch.
  for (const layer of petLayers) {
    const layerHasGlitch = (layer.knownGlitches || []).includes(
      "OFFICIAL_SWF_IS_INCORRECT",
    );
    if (layerHasGlitch) {
      glitchMessages.push(
        <Box key={`official-swf-is-incorrect-for-pet-layer-${layer.id}`}>
          We're aware of a glitch affecting the art for this pet's{" "}
          <i>{layer.zone.label}</i> zone. Last time we checked, this glitch
          affected its appearance on Neopets.com, too. But our version might be
          out of date! If you've seen it look better on-site, please email me at
          matchu@openneo.net so we can fix it!
        </Box>,
      );
    }
  }

  // Look for pet layers with the OFFICIAL_SVG_IS_INCORRECT glitch.
  if (hiResMode) {
    for (const layer of petLayers) {
      const layerHasOfficialSvgIsIncorrect = (
        layer.knownGlitches || []
      ).includes("OFFICIAL_SVG_IS_INCORRECT");
      if (layerHasOfficialSvgIsIncorrect) {
        glitchMessages.push(
          <Box key={`official-svg-is-incorrect-for-pet-layer-${layer.id}`}>
            There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
            zone that prevents us from showing the SVG image for Hi-Res Mode.
            Instead, we're showing a PNG, which might look a bit blurry on
            larger screens.
          </Box>,
        );
      }
    }
  }

  // Look for pet layers with the DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN glitch.
  for (const layer of petLayers) {
    const layerHasGlitch = (layer.knownGlitches || []).includes(
      "DISPLAYS_INCORRECTLY_BUT_CAUSE_UNKNOWN",
    );
    if (layerHasGlitch) {
      glitchMessages.push(
        <Box
          key={`displays-incorrectly-but-cause-unknown-for-pet-layer-${layer.id}`}
        >
          There's a glitch in the art for this pet's <i>{layer.zone.label}</i>{" "}
          zone that causes it to display incorrectly—but we're not sure if it's
          on our end, or TNT's. If you have this pet, please email me at
          matchu@openneo.net to let us know how it looks in the on-site
          customizer!
        </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>
  );
}

export default OutfitKnownGlitchesBadge;