diff --git a/src/OutfitPreview.js b/src/OutfitPreview.js index b420aa1..6a60add 100644 --- a/src/OutfitPreview.js +++ b/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 = [ - ...data.petAppearance.layers, - ...data.items.map((i) => i.appearanceOn.layers).flat(), + const allAppearances = [ + data.petAppearance, + ...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 ( - {allLayers.map((layer) => ( - + {visibleLayers.map((layer) => ( + diff --git a/src/WardrobePage.js b/src/WardrobePage.js index 947aceb..e929bc5 100644 --- a/src/WardrobePage.js +++ b/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() { ) : ( )} diff --git a/src/server/index.js b/src/server/index.js index 10081ad..e54856f 100644 --- a/src/server/index.js +++ b/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: [] }; }, }, }; diff --git a/src/server/index.test.js b/src/server/index.test.js index b3526a7..cbf9cb6 100644 --- a/src/server/index.test.js +++ b/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",