🆙 Update Avatar-Editor, colors now also scale

This commit is contained in:
duckietm
2026-02-26 16:48:47 +01:00
parent 0678e86d3d
commit 359932f891
6 changed files with 33 additions and 11 deletions
@@ -1,17 +1,15 @@
import { ColorConverter, IPartColor } from '@nitrots/nitro-renderer';
import { IPartColor } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { GetClubMemberLevel, GetConfigurationValue } from '../../../api';
import { ColorUtils, GetClubMemberLevel, GetConfigurationValue } from '../../../api';
import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
import { InfiniteGrid } from '../../../layout';
export const AvatarEditorPaletteSetItem: FC<{
setType: string;
partColor: IPartColor;
isSelected: boolean;
width?: string;
} & LayoutGridItemProps> = props =>
{
const { setType = null, partColor = null, isSelected = false, width = '100%', ...rest } = props;
const { partColor = null, isSelected = false, style = {}, ...rest } = props;
if(!partColor) return null;
@@ -19,7 +17,17 @@ export const AvatarEditorPaletteSetItem: FC<{
const isLocked = isHC && (GetClubMemberLevel() < partColor.clubLevel);
return (
<InfiniteGrid.Item itemHighlight className={ `clear-bg aspect-square${ isLocked ? ' opacity-50' : '' }` } itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
<InfiniteGrid.Item
itemHighlight
className={ `clear-bg${ isLocked ? ' opacity-50' : '' }` }
itemActive={ isSelected }
itemColor={ ColorUtils.makeColorNumberHex(partColor.rgb & 0xFFFFFF) }
style={ {
aspectRatio: '1 / 1',
minHeight: '14px',
...style
} }
{ ...rest }>
{ isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
</InfiniteGrid.Item>
);
@@ -29,7 +29,7 @@ export const AvatarEditorPaletteSetView: FC<{
if(!item) return null;
return (
<AvatarEditorPaletteSetItem isSelected={ isPartColorSelected(item) } partColor={ item } setType={ category.setType } width={ `calc(100% / ${ columnCount }` } onClick={ event => selectEditorColor(category.setType, paletteIndex, item.id) } />
<AvatarEditorPaletteSetItem isSelected={ isPartColorSelected(item) } partColor={ item } onClick={ event => selectEditorColor(category.setType, paletteIndex, item.id) } />
);
} } items={ category.colorItems[paletteIndex] } overscan={ columnCount } />
);