From da0398b50b28e83f859b4c90a2b0c4ac81457e19 Mon Sep 17 00:00:00 2001 From: Matt Dunn-Rankin Date: Sun, 3 May 2020 12:55:37 -0700 Subject: [PATCH] use bodyId, not speciesId, for pose transforms --- dev-todos.txt | 1 + src/app/PosePicker.js | 117 +++++++++--------- src/server/index.js | 2 + src/server/query-tests/PetAppearance.test.js | 1 + .../__snapshots__/PetAppearance.test.js.snap | 8 ++ 5 files changed, 70 insertions(+), 59 deletions(-) diff --git a/dev-todos.txt b/dev-todos.txt index c3084bd..bb6cac1 100644 --- a/dev-todos.txt +++ b/dev-todos.txt @@ -12,3 +12,4 @@ Tech/detail improvements: * Use react-virtualized instead of our own scroller, but we need total count known, and we need another solution for the CSS transitions in the outfit case * Restore good download behavior: use crossOrigin for everything, and remove cache-buster in the URL we use for canvas * Undo the local linking we did for @chakra-ui/core, react, and react-dom on Matchu's machine 😅 + * validPetPoses should declare its own dimensions, so that misaligned caches won't misalign the data diff --git a/src/app/PosePicker.js b/src/app/PosePicker.js index 6e4bc50..2e3fa99 100644 --- a/src/app/PosePicker.js +++ b/src/app/PosePicker.js @@ -306,8 +306,7 @@ function PoseButton({ pose, onChange, inputRef }) { width="50px" height="50px" transform={ - transformsBySpeciesId[pose.speciesId] || - transformsBySpeciesId.default + transformsByBodyId[pose.bodyId] || transformsByBodyId.default } > @@ -342,6 +341,7 @@ function usePoses(outfitState) { petAppearances(speciesId: $speciesId, colorId: $colorId) { id petStateId + bodyId genderPresentation emotion approximateThumbnailUrl @@ -360,7 +360,6 @@ function usePoses(outfitState) { ); return { ...appearance, - speciesId, isAvailable: Boolean(appearance), isSelected: outfitState.emotion === e && outfitState.genderPresentation === gp, @@ -379,62 +378,62 @@ function usePoses(outfitState) { return { loading, error, poses }; } -const transformsBySpeciesId = { - "1": "translate(-5px, 10px) scale(2.8)", - "2": "translate(-8px, 8px) scale(2.9)", - "3": "translate(-1px, 17px) scale(3)", - "4": "translate(-21px, 22px) scale(3.2)", - "5": "translate(2px, 15px) scale(3.3)", - "6": "translate(-14px, 28px) scale(3.4)", - "7": "translate(-4px, 8px) scale(2.9)", - "8": "translate(-26px, 30px) scale(3.0)", - "9": "translate(-4px, 8px) scale(3.1)", - "10": "translate(-14px, 18px) scale(3.0)", - "11": "translate(-7px, 24px) scale(2.9)", - "12": "translate(-16px, 20px) scale(3.5)", - "13": "translate(-11px, 18px) scale(3.0)", - "14": "translate(-14px, 26px) scale(3.5)", - "15": "translate(-13px, 24px) scale(3.1)", - "16": "translate(-6px, 29px) scale(3.1)", - "17": "translate(3px, 13px) scale(3.1)", - "18": "translate(2px, 27px) scale(3.4)", - "19": "translate(-7px, 16px) scale(3.1)", - "20": "translate(-2px, 15px) scale(3.0)", - "21": "translate(-2px, -17px) scale(3.0)", - "22": "translate(-14px, 16px) scale(3.6)", - "23": "translate(-16px, 16px) scale(3.2)", - "24": "translate(-2px, 6px) scale(3.2)", - "25": "translate(-3px, 6px) scale(3.7)", - "26": "translate(-7px, 19px) scale(5.2)", - "27": "translate(-16px, 20px) scale(3.5)", - "28": "translate(-3px, 24px) scale(3.2)", - "29": "translate(-9px, 15px) scale(3.4)", - "30": "translate(3px, 57px) scale(4.4)", - "31": "translate(-28px, 35px) scale(3.8)", - "32": "translate(-8px, 33px) scale(3.5)", - "33": "translate(-8px, -6px) scale(3.2)", - "34": "translate(-14px, 14px) scale(3.1)", - "35": "translate(-12px, 0px) scale(3.4)", - "36": "translate(6px, 23px) scale(3.3)", - "37": "translate(-20px, 25px) scale(3.6)", - "38": "translate(-16px, 28px) scale(4.0)", - "39": "translate(-8px, 11px) scale(3.0)", - "40": "translate(2px, 12px) scale(3.5)", - "41": "translate(-3px, 18px) scale(3.0)", - "42": "translate(-18px, 46px) scale(4.4)", - "43": "translate(-6px, 22px) scale(3.2)", - "44": "translate(-2px, 19px) scale(3.4)", - "45": "translate(-11px, 32px) scale(3.3)", - "46": "translate(-13px, 23px) scale(3.3)", - "47": "translate(-14px, 4px) scale(3.1)", - "48": "translate(-9px, 24px) scale(3.5)", - "49": "translate(-14px, 25px) scale(3.4)", - "50": "translate(-7px, 4px) scale(3.6)", - "51": "translate(-13px, 16px) scale(3.2)", - "52": "translate(-2px, 13px) scale(3.2)", - "53": "translate(-6px, 4px) scale(3.1)", - "54": "translate(-15px, 22px) scale(3.6)", - "55": "translate(1px, 14px) scale(3.1)", +const transformsByBodyId = { + "93": "translate(-5px, 10px) scale(2.8)", + "106": "translate(-8px, 8px) scale(2.9)", + "47": "translate(-1px, 17px) scale(3)", + "84": "translate(-21px, 22px) scale(3.2)", + "146": "translate(2px, 15px) scale(3.3)", + "250": "translate(-14px, 28px) scale(3.4)", + "212": "translate(-4px, 8px) scale(2.9)", + "74": "translate(-26px, 30px) scale(3.0)", + "94": "translate(-4px, 8px) scale(3.1)", + "132": "translate(-14px, 18px) scale(3.0)", + "56": "translate(-7px, 24px) scale(2.9)", + "90": "translate(-16px, 20px) scale(3.5)", + "136": "translate(-11px, 18px) scale(3.0)", + "138": "translate(-14px, 26px) scale(3.5)", + "166": "translate(-13px, 24px) scale(3.1)", + "119": "translate(-6px, 29px) scale(3.1)", + "126": "translate(3px, 13px) scale(3.1)", + "67": "translate(2px, 27px) scale(3.4)", + "163": "translate(-7px, 16px) scale(3.1)", + "147": "translate(-2px, 15px) scale(3.0)", + "80": "translate(-2px, -17px) scale(3.0)", + "117": "translate(-14px, 16px) scale(3.6)", + "201": "translate(-16px, 16px) scale(3.2)", + "51": "translate(-2px, 6px) scale(3.2)", + "208": "translate(-3px, 6px) scale(3.7)", + "196": "translate(-7px, 19px) scale(5.2)", + "143": "translate(-16px, 20px) scale(3.5)", + "150": "translate(-3px, 24px) scale(3.2)", + "175": "translate(-9px, 15px) scale(3.4)", + "173": "translate(3px, 57px) scale(4.4)", + "199": "translate(-28px, 35px) scale(3.8)", + "52": "translate(-8px, 33px) scale(3.5)", + "109": "translate(-8px, -6px) scale(3.2)", + "134": "translate(-14px, 14px) scale(3.1)", + "95": "translate(-12px, 0px) scale(3.4)", + "96": "translate(6px, 23px) scale(3.3)", + "154": "translate(-20px, 25px) scale(3.6)", + "55": "translate(-16px, 28px) scale(4.0)", + "76": "translate(-8px, 11px) scale(3.0)", + "156": "translate(2px, 12px) scale(3.5)", + "78": "translate(-3px, 18px) scale(3.0)", + "191": "translate(-18px, 46px) scale(4.4)", + "187": "translate(-6px, 22px) scale(3.2)", + "46": "translate(-2px, 19px) scale(3.4)", + "178": "translate(-11px, 32px) scale(3.3)", + "100": "translate(-13px, 23px) scale(3.3)", + "130": "translate(-14px, 4px) scale(3.1)", + "188": "translate(-9px, 24px) scale(3.5)", + "257": "translate(-14px, 25px) scale(3.4)", + "206": "translate(-7px, 4px) scale(3.6)", + "101": "translate(-13px, 16px) scale(3.2)", + "68": "translate(-2px, 13px) scale(3.2)", + "182": "translate(-6px, 4px) scale(3.1)", + "180": "translate(-15px, 22px) scale(3.6)", + "306": "translate(1px, 14px) scale(3.1)", default: "scale(2.5)", }; diff --git a/src/server/index.js b/src/server/index.js index 4bb451e..6795234 100644 --- a/src/server/index.js +++ b/src/server/index.js @@ -49,6 +49,7 @@ const typeDefs = gql` type PetAppearance { id: ID! petStateId: ID! + bodyId: ID! genderPresentation: GenderPresentation emotion: Emotion approximateThumbnailUrl: String! @@ -173,6 +174,7 @@ const resolvers = { return `${speciesId}-${colorId}-${emotion}-${genderPresentation}`; }, petStateId: ({ petState }) => petState.id, + bodyId: ({ petType }) => petType.bodyId, genderPresentation: ({ petState }) => getGenderPresentation(petState.female), emotion: ({ petState }) => getEmotion(petState.moodId), diff --git a/src/server/query-tests/PetAppearance.test.js b/src/server/query-tests/PetAppearance.test.js index 87b806d..ea23c40 100644 --- a/src/server/query-tests/PetAppearance.test.js +++ b/src/server/query-tests/PetAppearance.test.js @@ -74,6 +74,7 @@ describe("PetAppearance", () => { query { petAppearances(speciesId: "54", colorId: "75") { id + bodyId petStateId genderPresentation emotion diff --git a/src/server/query-tests/__snapshots__/PetAppearance.test.js.snap b/src/server/query-tests/__snapshots__/PetAppearance.test.js.snap index 2c9b76f..aed0832 100644 --- a/src/server/query-tests/__snapshots__/PetAppearance.test.js.snap +++ b/src/server/query-tests/__snapshots__/PetAppearance.test.js.snap @@ -56,6 +56,7 @@ Object { "petAppearances": Array [ Object { "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/1/1.png", + "bodyId": "180", "emotion": "HAPPY", "genderPresentation": "FEMININE", "id": "54-75-HAPPY-FEMININE", @@ -107,6 +108,7 @@ Object { }, Object { "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/1/1.png", + "bodyId": "180", "emotion": "HAPPY", "genderPresentation": "MASCULINE", "id": "54-75-HAPPY-MASCULINE", @@ -158,6 +160,7 @@ Object { }, Object { "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/4/1.png", + "bodyId": "180", "emotion": "SICK", "genderPresentation": "FEMININE", "id": "54-75-SICK-FEMININE", @@ -209,6 +212,7 @@ Object { }, Object { "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/4/1.png", + "bodyId": "180", "emotion": "SICK", "genderPresentation": "MASCULINE", "id": "54-75-SICK-MASCULINE", @@ -260,6 +264,7 @@ Object { }, Object { "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/2/1.png", + "bodyId": "180", "emotion": "SAD", "genderPresentation": "FEMININE", "id": "54-75-SAD-FEMININE", @@ -311,6 +316,7 @@ Object { }, Object { "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/2/1.png", + "bodyId": "180", "emotion": "SAD", "genderPresentation": "MASCULINE", "id": "54-75-SAD-MASCULINE", @@ -362,6 +368,7 @@ Object { }, Object { "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/null/1.png", + "bodyId": "180", "emotion": null, "genderPresentation": null, "id": "54-75-null-null", @@ -420,6 +427,7 @@ Object { }, Object { "approximateThumbnailUrl": "http://pets.neopets.com/cp/vghhzlgf/null/1.png", + "bodyId": "180", "emotion": null, "genderPresentation": null, "id": "54-75-null-null",