diff --git a/src/app/OutfitControls.js b/src/app/OutfitControls.js index 8a43915..168d98c 100644 --- a/src/app/OutfitControls.js +++ b/src/app/OutfitControls.js @@ -82,6 +82,7 @@ function OutfitControls({ outfitState, dispatchToOutfit }) { setFocusIsLocked(true)} onUnlockFocus={() => setFocusIsLocked(false)} /> diff --git a/src/app/PosePicker.js b/src/app/PosePicker.js index 3fed392..ac1b4dc 100644 --- a/src/app/PosePicker.js +++ b/src/app/PosePicker.js @@ -1,4 +1,6 @@ import React from "react"; +import gql from "graphql-tag"; +import { useQuery } from "@apollo/react-hooks"; import { css, cx } from "emotion"; import { Box, @@ -12,6 +14,7 @@ import { useTheme, } from "@chakra-ui/core"; +import { petAppearanceFragment } from "./useOutfitAppearance"; import { safeImageUrl } from "./util"; // From https://twemoji.twitter.com/, thank you! @@ -21,9 +24,32 @@ import twemojiSick from "../images/twemoji/sick.svg"; import twemojiMasc from "../images/twemoji/masc.svg"; import twemojiFem from "../images/twemoji/fem.svg"; -function PosePicker({ onLockFocus, onUnlockFocus }) { +function PosePicker({ outfitState, onLockFocus, onUnlockFocus }) { const theme = useTheme(); + const { speciesId, colorId } = outfitState; + const { loading, error, poses } = useAvailablePoses({ + speciesId, + colorId, + }); + + 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.isAvailable) + .length; + if (numAvailablePoses <= 1) { + return null; + } + return ( - + - + - + @@ -101,13 +127,13 @@ function PosePicker({ onLockFocus, onUnlockFocus }) { - + - + - + @@ -132,12 +158,16 @@ function Cell({ children, as }) { ); } -function PoseButton({ src }) { +function PoseButton({ pose }) { + if (!pose.isAvailable) { + return null; + } + return (