Explain Static UC conflict in a new glitch UI
This commit is contained in:
parent
d7fe05c42c
commit
6ebbc4af02
2 changed files with 73 additions and 20 deletions
|
|
@ -13,18 +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, { layerUsesHTML5 } from "../components/HTML5Badge";
|
||||
import HTML5Badge, {
|
||||
GlitchBadgeLayout,
|
||||
layerUsesHTML5,
|
||||
} from "../components/HTML5Badge";
|
||||
import PosePicker from "./PosePicker";
|
||||
import SpeciesColorPicker from "../components/SpeciesColorPicker";
|
||||
import { loadImage, useLocalStorage } from "../util";
|
||||
|
|
@ -184,6 +190,8 @@ function OutfitControls({
|
|||
justify="center"
|
||||
>
|
||||
<OutfitHTML5Badge appearance={appearance} />
|
||||
<Box width="1" />
|
||||
<OutfitKnownGlitchesBadge appearance={appearance} />
|
||||
</Flex>
|
||||
<Box flex="0 0 auto">
|
||||
<DarkMode>
|
||||
|
|
@ -272,6 +280,47 @@ function OutfitHTML5Badge({ appearance }) {
|
|||
);
|
||||
}
|
||||
|
||||
function OutfitKnownGlitchesBadge({ appearance }) {
|
||||
const glitchMessages = [];
|
||||
|
||||
const petHasStaticZone = appearance.petAppearance?.layers.some(
|
||||
(l) => l.zone.id === "46"
|
||||
);
|
||||
const itemHasStaticZone = appearance.itemAppearances
|
||||
?.map((a) => a.layers)
|
||||
.flat()
|
||||
.some((l) => l.zone.id === "46");
|
||||
if (petHasStaticZone && itemHasStaticZone) {
|
||||
glitchMessages.push(
|
||||
<Box key="static-zone-conflict">
|
||||
When you apply a Static-zone item to an Unconverted pet, it hides the
|
||||
pet. This is a known bug on Neopets.com, so we reproduce it here, too.
|
||||
</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.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -3,14 +3,6 @@ import { Tooltip, useColorModeValue, Flex, Icon } from "@chakra-ui/react";
|
|||
import { CheckCircleIcon, WarningTwoIcon } from "@chakra-ui/icons";
|
||||
|
||||
function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
|
||||
const greenBackground = useColorModeValue("green.100", "green.900");
|
||||
const greenBorderColor = useColorModeValue("green.600", "green.500");
|
||||
const greenTextColor = useColorModeValue("green.700", "white");
|
||||
|
||||
const yellowBackground = useColorModeValue("yellow.100", "yellow.900");
|
||||
const yellowBorderColor = useColorModeValue("yellow.600", "yellow.500");
|
||||
const yellowTextColor = useColorModeValue("yellow.700", "white");
|
||||
|
||||
// `delayedUsesHTML5` stores the last known value of `usesHTML5`, when
|
||||
// `isLoading` was `false`. This enables us to keep showing the badge, even
|
||||
// when loading a new appearance - because it's unlikely the badge will
|
||||
|
|
@ -25,10 +17,8 @@ function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
|
|||
|
||||
if (delayedUsesHTML5 === true) {
|
||||
return (
|
||||
<HTML5BadgeLayout
|
||||
backgroundColor={greenBackground}
|
||||
borderColor={greenBorderColor}
|
||||
color={greenTextColor}
|
||||
<GlitchBadgeLayout
|
||||
hasGlitches={false}
|
||||
aria-label="HTML5 supported!"
|
||||
tooltipLabel={
|
||||
tooltipLabel ||
|
||||
|
|
@ -48,14 +38,12 @@ function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
|
|||
d="M16.389 14.489c.744-.155 1.551-.31 2.326-.31 3.752 0 6.418 2.977 6.418 6.604 0 5.178-2.851 8.589-8.216 8.589-2.201 0-6.821-1.427-6.821-4.155 0-1.147.961-2.107 2.108-2.107 1.24 0 2.729 1.984 4.806 1.984 2.17 0 3.288-2.109 3.288-4.062 0-1.86-1.055-3.131-2.977-3.131-1.799 0-2.078 1.023-3.659 1.023-1.209 0-1.829-.93-1.829-1.457 0-.403.062-.713.093-1.054l.774-6.544c.341-2.418.93-2.945 2.418-2.945h7.472c1.428 0 2.264.837 2.264 1.953 0 2.14-1.611 2.326-2.17 2.326h-5.829l-.466 3.286z"
|
||||
/>
|
||||
</Icon>
|
||||
</HTML5BadgeLayout>
|
||||
</GlitchBadgeLayout>
|
||||
);
|
||||
} else if (delayedUsesHTML5 === false) {
|
||||
return (
|
||||
<HTML5BadgeLayout
|
||||
backgroundColor={yellowBackground}
|
||||
borderColor={yellowBorderColor}
|
||||
color={yellowTextColor}
|
||||
<GlitchBadgeLayout
|
||||
hasGlitches={true}
|
||||
aria-label="HTML5 not supported"
|
||||
tooltipLabel={
|
||||
tooltipLabel || (
|
||||
|
|
@ -83,7 +71,7 @@ function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
|
|||
d="M18 0C8.059 0 0 8.059 0 18s8.059 18 18 18 18-8.059 18-18S27.941 0 18 0zm13 18c0 2.565-.753 4.95-2.035 6.965L11.036 7.036C13.05 5.753 15.435 5 18 5c7.18 0 13 5.821 13 13zM5 18c0-2.565.753-4.95 2.036-6.964l17.929 17.929C22.95 30.247 20.565 31 18 31c-7.179 0-13-5.82-13-13z"
|
||||
/>
|
||||
</Icon>
|
||||
</HTML5BadgeLayout>
|
||||
</GlitchBadgeLayout>
|
||||
);
|
||||
} else {
|
||||
// If no `usesHTML5` value has been provided yet, we're empty for now!
|
||||
|
|
@ -91,10 +79,23 @@ function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
|
|||
}
|
||||
}
|
||||
|
||||
function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
|
||||
export function GlitchBadgeLayout({
|
||||
hasGlitches = true,
|
||||
children,
|
||||
tooltipLabel,
|
||||
...props
|
||||
}) {
|
||||
const [isHovered, setIsHovered] = React.useState(false);
|
||||
const [isFocused, setIsFocused] = React.useState(false);
|
||||
|
||||
const greenBackground = useColorModeValue("green.100", "green.900");
|
||||
const greenBorderColor = useColorModeValue("green.600", "green.500");
|
||||
const greenTextColor = useColorModeValue("green.700", "white");
|
||||
|
||||
const yellowBackground = useColorModeValue("yellow.100", "yellow.900");
|
||||
const yellowBorderColor = useColorModeValue("yellow.600", "yellow.500");
|
||||
const yellowTextColor = useColorModeValue("yellow.700", "white");
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
textAlign="center"
|
||||
|
|
@ -108,6 +109,9 @@ function HTML5BadgeLayout({ children, tooltipLabel, ...props }) {
|
|||
>
|
||||
<Flex
|
||||
align="center"
|
||||
backgroundColor={hasGlitches ? yellowBackground : greenBackground}
|
||||
borderColor={hasGlitches ? yellowBorderColor : greenBorderColor}
|
||||
color={hasGlitches ? yellowTextColor : greenTextColor}
|
||||
border="1px solid"
|
||||
borderRadius="md"
|
||||
boxShadow="md"
|
||||
|
|
|
|||
Loading…
Reference in a new issue