import React from "react"; import gql from "graphql-tag"; import { useQuery } from "@apollo/client"; import { ClassNames } from "@emotion/react"; import { Box, Button, Flex, Popover, PopoverArrow, PopoverContent, PopoverTrigger, Portal, Tab, Tabs, TabList, TabPanel, TabPanels, VisuallyHidden, useBreakpointValue, useColorModeValue, useTheme, useToast, useToken, } from "@chakra-ui/react"; import { loadable } from "../util"; import { petAppearanceFragment } from "../components/useOutfitAppearance"; import getVisibleLayers from "../components/getVisibleLayers"; import { OutfitLayers } from "../components/OutfitPreview"; import SupportOnly from "./support/SupportOnly"; import { useAltStylesForSpecies } from "../loaders/alt-styles"; import useSupport from "./support/useSupport"; import { useLocalStorage } from "../util"; // From https://twemoji.twitter.com/, thank you! import twemojiSmile from "../images/twemoji/smile.svg"; import twemojiCry from "../images/twemoji/cry.svg"; import twemojiSick from "../images/twemoji/sick.svg"; import twemojiSunglasses from "../images/twemoji/sunglasses.svg"; import twemojiQuestion from "../images/twemoji/question.svg"; import twemojiMasc from "../images/twemoji/masc.svg"; import twemojiFem from "../images/twemoji/fem.svg"; const PosePickerSupport = loadable(() => import("./support/PosePickerSupport")); const PosePickerSupportSwitch = loadable(() => import("./support/PosePickerSupport").then((m) => m.PosePickerSupportSwitch), ); /** * PosePicker shows the pet poses available on the current species/color, and * lets the user choose which want they want! * * NOTE: This component is memoized with React.memo. It's relatively expensive * to re-render on every outfit change - the contents update even if the * popover is closed! This makes wearing/unwearing items noticeably * slower on lower-power devices. * * So, instead of using `outfitState` like most components, we specify * exactly which props we need, so that `React.memo` can see the changes * that matter, and skip updates that don't. */ function PosePicker({ speciesId, colorId, pose, appearanceId, dispatchToOutfit, onLockFocus, onUnlockFocus, ...props }) { const initialFocusRef = React.useRef(); const posesQuery = usePoses(speciesId, colorId, pose); const altStylesQuery = useAltStylesForSpecies(speciesId); const [isInSupportMode, setIsInSupportMode] = useLocalStorage( "DTIPosePickerIsInSupportMode", false, ); const { isSupportUser } = useSupport(); const toast = useToast(); const loading = posesQuery.loading || altStylesQuery.loading; const error = posesQuery.error ?? altStylesQuery.error; const poseInfos = posesQuery.poseInfos; const altStyles = altStylesQuery.data ?? []; const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" }); // Resize the Popover when we toggle support mode, because it probably will // affect the content size. React.useLayoutEffect(() => { // HACK: To trigger a Popover resize, we simulate a window resize event, // because Popover listens for window resizes to reposition itself. // I've also filed an issue requesting an official API! // https://github.com/chakra-ui/chakra-ui/issues/1853 window.dispatchEvent(new Event("resize")); }, [isInSupportMode]); // Generally, the app tries to never put us in an invalid pose state. But it // can happen with direct URL navigation, or pet loading when modeling isn't // updated! Let's do some recovery. const selectedPoseIsAvailable = Object.values(poseInfos).some( (pi) => pi.isSelected && pi.isAvailable, ); const firstAvailablePose = Object.values(poseInfos).find( (pi) => pi.isAvailable, )?.pose; React.useEffect(() => { if (loading) { return; } if (!selectedPoseIsAvailable) { if (!firstAvailablePose) { // TODO: I suppose this error would fit better in SpeciesColorPicker! toast({ status: "error", title: "Oops, we don't have data for this pet color!", description: "If it's new, this might be a modeling issue—try modeling it on " + "Classic DTI first. Sorry!", duration: null, isClosable: true, }); return; } console.warn( `Pose ${pose} not found for speciesId=${speciesId}, ` + `colorId=${colorId}. Redirecting to pose ${firstAvailablePose}.`, ); dispatchToOutfit({ type: "setPose", pose: firstAvailablePose }); } }, [ loading, selectedPoseIsAvailable, firstAvailablePose, speciesId, colorId, pose, toast, dispatchToOutfit, ]); if (loading) { return null; } // This is a low-stakes enough control, where enough pairs don't have data // anyway, that I think I want to just not draw attention to failures. if (error) { return null; } const numStandardPoses = Object.values(poseInfos).filter( (p) => p.isAvailable && STANDARD_POSES.includes(p.pose), ).length; const onChange = (e) => { dispatchToOutfit({ type: "setPose", pose: e.target.value }); }; return ( {({ isOpen }) => ( <> Expressions Styles {isInSupportMode ? ( ) : ( <> {numStandardPoses == 0 && ( )} )} setIsInSupportMode(e.target.checked)} /> )} ); } function PosePickerButton({ pose, isOpen, ...props }, ref) { const theme = useTheme(); return ( {({ css, cx }) => ( )} ); } PosePickerButton = React.forwardRef(PosePickerButton); function PosePickerTable({ poseInfos, onChange, initialFocusRef }) { return (
{poseInfos.unconverted.isAvailable && ( )}
); } function Cell({ children, as }) { const Tag = as; return ( {children} ); } const EMOTION_STRINGS = { HAPPY_MASC: "Happy", HAPPY_FEM: "Happy", SAD_MASC: "Sad", SAD_FEM: "Sad", SICK_MASC: "Sick", SICK_FEM: "Sick", }; const GENDER_PRESENTATION_STRINGS = { HAPPY_MASC: "Masculine", SAD_MASC: "Masculine", SICK_MASC: "Masculine", HAPPY_FEM: "Feminine", SAD_FEM: "Feminine", SICK_FEM: "Feminine", }; const STANDARD_POSES = Object.keys(EMOTION_STRINGS); function PoseOption({ poseInfo, onChange, inputRef, size = "md", label, ...otherProps }) { const theme = useTheme(); const genderPresentationStr = GENDER_PRESENTATION_STRINGS[poseInfo.pose]; const emotionStr = EMOTION_STRINGS[poseInfo.pose]; let poseName = poseInfo.pose === "UNCONVERTED" ? "Unconverted" : `${emotionStr} and ${genderPresentationStr}`; if (!poseInfo.isAvailable) { poseName += ` (not modeled yet)`; } const borderColor = useColorModeValue( theme.colors.green["600"], theme.colors.green["300"], ); return ( {({ css, cx }) => ( { // HACK: We need the timeout to beat the popover's focus stealing! const input = e.currentTarget.querySelector("input"); setTimeout(() => input.focus(), 0); }} {...otherProps} > {poseInfo.isAvailable ? ( ) : ( )} {label && ( {label} )} )} ); } function PosePickerEmptyExplanation() { return ( We're still working on labeling these! For now, we're just giving you one of the expressions we have. ); } function StyleSelect({ altStyles }) { const [selectedStyleId, setSelectedStyleId] = React.useState(null); const defaultStyle = { id: null, adjectiveName: "Default" }; return ( {altStyles.map((altStyle) => ( ))} ); } function StyleOption({ altStyle, checked, onChange }) { const theme = useTheme(); const selectedBorderColor = useColorModeValue( theme.colors.green["600"], theme.colors.green["300"], ); const outlineShadow = useToken("shadows", "outline"); return ( {({ css, cx }) => ( { // HACK: We need the timeout to beat the popover's focus stealing! const input = e.currentTarget.querySelector("input"); setTimeout(() => input.focus(), 0); }} > onChange(altStyle.id)} /> {altStyle.thumbnailUrl ? ( ) : ( )} {altStyle.adjectiveName} )} ); } function StyleExplanation() { return ( "Alt Styles" are special NC items that override the pet's usual appearance via the{" "} Styling Chamber . The pet's color doesn't have to match.
WIP: Only Support staff see this tab for now! 💖
); } function EmojiImage({ src, alt, boxSize = 16 }) { return {alt}; } function usePoses(speciesId, colorId, selectedPose) { const { loading, error, data } = useQuery( gql` query PosePicker($speciesId: ID!, $colorId: ID!) { happyMasc: petAppearance( speciesId: $speciesId colorId: $colorId pose: HAPPY_MASC ) { ...PetAppearanceForPosePicker } sadMasc: petAppearance( speciesId: $speciesId colorId: $colorId pose: SAD_MASC ) { ...PetAppearanceForPosePicker } sickMasc: petAppearance( speciesId: $speciesId colorId: $colorId pose: SICK_MASC ) { ...PetAppearanceForPosePicker } happyFem: petAppearance( speciesId: $speciesId colorId: $colorId pose: HAPPY_FEM ) { ...PetAppearanceForPosePicker } sadFem: petAppearance( speciesId: $speciesId colorId: $colorId pose: SAD_FEM ) { ...PetAppearanceForPosePicker } sickFem: petAppearance( speciesId: $speciesId colorId: $colorId pose: SICK_FEM ) { ...PetAppearanceForPosePicker } unconverted: petAppearance( speciesId: $speciesId colorId: $colorId pose: UNCONVERTED ) { ...PetAppearanceForPosePicker } unknown: petAppearance( speciesId: $speciesId colorId: $colorId pose: UNKNOWN ) { ...PetAppearanceForPosePicker } } ${petAppearanceForPosePickerFragment} `, { variables: { speciesId, colorId }, onError: (e) => console.error(e) }, ); const poseInfos = { happyMasc: { ...data?.happyMasc, pose: "HAPPY_MASC", isAvailable: Boolean(data?.happyMasc), isSelected: selectedPose === "HAPPY_MASC", }, sadMasc: { ...data?.sadMasc, pose: "SAD_MASC", isAvailable: Boolean(data?.sadMasc), isSelected: selectedPose === "SAD_MASC", }, sickMasc: { ...data?.sickMasc, pose: "SICK_MASC", isAvailable: Boolean(data?.sickMasc), isSelected: selectedPose === "SICK_MASC", }, happyFem: { ...data?.happyFem, pose: "HAPPY_FEM", isAvailable: Boolean(data?.happyFem), isSelected: selectedPose === "HAPPY_FEM", }, sadFem: { ...data?.sadFem, pose: "SAD_FEM", isAvailable: Boolean(data?.sadFem), isSelected: selectedPose === "SAD_FEM", }, sickFem: { ...data?.sickFem, pose: "SICK_FEM", isAvailable: Boolean(data?.sickFem), isSelected: selectedPose === "SICK_FEM", }, unconverted: { ...data?.unconverted, pose: "UNCONVERTED", isAvailable: Boolean(data?.unconverted), isSelected: selectedPose === "UNCONVERTED", }, unknown: { ...data?.unknown, pose: "UNKNOWN", isAvailable: Boolean(data?.unknown), isSelected: selectedPose === "UNKNOWN", }, }; return { loading, error, poseInfos }; } function getIcon(pose) { if (["HAPPY_MASC", "HAPPY_FEM"].includes(pose)) { return twemojiSmile; } else if (["SAD_MASC", "SAD_FEM"].includes(pose)) { return twemojiCry; } else if (["SICK_MASC", "SICK_FEM"].includes(pose)) { return twemojiSick; } else if (pose === "UNCONVERTED") { return twemojiSunglasses; } else { return twemojiPaintbrush; } } function getLabel(pose) { if (pose === "HAPPY_MASC" || pose === "HAPPY_FEM") { return "Happy"; } else if (pose === "SAD_MASC" || pose === "SAD_FEM") { return "Sad"; } else if (pose === "SICK_MASC" || pose === "SICK_FEM") { return "Sick"; } else if (pose === "UNCONVERTED") { return "Classic UC"; } else { return "Default"; } } function getTransform(poseInfo) { const { pose, bodyId } = poseInfo; if (pose === "UNCONVERTED") { return transformsByBodyId.default; } if (bodyId in transformsByBodyId) { return transformsByBodyId[bodyId]; } return transformsByBodyId.default; } export const petAppearanceForPosePickerFragment = gql` fragment PetAppearanceForPosePicker on PetAppearance { id bodyId pose ...PetAppearanceForOutfitPreview } ${petAppearanceFragment} `; const transformsByBodyId = { 93: "translate(-5px, 10px) scale(2.8)", 106: "translate(-8px, 8px) scale(2.9)", 47: "translate(-1px, 17px) scale(3)", 84: "translate(-21px, 22px) scale(3.2)", 146: "translate(2px, 15px) scale(3.3)", 250: "translate(-14px, 28px) scale(3.4)", 212: "translate(-4px, 8px) scale(2.9)", 74: "translate(-26px, 30px) scale(3.0)", 94: "translate(-4px, 8px) scale(3.1)", 132: "translate(-14px, 18px) scale(3.0)", 56: "translate(-7px, 24px) scale(2.9)", 90: "translate(-16px, 20px) scale(3.5)", 136: "translate(-11px, 18px) scale(3.0)", 138: "translate(-14px, 26px) scale(3.5)", 166: "translate(-13px, 24px) scale(3.1)", 119: "translate(-6px, 29px) scale(3.1)", 126: "translate(3px, 13px) scale(3.1)", 67: "translate(2px, 27px) scale(3.4)", 163: "translate(-7px, 16px) scale(3.1)", 147: "translate(-2px, 15px) scale(3.0)", 80: "translate(-2px, -17px) scale(3.0)", 117: "translate(-14px, 16px) scale(3.6)", 201: "translate(-16px, 16px) scale(3.2)", 51: "translate(-2px, 6px) scale(3.2)", 208: "translate(-3px, 6px) scale(3.7)", 196: "translate(-7px, 19px) scale(5.2)", 143: "translate(-16px, 20px) scale(3.5)", 150: "translate(-3px, 24px) scale(3.2)", 175: "translate(-9px, 15px) scale(3.4)", 173: "translate(3px, 57px) scale(4.4)", 199: "translate(-28px, 35px) scale(3.8)", 52: "translate(-8px, 33px) scale(3.5)", 109: "translate(-8px, -6px) scale(3.2)", 134: "translate(-14px, 14px) scale(3.1)", 95: "translate(-12px, 0px) scale(3.4)", 96: "translate(6px, 23px) scale(3.3)", 154: "translate(-20px, 25px) scale(3.6)", 55: "translate(-16px, 28px) scale(4.0)", 76: "translate(-8px, 11px) scale(3.0)", 156: "translate(2px, 12px) scale(3.5)", 78: "translate(-3px, 18px) scale(3.0)", 191: "translate(-18px, 46px) scale(4.4)", 187: "translate(-6px, 22px) scale(3.2)", 46: "translate(-2px, 19px) scale(3.4)", 178: "translate(-11px, 32px) scale(3.3)", 100: "translate(-13px, 23px) scale(3.3)", 130: "translate(-14px, 4px) scale(3.1)", 188: "translate(-9px, 24px) scale(3.5)", 257: "translate(-14px, 25px) scale(3.4)", 206: "translate(-7px, 4px) scale(3.6)", 101: "translate(-13px, 16px) scale(3.2)", 68: "translate(-2px, 13px) scale(3.2)", 182: "translate(-6px, 4px) scale(3.1)", 180: "translate(-15px, 22px) scale(3.6)", 306: "translate(1px, 14px) scale(3.1)", default: "scale(2.5)", }; export default React.memo(PosePicker);