134 lines
3.6 KiB
JavaScript
134 lines
3.6 KiB
JavaScript
import { gql, useQuery } from "@apollo/client";
|
|
import { useColorModeValue } from "@chakra-ui/color-mode";
|
|
import { QuestionIcon } from "@chakra-ui/icons";
|
|
import { Box, Flex, Wrap, WrapItem } from "@chakra-ui/layout";
|
|
import {
|
|
Popover,
|
|
PopoverArrow,
|
|
PopoverBody,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@chakra-ui/popover";
|
|
import { Link } from "react-router-dom";
|
|
import HangerSpinner from "./components/HangerSpinner";
|
|
import { ErrorMessage, Heading1 } from "./util";
|
|
import useSupport from "./WardrobePage/support/useSupport";
|
|
|
|
function SupportPetAppearancesPage() {
|
|
const { isSupportUser } = useSupport();
|
|
|
|
if (!isSupportUser) {
|
|
return "Sorry, this page is only for Support users!";
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Heading1 marginBottom=".5em">Support: Pet appearances</Heading1>
|
|
<Box as="p" marginBottom="2">
|
|
These species/color combinations have some <code>UNKNOWN</code>{" "}
|
|
appearances that need labeled! Please take a look!
|
|
<Popover trigger="hover" placement="top">
|
|
<PopoverTrigger>
|
|
<QuestionIcon marginLeft="1.5" marginTop="-2px" tabIndex="0" />
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<PopoverArrow />
|
|
<PopoverBody fontSize="sm" textAlign="center">
|
|
This includes species/color combinations that have at least one{" "}
|
|
non-glitched <code>UNKNOWN</code> pose, and still need a
|
|
non-glitched version of at least one of the standard 6
|
|
mood/gender-presentation poses.
|
|
</PopoverBody>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</Box>
|
|
<UnlabeledPetAppearancesList />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function UnlabeledPetAppearancesList() {
|
|
const { loading, error, data } = useQuery(gql`
|
|
query SupportUnlabeledSpeciesColorPairs {
|
|
speciesColorPairsThatNeedSupportLabeling {
|
|
id
|
|
species {
|
|
id
|
|
name
|
|
}
|
|
color {
|
|
id
|
|
name
|
|
}
|
|
}
|
|
}
|
|
`);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Flex justify="center">
|
|
<HangerSpinner />
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return <ErrorMessage>{error.message}</ErrorMessage>;
|
|
}
|
|
|
|
const speciesColorPairs = [
|
|
...data.speciesColorPairsThatNeedSupportLabeling,
|
|
].sort((a, b) =>
|
|
`${a.species.name} ${a.color.name}`.localeCompare(
|
|
`${b.species.name} ${b.color.name}`
|
|
)
|
|
);
|
|
|
|
if (speciesColorPairs.length === 0) {
|
|
return <>…never mind, they're all done! Wow, go team!! 🎉</>;
|
|
}
|
|
|
|
return (
|
|
<Wrap align="center">
|
|
{speciesColorPairs.map(({ species, color }) => (
|
|
<WrapItem key={`${species.id}-${color.id}`}>
|
|
<SpeciesColorEditorLink species={species} color={color} />
|
|
</WrapItem>
|
|
))}
|
|
<WrapItem>
|
|
{speciesColorPairs.length >= 10 && (
|
|
<Box fontSize="xs" fontStyle="italic" marginLeft="2">
|
|
(That's {speciesColorPairs.length} total, and fewer by the minute!)
|
|
</Box>
|
|
)}
|
|
</WrapItem>
|
|
</Wrap>
|
|
);
|
|
}
|
|
|
|
function SpeciesColorEditorLink({ species, color }) {
|
|
const hoverBackgroundColor = useColorModeValue(
|
|
"blackAlpha.50",
|
|
"whiteAlpha.100"
|
|
);
|
|
|
|
return (
|
|
<Box
|
|
as={Link}
|
|
to={`/outfits/new?species=${species.id}&color=${color.id}&pose=UNKNOWN`}
|
|
target="supportPetAppearanceEditor"
|
|
border="1px solid"
|
|
borderColor="green.600"
|
|
borderRadius="full"
|
|
paddingX="3"
|
|
paddingY="2"
|
|
fontSize="sm"
|
|
_hover={{ backgroundColor: hoverBackgroundColor }}
|
|
_focus={{ boxShadow: "outline", outline: "none" }}
|
|
>
|
|
{color.name} {species.name}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default SupportPetAppearancesPage;
|