From 2375669cdf37bd520945ef46d30f7277489c9dfc Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Tue, 8 Jun 2021 08:32:30 -0700
Subject: [PATCH] Only show SVG glitch message in hi-res mode

If you're not in hi-res mode, then you don't care about broken SVGs, because you wouldn't have seen them anyway!

We also update the message to reference Hi-Res Mode.
---
 .../WardrobePage/OutfitKnownGlitchesBadge.js  | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/app/WardrobePage/OutfitKnownGlitchesBadge.js b/src/app/WardrobePage/OutfitKnownGlitchesBadge.js
index 6132faa..f02248c 100644
--- a/src/app/WardrobePage/OutfitKnownGlitchesBadge.js
+++ b/src/app/WardrobePage/OutfitKnownGlitchesBadge.js
@@ -4,6 +4,7 @@ import { WarningTwoIcon } from "@chakra-ui/icons";
 import { FaBug } from "react-icons/fa";
 import { GlitchBadgeLayout, layerUsesHTML5 } from "../components/HTML5Badge";
 import getVisibleLayers from "../../shared/getVisibleLayers";
+import { useLocalStorage } from "../util";
 
 function OutfitKnownGlitchesBadge({ appearance }) {
   const glitchMessages = [];
@@ -99,19 +100,23 @@ function OutfitKnownGlitchesBadge({ appearance }) {
     }
   }
 
-  // Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch.
-  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 full-scale SVG version of the image. Instead, we're
-          showing a PNG, which might look a bit blurry on larger screens.
-        </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!
+  const [hiResMode] = useLocalStorage("DTIHiResMode", false);
+  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>
+        );
+      }
     }
   }