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,
|
UnorderedList,
|
||||||
useClipboard,
|
useClipboard,
|
||||||
useToast,
|
useToast,
|
||||||
VStack,
|
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import {
|
import {
|
||||||
ArrowBackIcon,
|
ArrowBackIcon,
|
||||||
CheckIcon,
|
CheckIcon,
|
||||||
DownloadIcon,
|
DownloadIcon,
|
||||||
LinkIcon,
|
LinkIcon,
|
||||||
WarningTwoIcon,
|
|
||||||
} from "@chakra-ui/icons";
|
} from "@chakra-ui/icons";
|
||||||
import { FaBug } from "react-icons/fa";
|
|
||||||
import { MdPause, MdPlayArrow } from "react-icons/md";
|
import { MdPause, MdPlayArrow } from "react-icons/md";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
import { getBestImageUrlForLayer } from "../components/OutfitPreview";
|
import { getBestImageUrlForLayer } from "../components/OutfitPreview";
|
||||||
import HTML5Badge, {
|
import HTML5Badge, { layerUsesHTML5 } from "../components/HTML5Badge";
|
||||||
GlitchBadgeLayout,
|
|
||||||
layerUsesHTML5,
|
|
||||||
} from "../components/HTML5Badge";
|
|
||||||
import PosePicker from "./PosePicker";
|
import PosePicker from "./PosePicker";
|
||||||
import SpeciesColorPicker from "../components/SpeciesColorPicker";
|
import SpeciesColorPicker from "../components/SpeciesColorPicker";
|
||||||
import { loadImage, useLocalStorage } from "../util";
|
import { loadImage, useLocalStorage } from "../util";
|
||||||
import useCurrentUser from "../components/useCurrentUser";
|
import useCurrentUser from "../components/useCurrentUser";
|
||||||
import useOutfitAppearance from "../components/useOutfitAppearance";
|
import useOutfitAppearance from "../components/useOutfitAppearance";
|
||||||
|
import OutfitKnownGlitchesBadge from "./OutfitKnownGlitchesBadge";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* OutfitControls is the set of controls layered over the outfit preview, to
|
* 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.
|
* 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