load special colors into support UI

src/app/WardrobePage/Item.js

@@ -57,7 +57,7 @@ export function Item({ item, itemNameId, outfitState, dispatchToOutfit }) {
           <SupportOnly>
             <ItemActionButton
               icon={<EditIcon />}
-              label="Edit"
+              label="Support"
               onClick={() => setSupportDrawerIsOpen(true)}
             />
           </SupportOnly>

src/app/WardrobePage/support/ItemSupportDrawer.js

@@ -1,4 +1,6 @@
 import * as React from "react";
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/react-hooks";
 import {
   Badge,
   Box,
@@ -9,10 +11,13 @@ import {
   DrawerHeader,
   DrawerOverlay,
   FormControl,
+  FormErrorMessage,
   FormHelperText,
   FormLabel,
   Link,
   Select,
+  Spinner,
+  useBreakpointValue,
 } from "@chakra-ui/core";
 import { ExternalLinkIcon } from "@chakra-ui/icons";
 
@@ -23,9 +28,22 @@ import { ExternalLinkIcon } from "@chakra-ui/icons";
  * from another lazy-loaded component!
  */
 function ItemSupportDrawer({ item, isOpen, onClose }) {
+  const placement = useBreakpointValue({
+    base: "bottom",
+    lg: "right",
+
+    // TODO: There's a bug in the Chakra RC that doesn't read the breakpoint
+    // specification correctly - we need these extra keys until it's fixed!
+    // https://github.com/chakra-ui/chakra-ui/issues/1444
+    0: "bottom",
+    1: "bottom",
+    2: "right",
+    3: "right",
+  });
+
   return (
     <Drawer
-      placement="bottom"
+      placement={placement}
       isOpen={isOpen}
       onClose={onClose}
       // blockScrollOnMount doesn't matter on our fullscreen UI, but the
@@ -37,7 +55,7 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
           <DrawerCloseButton />
           <DrawerHeader>
             {item.name}
-            <Badge colorScheme="purple" marginLeft="3">
+            <Badge colorScheme="pink" marginLeft="3">
               Support <span aria-hidden="true">💖</span>
             </Badge>
           </DrawerHeader>
@@ -53,26 +71,48 @@ function ItemSupportDrawer({ item, isOpen, onClose }) {
 }
 
 function SpecialColorFields({ item }) {
+  const { loading, error, data } = useQuery(gql`
+    query ItemSupportDrawer {
+      allColors {
+        id
+        name
+        isStandard
+      }
+    }
+  `);
+
+  const nonStandardColors = data?.allColors?.filter((c) => !c.isStandard) || [];
+  nonStandardColors.sort((a, b) => a.name.localeCompare(b.name));
+
   return (
-    <FormControl>
+    <FormControl isInvalid={error ? true : false}>
       <FormLabel>Special color</FormLabel>
-      <Select placeholder="Default: Auto-detect from item description">
+      <Select
-        <option>Mutant</option>
+        placeholder="Default: Auto-detect from item description"
-        <option>Maraquan</option>
+        icon={loading ? <Spinner /> : undefined}
+      >
+        {nonStandardColors.map((color) => (
+          <option key={color.id} value={color.id}>
+            {color.name}
+          </option>
+        ))}
       </Select>
-      <FormHelperText>
+      {error && <FormErrorMessage>{error.message}</FormErrorMessage>}
-        This controls which previews we show on the{" "}
+      {!error && (
-        <Link
+        <FormHelperText>
-          href={`https://impress.openneo.net/items/${
+          This controls which previews we show on the{" "}
-            item.id
+          <Link
-          }-${item.name.replace(/ /g, "-")}`}
+            href={`https://impress.openneo.net/items/${
-          color="green.500"
+              item.id
-          isExternal
+            }-${item.name.replace(/ /g, "-")}`}
-        >
+            color="green.500"
-          item page <ExternalLinkIcon />
+            isExternal
-        </Link>
+          >
-        .
+            item page <ExternalLinkIcon />
-      </FormHelperText>
+          </Link>
+          .
+        </FormHelperText>
+      )}
     </FormControl>
   );
 }

src/app/components/SpeciesColorPicker.js

@@ -29,6 +29,7 @@ function SpeciesColorPicker({
       allColors {
         id
         name
+        isStandard # Not used here, but helpful for caching!
       }
     }
   `);

src/server/index.js

@@ -116,6 +116,7 @@ const typeDefs = gql`
   type Color @cacheControl(maxAge: 604800) {
     id: ID!
     name: String!
+    isStandard: Boolean!
   }
 
   # Cache for 1 week (unlikely to change)
@@ -330,6 +331,10 @@ const resolvers = {
       const colorTranslation = await colorTranslationLoader.load(id);
       return capitalize(colorTranslation.name);
     },
+    isStandard: async ({ id }, _, { colorLoader }) => {
+      const color = await colorLoader.load(id);
+      return color.standard ? true : false;
+    },
   },
   Species: {
     name: async ({ id }, _, { speciesTranslationLoader }) => {
@@ -360,8 +365,8 @@ const resolvers = {
     },
   },
   Query: {
-    allColors: async (_, { ids }, { loadAllColors }) => {
+    allColors: async (_, { ids }, { colorLoader }) => {
-      const allColors = await loadAllColors();
+      const allColors = await colorLoader.loadAll();
       return allColors;
     },
     allSpecies: async (_, { ids }, { loadAllSpecies }) => {
@@ -430,6 +435,7 @@ const resolvers = {
         colorId,
       });
       const petStates = await petStatesForPetTypeLoader.load(petType.id);
+      petStates.sort((a, b) => a.id - b.id);
       return petStates.map((petState) => ({ petStateId: petState.id }));
     },
     outfit: (_, { id }) => ({ id }),

src/server/loaders.js

@@ -1,10 +1,36 @@
 const DataLoader = require("dataloader");
 const { normalizeRow } = require("./util");
 
-const loadAllColors = (db) => async () => {
+const buildColorLoader = (db) => {
-  const [rows, _] = await db.execute(`SELECT * FROM colors WHERE prank = 0`);
+  const colorLoader = new DataLoader(async (colorIds) => {
-  const entities = rows.map(normalizeRow);
+    const qs = colorIds.map((_) => "?").join(",");
-  return entities;
+    const [rows, _] = await db.execute(
+      `SELECT * FROM colors WHERE id IN (${qs}) AND prank = 0`,
+      colorIds
+    );
+
+    const entities = rows.map(normalizeRow);
+    const entitiesByColorId = new Map(entities.map((e) => [e.id, e]));
+
+    return colorIds.map(
+      (colorId) =>
+        entitiesByColorId.get(String(colorId)) ||
+        new Error(`could not find color ${colorId}`)
+    );
+  });
+
+  colorLoader.loadAll = async () => {
+    const [rows, _] = await db.execute(`SELECT * FROM colors WHERE prank = 0`);
+    const entities = rows.map(normalizeRow);
+
+    for (const color of entities) {
+      colorLoader.prime(color.id, color);
+    }
+
+    return entities;
+  };
+
+  return colorLoader;
 };
 
 const buildColorTranslationLoader = (db) =>
@@ -22,7 +48,7 @@ const buildColorTranslationLoader = (db) =>
     return colorIds.map(
       (colorId) =>
         entitiesByColorId.get(String(colorId)) ||
-        new Error(`could not find translation for species ${colorId}`)
+        new Error(`could not find translation for color ${colorId}`)
     );
   });
 
@@ -72,7 +98,8 @@ const buildItemLoader = (db) =>
 
     return ids.map(
       (id) =>
-        entitiesById.get(String(id)) || new Error(`could not find item with ID: ${id}`)
+        entitiesById.get(String(id)) ||
+        new Error(`could not find item with ID: ${id}`)
     );
   });
 
@@ -347,10 +374,10 @@ const buildZoneTranslationLoader = (db) =>
 
 function buildLoaders(db) {
   const loaders = {};
-  loaders.loadAllColors = loadAllColors(db);
   loaders.loadAllSpecies = loadAllSpecies(db);
   loaders.loadAllPetTypes = loadAllPetTypes(db);
 
+  loaders.colorLoader = buildColorLoader(db);
   loaders.colorTranslationLoader = buildColorTranslationLoader(db);
   loaders.itemLoader = buildItemLoader(db);
   loaders.itemTranslationLoader = buildItemTranslationLoader(db);

src/server/query-tests/Color.test.js

@@ -9,6 +9,7 @@ describe("Color", () => {
           allColors {
             id
             name
+            isStandard
           }
         }
       `,

src/server/query-tests/PetAppearance.test.js

@@ -17,6 +17,7 @@ describe("PetAppearance", () => {
             color {
               id
               name
+              isStandard
             }
 
             layers {
@@ -43,14 +44,6 @@ describe("PetAppearance", () => {
             "75",
           ],
         ],
-        Array [
-          "SELECT * FROM pet_states
-             WHERE pet_type_id IN (?) AND glitched = 0
-             ORDER BY (mood_id = 1) DESC",
-          Array [
-            "2",
-          ],
-        ],
         Array [
           "SELECT sa.*, rel.parent_id FROM swf_assets sa
              INNER JOIN parents_swf_assets rel ON
@@ -75,6 +68,12 @@ describe("PetAppearance", () => {
             "75",
           ],
         ],
+        Array [
+          "SELECT * FROM colors WHERE id IN (?) AND prank = 0",
+          Array [
+            "75",
+          ],
+        ],
         Array [
           "SELECT * FROM zones WHERE id IN (?,?,?,?,?,?)",
           Array [
@@ -86,6 +85,14 @@ describe("PetAppearance", () => {
             "34",
           ],
         ],
+        Array [
+          "SELECT * FROM pet_states
+             WHERE pet_type_id IN (?) AND glitched = 0
+             ORDER BY (mood_id = 1) DESC",
+          Array [
+            "2",
+          ],
+        ],
       ]
     `);
   });
@@ -133,6 +140,47 @@ describe("PetAppearance", () => {
             "75",
           ],
         ],
+        Array [
+          "SELECT sa.*, rel.parent_id FROM swf_assets sa
+             INNER JOIN parents_swf_assets rel ON
+               rel.parent_type = \\"PetState\\" AND
+               rel.swf_asset_id = sa.id
+             WHERE rel.parent_id IN (?)",
+          Array [
+            "17723",
+          ],
+        ],
+        Array [
+          "SELECT * FROM species_translations
+             WHERE species_id IN (?) AND locale = \\"en\\"",
+          Array [
+            "54",
+          ],
+        ],
+        Array [
+          "SELECT * FROM color_translations
+             WHERE color_id IN (?) AND locale = \\"en\\"",
+          Array [
+            "75",
+          ],
+        ],
+        Array [
+          "SELECT * FROM colors WHERE id IN (?) AND prank = 0",
+          Array [
+            "75",
+          ],
+        ],
+        Array [
+          "SELECT * FROM zones WHERE id IN (?,?,?,?,?,?)",
+          Array [
+            "15",
+            "5",
+            "37",
+            "30",
+            "33",
+            "34",
+          ],
+        ],
         Array [
           "SELECT * FROM pet_states
              WHERE pet_type_id IN (?) AND glitched = 0
@@ -148,14 +196,14 @@ describe("PetAppearance", () => {
                rel.swf_asset_id = sa.id
              WHERE rel.parent_id IN (?,?,?,?,?,?,?,?)",
           Array [
-            "17723",
+            "2",
-            "17742",
+            "436",
+            "4751",
+            "5991",
             "10014",
             "11089",
-            "5991",
+            "17723",
-            "436",
+            "17742",
-            "2",
-            "4751",
           ],
         ],
         Array [

src/server/query-tests/__snapshots__/Color.test.js.snap

@@ -5,450 +5,562 @@ Object {
   "allColors": Array [
     Object {
       "id": "1",
+      "isStandard": true,
       "name": "Alien",
     },
     Object {
       "id": "2",
+      "isStandard": false,
       "name": "Apple",
     },
     Object {
       "id": "3",
+      "isStandard": false,
       "name": "Asparagus",
     },
     Object {
       "id": "4",
+      "isStandard": false,
       "name": "Aubergine",
     },
     Object {
       "id": "5",
+      "isStandard": false,
       "name": "Avocado",
     },
     Object {
       "id": "6",
+      "isStandard": false,
       "name": "Baby",
     },
     Object {
       "id": "7",
+      "isStandard": true,
       "name": "Biscuit",
     },
     Object {
       "id": "8",
+      "isStandard": true,
       "name": "Blue",
     },
     Object {
       "id": "9",
+      "isStandard": false,
       "name": "Blueberry",
     },
     Object {
       "id": "10",
+      "isStandard": true,
       "name": "Brown",
     },
     Object {
       "id": "11",
+      "isStandard": true,
       "name": "Camouflage",
     },
     Object {
       "id": "12",
+      "isStandard": false,
       "name": "Carrot",
     },
     Object {
       "id": "13",
+      "isStandard": true,
       "name": "Checkered",
     },
     Object {
       "id": "14",
+      "isStandard": true,
       "name": "Chocolate",
     },
     Object {
       "id": "15",
+      "isStandard": false,
       "name": "Chokato",
     },
     Object {
       "id": "16",
+      "isStandard": true,
       "name": "Christmas",
     },
     Object {
       "id": "17",
+      "isStandard": true,
       "name": "Clay",
     },
     Object {
       "id": "18",
+      "isStandard": true,
       "name": "Cloud",
     },
     Object {
       "id": "19",
+      "isStandard": true,
       "name": "Coconut",
     },
     Object {
       "id": "20",
+      "isStandard": true,
       "name": "Custard",
     },
     Object {
       "id": "21",
+      "isStandard": true,
       "name": "Darigan",
     },
     Object {
       "id": "22",
+      "isStandard": true,
       "name": "Desert",
     },
     Object {
       "id": "23",
+      "isStandard": true,
       "name": "Disco",
     },
     Object {
       "id": "24",
+      "isStandard": false,
       "name": "Durian",
     },
     Object {
       "id": "25",
+      "isStandard": true,
       "name": "Electric",
     },
     Object {
       "id": "26",
+      "isStandard": true,
       "name": "Faerie",
     },
     Object {
       "id": "27",
+      "isStandard": true,
       "name": "Fire",
     },
     Object {
       "id": "28",
+      "isStandard": true,
       "name": "Garlic",
     },
     Object {
       "id": "29",
+      "isStandard": true,
       "name": "Ghost",
     },
     Object {
       "id": "30",
+      "isStandard": true,
       "name": "Glowing",
     },
     Object {
       "id": "31",
+      "isStandard": true,
       "name": "Gold",
     },
     Object {
       "id": "32",
+      "isStandard": false,
       "name": "Gooseberry",
     },
     Object {
       "id": "33",
+      "isStandard": false,
       "name": "Grape",
     },
     Object {
       "id": "34",
+      "isStandard": true,
       "name": "Green",
     },
     Object {
       "id": "35",
+      "isStandard": true,
       "name": "Grey",
     },
     Object {
       "id": "36",
+      "isStandard": true,
       "name": "Halloween",
     },
     Object {
       "id": "37",
+      "isStandard": true,
       "name": "Ice",
     },
     Object {
       "id": "38",
+      "isStandard": true,
       "name": "Invisible",
     },
     Object {
       "id": "39",
+      "isStandard": true,
       "name": "Island",
     },
     Object {
       "id": "40",
+      "isStandard": true,
       "name": "Jelly",
     },
     Object {
       "id": "41",
+      "isStandard": false,
       "name": "Lemon",
     },
     Object {
       "id": "42",
+      "isStandard": false,
       "name": "Lime",
     },
     Object {
       "id": "43",
+      "isStandard": true,
       "name": "Mallow",
     },
     Object {
       "id": "44",
+      "isStandard": false,
       "name": "Maraquan",
     },
     Object {
       "id": "45",
+      "isStandard": true,
       "name": "Msp",
     },
     Object {
       "id": "46",
+      "isStandard": false,
       "name": "Mutant",
     },
     Object {
       "id": "47",
+      "isStandard": false,
       "name": "Orange",
     },
     Object {
       "id": "48",
+      "isStandard": false,
       "name": "Pea",
     },
     Object {
       "id": "49",
+      "isStandard": false,
       "name": "Peach",
     },
     Object {
       "id": "50",
+      "isStandard": false,
       "name": "Pear",
     },
     Object {
       "id": "51",
+      "isStandard": false,
       "name": "Pepper",
     },
     Object {
       "id": "52",
+      "isStandard": false,
       "name": "Pineapple",
     },
     Object {
       "id": "53",
+      "isStandard": true,
       "name": "Pink",
     },
     Object {
       "id": "54",
+      "isStandard": true,
       "name": "Pirate",
     },
     Object {
       "id": "55",
+      "isStandard": false,
       "name": "Plum",
     },
     Object {
       "id": "56",
+      "isStandard": true,
       "name": "Plushie",
     },
     Object {
       "id": "57",
+      "isStandard": true,
       "name": "Purple",
     },
     Object {
       "id": "58",
+      "isStandard": true,
       "name": "Quigukiboy",
     },
     Object {
       "id": "59",
+      "isStandard": true,
       "name": "Quigukigirl",
     },
     Object {
       "id": "60",
+      "isStandard": true,
       "name": "Rainbow",
     },
     Object {
       "id": "61",
+      "isStandard": true,
       "name": "Red",
     },
     Object {
       "id": "62",
+      "isStandard": true,
       "name": "Robot",
     },
     Object {
       "id": "63",
+      "isStandard": true,
       "name": "Royalboy",
     },
     Object {
       "id": "64",
+      "isStandard": true,
       "name": "Royalgirl",
     },
     Object {
       "id": "65",
+      "isStandard": true,
       "name": "Shadow",
     },
     Object {
       "id": "66",
+      "isStandard": true,
       "name": "Silver",
     },
     Object {
       "id": "67",
+      "isStandard": true,
       "name": "Sketch",
     },
     Object {
       "id": "68",
+      "isStandard": true,
       "name": "Skunk",
     },
     Object {
       "id": "69",
+      "isStandard": true,
       "name": "Snot",
     },
     Object {
       "id": "70",
+      "isStandard": true,
       "name": "Snow",
     },
     Object {
       "id": "71",
+      "isStandard": true,
       "name": "Speckled",
     },
     Object {
       "id": "72",
+      "isStandard": true,
       "name": "Split",
     },
     Object {
       "id": "73",
+      "isStandard": true,
       "name": "Sponge",
     },
     Object {
       "id": "74",
+      "isStandard": true,
       "name": "Spotted",
     },
     Object {
       "id": "75",
+      "isStandard": true,
       "name": "Starry",
     },
     Object {
       "id": "76",
+      "isStandard": true,
       "name": "Strawberry",
     },
     Object {
       "id": "77",
+      "isStandard": true,
       "name": "Striped",
     },
     Object {
       "id": "78",
+      "isStandard": false,
       "name": "Thornberry",
     },
     Object {
       "id": "79",
+      "isStandard": false,
       "name": "Tomato",
     },
     Object {
       "id": "80",
+      "isStandard": true,
       "name": "Tyrannian",
     },
     Object {
       "id": "81",
+      "isStandard": true,
       "name": "Usuki boy",
     },
     Object {
       "id": "82",
+      "isStandard": true,
       "name": "Usuki girl",
     },
     Object {
       "id": "83",
+      "isStandard": true,
       "name": "White",
     },
     Object {
       "id": "84",
+      "isStandard": true,
       "name": "Yellow",
     },
     Object {
       "id": "85",
+      "isStandard": true,
       "name": "Zombie",
     },
     Object {
       "id": "86",
+      "isStandard": false,
       "name": "Onion",
     },
     Object {
       "id": "87",
+      "isStandard": true,
       "name": "Magma",
     },
     Object {
       "id": "88",
+      "isStandard": true,
       "name": "Relic",
     },
     Object {
       "id": "89",
+      "isStandard": true,
       "name": "Woodland",
     },
     Object {
       "id": "90",
+      "isStandard": true,
       "name": "Transparent",
     },
     Object {
       "id": "91",
+      "isStandard": true,
       "name": "Maractite",
     },
     Object {
       "id": "92",
+      "isStandard": false,
       "name": "8-bit",
     },
     Object {
       "id": "93",
+      "isStandard": true,
       "name": "Swamp gas",
     },
     Object {
       "id": "94",
+      "isStandard": true,
       "name": "Water",
     },
     Object {
       "id": "95",
+      "isStandard": true,
       "name": "Wraith",
     },
     Object {
       "id": "96",
+      "isStandard": true,
       "name": "Eventide",
     },
     Object {
       "id": "97",
+      "isStandard": true,
       "name": "Elderlyboy",
     },
     Object {
       "id": "98",
+      "isStandard": true,
       "name": "Elderlygirl",
     },
     Object {
       "id": "99",
+      "isStandard": true,
       "name": "Stealthy",
     },
     Object {
       "id": "100",
+      "isStandard": true,
       "name": "Dimensional",
     },
     Object {
       "id": "101",
+      "isStandard": false,
       "name": "Agueena",
     },
     Object {
       "id": "102",
+      "isStandard": true,
       "name": "Pastel",
     },
     Object {
       "id": "103",
+      "isStandard": true,
       "name": "Ummagine",
     },
     Object {
       "id": "104",
+      "isStandard": true,
       "name": "Polka Dot",
     },
     Object {
       "id": "105",
+      "isStandard": true,
       "name": "Candy",
     },
     Object {
       "id": "106",
+      "isStandard": true,
       "name": "Marble",
     },
     Object {
       "id": "107",
+      "isStandard": true,
       "name": "Steampunk",
     },
     Object {
       "id": "108",
+      "isStandard": true,
       "name": "Toy",
     },
     Object {
       "id": "109",
+      "isStandard": true,
       "name": "Origami",
     },
     Object {
       "id": "110",
+      "isStandard": true,
       "name": "Oil Paint",
     },
     Object {
       "id": "111",
+      "isStandard": true,
       "name": "Mosaic",
     },
     Object {
       "id": "112",
+      "isStandard": true,
       "name": "Burlap",
     },
   ],

src/server/query-tests/__snapshots__/PetAppearance.test.js.snap

@@ -67,6 +67,73 @@ Object {
 `;
 
 exports[`PetAppearance loads multiple for species and color 1`] = `
+Object {
+  "petAppearance": Object {
+    "color": Object {
+      "id": "75",
+      "isStandard": true,
+      "name": "Starry",
+    },
+    "id": "54-75-HAPPY_FEM",
+    "layers": Array [
+      Object {
+        "id": "5995",
+        "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7941/600x600.png?v2-0",
+        "svgUrl": "http://images.neopets.com/cp/bio/data/000/000/007/7941_2c4cc4b846/7941.svg",
+        "zone": Object {
+          "depth": 18,
+        },
+      },
+      Object {
+        "id": "5996",
+        "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7942/600x600.png?v2-0",
+        "svgUrl": "http://images.neopets.com/cp/bio/data/000/000/007/7942_2eab06fd7b/7942.svg",
+        "zone": Object {
+          "depth": 7,
+        },
+      },
+      Object {
+        "id": "6000",
+        "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7946/600x600.png?v2-0",
+        "svgUrl": "http://images.neopets.com/cp/bio/data/000/000/007/7946_0348dad587/7946.svg",
+        "zone": Object {
+          "depth": 40,
+        },
+      },
+      Object {
+        "id": "16467",
+        "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/024/24008/600x600.png?v2-0",
+        "svgUrl": "http://images.neopets.com/cp/bio/data/000/000/024/24008_a05fe9876a/24008.svg",
+        "zone": Object {
+          "depth": 34,
+        },
+      },
+      Object {
+        "id": "19784",
+        "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28892/600x600.png?v2-1313418652000",
+        "svgUrl": "http://images.neopets.com/cp/bio/data/000/000/028/28892_a8e3a8b430/28892.svg",
+        "zone": Object {
+          "depth": 37,
+        },
+      },
+      Object {
+        "id": "178150",
+        "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/036/36887/600x600.png?v2-1354240708000",
+        "svgUrl": "http://images.neopets.com/cp/bio/data/000/000/036/36887_a335fbba09/36887.svg",
+        "zone": Object {
+          "depth": 38,
+        },
+      },
+    ],
+    "species": Object {
+      "id": "54",
+      "name": "Zafara",
+    },
+  },
+}
+`;
+
+exports[`PetAppearance loads multiple for species and color 3`] = `
 Object {
   "petAppearances": Array [
     Object {
@@ -75,65 +142,7 @@ Object {
         "id": "75",
         "name": "Starry",
       },
-      "id": "54-75-HAPPY_FEM",
+      "id": "54-75-UNKNOWN",
-      "layers": Array [
-        Object {
-          "id": "5995",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7941/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 18,
-          },
-        },
-        Object {
-          "id": "5996",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7942/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 7,
-          },
-        },
-        Object {
-          "id": "6000",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7946/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 40,
-          },
-        },
-        Object {
-          "id": "16467",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/024/24008/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 34,
-          },
-        },
-        Object {
-          "id": "19784",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28892/600x600.png?v2-1313418652000",
-          "zone": Object {
-            "depth": 37,
-          },
-        },
-        Object {
-          "id": "178150",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/036/36887/600x600.png?v2-1354240708000",
-          "zone": Object {
-            "depth": 38,
-          },
-        },
-      ],
-      "petStateId": "17723",
-      "pose": "HAPPY_FEM",
-      "species": Object {
-        "id": "54",
-        "name": "Zafara",
-      },
-    },
-    Object {
-      "bodyId": "180",
-      "color": Object {
-        "id": "75",
-        "name": "Starry",
-      },
-      "id": "54-75-HAPPY_MASC",
       "layers": Array [
         Object {
           "id": "5995",
@@ -171,15 +180,203 @@ Object {
           },
         },
         Object {
-          "id": "178150",
+          "id": "19550",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/036/36887/600x600.png?v2-1354240708000",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28549/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 38,
+          },
+        },
+        Object {
+          "id": "163528",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28549/600x600.png?v2-1326455337000",
           "zone": Object {
             "depth": 38,
           },
         },
       ],
-      "petStateId": "17742",
+      "petStateId": "2",
-      "pose": "HAPPY_MASC",
+      "pose": "UNKNOWN",
+      "species": Object {
+        "id": "54",
+        "name": "Zafara",
+      },
+    },
+    Object {
+      "bodyId": "180",
+      "color": Object {
+        "id": "75",
+        "name": "Starry",
+      },
+      "id": "54-75-SAD_MASC",
+      "layers": Array [
+        Object {
+          "id": "5995",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7941/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 18,
+          },
+        },
+        Object {
+          "id": "5996",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7942/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 7,
+          },
+        },
+        Object {
+          "id": "6000",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7946/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 40,
+          },
+        },
+        Object {
+          "id": "14790",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/021/21057/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 38,
+          },
+        },
+        Object {
+          "id": "14792",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/021/21060/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 37,
+          },
+        },
+        Object {
+          "id": "16467",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/024/24008/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 34,
+          },
+        },
+      ],
+      "petStateId": "436",
+      "pose": "SAD_MASC",
+      "species": Object {
+        "id": "54",
+        "name": "Zafara",
+      },
+    },
+    Object {
+      "bodyId": "180",
+      "color": Object {
+        "id": "75",
+        "name": "Starry",
+      },
+      "id": "54-75-UNKNOWN",
+      "layers": Array [
+        Object {
+          "id": "5995",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7941/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 18,
+          },
+        },
+        Object {
+          "id": "5996",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7942/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 7,
+          },
+        },
+        Object {
+          "id": "6000",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7946/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 40,
+          },
+        },
+        Object {
+          "id": "16467",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/024/24008/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 34,
+          },
+        },
+        Object {
+          "id": "19550",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28549/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 38,
+          },
+        },
+        Object {
+          "id": "19784",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28892/600x600.png?v2-1313418652000",
+          "zone": Object {
+            "depth": 37,
+          },
+        },
+        Object {
+          "id": "163528",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28549/600x600.png?v2-1326455337000",
+          "zone": Object {
+            "depth": 38,
+          },
+        },
+      ],
+      "petStateId": "4751",
+      "pose": "UNKNOWN",
+      "species": Object {
+        "id": "54",
+        "name": "Zafara",
+      },
+    },
+    Object {
+      "bodyId": "180",
+      "color": Object {
+        "id": "75",
+        "name": "Starry",
+      },
+      "id": "54-75-SAD_FEM",
+      "layers": Array [
+        Object {
+          "id": "5995",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7941/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 18,
+          },
+        },
+        Object {
+          "id": "5996",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7942/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 7,
+          },
+        },
+        Object {
+          "id": "6000",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7946/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 40,
+          },
+        },
+        Object {
+          "id": "14790",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/021/21057/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 38,
+          },
+        },
+        Object {
+          "id": "14793",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/021/21061/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 37,
+          },
+        },
+        Object {
+          "id": "16467",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/024/24008/600x600.png?v2-0",
+          "zone": Object {
+            "depth": 34,
+          },
+        },
+      ],
+      "petStateId": "5991",
+      "pose": "SAD_FEM",
       "species": Object {
         "id": "54",
         "name": "Zafara",
@@ -307,7 +504,7 @@ Object {
         "id": "75",
         "name": "Starry",
       },
-      "id": "54-75-SAD_FEM",
+      "id": "54-75-HAPPY_FEM",
       "layers": Array [
         Object {
           "id": "5995",
@@ -330,20 +527,6 @@ Object {
             "depth": 40,
           },
         },
-        Object {
-          "id": "14790",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/021/21057/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 38,
-          },
-        },
-        Object {
-          "id": "14793",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/021/21061/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 37,
-          },
-        },
         Object {
           "id": "16467",
           "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/024/24008/600x600.png?v2-0",
@@ -351,9 +534,23 @@ Object {
             "depth": 34,
           },
         },
