better handling of missing poses

src/app/OutfitPreview.js

@@ -25,14 +25,20 @@ function OutfitPreview({ outfitState }) {
     );
   }
 
-  return <OutfitLayers loading={loading} visibleLayers={visibleLayers} />;
+  return (
+    <OutfitLayers
+      loading={loading}
+      visibleLayers={visibleLayers}
+      doAnimations
+    />
+  );
 }
 
 /**
  * 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 (
     <Box pos="relative" height="100%" width="100%">
       <TransitionGroup>
@@ -41,6 +47,7 @@ export function OutfitLayers({ loading, visibleLayers }) {
           // happens here, when the layer exits the DOM.
           <CSSTransition
             key={layer.id}
+            exit={doAnimations}
             classNames={css`
               &-exit {
                 opacity: 1;
@@ -62,14 +69,17 @@ export function OutfitLayers({ loading, visibleLayers }) {
                 // We manage the fade-in and fade-out separately! The fade-in
                 // happens here, when the <Image> finishes preloading and
                 // applies the src to the underlying <img>.
-                className={css`
+                className={
-                  opacity: 0.01;
+                  doAnimations &&
+                  css`
+                    opacity: 0.01;
 
-                  &[src] {
+                    &[src] {
-                    opacity: 1;
+                      opacity: 1;
-                    transition: opacity 0.2s;
+                      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

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 (
     <Box
       as="label"
@@ -228,24 +229,28 @@ function PoseButton({ pose, onChange, inputRef }) {
       <VisuallyHidden
         as="input"
         type="radio"
-        aria-label={`${emotionStr} and ${genderPresentationStr}`}
+        aria-label={label}
         name="pose"
         value={`${pose.emotion}-${pose.genderPresentation}`}
         checked={pose.isSelected}
+        disabled={!pose.isAvailable}
         onChange={onChange}
         ref={inputRef || null}
       />
       <Box
+        aria-hidden
         rounded="full"
         boxShadow="md"
         overflow="hidden"
         width="50px"
         height="50px"
         title={
-          // A lil debug output, so that we can quickly identify glitched
+          pose.isAvailable
-          // PetStates and manually mark them as glitched!
+            ? // A lil debug output, so that we can quickly identify glitched
-          window.location.hostname.includes("localhost") &&
+              // PetStates and manually mark them as glitched!
-          `#${pose.petStateId}`
+              window.location.hostname.includes("localhost") &&
+              `#${pose.petStateId}`
+            : "Not modeled yet"
         }
         position="relative"
         className={css`
@@ -267,29 +272,50 @@ function PoseButton({ pose, onChange, inputRef }) {
           left="0"
           right="0"
           zIndex="2"
-          className={css`
+          className={cx(
-            border: 0px solid ${theme.colors.green["600"]};
+            css`
-            transition: border-width 0.2s;
+              border: 0px solid ${theme.colors.green["600"]};
+              transition: border-width 0.2s;
 
-            input:checked + * & {
+              &.not-available {
-              border-width: 1px;
+                border-color: ${theme.colors.gray["500"]};
-            }
+                border-width: 1px;
+              }
 
-            input:focus + * & {
+              input:checked + * & {
-              border-width: 3px;
+                border-width: 1px;
-            }
+              }
-          `}
+
+              input:focus + * & {
+                border-width: 3px;
+              }
+            `,
+            !pose.isAvailable && "not-available"
+          )}
         />
-        <Box
+        {pose.isAvailable ? (
-          width="50px"
+          <Box
-          height="50px"
+            width="50px"
-          transform={
+            height="50px"
-            transformsBySpeciesId[pose.speciesId] ||
+            transform={
-            transformsBySpeciesId.default
+              transformsBySpeciesId[pose.speciesId] ||
-          }
+              transformsBySpeciesId.default
-        >
+            }
-          <OutfitLayers visibleLayers={getVisibleLayers(pose, [])} />
+          >
-        </Box>
+            <OutfitLayers visibleLayers={getVisibleLayers(pose, [])} />
+          </Box>
+        ) : (
+          <Flex align="center" justify="center">
+            <Box
+              fontFamily="Delicious"
+              fontSize="3xl"
+              fontWeight="900"
+              color="gray.600"
+            >
+              ?
+            </Box>
+          </Flex>
+        )}
       </Box>
     </Box>
   );
@@ -320,15 +346,18 @@ function usePoses(outfitState) {
   );
 
   const petAppearances = data?.petAppearances || [];
-  const buildPose = (e, gp) => ({
+  const buildPose = (e, gp) => {
-    ...petAppearances.find(
+    const appearance = petAppearances.find(
       (pa) => pa.emotion === e && pa.genderPresentation === gp
-    ),
+    );
-    speciesId,
+    return {
-    isSelected:
+      ...appearance,
-      outfitState.emotion === e && outfitState.genderPresentation === gp,
+      speciesId,
-  });
+      isAvailable: Boolean(appearance),
-  console.log(outfitState.emotion, outfitState.genderPresentation, outfitState);
+      isSelected:
+        outfitState.emotion === e && outfitState.genderPresentation === gp,
+    };
+  };
 
   const poses = {
     happyMasc: buildPose("HAPPY", "MASCULINE"),