diff --git a/src/api/avatar/AvatarEditorThumbnailsHelper.ts b/src/api/avatar/AvatarEditorThumbnailsHelper.ts index ad0db38..c319d2a 100644 --- a/src/api/avatar/AvatarEditorThumbnailsHelper.ts +++ b/src/api/avatar/AvatarEditorThumbnailsHelper.ts @@ -87,6 +87,9 @@ export class AvatarEditorThumbnailsHelper AvatarFigurePartType.PET, 'ptl', 'ptr', + AvatarFigurePartType.MISC, + 'mcl', + 'mcr', ]; private static getThumbnailKey(setType: string, part: IAvatarEditorCategoryPartItem, partColors?: IPartColor[], isDisabled?: boolean): string diff --git a/src/assets/images/wardrobe/misc.png b/src/assets/images/wardrobe/misc.png new file mode 100644 index 0000000..ea88b7f Binary files /dev/null and b/src/assets/images/wardrobe/misc.png differ diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx index 6d23a3c..a150bec 100644 --- a/src/components/avatar-editor/AvatarEditorView.tsx +++ b/src/components/avatar-editor/AvatarEditorView.tsx @@ -88,11 +88,13 @@ export const AvatarEditorView: FC<{}> = props => const isWardrobe = (modelKey === AvatarEditorFigureCategory.WARDROBE); const isPets = (modelKey === AvatarEditorFigureCategory.PETS); const isNft = (modelKey === AvatarEditorFigureCategory.NFT); + const isMisc = (modelKey === AvatarEditorFigureCategory.MISC); let tabClass = `tab ${ modelKey }`; if(isWardrobe) tabClass = 'tab-wardrobe'; else if(isPets) tabClass = 'tab-pets'; else if(isNft) tabClass = 'tab-nft'; + else if(isMisc) tabClass = 'tab-misc'; return ( setActiveModelKey(modelKey) }> diff --git a/src/css/index.css b/src/css/index.css index af06402..dc4905c 100644 --- a/src/css/index.css +++ b/src/css/index.css @@ -1916,6 +1916,15 @@ body { background-position: center; background-size: 22px 22px; } + + .tab-misc { + width: 34px; + height: 22px; + background-image: url('@/assets/images/wardrobe/misc.png'); + background-repeat: no-repeat; + background-position: center; + background-size: 24px 22px; + } } .nitro-wired__variable-picker-portal { diff --git a/src/hooks/avatar-editor/useAvatarEditor.ts b/src/hooks/avatar-editor/useAvatarEditor.ts index bb1cedf..06285c7 100644 --- a/src/hooks/avatar-editor/useAvatarEditor.ts +++ b/src/hooks/avatar-editor/useAvatarEditor.ts @@ -71,6 +71,10 @@ const useAvatarEditorState = () => setMaxPaletteCount(partItem.maxPaletteCount || 1); selectPart(setType, partId); + + // Pet (pt) and Misc (mc) cannot be equipped together — equipping one unequips the other. + if(setType === AvatarFigurePartType.PET) selectPart(AvatarFigurePartType.MISC, -1); + else if(setType === AvatarFigurePartType.MISC) selectPart(AvatarFigurePartType.PET, -1); }, [ activeModel, selectPart ]); const selectEditorColor = useCallback((setType: string, paletteId: number, colorId: number) => @@ -316,6 +320,7 @@ const useAvatarEditorState = () => newAvatarModels[AvatarEditorFigureCategory.TORSO] = [ AvatarFigurePartType.CHEST, AvatarFigurePartType.CHEST_PRINT, AvatarFigurePartType.COAT_CHEST, AvatarFigurePartType.CHEST_ACCESSORY ].map(setType => buildCategory(setType, buildModeDefault)); newAvatarModels[AvatarEditorFigureCategory.LEGS] = [ AvatarFigurePartType.LEGS, AvatarFigurePartType.SHOES, AvatarFigurePartType.WAIST_ACCESSORY ].map(setType => buildCategory(setType, buildModeDefault)); newAvatarModels[AvatarEditorFigureCategory.PETS] = [ AvatarFigurePartType.PET ].map(setType => buildCategory(setType)).filter(Boolean); + newAvatarModels[AvatarEditorFigureCategory.MISC] = [ AvatarFigurePartType.MISC ].map(setType => buildCategory(setType)).filter(Boolean); newAvatarModels[AvatarEditorFigureCategory.NFT] = [ AvatarFigurePartType.HEAD, AvatarFigurePartType.HAIR,