Emi Matchu
0e314482f7
I haven't been running Prettier consistently on things in this project. Now, it's quick-runnable, and I've got it on everything! Also, I just think tabs are the right default for this kind of thing, and I'm glad to get to switch over to it! (In `package.json`.)
316 lines
11 KiB
JavaScript
316 lines
11 KiB
JavaScript
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;
|