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.
This commit is contained in:
Emi Matchu 2021-06-08 08:32:30 -07:00
parent bed525d3ff
commit 2375669cdf

View file

@ -4,6 +4,7 @@ import { WarningTwoIcon } from "@chakra-ui/icons";
import { FaBug } from "react-icons/fa"; import { FaBug } from "react-icons/fa";
import { GlitchBadgeLayout, layerUsesHTML5 } from "../components/HTML5Badge"; import { GlitchBadgeLayout, layerUsesHTML5 } from "../components/HTML5Badge";
import getVisibleLayers from "../../shared/getVisibleLayers"; import getVisibleLayers from "../../shared/getVisibleLayers";
import { useLocalStorage } from "../util";
function OutfitKnownGlitchesBadge({ appearance }) { function OutfitKnownGlitchesBadge({ appearance }) {
const glitchMessages = []; const glitchMessages = [];
@ -99,19 +100,23 @@ function OutfitKnownGlitchesBadge({ appearance }) {
} }
} }
// Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch. // Look for items with the OFFICIAL_SVG_IS_INCORRECT glitch. Only show this
for (const item of items) { // if hi-res mode is on, because otherwise it doesn't affect the user anyway!
const itemHasOfficialSvgIsIncorrect = item.appearance.layers.some((l) => const [hiResMode] = useLocalStorage("DTIHiResMode", false);
(l.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT") if (hiResMode) {
); for (const item of items) {
if (itemHasOfficialSvgIsIncorrect) { const itemHasOfficialSvgIsIncorrect = item.appearance.layers.some((l) =>
glitchMessages.push( (l.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT")
<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>
); );
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>
);
}
} }
} }