2020-09-06 23:49:04 -07:00
|
|
|
import React from "react";
|
2021-01-03 19:11:46 -08:00
|
|
|
import { ClassNames } from "@emotion/react";
|
2020-09-11 20:41:39 -07:00
|
|
|
import {
|
|
|
|
Badge,
|
|
|
|
Box,
|
2020-09-11 21:53:57 -07:00
|
|
|
SimpleGrid,
|
2020-09-11 20:41:39 -07:00
|
|
|
Tooltip,
|
|
|
|
Wrap,
|
2020-12-25 09:17:24 -08:00
|
|
|
WrapItem,
|
2020-09-11 20:41:39 -07:00
|
|
|
useColorModeValue,
|
|
|
|
useTheme,
|
2020-12-25 09:08:33 -08:00
|
|
|
} from "@chakra-ui/react";
|
2020-10-23 23:29:50 -07:00
|
|
|
import { CheckIcon, NotAllowedIcon, StarIcon } from "@chakra-ui/icons";
|
2020-09-22 04:17:27 -07:00
|
|
|
import { HiSparkles } from "react-icons/hi";
|
2020-09-12 18:23:12 -07:00
|
|
|
import { Link } from "react-router-dom";
|
2020-09-06 23:49:04 -07:00
|
|
|
|
2021-01-18 06:31:27 -08:00
|
|
|
import SquareItemCard from "./SquareItemCard";
|
2021-01-04 01:17:30 -08:00
|
|
|
import { safeImageUrl, useCommonStyles } from "../util";
|
2020-09-06 23:49:04 -07:00
|
|
|
|
2021-01-14 04:58:15 -08:00
|
|
|
function ItemCard({ item, badges, variant = "list", ...props }) {
|
2021-01-04 01:17:30 -08:00
|
|
|
const { brightBackground } = useCommonStyles();
|
2020-09-11 20:41:39 -07:00
|
|
|
|
2021-01-14 04:58:15 -08:00
|
|
|
switch (variant) {
|
|
|
|
case "grid":
|
2021-01-18 06:31:27 -08:00
|
|
|
return <SquareItemCard item={item} {...props} />;
|
2021-01-14 04:58:15 -08:00
|
|
|
case "list":
|
|
|
|
return (
|
|
|
|
<Box
|
|
|
|
as={Link}
|
|
|
|
to={`/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}`);
|
|
|
|
}
|
2020-09-11 20:41:39 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
export function ItemCardContent({
|
2020-09-06 23:49:04 -07:00
|
|
|
item,
|
|
|
|
badges,
|
|
|
|
isWorn,
|
|
|
|
isDisabled,
|
|
|
|
itemNameId,
|
|
|
|
focusSelector,
|
|
|
|
}) {
|
|
|
|
return (
|
|
|
|
<Box display="flex">
|
2021-01-14 04:58:15 -08:00
|
|
|
<Box>
|
|
|
|
<Box flex="0 0 auto" marginRight="3">
|
|
|
|
<ItemThumbnail
|
|
|
|
item={item}
|
|
|
|
isActive={isWorn}
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
focusSelector={focusSelector}
|
|
|
|
/>
|
|
|
|
</Box>
|
2020-09-06 23:49:04 -07:00
|
|
|
</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.
|
|
|
|
*/
|
2020-09-11 23:56:47 -07:00
|
|
|
export function ItemThumbnail({
|
|
|
|
item,
|
|
|
|
size = "md",
|
|
|
|
isActive,
|
|
|
|
isDisabled,
|
|
|
|
focusSelector,
|
|
|
|
...props
|
|
|
|
}) {
|
2020-09-06 23:49:04 -07:00
|
|
|
const theme = useTheme();
|
|
|
|
|
|
|
|
const borderColor = useColorModeValue(
|
|
|
|
theme.colors.green["700"],
|
|
|
|
"transparent"
|
|
|
|
);
|
|
|
|
|
|
|
|
const focusBorderColor = useColorModeValue(
|
|
|
|
theme.colors.green["600"],
|
|
|
|
"transparent"
|
|
|
|
);
|
|
|
|
|
|
|
|
return (
|
2021-01-03 19:11:46 -08:00
|
|
|
<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)",
|
2020-09-06 23:49:04 -07:00
|
|
|
},
|
2021-01-03 19:11:46 -08:00
|
|
|
!isDisabled &&
|
|
|
|
!isActive && {
|
|
|
|
[focusSelector]: {
|
|
|
|
opacity: "0.9",
|
|
|
|
transform: "scale(0.9)",
|
|
|
|
},
|
2020-09-06 23:49:04 -07:00
|
|
|
},
|
2021-01-03 19:11:46 -08:00
|
|
|
!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`,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
])}
|
|
|
|
>
|
|
|
|
<Box
|
|
|
|
as="img"
|
|
|
|
width="100%"
|
|
|
|
height="100%"
|
|
|
|
src={safeImageUrl(item.thumbnailUrl)}
|
|
|
|
alt={`Thumbnail art for ${item.name}`}
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
)}
|
|
|
|
</ClassNames>
|
2020-09-06 23:49:04 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* ItemName shows the item's name, including some hover/focus and worn/unworn
|
|
|
|
* states.
|
|
|
|
*/
|
|
|
|
function ItemName({ children, isDisabled, focusSelector, ...props }) {
|
|
|
|
const theme = useTheme();
|
|
|
|
|
|
|
|
return (
|
2021-01-03 19:11:46 -08:00
|
|
|
<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};
|
|
|
|
}
|
2020-09-06 23:49:04 -07:00
|
|
|
|
2021-01-03 19:11:46 -08:00
|
|
|
input:checked + .item-container & {
|
|
|
|
opacity: 1;
|
|
|
|
font-weight: ${theme.fontWeights.bold};
|
|
|
|
}
|
|
|
|
`
|
2020-09-06 23:49:04 -07:00
|
|
|
}
|
2021-01-03 19:11:46 -08:00
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Box>
|
|
|
|
)}
|
|
|
|
</ClassNames>
|
2020-09-06 23:49:04 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-11 21:53:57 -07:00
|
|
|
export function ItemCardList({ children }) {
|
|
|
|
return (
|
2020-09-11 22:13:38 -07:00
|
|
|
<SimpleGrid columns={{ sm: 1, md: 2, lg: 3 }} spacing="6">
|
2020-09-11 21:53:57 -07:00
|
|
|
{children}
|
|
|
|
</SimpleGrid>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-03 20:11:37 -08:00
|
|
|
export function ItemBadgeList({ children, ...props }) {
|
2020-09-06 23:49:04 -07:00
|
|
|
return (
|
2020-11-03 20:11:37 -08:00
|
|
|
<Wrap spacing="2" opacity="0.7" {...props}>
|
2020-12-25 09:17:24 -08:00
|
|
|
{React.Children.map(
|
|
|
|
children,
|
|
|
|
(badge) => badge && <WrapItem>{badge}</WrapItem>
|
|
|
|
)}
|
2020-11-03 20:11:37 -08:00
|
|
|
</Wrap>
|
2020-09-06 23:49:04 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-11 20:41:39 -07:00
|
|
|
export function ItemBadgeTooltip({ label, children }) {
|
|
|
|
return (
|
|
|
|
<Tooltip
|
|
|
|
label={<Box textAlign="center">{label}</Box>}
|
|
|
|
placement="top"
|
|
|
|
openDelay={400}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function NcBadge() {
|
|
|
|
return (
|
|
|
|
<ItemBadgeTooltip label="Neocash">
|
2020-11-03 20:11:37 -08:00
|
|
|
<Badge colorScheme="purple" display="block">
|
2020-09-12 18:13:11 -07:00
|
|
|
NC
|
2020-11-03 20:11:37 -08:00
|
|
|
</Badge>
|
2020-09-11 20:41:39 -07:00
|
|
|
</ItemBadgeTooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function NpBadge() {
|
|
|
|
return (
|
|
|
|
<ItemBadgeTooltip label="Neopoints">
|
2020-11-03 20:11:37 -08:00
|
|
|
<Badge display="block">NP</Badge>
|
2020-09-11 20:41:39 -07:00
|
|
|
</ItemBadgeTooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-08 15:13:30 -08:00
|
|
|
export function PbBadge() {
|
|
|
|
return (
|
|
|
|
<ItemBadgeTooltip label="This item is only obtainable via paintbrush">
|
|
|
|
<Badge colorScheme="orange" display="block">
|
|
|
|
PB
|
|
|
|
</Badge>
|
|
|
|
</ItemBadgeTooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function ItemKindBadge({ isNc, isPb }) {
|
|
|
|
if (isNc) {
|
|
|
|
return <NcBadge />;
|
|
|
|
} else if (isPb) {
|
|
|
|
return <PbBadge />;
|
|
|
|
} else {
|
|
|
|
return <NpBadge />;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-12 20:02:56 -07:00
|
|
|
export function YouOwnThisBadge({ variant = "long" }) {
|
2020-09-22 04:17:27 -07:00
|
|
|
let badge = (
|
2020-11-03 20:11:37 -08:00
|
|
|
<Badge
|
2020-09-22 04:17:27 -07:00
|
|
|
colorScheme="green"
|
|
|
|
display="flex"
|
|
|
|
alignItems="center"
|
|
|
|
minHeight="1.5em"
|
|
|
|
>
|
2020-10-24 01:06:55 -07:00
|
|
|
<CheckIcon aria-label="Check" />
|
2020-11-03 20:24:56 -08:00
|
|
|
{variant === "medium" && <Box marginLeft="1">Own</Box>}
|
2020-09-22 04:17:27 -07:00
|
|
|
{variant === "long" && <Box marginLeft="1">You own this!</Box>}
|
2020-11-03 20:11:37 -08:00
|
|
|
</Badge>
|
2020-09-11 21:45:38 -07:00
|
|
|
);
|
2020-09-22 04:17:27 -07:00
|
|
|
|
2020-11-03 20:24:56 -08:00
|
|
|
if (variant === "short" || variant === "medium") {
|
|
|
|
badge = (
|
|
|
|
<ItemBadgeTooltip label="You own this item">{badge}</ItemBadgeTooltip>
|
|
|
|
);
|
2020-09-22 04:17:27 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
return badge;
|
2020-09-11 21:45:38 -07:00
|
|
|
}
|
|
|
|
|
2020-09-12 20:02:56 -07:00
|
|
|
export function YouWantThisBadge({ variant = "long" }) {
|
2020-09-22 04:17:27 -07:00
|
|
|
let badge = (
|
2020-11-03 20:11:37 -08:00
|
|
|
<Badge
|
2020-09-22 04:17:27 -07:00
|
|
|
colorScheme="blue"
|
|
|
|
display="flex"
|
|
|
|
alignItems="center"
|
|
|
|
minHeight="1.5em"
|
|
|
|
>
|
|
|
|
<StarIcon aria-label="Star" />
|
2020-11-03 20:24:56 -08:00
|
|
|
{variant === "medium" && <Box marginLeft="1">Want</Box>}
|
2020-09-22 04:17:27 -07:00
|
|
|
{variant === "long" && <Box marginLeft="1">You want this!</Box>}
|
2020-11-03 20:11:37 -08:00
|
|
|
</Badge>
|
2020-09-11 21:45:38 -07:00
|
|
|
);
|
2020-09-22 04:17:27 -07:00
|
|
|
|
2020-11-03 20:24:56 -08:00
|
|
|
if (variant === "short" || variant === "medium") {
|
|
|
|
badge = (
|
|
|
|
<ItemBadgeTooltip label="You want this item">{badge}</ItemBadgeTooltip>
|
|
|
|
);
|
2020-09-22 04:17:27 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
return badge;
|
|
|
|
}
|
|
|
|
|
2020-10-23 23:29:50 -07:00
|
|
|
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`}
|
|
|
|
>
|
2020-11-03 20:11:37 -08:00
|
|
|
<Badge>
|
2020-10-23 23:29:50 -07:00
|
|
|
<Box display="flex" alignItems="center">
|
|
|
|
{shorthand} <NotAllowedIcon marginLeft="1" />
|
|
|
|
</Box>
|
2020-11-03 20:11:37 -08:00
|
|
|
</Badge>
|
2020-10-23 23:29:50 -07:00
|
|
|
</ItemBadgeTooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
if (shorthand !== zoneLabel) {
|
|
|
|
return (
|
|
|
|
<ItemBadgeTooltip label={zoneLabel}>
|
2020-11-03 20:11:37 -08:00
|
|
|
<Badge>{shorthand}</Badge>
|
2020-10-23 23:29:50 -07:00
|
|
|
</ItemBadgeTooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-03 20:11:37 -08:00
|
|
|
return <Badge>{shorthand}</Badge>;
|
2020-10-23 23:29:50 -07:00
|
|
|
}
|
|
|
|
|
2020-11-03 20:11:37 -08:00
|
|
|
export function getZoneBadges(zones, propsForAllBadges) {
|
2020-10-23 23:29:50 -07:00
|
|
|
// 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) => (
|
2020-11-03 20:11:37 -08:00
|
|
|
<ZoneBadge key={label} zoneLabel={label} {...propsForAllBadges} />
|
2020-10-23 23:29:50 -07:00
|
|
|
));
|
|
|
|
}
|
|
|
|
|
2020-09-22 04:17:27 -07:00
|
|
|
export function MaybeAnimatedBadge() {
|
|
|
|
return (
|
|
|
|
<ItemBadgeTooltip label="Maybe animated? (Support only)">
|
2020-11-03 20:11:37 -08:00
|
|
|
<Badge
|
2020-09-22 04:17:27 -07:00
|
|
|
colorScheme="orange"
|
|
|
|
display="flex"
|
|
|
|
alignItems="center"
|
|
|
|
minHeight="1.5em"
|
|
|
|
>
|
|
|
|
<Box as={HiSparkles} aria-label="Sparkles" />
|
2020-11-03 20:11:37 -08:00
|
|
|
</Badge>
|
2020-09-22 04:17:27 -07:00
|
|
|
</ItemBadgeTooltip>
|
|
|
|
);
|
2020-09-11 21:45:38 -07:00
|
|
|
}
|
|
|
|
|
2020-09-11 20:41:39 -07:00
|
|
|
export default ItemCard;
|