Extract OutfitKnownGlitchesBadge to new file
This commit is contained in:
parent
db8e7848d7
commit
6638ff409e
2 changed files with 117 additions and 115 deletions
|
|
@ -13,29 +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, {
|
||||
GlitchBadgeLayout,
|
||||
layerUsesHTML5,
|
||||
} from "../components/HTML5Badge";
|
||||
import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
|
||||
import PosePicker from "./PosePicker";
|
||||
import SpeciesColorPicker from "../components/SpeciesColorPicker";
|
||||
import { loadImage, useLocalStorage } from "../util";
|
||||
import useCurrentUser from "../components/useCurrentUser";
|
||||
import useOutfitAppearance from "../components/useOutfitAppearance";
|
||||
import OutfitKnownGlitchesBadge from "./OutfitKnownGlitchesBadge";
|
||||
|
||||
/**
|
||||
* OutfitControls is the set of controls layered over the outfit preview, to
|
||||
|
|
@ -280,114 +275,6 @@ function OutfitHTML5Badge({ appearance }) {
|
|||
);
|
||||
}
|
||||
|
||||
function OutfitKnownGlitchesBadge({ appearance }) {
|
||||
const glitchMessages = [];
|
||||
|
||||
const { petAppearance, items } = appearance;
|
||||
|
||||
// Look for UC/Invisible/etc incompatibilities that we hid, that we should
|
||||
// just mark Incompatible someday instead.
|
||||
//
|
||||
// HACK: Most of this logic is copy-pasted from `useOutfitAppearance`.
|
||||
const petOccupiedZoneIds = new Set(
|
||||
petAppearance?.layers.map((l) => l.zone.id)
|
||||
);
|
||||
const petRestrictedZoneIds = new Set(
|
||||
petAppearance?.restrictedZones.map((z) => z.id)
|
||||
);
|
||||
const petOccupiedOrRestrictedZoneIds = new Set([
|
||||
...petOccupiedZoneIds,
|
||||
...petRestrictedZoneIds,
|
||||
]);
|
||||
for (const item of items) {
|
||||
const itemHasZoneRestrictedByPet = item.appearance.layers.some(
|
||||
(layer) =>
|
||||
layer.bodyId !== "0" &&
|
||||
petOccupiedOrRestrictedZoneIds.has(layer.zone.id)
|
||||
);
|
||||
if (itemHasZoneRestrictedByPet) {
|
||||
glitchMessages.push(
|
||||
<Box key={`uc-conflict-for-item-${item.id}`}>
|
||||
<i>{item.name}</i> isn't actually compatible with this special pet.
|
||||
We're still showing the old behavior, which is to hide the item.
|
||||
Fixing this is in our todo list, sorry for the confusing UI!
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 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 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Check whether the pet has OFFICIAL_SVG_IS_INCORRECT.
|
||||
const petLayers = petAppearance?.layers || [];
|
||||
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 full-scale SVG version of the
|
||||
image. Instead, we're showing a PNG, which might look a bit blurry on
|
||||
larger screens.
|
||||
</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.
|
||||
*/
|
||||
|
|
|
|||
115
src/app/WardrobePage/OutfitKnownGlitchesBadge.js
Normal file
115
src/app/WardrobePage/OutfitKnownGlitchesBadge.js
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
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";
|
||||
|
||||
function OutfitKnownGlitchesBadge({ appearance }) {
|
||||
const glitchMessages = [];
|
||||
|
||||
const { petAppearance, items } = appearance;
|
||||
|
||||
// Look for UC/Invisible/etc incompatibilities that we hid, that we should
|
||||
// just mark Incompatible someday instead.
|
||||
//
|
||||
// HACK: Most of this logic is copy-pasted from `useOutfitAppearance`.
|
||||
const petOccupiedZoneIds = new Set(
|
||||
petAppearance?.layers.map((l) => l.zone.id)
|
||||
);
|
||||
const petRestrictedZoneIds = new Set(
|
||||
petAppearance?.restrictedZones.map((z) => z.id)
|
||||
);
|
||||
const petOccupiedOrRestrictedZoneIds = new Set([
|
||||
...petOccupiedZoneIds,
|
||||
...petRestrictedZoneIds,
|
||||
]);
|
||||
for (const item of items) {
|
||||
const itemHasZoneRestrictedByPet = item.appearance.layers.some(
|
||||
(layer) =>
|
||||
layer.bodyId !== "0" &&
|
||||
petOccupiedOrRestrictedZoneIds.has(layer.zone.id)
|
||||
);
|
||||
if (itemHasZoneRestrictedByPet) {
|
||||
glitchMessages.push(
|
||||
<Box key={`uc-conflict-for-item-${item.id}`}>
|
||||
<i>{item.name}</i> isn't actually compatible with this special pet.
|
||||
We're still showing the old behavior, which is to hide the item.
|
||||
Fixing this is in our todo list, sorry for the confusing UI!
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 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 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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Check whether the pet has OFFICIAL_SVG_IS_INCORRECT.
|
||||
const petLayers = petAppearance?.layers || [];
|
||||
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 full-scale SVG version of the
|
||||
image. Instead, we're showing a PNG, which might look a bit blurry on
|
||||
larger screens.
|
||||
</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;
|
||||
Loading…
Reference in a new issue