🆙 Init V3

src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx

@@ -0,0 +1,56 @@
+import { AvatarFigurePartType } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { AvatarEditorThumbnailsHelper, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
+import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
+import { useAvatarEditor } from '../../../hooks';
+import { InfiniteGrid } from '../../../layout';
+import { AvatarEditorIcon } from '../AvatarEditorIcon';
+
+export const AvatarEditorFigureSetItemView: FC<{
+    setType: string;
+    partItem: IAvatarEditorCategoryPartItem;
+    isSelected: boolean;
+    width?: string;
+} & LayoutGridItemProps> = props =>
+{
+    const { setType = null, partItem = null, isSelected = false, width = '100%', ...rest } = props;
+    const [ assetUrl, setAssetUrl ] = useState<string>('');
+    const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
+
+    const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
+
+    useEffect(() =>
+    {
+        if(!setType || !setType.length || !partItem) return;
+
+        const loadImage = async () =>
+        {
+            const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
+
+            let url: string = null;
+
+            if(setType === AvatarFigurePartType.HEAD)
+            {
+                url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), isHC);
+            }
+            else
+            {
+                url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, isHC);
+            }
+
+            if(url && url.length) setAssetUrl(url);
+        };
+
+        loadImage();
+    }, [ setType, partItem, selectedColorParts, getFigureStringWithFace ]);
+
+    if(!partItem) return null;
+
+    return (
+        <InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } style={ { flex: '1', backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
+            { !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute end-1 bottom-1" type="hc" /> }
+            { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
+            { !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="end-1 bottom-1 absolute" icon="sellable" /> }
+        </InfiniteGrid.Item>
+    );
+};

src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { IAvatarEditorCategory, IAvatarEditorCategoryPartItem } from '../../../api';
+import { useAvatarEditor } from '../../../hooks';
+import { InfiniteGrid } from '../../../layout';
+import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
+
+export const AvatarEditorFigureSetView: FC<{
+    category: IAvatarEditorCategory;
+    columnCount: number;
+}> = props =>
+{
+    const { category = null, columnCount = 3 } = props;
+    const { selectedParts = null, selectEditorPart } = useAvatarEditor();
+
+    const isPartItemSelected = (partItem: IAvatarEditorCategoryPartItem) =>
+    {
+        if(!category || !category.setType || !selectedParts) return false;
+
+        if(!selectedParts[category.setType])
+        {
+            if(partItem.isClear) return true;
+
+            return false;
+        }
+
+        const partId = selectedParts[category.setType];
+
+        return (partId === partItem.id);
+    };
+
+    return (
+        <InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
+        {
+            if(!item) return null;
+
+            return (
+                <AvatarEditorFigureSetItemView isSelected={ isPartItemSelected(item) } partItem={ item } setType={ category.setType } width={ `calc(100% / ${ columnCount }` } onClick={ event => selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
+            );
+        } } items={ category.partItems } overscan={ columnCount } />
+    );
+};

src/components/avatar-editor/figure-set/index.ts

@@ -0,0 +1,2 @@
+export * from './AvatarEditorFigureSetItemView';
+export * from './AvatarEditorFigureSetView';