import React from "react";
import { Tooltip, useColorModeValue, Flex, Icon } from "@chakra-ui/react";
import { CheckCircleIcon, WarningTwoIcon } from "@chakra-ui/icons";
function HTML5Badge({ usesHTML5, isLoading, tooltipLabel }) {
// `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
// change between different appearances for the same item, and the flicker is
// annoying!
const [delayedUsesHTML5, setDelayedUsesHTML5] = React.useState(null);
React.useEffect(() => {
if (!isLoading) {
setDelayedUsesHTML5(usesHTML5);
}
}, [usesHTML5, isLoading]);
if (delayedUsesHTML5 === true) {
return (
{/* From Twemoji Keycap 5 */}
);
} else if (delayedUsesHTML5 === false) {
return (
This item isn't converted to HTML5 yet, so it might not appear in
Neopets.com customization yet. Once it's ready, it could look a
bit different than our temporary preview here. It might even be
animated!
)
}
>
{/* From Twemoji Keycap 5 */}
{/* From Twemoji Not Allowed */}
);
} else {
// If no `usesHTML5` value has been provided yet, we're empty for now!
return null;
}
}
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 (
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
onFocus={() => setIsFocused(true)}
onBlur={() => setIsFocused(false)}
{...props}
>
{children}
);
}
export function layerUsesHTML5(layer) {
return (
layer.svgUrl ||
layer.canvasMovieLibraryUrl ||
// If this glitch is applied, then `svgUrl` will be null, but there's still
// an HTML5 manifest that the official player can render.
(layer.knownGlitches || []).includes("OFFICIAL_SVG_IS_INCORRECT")
);
}
export default HTML5Badge;