+        Object {
+          "id": "19784",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28892/600x600.png?v2-1313418652000",
+          "zone": Object {
+            "depth": 37,
+          },
+        },
+        Object {
+          "id": "178150",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/036/36887/600x600.png?v2-1354240708000",
+          "zone": Object {
+            "depth": 38,
+          },
+        },
       ],
-      "petStateId": "5991",
+      "petStateId": "17723",
-      "pose": "SAD_FEM",
+      "pose": "HAPPY_FEM",
       "species": Object {
         "id": "54",
         "name": "Zafara",
@@ -365,65 +562,7 @@ Object {
         "id": "75",
         "name": "Starry",
       },
-      "id": "54-75-SAD_MASC",
+      "id": "54-75-HAPPY_MASC",
-      "layers": Array [
-        Object {
-          "id": "5995",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7941/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 18,
-          },
-        },
-        Object {
-          "id": "5996",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7942/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 7,
-          },
-        },
-        Object {
-          "id": "6000",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7946/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 40,
-          },
-        },
-        Object {
-          "id": "14790",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/021/21057/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 38,
-          },
-        },
-        Object {
-          "id": "14792",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/021/21060/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 37,
-          },
-        },
-        Object {
-          "id": "16467",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/024/24008/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 34,
-          },
-        },
-      ],
-      "petStateId": "436",
-      "pose": "SAD_MASC",
-      "species": Object {
-        "id": "54",
-        "name": "Zafara",
-      },
-    },
-    Object {
-      "bodyId": "180",
-      "color": Object {
-        "id": "75",
-        "name": "Starry",
-      },
-      "id": "54-75-UNKNOWN",
       "layers": Array [
         Object {
           "id": "5995",
@@ -461,87 +600,15 @@ Object {
           },
         },
         Object {
-          "id": "19550",
+          "id": "178150",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28549/600x600.png?v2-0",
+          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/036/36887/600x600.png?v2-1354240708000",
-          "zone": Object {
-            "depth": 38,
-          },
-        },
-        Object {
-          "id": "163528",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28549/600x600.png?v2-1326455337000",
           "zone": Object {
             "depth": 38,
           },
         },
       ],
-      "petStateId": "2",
+      "petStateId": "17742",
-      "pose": "UNKNOWN",
+      "pose": "HAPPY_MASC",
-      "species": Object {
-        "id": "54",
-        "name": "Zafara",
-      },
-    },
-    Object {
-      "bodyId": "180",
-      "color": Object {
-        "id": "75",
-        "name": "Starry",
-      },
-      "id": "54-75-UNKNOWN",
-      "layers": Array [
-        Object {
-          "id": "5995",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7941/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 18,
-          },
-        },
-        Object {
-          "id": "5996",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7942/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 7,
-          },
-        },
-        Object {
-          "id": "6000",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/007/7946/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 40,
-          },
-        },
-        Object {
-          "id": "16467",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/024/24008/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 34,
-          },
-        },
-        Object {
-          "id": "19550",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28549/600x600.png?v2-0",
-          "zone": Object {
-            "depth": 38,
-          },
-        },
-        Object {
-          "id": "19784",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28892/600x600.png?v2-1313418652000",
-          "zone": Object {
-            "depth": 37,
-          },
-        },
-        Object {
-          "id": "163528",
-          "imageUrl": "https://impress-asset-images.s3.amazonaws.com/biology/000/000/028/28549/600x600.png?v2-1326455337000",
-          "zone": Object {
-            "depth": 38,
-          },
-        },
-      ],
-      "petStateId": "4751",
-      "pose": "UNKNOWN",
       "species": Object {
         "id": "54",
         "name": "Zafara",