Add HTML5 indicator to item preview page
This commit is contained in:
parent
193273f00f
commit
b8744037d1
1 changed files with 134 additions and 20 deletions
|
|
@ -20,8 +20,10 @@ import {
|
|||
WrapItem,
|
||||
Flex,
|
||||
usePrefersReducedMotion,
|
||||
Icon,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
CheckCircleIcon,
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
EditIcon,
|
||||
|
|
@ -666,7 +668,11 @@ function ItemPageOutfitPreview({ itemId }) {
|
|||
// If there's an appearance loaded for this item, but it's empty, then the
|
||||
// item is incompatible. (There should only be one item appearance: this one!)
|
||||
const itemAppearance = appearance?.itemAppearances?.[0];
|
||||
const isIncompatible = itemAppearance && itemAppearance.layers.length === 0;
|
||||
const itemLayers = itemAppearance?.layers || [];
|
||||
const isCompatible = itemLayers.length > 0;
|
||||
const usesHTML5 = itemLayers.every(
|
||||
(l) => l.svgUrl || l.canvasMovieLibraryUrl
|
||||
);
|
||||
|
||||
const borderColor = useColorModeValue("green.700", "green.400");
|
||||
const errorColor = useColorModeValue("red.600", "red.400");
|
||||
|
|
@ -714,10 +720,17 @@ function ItemPageOutfitPreview({ itemId }) {
|
|||
</AspectRatio>
|
||||
<Box display="flex" width="100%" alignItems="center">
|
||||
<Box
|
||||
// This empty box grows at the same rate as the box on the right, so
|
||||
// the middle box will be centered, if there's space!
|
||||
// This box grows at the same rate as the box on the right, so the
|
||||
// middle box will be centered, if there's space!
|
||||
flex="1 0 0"
|
||||
/>
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
paddingRight="2"
|
||||
>
|
||||
{!appearance.loading && isCompatible && (
|
||||
<HTML5Badge usesHTML5={usesHTML5} />
|
||||
)}
|
||||
</Box>
|
||||
<SpeciesColorPicker
|
||||
speciesId={petState.speciesId}
|
||||
colorId={petState.colorId}
|
||||
|
|
@ -736,22 +749,26 @@ function ItemPageOutfitPreview({ itemId }) {
|
|||
showPlaceholders
|
||||
/>
|
||||
<Box flex="1 0 0" lineHeight="1">
|
||||
{isIncompatible && (
|
||||
<Tooltip
|
||||
label={
|
||||
couldProbablyModelMoreData
|
||||
? "Item needs models"
|
||||
: "Not compatible"
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<WarningIcon
|
||||
color={errorColor}
|
||||
transition="color 0.2"
|
||||
marginLeft="2"
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
{
|
||||
// Wait for us to start _requesting_ the appearance, and _then_
|
||||
// for it to load, and _then_ check compatibility.
|
||||
!loadingGQL && !appearance.loading && !isCompatible && (
|
||||
<Tooltip
|
||||
label={
|
||||
couldProbablyModelMoreData
|
||||
? "Item needs models"
|
||||
: "Not compatible"
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<WarningIcon
|
||||
color={errorColor}
|
||||
transition="color 0.2"
|
||||
marginLeft="2"
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
</VStack>
|
||||
|
|
@ -863,6 +880,103 @@ function ExpandOnGroupHover({ children, ...props }) {
|
|||
);
|
||||
}
|
||||
|
||||
function HTML5Badge({ usesHTML5 }) {
|
||||
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");
|
||||
|
||||
if (usesHTML5) {
|
||||
return (
|
||||
<Tooltip
|
||||
shouldWrapChildren
|
||||
textAlign="center"
|
||||
fontSize="xs"
|
||||
placement="bottom-start"
|
||||
label="This item is converted to HTML5, and ready to use on Neopets.com!"
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
border="1px solid"
|
||||
backgroundColor={greenBackground}
|
||||
borderColor={greenBorderColor}
|
||||
color={greenTextColor}
|
||||
borderRadius="md"
|
||||
boxShadow="md"
|
||||
paddingX="2"
|
||||
paddingY="1"
|
||||
transition="all 0.2s"
|
||||
aria-label="HTML5 supported!"
|
||||
>
|
||||
<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>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Tooltip
|
||||
shouldWrapChildren
|
||||
textAlign="center"
|
||||
fontSize="xs"
|
||||
placement="bottom-start"
|
||||
label={
|
||||
<>
|
||||
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!
|
||||
</>
|
||||
}
|
||||
>
|
||||
<Flex
|
||||
align="center"
|
||||
border="1px solid"
|
||||
backgroundColor={yellowBackground}
|
||||
borderColor={yellowBorderColor}
|
||||
color={yellowTextColor}
|
||||
borderRadius="md"
|
||||
boxShadow="md"
|
||||
paddingX="2"
|
||||
paddingY="1"
|
||||
transition="all 0.2s"
|
||||
aria-label="HTML5 not supported"
|
||||
>
|
||||
<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>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function PlayPauseButton({ isPaused, onClick }) {
|
||||
return (
|
||||
<IconButton
|
||||
|
|
|
|||
Loading…
Reference in a new issue