From dc388d061cc28380ae8f1a0f44e59cf2b4cf8bc9 Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Wed, 25 Mar 2026 17:28:33 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20add=20check=20for=20pets=20when?=
 =?UTF-8?q?=20sellable=20is=20enabled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../avatar/IAvatarEditorCategoryPartItem.ts   |  1 +
 .../AvatarEditorFigureSetItemView.tsx         | 13 ++++++++----
 src/css/index.css                             | 21 +++++++++++++++++++
 src/hooks/avatar-editor/useAvatarEditor.ts    |  8 +++++--
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/api/avatar/IAvatarEditorCategoryPartItem.ts b/src/api/avatar/IAvatarEditorCategoryPartItem.ts
index d1cbc0d..46f6991 100644
--- a/src/api/avatar/IAvatarEditorCategoryPartItem.ts
+++ b/src/api/avatar/IAvatarEditorCategoryPartItem.ts
@@ -7,4 +7,5 @@ export interface IAvatarEditorCategoryPartItem
     usesColor?: boolean;
     maxPaletteCount?: number;
     isClear?: boolean;
+    isSellableNotOwned?: boolean;
 }
diff --git a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
index fb33358..b021c5e 100644
--- a/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
+++ b/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
@@ -20,6 +20,7 @@ export const AvatarEditorFigureSetItemView: FC<{
     const clubLevel = partItem.partSet?.clubLevel ?? 0;
     const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (clubLevel > 0);
     const isLocked = isHC && (GetClubMemberLevel() < clubLevel);
+    const isSellableNotOwned = partItem.isSellableNotOwned ?? false;
 
     useEffect(() =>
     {
@@ -39,22 +40,26 @@ export const AvatarEditorFigureSetItemView: FC<{
             }
             else
             {
-                url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, partIsLocked);
+                url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, partIsLocked || isSellableNotOwned);
             }
 
             if(url && url.length) setAssetUrl(url);
         };
 
         loadImage();
-    }, [ setType, partItem, selectedColorParts, getFigureStringWithFace ]);
+    }, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned ]);
 
     if(!partItem) return null;
 
     return (
-        <InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }` } style={ { backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
+        <InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ isSellableNotOwned ? ' pet-sellable-locked' : '' }` } style={ { backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
             { !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
             { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
-            { !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
+            { !partItem.isClear && partItem.partSet.isSellable && !isSellableNotOwned && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
+            { isSellableNotOwned &&
+                <div className="pet-sellable-badge">
+                    <LayoutCurrencyIcon type={ -1 } />
+                </div> }
         </InfiniteGrid.Item>
     );
 };
diff --git a/src/css/index.css b/src/css/index.css
index 0e0dc01..4365664 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1232,6 +1232,27 @@ body {
     overflow: hidden !important;
 }
 
+.pet-sellable-locked {
+    opacity: 0.5;
+    cursor: not-allowed !important;
+    position: relative;
+}
+
+.pet-sellable-badge {
+    position: absolute;
+    bottom: 2px;
+    right: 2px;
+    display: flex;
+    align-items: center;
+    gap: 1px;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 3px;
+    padding: 1px 3px;
+    font-size: 9px;
+    color: #ffd700;
+    font-weight: bold;
+}
+
 .pet-remove-btn {
     background: none;
     border: none;
diff --git a/src/hooks/avatar-editor/useAvatarEditor.ts b/src/hooks/avatar-editor/useAvatarEditor.ts
index ae401de..420b9f9 100644
--- a/src/hooks/avatar-editor/useAvatarEditor.ts
+++ b/src/hooks/avatar-editor/useAvatarEditor.ts
@@ -65,6 +65,8 @@ const useAvatarEditorState = () =>
 
         if(GetClubMemberLevel() < partItem.partSet.clubLevel) return;
 
+        if(partItem.isSellableNotOwned) return;
+
         setMaxPaletteCount(partItem.maxPaletteCount || 1);
 
         selectPart(setType, partId);
@@ -271,13 +273,15 @@ const useAvatarEditorState = () =>
 
                 if(!partSet || !partSet.isSelectable || ((partSet.gender !== gender) && (partSet.gender !== AvatarFigurePartType.UNISEX))) continue;
 
-                if(partSet.isSellable && figureSetIds.indexOf(partSet.id) === -1) continue;
+                const isSellableNotOwned = partSet.isSellable && figureSetIds.indexOf(partSet.id) === -1;
+
+                if(isSellableNotOwned && setType !== AvatarFigurePartType.PET) continue;
 
                 let maxPaletteCount = 0;
 
                 for(const part of partSet.parts) maxPaletteCount = Math.max(maxPaletteCount, part.colorLayerIndex);
 
-                partItems.push({ id: partSet.id, partSet, usesColor, maxPaletteCount });
+                partItems.push({ id: partSet.id, partSet, usesColor, maxPaletteCount, isSellableNotOwned });
             }
 
             partItems.sort(AvatarEditorPartSorter(false));