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"),