[WIP] Species face compatibility UI

Now, when a species isn't compatible with an item, we gray out and sadden the pet, like on Classic DTI!

For now, I've hardcoded only the Zafara body ID to match. Let's do server connection next!

src/app/ItemPage.js

@@ -687,8 +687,8 @@ function ItemPageOutfitPreview({ itemId }) {
         </Box>
       </VStack>
       <SpeciesFacesPicker
-        itemId={itemId}
         selectedSpeciesId={petState.speciesId}
+        compatibleBodyIds={["180"]}
         onChange={({ speciesId, colorId }) =>
           setPetState({
             speciesId,
@@ -752,7 +752,67 @@ function PlayPauseButton({ isPaused, onClick }) {
   );
 }
 
-function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
+function SpeciesFacesPicker({
+  selectedSpeciesId,
+  compatibleBodyIds,
+  onChange,
+  isLoading,
+}) {
+  const allSpeciesFaces = speciesFaces.sort((a, b) =>
+    a.speciesName.localeCompare(b.speciesName)
+  );
+
+  const focusBorderColorValue = useToken("colors", "blue.100");
+
+  return (
+    <Box
+      _focusWithin={{
+        boxShadow: `${focusBorderColorValue} 0 0 1px 2px`,
+      }}
+      maxWidth="400px"
+      boxSizing="content-box"
+      padding="2"
+      borderRadius="md"
+      transition="all 0.2s"
+    >
+      <Wrap
+        spacing="0"
+        justify="center"
+        // On mobile, give this a scroll container, and some extra padding so
+        // the selected-face effects still fit inside.
+        maxHeight={{ base: "200px", md: "none" }}
+        overflow={{ base: "auto", md: "visible" }}
+        padding={{ base: "8px", md: "0" }}
+      >
+        {allSpeciesFaces.map((speciesFace) => (
+          <WrapItem key={speciesFace.speciesId}>
+            <SpeciesFaceOption
+              speciesId={speciesFace.speciesId}
+              speciesName={speciesFace.speciesName}
+              colorId={speciesFace.colorId}
+              neopetsImageHash={speciesFace.neopetsImageHash}
+              isCompatible={compatibleBodyIds.includes(speciesFace.bodyId)}
+              isSelected={speciesFace.speciesId === selectedSpeciesId}
+              onChange={onChange}
+              isLoading={isLoading}
+            />
+          </WrapItem>
+        ))}
+      </Wrap>
+    </Box>
+  );
+}
+
+function SpeciesFaceOption({
+  speciesId,
+  speciesName,
+  colorId,
+  neopetsImageHash,
+  isCompatible,
+  isSelected,
+  onChange,
+  isLoading,
+}) {
   const selectedBorderColor = useColorModeValue("green.600", "green.400");
   const selectedBackgroundColor = useColorModeValue("green.200", "green.600");
   const focusBorderColor = "blue.400";
@@ -768,98 +828,82 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
     focusBorderColor,
     focusBackgroundColor,
   ]);
-  const lgShadow = useToken("shadows", "xl");
+  const xlShadow = useToken("shadows", "xl");
 
-  const allSpeciesFaces = speciesFaces.sort((a, b) =>
+  const isHappy = isLoading || isCompatible;
-    a.speciesName.localeCompare(b.speciesName)
+  const emotionId = isHappy ? "1" : "2";
+
+  const tooltipLabel = isCompatible ? (
+    speciesName
+  ) : (
+    <div style={{ textAlign: "center" }}>
+      {speciesName}
+      <div style={{ fontStyle: "italic", fontSize: "0.75em" }}>
+        (Not compatible yet)
+      </div>
+    </div>
   );
 
+  const cursor = isLoading ? "wait" : !isCompatible ? "not-allowed" : "pointer";
+
   return (
     <ClassNames>
       {({ css }) => (
-        <Box
+        <Tooltip label={tooltipLabel} placement="top" gutter={-12}>
-          _focusWithin={{
+          <Box as="label" cursor={cursor}>
-            boxShadow: `${focusBackgroundColorValue} 0 0 1px 2px`,
+            <VisuallyHidden
-          }}
+              as="input"
-          maxWidth="400px"
+              type="radio"
-          boxSizing="content-box"
+              aria-label={speciesName}
-          padding="2"
+              name="species-faces-picker"
-          borderRadius="md"
+              value={speciesId}
-          transition="all 0.2s"
+              checked={isSelected}
-        >
+              disabled={isLoading || !isCompatible}
-          <Wrap
+              onChange={() => onChange({ speciesId, colorId })}
-            spacing="0"
+            />
-            justify="center"
+            <Box
-            // On mobile, give this a scroll container, and some extra padding so
+              overflow="hidden"
-            // the selected-face effects still fit inside.
+              transition="all 0.2s"
-            maxHeight={{ base: "200px", md: "none" }}
+              position="relative"
-            overflow={{ base: "auto", md: "visible" }}
+              className={css`
-            padding={{ base: "8px", md: "0" }}
+                input:checked + & {
-          >
+                  background: ${selectedBackgroundColorValue};
-            {allSpeciesFaces.map(
+                  border-radius: 6px;
-              ({ speciesId, speciesName, colorId, neopetsImageHash }) => (
+                  box-shadow: ${xlShadow},
-                <WrapItem
+                    ${selectedBorderColorValue} 0 0 2px 2px;
-                  key={speciesId}
+                  transform: scale(1.2);
-                  as="label"
+                  z-index: 1;
-                  cursor={isLoading ? "wait" : "pointer"}
+                }
-                  position="relative"
-                >
-                  <VisuallyHidden
-                    as="input"
-                    type="radio"
-                    aria-label={speciesName}
-                    name="species-faces-picker"
-                    value={speciesId}
-                    checked={speciesId === selectedSpeciesId}
-                    disabled={isLoading}
-                    onChange={() => onChange({ speciesId, colorId })}
-                  />
-                  <Box
-                    overflow="hidden"
-                    transition="all 0.2s"
-                    className={css`
-                      input:checked + & {
-                        background: ${selectedBackgroundColorValue};
-                        border-radius: 6px;
-                        box-shadow: ${lgShadow},
-                          ${selectedBorderColorValue} 0 0 2px 2px;
-                        transform: scale(1.2);
-                        z-index: 1;
-                      }
 
-                      input:focus + & {
+                input:focus + & {
-                        background: ${focusBackgroundColorValue};
+                  background: ${focusBackgroundColorValue};
-                        box-shadow: ${lgShadow},
+                  box-shadow: ${xlShadow}, ${focusBorderColorValue} 0 0 0 3px;
-                          ${focusBorderColorValue} 0 0 0 3px;
+                }
-                      }
+              `}
-                    `}
+            >
-                  >
+              <Box
-                    <Box
+                as="img"
-                      as="img"
+                src={`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/1.png`}
-                      src={`https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/1/1.png`}
+                srcSet={
-                      srcSet={
+                  `https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/1.png 1x, ` +
-                        `https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/1/1.png 1x, ` +
+                  `https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/${emotionId}/6.png 2x`
-                        `https://pets.neopets-asset-proxy.openneo.net/cp/${neopetsImageHash}/1/6.png 2x`
+                }
-                      }
+                alt={speciesName}
-                      alt={speciesName}
+                width={50}
-                      width={50}
+                height={50}
-                      height={50}
+                filter={isCompatible ? "saturate(90%)" : "saturate(0%)"}
-                      filter="saturate(90%)"
+                opacity="0.9"
-                      opacity="0.9"
+                transition="all 0.2s"
-                      transition="all 0.2s"
+                className={css`
-                      className={css`
+                  input:checked + * & {
-                        input:checked + * & {
+                    opacity: 1;
-                          opacity: 1;
+                    filter: saturate(110%);
-                          filter: saturate(110%);
+                  }
-                        }
+                `}
-                      `}
+              />
-                    />
+            </Box>
-                  </Box>
+          </Box>
-                </WrapItem>
+        </Tooltip>
-              )
-            )}
-          </Wrap>
-        </Box>
       )}
     </ClassNames>
   );
