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