2020-04-21 20:32:53 -07:00
|
|
|
import React from "react";
|
|
|
|
import {
|
|
|
|
Box,
|
|
|
|
Flex,
|
|
|
|
Grid,
|
|
|
|
Heading,
|
2020-04-22 01:10:24 -07:00
|
|
|
IconButton,
|
2020-04-21 20:32:53 -07:00
|
|
|
Image,
|
|
|
|
Stack,
|
|
|
|
PseudoBox,
|
2020-04-22 01:10:24 -07:00
|
|
|
Editable,
|
|
|
|
EditablePreview,
|
|
|
|
EditableInput,
|
2020-04-21 20:32:53 -07:00
|
|
|
} from "@chakra-ui/core";
|
|
|
|
|
2020-04-21 20:46:53 -07:00
|
|
|
import useOutfitState from "./useOutfitState.js";
|
2020-04-21 20:32:53 -07:00
|
|
|
|
|
|
|
function WardrobePage() {
|
|
|
|
return (
|
2020-04-22 00:39:35 -07:00
|
|
|
<Grid
|
|
|
|
// Fullscreen, split into a vertical stack on smaller screens
|
|
|
|
// or a horizontal stack on larger ones!
|
|
|
|
templateRows={{ base: "50% 50%", lg: "none" }}
|
|
|
|
templateColumns={{ base: "none", lg: "50% 50%" }}
|
|
|
|
position="absolute"
|
|
|
|
top="0"
|
|
|
|
bottom="0"
|
|
|
|
left="0"
|
|
|
|
right="0"
|
|
|
|
>
|
2020-04-21 20:32:53 -07:00
|
|
|
<Box boxShadow="md">
|
|
|
|
<OutfitPreview />
|
|
|
|
</Box>
|
|
|
|
<Box overflow="auto">
|
|
|
|
<Box px="5" py="5">
|
|
|
|
<ItemsPanel />
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
</Grid>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function OutfitPreview() {
|
|
|
|
return (
|
|
|
|
<Flex
|
|
|
|
alignItems="center"
|
|
|
|
justifyContent="center"
|
|
|
|
height="100%"
|
|
|
|
width="100%"
|
|
|
|
backgroundColor="gray.900"
|
|
|
|
>
|
|
|
|
<Image
|
|
|
|
src="http://pets.neopets.com/cp/wgmdtdwz/1/7.png"
|
|
|
|
maxHeight="100%"
|
|
|
|
maxWidth="100%"
|
|
|
|
/>
|
|
|
|
</Flex>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function ItemsPanel() {
|
2020-04-21 20:46:53 -07:00
|
|
|
const [zonesAndItems, wearItem] = useOutfitState();
|
2020-04-21 20:32:53 -07:00
|
|
|
|
|
|
|
return (
|
2020-04-22 01:10:24 -07:00
|
|
|
<>
|
|
|
|
<PseudoBox role="group" d="inline-block">
|
|
|
|
<Heading size="xl" mb="6" wordBreak="break-word">
|
|
|
|
<Editable defaultValue="roopal27">
|
|
|
|
{({ isEditing, onRequestEdit }) => (
|
|
|
|
<>
|
|
|
|
<EditablePreview d="inline" />
|
|
|
|
<EditableInput />
|
|
|
|
{!isEditing && (
|
|
|
|
<PseudoBox
|
|
|
|
d="inline-block"
|
|
|
|
opacity="0"
|
|
|
|
transition="opacity 0.5s"
|
|
|
|
_groupHover={{ opacity: "1" }}
|
|
|
|
onClick={onRequestEdit}
|
|
|
|
>
|
|
|
|
<IconButton
|
|
|
|
icon="edit"
|
|
|
|
variant="link"
|
|
|
|
color="gray.600"
|
|
|
|
aria-label="Edit outfit name"
|
|
|
|
title="Edit outfit name"
|
|
|
|
/>
|
|
|
|
</PseudoBox>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Editable>
|
|
|
|
</Heading>
|
|
|
|
</PseudoBox>
|
|
|
|
<Stack spacing="10">
|
|
|
|
{zonesAndItems.map(({ zoneName, items, wornItemId }) => (
|
|
|
|
<Box key={zoneName}>
|
|
|
|
<ItemsForZone
|
|
|
|
zoneName={zoneName}
|
|
|
|
items={items}
|
|
|
|
wornItemId={wornItemId}
|
|
|
|
onWearItem={wearItem}
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
))}
|
|
|
|
</Stack>
|
|
|
|
</>
|
2020-04-21 20:32:53 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function ItemsForZone({ zoneName, items, wornItemId, onWearItem }) {
|
|
|
|
return (
|
|
|
|
<Box>
|
|
|
|
<Heading size="lg" mb="3">
|
|
|
|
{zoneName}
|
|
|
|
</Heading>
|
|
|
|
<Stack spacing="3">
|
|
|
|
{items.map((item) => (
|
|
|
|
<Box key={item.id}>
|
|
|
|
<Item
|
|
|
|
item={item}
|
|
|
|
isWorn={item.id === wornItemId}
|
|
|
|
onWear={() => onWearItem(item.id)}
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
))}
|
|
|
|
</Stack>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function Item({ item, isWorn, onWear }) {
|
|
|
|
return (
|
|
|
|
<PseudoBox
|
|
|
|
role="group"
|
|
|
|
d="flex"
|
|
|
|
alignItems="center"
|
|
|
|
cursor="pointer"
|
|
|
|
onClick={onWear}
|
|
|
|
>
|
2020-04-21 20:41:29 -07:00
|
|
|
<PseudoBox
|
|
|
|
rounded="full"
|
|
|
|
boxShadow="md"
|
|
|
|
border="1px"
|
|
|
|
borderColor={isWorn ? "green.700" : "gray.400"}
|
|
|
|
opacity={isWorn ? 1 : 0.7}
|
|
|
|
width="50px"
|
|
|
|
height="50px"
|
|
|
|
overflow="hidden"
|
|
|
|
transition="all 0.15s"
|
|
|
|
transformOrigin="center"
|
|
|
|
transform={isWorn ? null : "scale(0.8)"}
|
|
|
|
_groupHover={
|
|
|
|
!isWorn && {
|
|
|
|
opacity: 0.9,
|
|
|
|
transform: "scale(0.9)",
|
|
|
|
borderColor: "gray.600",
|
2020-04-21 20:32:53 -07:00
|
|
|
}
|
2020-04-21 20:41:29 -07:00
|
|
|
}
|
|
|
|
>
|
|
|
|
<Image src={item.thumbnailSrc} />
|
|
|
|
</PseudoBox>
|
2020-04-21 20:32:53 -07:00
|
|
|
<PseudoBox
|
2020-04-21 20:41:29 -07:00
|
|
|
marginLeft="3"
|
2020-04-21 20:32:53 -07:00
|
|
|
fontSize="md"
|
|
|
|
fontWeight={isWorn && "bold"}
|
|
|
|
color={isWorn ? "gray.800" : "gray.600"}
|
2020-04-21 20:41:29 -07:00
|
|
|
transition="all 0.15s"
|
2020-04-21 20:32:53 -07:00
|
|
|
_groupHover={
|
|
|
|
!isWorn && {
|
|
|
|
color: "gray.800",
|
2020-04-21 20:41:29 -07:00
|
|
|
fontWeight: "medium",
|
2020-04-21 20:32:53 -07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{item.name}
|
|
|
|
</PseudoBox>
|
|
|
|
</PseudoBox>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default WardrobePage;
|