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

431 lines
10 KiB
JavaScript
Raw Normal View History

import React from "react";
import { ClassNames } from "@emotion/react";
import {
Badge,
Box,
SimpleGrid,
Tooltip,
Wrap,
WrapItem,
useColorModeValue,
useTheme,
} from "@chakra-ui/react";
import {
CheckIcon,
EditIcon,
NotAllowedIcon,
StarIcon,
} from "@chakra-ui/icons";
import { HiSparkles } from "react-icons/hi";
import SquareItemCard from "./SquareItemCard";
import { safeImageUrl, useCommonStyles } from "../util";
import usePreferArchive from "./usePreferArchive";
function ItemCard({ item, badges, variant = "list", ...props }) {
const { brightBackground } = useCommonStyles();
switch (variant) {
case "grid":
return <SquareItemCard item={item} {...props} />;
case "list":
return (
<Box
as="a"
href={`/items/${item.id}`}
display="block"
p="2"
boxShadow="lg"
borderRadius="lg"
background={brightBackground}
transition="all 0.2s"
className="item-card"
width="100%"
minWidth="0"
{...props}
>
<ItemCardContent
item={item}
badges={badges}
focusSelector=".item-card:hover &, .item-card:focus &"
/>
</Box>
);
default:
throw new Error(`Unexpected ItemCard variant: ${variant}`);
}
}
export function ItemCardContent({
item,
badges,
isWorn,
isDisabled,
itemNameId,
focusSelector,
}) {
return (
<Box display="flex">
<Box>
<Box flex="0 0 auto" marginRight="3">
<ItemThumbnail
item={item}
isActive={isWorn}
isDisabled={isDisabled}
focusSelector={focusSelector}
/>
</Box>
</Box>
<Box flex="1 1 0" minWidth="0" marginTop="1px">
<ItemName
id={itemNameId}
isWorn={isWorn}
isDisabled={isDisabled}
focusSelector={focusSelector}
>
{item.name}
</ItemName>
{badges}
</Box>
</Box>
);
}
/**
* ItemThumbnail shows a small preview image for the item, including some
* hover/focus and worn/unworn states.
*/
export function ItemThumbnail({
item,
size = "md",
isActive,
isDisabled,
focusSelector,
...props
}) {
const [preferArchive] = usePreferArchive();
const theme = useTheme();
const borderColor = useColorModeValue(
theme.colors.green["700"],
"transparent"
);
const focusBorderColor = useColorModeValue(
theme.colors.green["600"],
"transparent"
);
return (
<ClassNames>
{({ css }) => (
<Box
width={size === "lg" ? "80px" : "50px"}
height={size === "lg" ? "80px" : "50px"}
transition="all 0.15s"
transformOrigin="center"
position="relative"
className={css([
{
transform: "scale(0.8)",
},
!isDisabled &&
!isActive && {
[focusSelector]: {
opacity: "0.9",
transform: "scale(0.9)",
},
},
!isDisabled &&
isActive && {
opacity: 1,
transform: "none",
},
])}
{...props}
>
<Box
borderRadius="lg"
boxShadow="md"
border="1px"
overflow="hidden"
width="100%"
height="100%"
className={css([
{
borderColor: `${borderColor} !important`,
},
!isDisabled &&
!isActive && {
[focusSelector]: {
borderColor: `${focusBorderColor} !important`,
},
},
])}
>
{/* If the item is still loading, wait with an empty box. */}
{item && (
<Box
as="img"
width="100%"
height="100%"
src={safeImageUrl(item.thumbnailUrl, { preferArchive })}
alt={`Thumbnail art for ${item.name}`}
/>
)}
</Box>
</Box>
)}
</ClassNames>
);
}
/**
* ItemName shows the item's name, including some hover/focus and worn/unworn
* states.
*/
function ItemName({ children, isDisabled, focusSelector, ...props }) {
const theme = useTheme();
return (
<ClassNames>
{({ css }) => (
<Box
fontSize="md"
transition="all 0.15s"
overflow="hidden"
whiteSpace="nowrap"
textOverflow="ellipsis"
className={
!isDisabled &&
css`
${focusSelector} {
opacity: 0.9;
font-weight: ${theme.fontWeights.medium};
}
input:checked + .item-container & {
opacity: 1;
font-weight: ${theme.fontWeights.bold};
}
`
}
{...props}
>
{children}
</Box>
)}
</ClassNames>
);
}
export function ItemCardList({ children }) {
return (
<SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing="6">
{children}
</SimpleGrid>
);
}
export function ItemBadgeList({ children, ...props }) {
return (
<Wrap spacing="2" opacity="0.7" {...props}>
{React.Children.map(
children,
(badge) => badge && <WrapItem>{badge}</WrapItem>
)}
</Wrap>
);
}
export function ItemBadgeTooltip({ label, children }) {
return (
<Tooltip
label={<Box textAlign="center">{label}</Box>}
placement="top"
openDelay={400}
>
{children}
</Tooltip>
);
}
export const NcBadge = React.forwardRef(({ isEditButton, ...props }, ref) => {
return (
<ItemBadgeTooltip label="Neocash">
<Badge
ref={ref}
as={isEditButton ? "button" : "span"}
colorScheme="purple"
display="flex"
alignItems="center"
_focus={{ outline: "none", boxShadow: "outline" }}
{...props}
>
NC
{isEditButton && <EditIcon fontSize="0.85em" marginLeft="1" />}
</Badge>
</ItemBadgeTooltip>
);
});
export const NpBadge = React.forwardRef(({ isEditButton, ...props }, ref) => {
return (
<ItemBadgeTooltip label="Neopoints">
<Badge
ref={ref}
as={isEditButton ? "button" : "span"}
display="flex"
alignItems="center"
_focus={{ outline: "none", boxShadow: "outline" }}
{...props}
>
NP
{isEditButton && <EditIcon fontSize="0.85em" marginLeft="1" />}
</Badge>
</ItemBadgeTooltip>
);
});
export const PbBadge = React.forwardRef(({ isEditButton, ...props }, ref) => {
return (
<ItemBadgeTooltip label="This item is only obtainable via paintbrush">
<Badge
ref={ref}
as={isEditButton ? "button" : "span"}
colorScheme="orange"
display="flex"
alignItems="center"
_focus={{ outline: "none", boxShadow: "outline" }}
{...props}
>
PB
{isEditButton && <EditIcon fontSize="0.85em" marginLeft="1" />}
</Badge>
</ItemBadgeTooltip>
);
});
export const ItemKindBadge = React.forwardRef(
({ isNc, isPb, isEditButton, ...props }, ref) => {
if (isNc) {
return <NcBadge ref={ref} isEditButton={isEditButton} {...props} />;
} else if (isPb) {
return <PbBadge ref={ref} isEditButton={isEditButton} {...props} />;
} else {
return <NpBadge ref={ref} isEditButton={isEditButton} {...props} />;
}
}
);
export function YouOwnThisBadge({ variant = "long" }) {
let badge = (
<Badge
colorScheme="green"
display="flex"
alignItems="center"
minHeight="1.5em"
>
<CheckIcon aria-label="Check" />
{variant === "medium" && <Box marginLeft="1">Own</Box>}
{variant === "long" && <Box marginLeft="1">You own this!</Box>}
</Badge>
);
if (variant === "short" || variant === "medium") {
badge = (
<ItemBadgeTooltip label="You own this item">{badge}</ItemBadgeTooltip>
);
}
return badge;
}
export function YouWantThisBadge({ variant = "long" }) {
let badge = (
<Badge
colorScheme="blue"
display="flex"
alignItems="center"
minHeight="1.5em"
>
<StarIcon aria-label="Star" />
{variant === "medium" && <Box marginLeft="1">Want</Box>}
{variant === "long" && <Box marginLeft="1">You want this!</Box>}
</Badge>
);
if (variant === "short" || variant === "medium") {
badge = (
<ItemBadgeTooltip label="You want this item">{badge}</ItemBadgeTooltip>
);
}
return badge;
}
function ZoneBadge({ variant, zoneLabel }) {
// Shorten the label when necessary, to make the badges less bulky
const shorthand = zoneLabel
.replace("Background Item", "BG Item")
.replace("Foreground Item", "FG Item")
.replace("Lower-body", "Lower")
.replace("Upper-body", "Upper")
.replace("Transient", "Trans")
.replace("Biology", "Bio");
if (variant === "restricts") {
return (
<ItemBadgeTooltip
label={`Restricted: This item can't be worn with ${zoneLabel} items`}
>
<Badge>
<Box display="flex" alignItems="center">
{shorthand} <NotAllowedIcon marginLeft="1" />
</Box>
</Badge>
</ItemBadgeTooltip>
);
}
if (shorthand !== zoneLabel) {
return (
<ItemBadgeTooltip label={zoneLabel}>
<Badge>{shorthand}</Badge>
</ItemBadgeTooltip>
);
}
return <Badge>{shorthand}</Badge>;
}
export function getZoneBadges(zones, propsForAllBadges) {
// Get the sorted zone labels. Sometimes an item occupies multiple zones of
// the same name, so it's important to de-duplicate them!
let labels = zones.map((z) => z.label);
labels = new Set(labels);
labels = [...labels].sort();
return labels.map((label) => (
<ZoneBadge key={label} zoneLabel={label} {...propsForAllBadges} />
));
}
export function MaybeAnimatedBadge() {
return (
<ItemBadgeTooltip label="Maybe animated? (Support only)">
<Badge
colorScheme="orange"
display="flex"
alignItems="center"
minHeight="1.5em"
>
<Box as={HiSparkles} aria-label="Sparkles" />
</Badge>
</ItemBadgeTooltip>
);
}
export default ItemCard;