diff --git a/src/app/OutfitPreview.js b/src/app/OutfitPreview.js index 6bd3f48..7699bdb 100644 --- a/src/app/OutfitPreview.js +++ b/src/app/OutfitPreview.js @@ -25,14 +25,20 @@ function OutfitPreview({ outfitState }) { ); } - return ; + return ( + + ); } /** * OutfitLayers is the raw UI component for rendering outfit layers. It's * used both in the main outfit preview, and in other minor UIs! */ -export function OutfitLayers({ loading, visibleLayers }) { +export function OutfitLayers({ loading, visibleLayers, doAnimations = false }) { return ( @@ -41,6 +47,7 @@ export function OutfitLayers({ loading, visibleLayers }) { // happens here, when the layer exits the DOM. finishes preloading and // applies the src to the underlying . - className={css` - opacity: 0.01; + className={ + doAnimations && + css` + opacity: 0.01; - &[src] { - opacity: 1; - transition: opacity 0.2s; - } - `} + &[src] { + opacity: 1; + transition: opacity 0.2s; + } + ` + } // This sets up the cache to not need to reload images during // download! // TODO: Re-enable this once we get our change into Chakra diff --git a/src/app/PosePicker.js b/src/app/PosePicker.js index 4d9eaab..6afbc74 100644 --- a/src/app/PosePicker.js +++ b/src/app/PosePicker.js @@ -46,7 +46,8 @@ function PosePicker({ } // If there's only one pose anyway, don't bother showing a picker! - const numAvailablePoses = Object.values(poses).filter((p) => p).length; + const numAvailablePoses = Object.values(poses).filter((p) => p.isAvailable) + .length; if (numAvailablePoses <= 1) { return null; } @@ -206,15 +207,15 @@ const GENDER_PRESENTATION_STRINGS = { 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]; + let label = `${emotionStr} and ${genderPresentationStr}`; + if (!pose.isAvailable) { + label += ` (not modeled yet)`; + } + return ( - - - + {pose.isAvailable ? ( + + + + ) : ( + + + ? + + + )} ); @@ -320,15 +346,18 @@ function usePoses(outfitState) { ); const petAppearances = data?.petAppearances || []; - const buildPose = (e, gp) => ({ - ...petAppearances.find( + const buildPose = (e, gp) => { + const appearance = petAppearances.find( (pa) => pa.emotion === e && pa.genderPresentation === gp - ), - speciesId, - isSelected: - outfitState.emotion === e && outfitState.genderPresentation === gp, - }); - console.log(outfitState.emotion, outfitState.genderPresentation, outfitState); + ); + return { + ...appearance, + speciesId, + isAvailable: Boolean(appearance), + isSelected: + outfitState.emotion === e && outfitState.genderPresentation === gp, + }; + }; const poses = { happyMasc: buildPose("HAPPY", "MASCULINE"),