Fix avatar part item opacity

src/layout/card/grid/item/NitroCardGridItemView.scss

@@ -9,6 +9,8 @@
         position: relative;
         width: 100%;
         height: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
         overflow: hidden;
 
         &.theme-default {
@@ -67,15 +69,6 @@
             background-position-y: 12px !important;
         }
 
-        .background {
-            background-position: center;
-            background-repeat: no-repeat;
-
-            &.disabled {
-                opacity: 0.5;
-            }
-        }
-
         .trade-button {
             position: absolute;
             bottom: 2px;

src/layout/card/grid/item/NitroCardGridItemView.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { FC } from 'react';
 import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
 import { useNitroCardGridContext } from '../context';
@@ -7,15 +6,14 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
 
 export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
 {
-    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, backgroundDisabled = false, children = null, ...rest } = props;
+    const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, children = null, ...rest } = props;
     const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext();
 
     const imageUrl = `url(${ itemImage })`;
 
     return (
         <div className={ `${ columns === undefined ? 'col' : ('col-' + columns) } pb-1 grid-item-container` }>
-            <div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } { ...rest }>
+            <div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) } { ...rest }>
-                <div className={'background position-absolute w-100 h-100' + classNames({ ' disabled': backgroundDisabled })} style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) }></div>
                 { (itemCount > 1) &&
                     <span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
                 { itemUnique && 

src/layout/card/grid/item/NitroCardGridItemView.types.ts

@@ -10,5 +10,4 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
     itemUniqueNumber?: number;
     itemUnseen?: boolean;
     columns?: number;
-    backgroundDisabled?: boolean;
 }

src/views/avatar-editor/AvatarEditorView.tsx

@@ -1,6 +1,6 @@
-import { AvatarDirectionAngle, AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
+import { AvatarDirectionAngle, AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { GetClubMemberLevel, GetSessionDataManager, LocalizeText } from '../../api';
+import { GetAvatarRenderManager, GetClubMemberLevel, GetSessionDataManager, LocalizeText } from '../../api';
 import { AvatarEditorEvent } from '../../events/avatar-editor';
 import { CreateMessageHook, SendMessageHook } from '../../hooks';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
@@ -31,7 +31,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
     const [ activeCategory, setActiveCategory ] = useState<IAvatarEditorCategoryModel>(null);
     const [ figureSetIds, setFigureSetIds ] = useState<number[]>([]);
     const [ boundFurnitureNames, setBoundFurnitureNames ] = useState<string[]>([]);
-    const [ savedFigures, setSavedFigures ] = useState<[ string, string ][]>(new Array(MAX_SAVED_FIGURES));
+    const [ savedFigures, setSavedFigures ] = useState<[ IAvatarFigureContainer, string ][]>(new Array(MAX_SAVED_FIGURES));
     const [ isWardrobeVisible, setIsWardrobeVisible ] = useState(false);
     const [ lastFigure, setLastFigure ] = useState<string>(null);
     const [ lastGender, setLastGender ] = useState<string>(null);
@@ -79,7 +79,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
     const onUserWardrobePageEvent = useCallback((event: UserWardrobePageEvent) =>
     {
         const parser = event.getParser();
-        const savedFigures: [ string, string ][] = [];
+        const savedFigures: [ IAvatarFigureContainer, string ][] = [];
 
         let i = 0;
 
@@ -90,9 +90,11 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
             i++;
         }
 
-        for(let [ index, value ] of parser.looks.entries())
+        for(let [ index, [ look, gender ] ] of parser.looks.entries())
         {
-            savedFigures[(index - 1)] = [ value[0], value[1] ];
+            const container = GetAvatarRenderManager().createFigureContainer(look);
+
+            savedFigures[(index - 1)] = [ container, gender ];
         }
 
         setSavedFigures(savedFigures)

src/views/avatar-editor/common/AvatarEditorGridPartItem.ts

@@ -1,9 +1,10 @@
-import { AvatarFigurePartType, IAvatarImageListener, IAvatarRenderManager, IFigurePart, IFigurePartSet, IGraphicAsset, IPartColor, NitroContainer, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
+import { AvatarFigurePartType, IAvatarImageListener, IAvatarRenderManager, IFigurePart, IFigurePartSet, IGraphicAsset, IPartColor, NitroAlphaFilter, NitroContainer, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
 import { GetAvatarRenderManager } from '../../../api';
 import { FigureData } from './FigureData';
 
 export class AvatarEditorGridPartItem implements IAvatarImageListener
 {
+    private static ALPHA_FILTER: NitroAlphaFilter = new NitroAlphaFilter(0.2);
     private static THUMB_DIRECTIONS: number[]   = [2, 6, 0, 4, 3, 1];
     private static DRAW_ORDER: string[]         = [
         AvatarFigurePartType.LEFT_HAND_ITEM,
@@ -209,7 +210,7 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener
             this._isSellable    = false;
         }
 
-        //if(this._isDisabled) this.setAlpha(container, 0.2);
+        if(this._isDisabled) this.setAlpha(container, 0.2);
 
         this._imageUrl = TextureUtils.generateImageUrl(container);
         
@@ -218,7 +219,7 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener
 
     private setAlpha(container: NitroContainer, alpha: number): NitroContainer
     {
-        container.alpha = alpha;
+        container.filters = [ AvatarEditorGridPartItem.ALPHA_FILTER ];
 
         return container;
     }

src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx

@@ -24,7 +24,7 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
     })
 
     return (
-        <NitroCardGridItemView backgroundDisabled={ partItem.isDisabled } itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }>
+        <NitroCardGridItemView itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }>
             { partItem.isHC && <CurrencyIcon className="position-absolute end-1 bottom-1" type={ 'hc' } /> }
             { partItem.isClear && <i className="icon clear-icon" /> }
             { partItem.isSellable && <i className="position-absolute icon sellable-icon end-1 bottom-1" /> }

src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx

@@ -1,11 +1,13 @@
 import { SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo } from 'react';
 import { Button } from 'react-bootstrap';
+import { GetAvatarRenderManager } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
 import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
 import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
+import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types';
 
 export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props =>
@@ -18,7 +20,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
 
         const [ figure, gender ] = savedFigures[index];
 
-        loadAvatarInEditor(figure, gender);
+        loadAvatarInEditor(figure.getFigureString(), gender);
     }, [ savedFigures, loadAvatarInEditor ]);
 
     const saveFigureAtWardrobeIndex = useCallback((index: number) =>
@@ -30,7 +32,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
         const figure = figureData.getFigureString();
         const gender = figureData.gender;
 
-        newFigures[index] = [ figure, gender ];
+        newFigures[index] = [ GetAvatarRenderManager().createFigureContainer(figure), gender ];
 
         setSavedFigures(newFigures);
         SendMessageHook(new SaveWardrobeOutfitMessageComposer((index + 1), figure, gender));
@@ -42,23 +44,17 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
 
         const items: JSX.Element[] = [];
 
-        savedFigures.forEach((figure, index) =>
+        savedFigures.forEach(([ figureContainer, gender ], index) =>
             {
-                let figureString = null;
+                const clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
-                let gender = null;
-
-                if(figure)
-                {
-                    figureString = (figure[0] || null);
-                    gender = (figure[1] || null);
-                }
 
                 items.push(
                     <NitroCardGridItemView key={ index } className="flex-column justify-content-end">
-                        { figureString && <AvatarImageView figure={ figureString } gender={ gender } direction={ 2 } /> }
+                        { figureContainer && <AvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
+                        { clubLevel > 0 && <CurrencyIcon type="hc" /> }
                         <div className="d-flex w-100 figure-button-container p-1">
                             <Button variant="link" size="sm" className="w-100" onClick={ event => saveFigureAtWardrobeIndex(index) }>Save</Button>
-                            { figureString && <Button variant="link" size="sm" className="w-100" onClick={ event => wearFigureAtIndex(index) }>Use</Button> }
+                            { figureContainer && <Button variant="link" size="sm" className="w-100" onClick={ event => wearFigureAtIndex(index) }>Use</Button> }
                         </div>
                     </NitroCardGridItemView>
                 );

src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.types.ts

@@ -1,10 +1,11 @@
+import { IAvatarFigureContainer } from '@nitrots/nitro-renderer';
 import { Dispatch, SetStateAction } from 'react';
 import { FigureData } from '../../common/FigureData';
 
 export interface AvatarEditorWardrobeViewProps
 {
     figureData: FigureData;
-    savedFigures: [ string, string ][];
+    savedFigures: [ IAvatarFigureContainer, string ][];
-    setSavedFigures: Dispatch<SetStateAction<[ string, string][]>>;
+    setSavedFigures: Dispatch<SetStateAction<[ IAvatarFigureContainer, string][]>>;
     loadAvatarInEditor: (figure: string, gender: string, reset?: boolean) => void;
 }