impress/app/javascript/wardrobe-2020/components/HTML5Badge.js

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 (
			<GlitchBadgeLayout
				hasGlitches={false}
				aria-label="HTML5 supported!"
				tooltipLabel={
					tooltipLabel ||
					"This item is converted to HTML5, and ready to use on Neopets.com!"
				}
			>
				<CheckCircleIcon fontSize="xs" />
				<Icon
					viewBox="0 0 36 36"
					fontSize="xl"
					// Visual re-balancing, there's too much visual right-padding here!
					marginRight="-1"
				>
					{/* From Twemoji Keycap 5 */}
					<path
						fill="currentColor"
						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>
			</GlitchBadgeLayout>
		);
	} else if (delayedUsesHTML5 === false) {
		return (
			<GlitchBadgeLayout
				hasGlitches={true}
				aria-label="HTML5 not supported"
				tooltipLabel={
					tooltipLabel || (
						<>
							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!
						</>
					)
				}
			>
				<WarningTwoIcon fontSize="xs" marginRight="1" />
				<Icon viewBox="0 0 36 36" fontSize="xl">
					{/* From Twemoji Keycap 5 */}
					<path
						fill="currentColor"
						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"
					/>

					{/* From Twemoji Not Allowed */}
					<path
						fill="#DD2E44"
						opacity="0.75"
						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>
			</GlitchBadgeLayout>
		);
	} 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 (
		<Tooltip
			textAlign="center"
			fontSize="xs"
			placement="bottom"
			label={tooltipLabel}
			// HACK: Chakra tooltips seem inconsistent about staying open when focus
			//       comes from touch events. But I really want this one to work on
			//       mobile!
			isOpen={isHovered || isFocused}
		>
			<Flex
				align="center"
				backgroundColor={hasGlitches ? yellowBackground : greenBackground}
				borderColor={hasGlitches ? yellowBorderColor : greenBorderColor}
				color={hasGlitches ? yellowTextColor : greenTextColor}
				border="1px solid"
				borderRadius="md"
				boxShadow="md"
				paddingX="2"
				paddingY="1"
				transition="all 0.2s"
				tabIndex="0"
				_focus={{ outline: "none", boxShadow: "outline" }}
				// For consistency between the HTML5Badge & OutfitKnownGlitchesBadge
				minHeight="30px"
				onMouseEnter={() => setIsHovered(true)}
				onMouseLeave={() => setIsHovered(false)}
				onFocus={() => setIsFocused(true)}
				onBlur={() => setIsFocused(false)}
				{...props}
			>
				{children}
			</Flex>
		</Tooltip>
	);
}

export function layerUsesHTML5(layer) {
	return Boolean(
		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;