diff --git a/src/app/OutfitPreview.js b/src/app/OutfitPreview.js
index 6628e26..6bd3f48 100644
--- a/src/app/OutfitPreview.js
+++ b/src/app/OutfitPreview.js
@@ -25,6 +25,14 @@ function OutfitPreview({ outfitState }) {
);
}
+ 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 }) {
return (
diff --git a/src/app/PosePicker.js b/src/app/PosePicker.js
index ac1b4dc..2c42efe 100644
--- a/src/app/PosePicker.js
+++ b/src/app/PosePicker.js
@@ -14,8 +14,7 @@ import {
useTheme,
} from "@chakra-ui/core";
-import { petAppearanceFragment } from "./useOutfitAppearance";
-import { safeImageUrl } from "./util";
+import { getVisibleLayers, petAppearanceFragment } from "./useOutfitAppearance";
// From https://twemoji.twitter.com/, thank you!
import twemojiSmile from "../images/twemoji/smile.svg";
@@ -23,6 +22,8 @@ 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";
+import { safeImageUrl } from "./util";
function PosePicker({ outfitState, onLockFocus, onUnlockFocus }) {
const theme = useTheme();
@@ -44,8 +45,7 @@ function PosePicker({ outfitState, onLockFocus, onUnlockFocus }) {
}
// If there's only one pose anyway, don't bother showing a picker!
- const numAvailablePoses = Object.values(poses).filter((p) => p.isAvailable)
- .length;
+ const numAvailablePoses = Object.values(poses).filter((p) => p).length;
if (numAvailablePoses <= 1) {
return null;
}
@@ -113,13 +113,16 @@ function PosePicker({ outfitState, onLockFocus, onUnlockFocus }) {
-
+
|
-
+
|
-
+
|
@@ -127,13 +130,13 @@ function PosePicker({ outfitState, onLockFocus, onUnlockFocus }) {
-
+
|
-
+
|
-
+
|
@@ -158,27 +161,30 @@ function Cell({ children, as }) {
);
}
-function PoseButton({ pose }) {
- if (!pose.isAvailable) {
+function PoseButton({ pose, speciesId }) {
+ if (!pose) {
return null;
}
return (
-
-