add restricted zone support

src/OutfitPreview.js

@@ -14,9 +14,14 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
             id
             imageUrl(size: SIZE_600)
             zone {
+              id
               depth
             }
           }
+
+          restrictedZones {
+            id
+          }
         }
 
         items(ids: $itemIds) {
@@ -26,9 +31,14 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
               id
               imageUrl(size: SIZE_600)
               zone {
+                id
                 depth
               }
             }
+
+            restrictedZones {
+              id
+            }
           }
         }
       }
@@ -58,16 +68,33 @@ function OutfitPreview({ itemIds, speciesId, colorId }) {
     );
   }
 
-  const allLayers = [
+  const allAppearances = [
-    ...data.petAppearance.layers,
+    data.petAppearance,
-    ...data.items.map((i) => i.appearanceOn.layers).flat(),
+    ...data.items.map((i) => i.appearanceOn),
   ];
-  allLayers.sort((a, b) => a.zone.depth - b.zone.depth);
+  const allLayers = allAppearances.map((a) => a.layers).flat();
+
+  const allRestrictedZoneIds = allAppearances
+    .map((l) => l.restrictedZones)
+    .flat()
+    .map((z) => z.id);
+
+  const visibleLayers = allLayers.filter(
+    (l) => !allRestrictedZoneIds.includes(l.zone.id)
+  );
+  visibleLayers.sort((a, b) => a.zone.depth - b.zone.depth);
 
   return (
     <Box pos="relative" height="100%" width="100%">
-      {allLayers.map((layer) => (
+      {visibleLayers.map((layer) => (
-        <Box pos="absolute" top="0" right="0" bottom="0" left="0">
+        <Box
+          key={layer.id}
+          pos="absolute"
+          top="0"
+          right="0"
+          bottom="0"
+          left="0"
+        >
           <FullScreenCenter>
             <Image src={layer.imageUrl} maxWidth="100%" maxHeight="100%" />
           </FullScreenCenter>

src/WardrobePage.js

@@ -29,31 +29,7 @@ import { Delay } from "./util";
 function WardrobePage() {
   const { loading, error, data, wearItem } = useOutfitState();
   const [searchQuery, setSearchQuery] = React.useState("");
-
   const toast = useToast();
-  const [hasSentToast, setHasSentToast] = React.useState(false);
-  const wearItemAndToast = React.useCallback(
-    (itemIdToAdd) => {
-      wearItem(itemIdToAdd);
-
-      if (!hasSentToast) {
-        setTimeout(() => {
-          toast({
-            title: "So, the outfit didn't change 😅",
-            description:
-              "This is a prototype, and the outfit preview is static right " +
-              "now! But the list animation is good, yeah? Nice and smooth 😊",
-            status: "warning",
-            isClosable: true,
-            duration: 10000,
-            position: window.innerWidth < 992 ? "top" : "bottom-left",
-          });
-        }, 3000);
-        setHasSentToast(true);
-      }
-    },
-    [toast, wearItem, hasSentToast, setHasSentToast]
-  );
 
   React.useEffect(() => {
     if (error) {
@@ -106,13 +82,13 @@ function WardrobePage() {
             <SearchPanel
               query={searchQuery}
               wornItemIds={data.wornItemIds}
-              onWearItem={wearItemAndToast}
+              onWearItem={wearItem}
             />
           ) : (
             <ItemsPanel
               zonesAndItems={data.zonesAndItems}
               loading={loading}
-              onWearItem={wearItemAndToast}
+              onWearItem={wearItem}
             />
           )}
         </Box>

src/server/index.js

@@ -19,6 +19,7 @@ const typeDefs = gql`
 
   type Appearance {
     layers: [AppearanceLayer!]!
+    restrictedZones: [Zone!]!
   }
 
   type AppearanceLayer {
@@ -58,7 +59,16 @@ const resolvers = {
         itemId: item.id,
         bodyId: petType.bodyId,
       });
-      return { layers: swfAssets };
+
+      const restrictedZones = [];
+      for (const [i, bit] of Array.from(item.zonesRestrict).entries()) {
+        if (bit === "1") {
+          const zone = { id: i + 1 };
+          restrictedZones.push(zone);
+        }
+      }
+
+      return { layers: swfAssets, restrictedZones };
     },
   },
   AppearanceLayer: {
@@ -109,7 +119,7 @@ const resolvers = {
       const petStates = await petStateLoader.load(petType.id);
       const petState = petStates[0]; // TODO
       const swfAssets = await petSwfAssetLoader.load(petState.id);
-      return { layers: swfAssets };
+      return { layers: swfAssets, restrictedZones: [] };
     },
   },
 };

src/server/index.test.js

@@ -103,6 +103,10 @@ describe("Item", () => {
                   label
                 }
               }
+
+              restrictedZones {
+                id
+              }
             }
           }
         }
@@ -126,6 +130,14 @@ describe("Item", () => {
                   },
                 },
               ],
+              "restrictedZones": Array [
+                Object {
+                  "id": "20",
+                },
+                Object {
+                  "id": "22",
+                },
+              ],
             },
             "id": "38912",
             "name": "Zafara Agent Robe",
@@ -143,6 +155,14 @@ describe("Item", () => {
                   },
                 },
               ],
+              "restrictedZones": Array [
+                Object {
+                  "id": "37",
+                },
+                Object {
+                  "id": "38",
+                },
+              ],
             },
             "id": "38911",
             "name": "Zafara Agent Hood",
@@ -160,6 +180,7 @@ describe("Item", () => {
                   },
                 },
               ],
+              "restrictedZones": Array [],
             },
             "id": "37375",
             "name": "Moon and Stars Background",