diff --git a/src/app/WardrobePage/PosePicker.js b/src/app/WardrobePage/PosePicker.js
index d4f244e..b030d26 100644
--- a/src/app/WardrobePage/PosePicker.js
+++ b/src/app/WardrobePage/PosePicker.js
@@ -23,12 +23,14 @@ import {
} from "../components/useOutfitAppearance";
import { OutfitLayers } from "../components/OutfitPreview";
import SupportOnly from "./support/SupportOnly";
+import useSupport from "./support/useSupport";
import { useLocalStorage } from "../util";
// From https://twemoji.twitter.com/, thank you!
import twemojiSmile from "../../images/twemoji/smile.svg";
import twemojiCry from "../../images/twemoji/cry.svg";
import twemojiSick from "../../images/twemoji/sick.svg";
+import twemojiQuestion from "../../images/twemoji/question.svg";
import twemojiMasc from "../../images/twemoji/masc.svg";
import twemojiFem from "../../images/twemoji/fem.svg";
@@ -67,6 +69,7 @@ function PosePicker({
"DTIPosePickerIsInSupportMode",
false
);
+ const { isSupportUser } = useSupport();
// Resize the Popover when we toggle support mode, because it probably will
// affect the content size.
@@ -89,10 +92,12 @@ function PosePicker({
}
// If there's only one pose anyway, don't bother showing a picker!
+ // (Unless we're Support, in which case we want the ability to pop it open to
+ // inspect and label the Unknown poses!)
const numAvailablePoses = Object.values(poseInfos).filter(
(p) => p.isAvailable
).length;
- if (numAvailablePoses <= 1) {
+ if (numAvailablePoses <= 1 && !isSupportUser) {
return null;
}
@@ -147,6 +152,9 @@ function PosePicker({
{getEmotion(pose) === "SICK" && (
)}
+ {getEmotion(pose) === null && (
+
+ )}
@@ -161,11 +169,28 @@ function PosePicker({
dispatchToOutfit={dispatchToOutfit}
/>
) : (
-
+ <>
+
+ {numAvailablePoses <= 1 && (
+
+
+ The empty picker is hidden for most users!
+
+ You can see it because you're a Support user.
+
+
+ )}
+ >
)}
diff --git a/src/app/WardrobePage/support/PosePickerSupport.js b/src/app/WardrobePage/support/PosePickerSupport.js
index 29a25c5..d5963db 100644
--- a/src/app/WardrobePage/support/PosePickerSupport.js
+++ b/src/app/WardrobePage/support/PosePickerSupport.js
@@ -71,6 +71,13 @@ function PosePickerSupport({
) {
id
}
+ unknown: petAppearance(
+ speciesId: $speciesId
+ colorId: $colorId
+ pose: UNKNOWN
+ ) {
+ id
+ }
}
`,
{ variables: { speciesId, colorId } }
@@ -113,6 +120,7 @@ function PosePickerSupport({
HAPPY_FEM: data.happyFem?.id,
SAD_FEM: data.sadFem?.id,
SICK_FEM: data.sickFem?.id,
+ UNKNOWN: data.unknown?.id,
};
const canonicalAppearanceIds = Object.values(
canonicalAppearanceIdsByPose
diff --git a/src/app/WardrobePage/support/useSupport.js b/src/app/WardrobePage/support/useSupport.js
new file mode 100644
index 0000000..0c164ea
--- /dev/null
+++ b/src/app/WardrobePage/support/useSupport.js
@@ -0,0 +1,29 @@
+import * as React from "react";
+
+/**
+ * useSupport returns the Support secret that the server requires for Support
+ * actions... if the user has it set. For most users, this returns nothing!
+ *
+ * Specifically, we return an object of:
+ * - isSupportUser: true iff the `supportSecret` is set
+ * - supportSecret: the secret saved to this device, or null if not set
+ *
+ * To become a Support user, you visit /?supportSecret=..., which saves the
+ * secret to your device.
+ *
+ * Note that this hook doesn't check that the secret is *correct*, so it's
+ * possible that it will return an invalid secret. That's okay, because
+ * the server checks the provided secret for each Support request.
+ */
+function useSupport() {
+ const supportSecret = React.useMemo(
+ () => localStorage.getItem("supportSecret"),
+ []
+ );
+
+ const isSupportUser = supportSecret != null;
+
+ return { isSupportUser, supportSecret };
+}
+
+export default useSupport;
diff --git a/src/app/WardrobePage/support/useSupportSecret.js b/src/app/WardrobePage/support/useSupportSecret.js
index 84fc40d..160d200 100644
--- a/src/app/WardrobePage/support/useSupportSecret.js
+++ b/src/app/WardrobePage/support/useSupportSecret.js
@@ -11,9 +11,16 @@ import * as React from "react";
* Note that this hook doesn't check that the secret is *correct*, so it's
* possible that it will return an invalid secret. That's okay, because
* the server checks the provided secret for each Support request.
+ *
+ * DEPRECATED: Use `useSupport` instead!
*/
function useSupportSecret() {
return React.useMemo(() => localStorage.getItem("supportSecret"), []);
}
+export function useIsSupportUser() {
+ const supportSecret = useSupportSecret();
+ return supportSecret != null;
+}
+
export default useSupportSecret;
diff --git a/src/images/twemoji/question.svg b/src/images/twemoji/question.svg
new file mode 100644
index 0000000..ab6b64b
--- /dev/null
+++ b/src/images/twemoji/question.svg
@@ -0,0 +1 @@
+
\ No newline at end of file