@@ -873,334 +917,389 @@ function SpeciesFacesPicker({ selectedSpeciesId, onChange, isLoading }) {
 const colors = { BLUE: "8", RED: "61", GREEN: "34", YELLOW: "84" };
 const speciesFaces = [
   {
-    speciesId: "1",
-    neopetsImageHash: "obxdjm88",
-    colorId: colors.GREEN,
     speciesName: "Acara",
+    speciesId: "1",
+    colorId: colors.GREEN,
+    bodyId: "93",
+    neopetsImageHash: "obxdjm88",
   },
   {
-    speciesId: "2",
-    neopetsImageHash: "n9ozx4z5",
-    colorId: colors.BLUE,
     speciesName: "Aisha",
+    speciesId: "2",
+    colorId: colors.BLUE,
+    bodyId: "106",
+    neopetsImageHash: "n9ozx4z5",
   },
   {
-    speciesId: "3",
-    neopetsImageHash: "kfonqhdc",
-    colorId: colors.YELLOW,
     speciesName: "Blumaroo",
+    speciesId: "3",
+    colorId: colors.YELLOW,
+    bodyId: "47",
+    neopetsImageHash: "kfonqhdc",
   },
   {
-    speciesId: "4",
-    neopetsImageHash: "sc2hhvhn",
-    colorId: colors.YELLOW,
     speciesName: "Bori",
+    speciesId: "4",
+    colorId: colors.YELLOW,
+    bodyId: "84",
+    neopetsImageHash: "sc2hhvhn",
   },
   {
-    speciesId: "5",
-    neopetsImageHash: "wqz8xn4t",
-    colorId: colors.YELLOW,
     speciesName: "Bruce",
+    speciesId: "5",
+    colorId: colors.YELLOW,
+    bodyId: "146",
+    neopetsImageHash: "wqz8xn4t",
   },
   {
-    speciesId: "6",
-    neopetsImageHash: "jc9klfxm",
-    colorId: colors.YELLOW,
     speciesName: "Buzz",
+    speciesId: "6",
+    colorId: colors.YELLOW,
+    bodyId: "250",
+    neopetsImageHash: "jc9klfxm",
   },
   {
-    speciesId: "7",
-    neopetsImageHash: "4lrb4n3f",
-    colorId: colors.RED,
     speciesName: "Chia",
+    speciesId: "7",
+    colorId: colors.RED,
+    bodyId: "212",
+    neopetsImageHash: "4lrb4n3f",
   },
   {
-    speciesId: "8",
-    neopetsImageHash: "bdml26md",
-    colorId: colors.YELLOW,
     speciesName: "Chomby",
+    speciesId: "8",
+    colorId: colors.YELLOW,
+    bodyId: "74",
+    neopetsImageHash: "bdml26md",
   },
   {
-    speciesId: "9",
-    neopetsImageHash: "xl6msllv",
-    colorId: colors.GREEN,
     speciesName: "Cybunny",
+    speciesId: "9",
+    colorId: colors.GREEN,
+    bodyId: "94",
+    neopetsImageHash: "xl6msllv",
   },
   {
-    speciesId: "10",
-    neopetsImageHash: "bob39shq",
-    colorId: colors.YELLOW,
     speciesName: "Draik",
+    speciesId: "10",
+    colorId: colors.YELLOW,
+    bodyId: "132",
+    neopetsImageHash: "bob39shq",
   },
   {
-    speciesId: "11",
-    neopetsImageHash: "jhhhbrww",
-    colorId: colors.RED,
     speciesName: "Elephante",
+    speciesId: "11",
+    colorId: colors.RED,
+    bodyId: "56",
+    neopetsImageHash: "jhhhbrww",
   },
   {
-    speciesId: "12",
-    neopetsImageHash: "6kngmhvs",
-    colorId: colors.RED,
     speciesName: "Eyrie",
+    speciesId: "12",
+    colorId: colors.RED,
+    bodyId: "90",
+    neopetsImageHash: "6kngmhvs",
   },
   {
-    speciesId: "13",
-    neopetsImageHash: "47vt32x2",
-    colorId: colors.GREEN,
     speciesName: "Flotsam",
+    speciesId: "13",
+    colorId: colors.GREEN,
+    bodyId: "136",
+    neopetsImageHash: "47vt32x2",
   },
   {
-    speciesId: "14",
-    neopetsImageHash: "5nrd2lvd",
-    colorId: colors.YELLOW,
     speciesName: "Gelert",
+    speciesId: "14",
+    colorId: colors.YELLOW,
+    bodyId: "138",
+    neopetsImageHash: "5nrd2lvd",
   },
   {
-    speciesId: "15",
-    neopetsImageHash: "6c275jcg",
-    colorId: colors.BLUE,
     speciesName: "Gnorbu",
+    speciesId: "15",
+    colorId: colors.BLUE,
+    bodyId: "166",
+    neopetsImageHash: "6c275jcg",
   },
   {
-    speciesId: "16",
-    neopetsImageHash: "j7q65fv4",
-    colorId: colors.BLUE,
     speciesName: "Grarrl",
+    speciesId: "16",
+    colorId: colors.BLUE,
+    bodyId: "119",
+    neopetsImageHash: "j7q65fv4",
   },
   {
-    speciesId: "17",
-    neopetsImageHash: "5xn4kjf8",
-    colorId: colors.GREEN,
     speciesName: "Grundo",
+    speciesId: "17",
+    colorId: colors.GREEN,
+    bodyId: "126",
+    neopetsImageHash: "5xn4kjf8",
   },
   {
-    speciesId: "18",
-    neopetsImageHash: "jsfvcqwt",
-    colorId: colors.RED,
     speciesName: "Hissi",
+    speciesId: "18",
+    colorId: colors.RED,
+    bodyId: "67",
+    neopetsImageHash: "jsfvcqwt",
   },
   {
-    speciesId: "19",
-    neopetsImageHash: "w32r74vo",
-    colorId: colors.GREEN,
     speciesName: "Ixi",
+    speciesId: "19",
+    colorId: colors.GREEN,
+    bodyId: "163",
+    neopetsImageHash: "w32r74vo",
   },
   {
-    speciesId: "20",
-    neopetsImageHash: "kz43rnld",
-    colorId: colors.YELLOW,
     speciesName: "Jetsam",
+    speciesId: "20",
+    colorId: colors.YELLOW,
+    bodyId: "147",
+    neopetsImageHash: "kz43rnld",
   },
   {
-    speciesId: "21",
-    neopetsImageHash: "m267j935",
-    colorId: colors.GREEN,
     speciesName: "Jubjub",
+    speciesId: "21",
+    colorId: colors.GREEN,
+    bodyId: "80",
+    neopetsImageHash: "m267j935",
   },
   {
-    speciesId: "22",
-    neopetsImageHash: "4gsrb59g",
-    colorId: colors.YELLOW,
     speciesName: "Kacheek",
+    speciesId: "22",
+    colorId: colors.YELLOW,
+    bodyId: "117",
+    neopetsImageHash: "4gsrb59g",
   },
   {
-    speciesId: "23",
-    neopetsImageHash: "ktlxmrtr",
-    colorId: colors.BLUE,
     speciesName: "Kau",
+    speciesId: "23",
+    colorId: colors.BLUE,
+    bodyId: "201",
+    neopetsImageHash: "ktlxmrtr",
   },
   {
-    speciesId: "24",
-    neopetsImageHash: "42j5q3zx",
-    colorId: colors.GREEN,
     speciesName: "Kiko",
+    speciesId: "24",
+    colorId: colors.GREEN,
+    bodyId: "51",
+    neopetsImageHash: "42j5q3zx",
   },
   {
-    speciesId: "25",
-    neopetsImageHash: "ncfn87wk",
-    colorId: colors.GREEN,
     speciesName: "Koi",
+    speciesId: "25",
+    colorId: colors.GREEN,
+    bodyId: "208",
+    neopetsImageHash: "ncfn87wk",
   },
   {
-    speciesId: "26",
-    neopetsImageHash: "omx9c876",
-    colorId: colors.RED,
     speciesName: "Korbat",
+    speciesId: "26",
+    colorId: colors.RED,
+    bodyId: "196",
+    neopetsImageHash: "omx9c876",
   },
   {
-    speciesId: "27",
-    neopetsImageHash: "rfsbh59t",
-    colorId: colors.BLUE,
     speciesName: "Kougra",
+    speciesId: "27",
+    colorId: colors.BLUE,
+    bodyId: "143",
+    neopetsImageHash: "rfsbh59t",
   },
   {
-    speciesId: "28",
-    neopetsImageHash: "hxgsm5d4",
-    colorId: colors.BLUE,
     speciesName: "Krawk",
+    speciesId: "28",
+    colorId: colors.BLUE,
+    bodyId: "150",
+    neopetsImageHash: "hxgsm5d4",
   },
   {
-    speciesId: "29",
-    neopetsImageHash: "blxmjgbk",
-    colorId: colors.YELLOW,
     speciesName: "Kyrii",
+    speciesId: "29",
+    colorId: colors.YELLOW,
+    bodyId: "175",
+    neopetsImageHash: "blxmjgbk",
   },
   {
-    speciesId: "30",
-    neopetsImageHash: "8r94jhfq",
-    colorId: colors.YELLOW,
     speciesName: "Lenny",
+    speciesId: "30",
+    colorId: colors.YELLOW,
+    bodyId: "173",
+    neopetsImageHash: "8r94jhfq",
   },
   {
-    speciesId: "31",
-    neopetsImageHash: "z42535zh",
-    colorId: colors.YELLOW,
     speciesName: "Lupe",
+    speciesId: "31",
+    colorId: colors.YELLOW,
+    bodyId: "199",
+    neopetsImageHash: "z42535zh",
   },
   {
-    speciesId: "32",
-    neopetsImageHash: "qgg6z8s7",
-    colorId: colors.BLUE,
     speciesName: "Lutari",
+    speciesId: "32",
+    colorId: colors.BLUE,
+    bodyId: "52",
+    neopetsImageHash: "qgg6z8s7",
   },
   {
-    speciesId: "33",
-    neopetsImageHash: "kk2nn2jr",
-    colorId: colors.YELLOW,
     speciesName: "Meerca",
+    speciesId: "33",
+    colorId: colors.YELLOW,
+    bodyId: "109",
+    neopetsImageHash: "kk2nn2jr",
   },
   {
-    speciesId: "34",
-    neopetsImageHash: "jgkoro5z",
-    colorId: colors.GREEN,
     speciesName: "Moehog",
+    speciesId: "34",
+    colorId: colors.GREEN,
+    bodyId: "134",
+    neopetsImageHash: "jgkoro5z",
   },
   {
-    speciesId: "35",
-    neopetsImageHash: "xwlo9657",
-    colorId: colors.BLUE,
     speciesName: "Mynci",
+    speciesId: "35",
+    colorId: colors.BLUE,
+    bodyId: "95",
+    neopetsImageHash: "xwlo9657",
   },
   {
-    speciesId: "36",
-    neopetsImageHash: "bx7fho8x",
-    colorId: colors.BLUE,
     speciesName: "Nimmo",
+    speciesId: "36",
+    colorId: colors.BLUE,
+    bodyId: "96",
+    neopetsImageHash: "bx7fho8x",
   },
   {
-    speciesId: "37",
-    neopetsImageHash: "rjzmx24v",
-    colorId: colors.YELLOW,
     speciesName: "Ogrin",
+    speciesId: "37",
+    colorId: colors.YELLOW,
+    bodyId: "154",
+    neopetsImageHash: "rjzmx24v",
   },
   {
-    speciesId: "38",
-    neopetsImageHash: "kokc52kh",
-    colorId: colors.RED,
     speciesName: "Peophin",
+    speciesId: "38",
+    colorId: colors.RED,
+    bodyId: "55",
+    neopetsImageHash: "kokc52kh",
   },
   {
-    speciesId: "39",
-    neopetsImageHash: "fw6lvf3c",
-    colorId: colors.GREEN,
     speciesName: "Poogle",
-  },
+    speciesId: "39",
-  {
-    speciesId: "40",
-    neopetsImageHash: "tjhwbro3",
-    colorId: colors.RED,
-    speciesName: "Pteri",
-  },
-  {
-    speciesId: "41",
-    neopetsImageHash: "jdto7mj4",
-    colorId: colors.YELLOW,
-    speciesName: "Quiggle",
-  },
-  {
-    speciesId: "42",
-    neopetsImageHash: "qsgbm5f6",
-    colorId: colors.BLUE,
-    speciesName: "Ruki",
-  },
-  {
-    speciesId: "43",
-    neopetsImageHash: "hkjoncsx",
-    colorId: colors.RED,
-    speciesName: "Scorchio",
-  },
-  {
-    speciesId: "44",
-    neopetsImageHash: "mmvn4tkg",
-    colorId: colors.YELLOW,
-    speciesName: "Shoyru",
-  },
-  {
-    speciesId: "45",
-    neopetsImageHash: "fc4cxk3t",
-    colorId: colors.RED,
-    speciesName: "Skeith",
-  },
-  {
-    speciesId: "46",
-    neopetsImageHash: "84gvowmj",
-    colorId: colors.YELLOW,
-    speciesName: "Techo",
-  },
-  {
-    speciesId: "47",
-    neopetsImageHash: "jd433863",
-    colorId: colors.BLUE,
-    speciesName: "Tonu",
-  },
-  {
-    speciesId: "48",
-    neopetsImageHash: "q39wn6vq",
-    colorId: colors.YELLOW,
-    speciesName: "Tuskaninny",
-  },
-  {
-    speciesId: "49",
-    neopetsImageHash: "njzvoflw",
     colorId: colors.GREEN,
-    speciesName: "Uni",
+    bodyId: "76",
+    neopetsImageHash: "fw6lvf3c",
   },
   {
-    speciesId: "50",
+    speciesName: "Pteri",
-    neopetsImageHash: "rox4mgh5",
+    speciesId: "40",
     colorId: colors.RED,
-    speciesName: "Usul",
+    bodyId: "156",
+    neopetsImageHash: "tjhwbro3",
   },
   {
-    speciesId: "51",
+    speciesName: "Quiggle",
-    neopetsImageHash: "dnr2kj4b",
+    speciesId: "41",
     colorId: colors.YELLOW,
-    speciesName: "Wocky",
+    bodyId: "78",
+    neopetsImageHash: "jdto7mj4",
   },
   {
-    speciesId: "52",
+    speciesName: "Ruki",
-    neopetsImageHash: "tdkqr2b6",
+    speciesId: "42",
-    colorId: colors.RED,
-    speciesName: "Xweetok",
-  },
-  {
-    speciesId: "53",
-    neopetsImageHash: "h95cs547",
-    colorId: colors.RED,
-    speciesName: "Yurble",
-  },
-  {
-    speciesId: "54",
-    neopetsImageHash: "x8c57g2l",
     colorId: colors.BLUE,
-    speciesName: "Zafara",
+    bodyId: "191",
+    neopetsImageHash: "qsgbm5f6",
   },
   {
-    speciesId: "55",
+    speciesName: "Scorchio",
-    neopetsImageHash: "xkntzsww",
+    speciesId: "43",
+    colorId: colors.RED,
+    bodyId: "187",
+    neopetsImageHash: "hkjoncsx",
+  },
+  {
+    speciesName: "Shoyru",
+    speciesId: "44",
     colorId: colors.YELLOW,
+    bodyId: "46",
+    neopetsImageHash: "mmvn4tkg",
+  },
+  {
+    speciesName: "Skeith",
+    speciesId: "45",
+    colorId: colors.RED,
+    bodyId: "178",
+    neopetsImageHash: "fc4cxk3t",
+  },
+  {
+    speciesName: "Techo",
+    speciesId: "46",
+    colorId: colors.YELLOW,
+    bodyId: "100",
+    neopetsImageHash: "84gvowmj",
+  },
+  {
+    speciesName: "Tonu",
+    speciesId: "47",
+    colorId: colors.BLUE,
+    bodyId: "130",
+    neopetsImageHash: "jd433863",
+  },
+  {
+    speciesName: "Tuskaninny",
+    speciesId: "48",
+    colorId: colors.YELLOW,
+    bodyId: "188",
+    neopetsImageHash: "q39wn6vq",
+  },
+  {
+    speciesName: "Uni",
+    speciesId: "49",
+    colorId: colors.GREEN,
+    bodyId: "257",
+    neopetsImageHash: "njzvoflw",
+  },
+  {
+    speciesName: "Usul",
+    speciesId: "50",
+    colorId: colors.RED,
+    bodyId: "206",
+    neopetsImageHash: "rox4mgh5",
+  },
+  {
     speciesName: "Vandagyre",
+    speciesId: "55",
+    colorId: colors.YELLOW,
+    bodyId: "306",
+    neopetsImageHash: "xkntzsww",
+  },
+  {
+    speciesName: "Wocky",
+    speciesId: "51",
+    colorId: colors.YELLOW,
+    bodyId: "101",
+    neopetsImageHash: "dnr2kj4b",
+  },
+  {
+    speciesName: "Xweetok",
+    speciesId: "52",
+    colorId: colors.RED,
+    bodyId: "68",
+    neopetsImageHash: "tdkqr2b6",
+  },
+  {
+    speciesName: "Yurble",
+    speciesId: "53",
+    colorId: colors.RED,
+    bodyId: "182",
+    neopetsImageHash: "h95cs547",
+  },
+  {
+    speciesName: "Zafara",
+    speciesId: "54",
+    colorId: colors.BLUE,
+    bodyId: "180",
+    neopetsImageHash: "x8c57g2l",
   },
 ];