diff --git a/src/app/WardrobePage/PosePicker.js b/src/app/WardrobePage/PosePicker.js
index 09b30a3..fd72e35 100644
--- a/src/app/WardrobePage/PosePicker.js
+++ b/src/app/WardrobePage/PosePicker.js
@@ -30,6 +30,7 @@ import { useLocalStorage } from "../util";
import twemojiSmile from "../../images/twemoji/smile.svg";
import twemojiCry from "../../images/twemoji/cry.svg";
import twemojiSick from "../../images/twemoji/sick.svg";
+import twemojiSunglasses from "../../images/twemoji/sunglasses.svg";
import twemojiQuestion from "../../images/twemoji/question.svg";
import twemojiMasc from "../../images/twemoji/masc.svg";
import twemojiFem from "../../images/twemoji/fem.svg";
@@ -143,18 +144,7 @@ function PosePicker({
isOpen && "is-open"
)}
>
- {getEmotion(pose) === "HAPPY" && (
-
- )}
- {getEmotion(pose) === "SAD" && (
-
- )}
- {getEmotion(pose) === "SICK" && (
-
- )}
- {getEmotion(pose) === null && (
-
- )}
+
@@ -213,76 +203,88 @@ function PosePicker({
function PosePickerTable({ poseInfos, onChange, initialFocusRef }) {
return (
-
-
-
- |
-
-
- |
-
-
- |
-
-
- |
-
-
-
-
-
-
- |
-
-
- |
-
-
- |
-
-
- |
-
-
-
-
- |
-
-
- |
-
-
- |
-
-
- |
-
-
-
+
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+
+ {poseInfos.unconverted.isAvailable && (
+
+ )}
+
);
}
@@ -315,14 +317,24 @@ const GENDER_PRESENTATION_STRINGS = {
SICK_FEM: "Feminine",
};
-function PoseOption({ poseInfo, onChange, inputRef }) {
+function PoseOption({
+ poseInfo,
+ onChange,
+ inputRef,
+ size = "50px",
+ label,
+ ...otherProps
+}) {
const theme = useTheme();
const genderPresentationStr = GENDER_PRESENTATION_STRINGS[poseInfo.pose];
const emotionStr = EMOTION_STRINGS[poseInfo.pose];
- let label = `${emotionStr} and ${genderPresentationStr}`;
+ let poseName =
+ poseInfo.pose === "UNCONVERTED"
+ ? "Unconverted"
+ : `${emotionStr} and ${genderPresentationStr}`;
if (!poseInfo.isAvailable) {
- label += ` (not modeled yet)`;
+ poseName += ` (not modeled yet)`;
}
const borderColor = useColorModeValue(
@@ -334,16 +346,24 @@ function PoseOption({ poseInfo, onChange, inputRef }) {
{
// HACK: We need the timeout to beat the popover's focus stealing!
const input = e.currentTarget.querySelector("input");
setTimeout(() => input.focus(), 0);
}}
+ {...otherProps}
>
{poseInfo.isAvailable ? (
-
+
) : (
-
-
- ?
-
+
+
)}
+ {label && (
+
+ {label}
+
+ )}
);
}
-function EmojiImage({ src, alt }) {
- return ;
+function EmojiImage({ src, alt, boxSize = "16px" }) {
+ return ;
}
function usePoses(speciesId, colorId, selectedPose) {
@@ -484,6 +500,13 @@ function usePoses(speciesId, colorId, selectedPose) {
) {
...PetAppearanceForPosePicker
}
+ unconverted: petAppearance(
+ speciesId: $speciesId
+ colorId: $colorId
+ pose: UNCONVERTED
+ ) {
+ ...PetAppearanceForPosePicker
+ }
}
fragment PetAppearanceForPosePicker on PetAppearance {
@@ -500,53 +523,76 @@ function usePoses(speciesId, colorId, selectedPose) {
const poseInfos = {
happyMasc: {
...data?.happyMasc,
+ pose: "HAPPY_MASC",
isAvailable: Boolean(data?.happyMasc),
isSelected: selectedPose === "HAPPY_MASC",
},
sadMasc: {
...data?.sadMasc,
+ pose: "SAD_MASC",
isAvailable: Boolean(data?.sadMasc),
isSelected: selectedPose === "SAD_MASC",
},
sickMasc: {
...data?.sickMasc,
+ pose: "SICK_MASC",
isAvailable: Boolean(data?.sickMasc),
isSelected: selectedPose === "SICK_MASC",
},
happyFem: {
...data?.happyFem,
+ pose: "HAPPY_FEM",
isAvailable: Boolean(data?.happyFem),
isSelected: selectedPose === "HAPPY_FEM",
},
sadFem: {
...data?.sadFem,
+ pose: "SAD_FEM",
isAvailable: Boolean(data?.sadFem),
isSelected: selectedPose === "SAD_FEM",
},
sickFem: {
...data?.sickFem,
+ pose: "SICK_FEM",
isAvailable: Boolean(data?.sickFem),
isSelected: selectedPose === "SICK_FEM",
},
+ unconverted: {
+ ...data?.unconverted,
+ pose: "UNCONVERTED",
+ isAvailable: Boolean(data?.unconverted),
+ isSelected: selectedPose === "UNCONVERTED",
+ },
};
return { loading, error, poseInfos };
}
-function getEmotion(pose) {
+function getIcon(pose) {
if (["HAPPY_MASC", "HAPPY_FEM"].includes(pose)) {
- return "HAPPY";
+ return twemojiSmile;
} else if (["SAD_MASC", "SAD_FEM"].includes(pose)) {
- return "SAD";
+ return twemojiCry;
} else if (["SICK_MASC", "SICK_FEM"].includes(pose)) {
- return "SICK";
- } else if (["UNCONVERTED", "UNKNOWN"].includes(pose)) {
- return null;
+ return twemojiSick;
+ } else if (pose === "UNCONVERTED") {
+ return twemojiSunglasses;
} else {
- throw new Error(`unrecognized pose ${JSON.stringify(pose)}`);
+ return twemojiQuestion;
}
}
+function getTransform(poseInfo) {
+ const { pose, bodyId } = poseInfo;
+ if (pose === "UNCONVERTED") {
+ return transformsByBodyId.default;
+ }
+ if (bodyId in transformsByBodyId) {
+ return transformsByBodyId[bodyId];
+ }
+ return transformsByBodyId.default;
+}
+
const transformsByBodyId = {
"93": "translate(-5px, 10px) scale(2.8)",
"106": "translate(-8px, 8px) scale(2.9)",
diff --git a/src/app/components/SpeciesColorPicker.js b/src/app/components/SpeciesColorPicker.js
index dedc8a9..53472e8 100644
--- a/src/app/components/SpeciesColorPicker.js
+++ b/src/app/components/SpeciesColorPicker.js
@@ -243,8 +243,7 @@ function getValidPoses(valids, speciesId, colorId) {
if (pairByte & 0b00001000) validPoses.add("HAPPY_FEM");
if (pairByte & 0b00010000) validPoses.add("SAD_FEM");
if (pairByte & 0b00100000) validPoses.add("SICK_FEM");
- // TODO: Add unconverted support!
- // if (pairByte & 0b01000000) validPoses.add("UNCONVERTED");
+ if (pairByte & 0b01000000) validPoses.add("UNCONVERTED");
if (pairByte & 0b10000000) validPoses.add("UNKNOWN");
return validPoses;
diff --git a/src/images/twemoji/sunglasses.svg b/src/images/twemoji/sunglasses.svg
new file mode 100644
index 0000000..fff644a
--- /dev/null
+++ b/src/images/twemoji/sunglasses.svg
@@ -0,0 +1 @@
+
\ No newline at end of file