import React from "react";
import gql from "graphql-tag";
import { useQuery } from "@apollo/react-hooks";
import { css, cx } from "emotion";
import {
Box,
Button,
Flex,
Image,
Popover,
PopoverArrow,
PopoverContent,
PopoverTrigger,
VisuallyHidden,
useTheme,
} from "@chakra-ui/core";
import { getVisibleLayers, petAppearanceFragment } from "./useOutfitAppearance";
// 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 twemojiMasc from "../images/twemoji/masc.svg";
import twemojiFem from "../images/twemoji/fem.svg";
import { OutfitLayers } from "./OutfitPreview";
function PosePicker({
outfitState,
dispatchToOutfit,
onLockFocus,
onUnlockFocus,
}) {
const theme = useTheme();
const checkedInputRef = React.useRef();
const { loading, error, poses } = usePoses(outfitState);
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;
}
// If there's only one pose anyway, don't bother showing a picker!
const numAvailablePoses = Object.values(poses).filter((p) => p).length;
if (numAvailablePoses <= 1) {
return null;
}
const onChange = (e) => {
const [emotion, genderPresentation] = e.target.value.split("-");
dispatchToOutfit({
type: "setPose",
emotion,
genderPresentation,
});
};
return (
{({ isOpen }) => (
<>
>
)}
);
}
function Cell({ children, as }) {
const Tag = as;
return (
{children}
);
}
const EMOTION_STRINGS = {
HAPPY: "Happy",
SAD: "Sad",
SICK: "Sick",
};
const GENDER_PRESENTATION_STRINGS = {
MASCULINE: "Masculine",
FEMININE: "Feminine",
};
function PoseButton({ pose, onChange, inputRef }) {
const theme = useTheme();
if (!pose) {
return null;
}
const genderPresentationStr =
GENDER_PRESENTATION_STRINGS[pose.genderPresentation];
const emotionStr = EMOTION_STRINGS[pose.emotion];
return (
{
// HACK: We need the timeout to beat the popover's focus stealing!
const input = e.currentTarget.querySelector("input");
setTimeout(() => input.focus(), 0);
}}
>
);
}
function EmojiImage({ src, "aria-label": ariaLabel }) {
return ;
}
function usePoses(outfitState) {
const { speciesId, colorId } = outfitState;
const { loading, error, data } = useQuery(
gql`
query PosePicker($speciesId: ID!, $colorId: ID!) {
petAppearances(speciesId: $speciesId, colorId: $colorId) {
id
petStateId
genderPresentation
emotion
approximateThumbnailUrl
...PetAppearanceForOutfitPreview
}
}
${petAppearanceFragment}
`,
{ variables: { speciesId, colorId } }
);
const petAppearances = data?.petAppearances || [];
const buildPose = (e, gp) => ({
...petAppearances.find(
(pa) => pa.emotion === e && pa.genderPresentation === gp
),
speciesId,
isSelected:
outfitState.emotion === e && outfitState.genderPresentation === gp,
});
console.log(outfitState.emotion, outfitState.genderPresentation, outfitState);
const poses = {
happyMasc: buildPose("HAPPY", "MASCULINE"),
sadMasc: buildPose("SAD", "MASCULINE"),
sickMasc: buildPose("SICK", "MASCULINE"),
happyFem: buildPose("HAPPY", "FEMININE"),
sadFem: buildPose("SAD", "FEMININE"),
sickFem: buildPose("SICK", "FEMININE"),
};
return { loading, error, poses };
}
const transformsBySpeciesId = {
"1": "translate(-5px, 10px) scale(2.8)",
"2": "translate(-8px, 8px) scale(2.9)",
"3": "translate(-1px, 17px) scale(3)",
"4": "translate(-21px, 22px) scale(3.2)",
"5": "translate(2px, 15px) scale(3.3)",
"6": "translate(-14px, 28px) scale(3.4)",
"7": "translate(-4px, 8px) scale(2.9)",
"8": "translate(-26px, 30px) scale(3.0)",
"9": "translate(-4px, 8px) scale(3.1)",
"10": "translate(-14px, 18px) scale(3.0)",
"11": "translate(-7px, 24px) scale(2.9)",
"12": "translate(-16px, 20px) scale(3.5)",
"13": "translate(-11px, 18px) scale(3.0)",
"14": "translate(-14px, 26px) scale(3.5)",
"15": "translate(-13px, 24px) scale(3.1)",
"16": "translate(-6px, 29px) scale(3.1)",
"17": "translate(3px, 13px) scale(3.1)",
"18": "translate(2px, 27px) scale(3.4)",
"19": "translate(-7px, 16px) scale(3.1)",
"20": "translate(-2px, 15px) scale(3.0)",
"21": "translate(-2px, -17px) scale(3.0)",
"22": "translate(-14px, 16px) scale(3.6)",
"23": "translate(-16px, 16px) scale(3.2)",
"24": "translate(-2px, 6px) scale(3.2)",
"25": "translate(-3px, 6px) scale(3.7)",
"26": "translate(-7px, 19px) scale(5.2)",
"27": "translate(-16px, 20px) scale(3.5)",
"28": "translate(-3px, 24px) scale(3.2)",
"29": "translate(-9px, 15px) scale(3.4)",
"30": "translate(3px, 57px) scale(4.4)",
"31": "translate(-28px, 35px) scale(3.8)",
"32": "translate(-8px, 33px) scale(3.5)",
"33": "translate(-8px, -6px) scale(3.2)",
"34": "translate(-14px, 14px) scale(3.1)",
"35": "translate(-12px, 0px) scale(3.4)",
"36": "translate(6px, 23px) scale(3.3)",
"37": "translate(-20px, 25px) scale(3.6)",
"38": "translate(-16px, 28px) scale(4.0)",
"39": "translate(-8px, 11px) scale(3.0)",
"40": "translate(2px, 12px) scale(3.5)",
"41": "translate(-3px, 18px) scale(3.0)",
"42": "translate(-18px, 46px) scale(4.4)",
"43": "translate(-6px, 22px) scale(3.2)",
"44": "translate(-2px, 19px) scale(3.4)",
"45": "translate(-11px, 32px) scale(3.3)",
"46": "translate(-13px, 23px) scale(3.3)",
"47": "translate(-14px, 4px) scale(3.1)",
"48": "translate(-9px, 24px) scale(3.5)",
"49": "translate(-14px, 25px) scale(3.4)",
"50": "translate(-7px, 4px) scale(3.6)",
"51": "translate(-13px, 16px) scale(3.2)",
"52": "translate(-2px, 13px) scale(3.2)",
"53": "translate(-6px, 4px) scale(3.1)",
"54": "translate(-15px, 22px) scale(3.6)",
"55": "translate(1px, 14px) scale(3.1)",
default: "scale(2.5)",
};
export default PosePicker;