duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Redone the avatar editor

Browse Source
This commit is contained in:
duckietm
2026-02-26 13:44:22 +01:00
parent 7ab3b24331
commit 10f08c6703
22 changed files with 382 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/avatar-editor/AvatarEditorModelView.tsx
+49 -24
View File
@@ -1,10 +1,11 @@
import { AvatarEditorFigureCategory, AvatarFigurePartType, FigureDataContainer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { IAvatarEditorCategory } from '../../api';
import { CreateLinkEvent, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategory } from '../../api';
import { LayoutCurrencyIcon } from '../../common';
import { useAvatarEditor } from '../../hooks';
import { AvatarEditorIcon } from './AvatarEditorIcon';
import { AvatarEditorFigureSetView } from './figure-set';
import { AvatarEditorPaletteSetView } from './palette-set';
import { AvatarEditorAdvancedColorView, AvatarEditorPaletteSetView } from './palette-set';
export const AvatarEditorModelView: FC<{
name: string,
@@ -14,6 +15,8 @@ export const AvatarEditorModelView: FC<{
const { name = '', categories = [] } = props;
const [ didChange, setDidChange ] = useState<boolean>(false);
const [ activeSetType, setActiveSetType ] = useState<string>('');
const [ advancedColorMode, setAdvancedColorMode ] = useState<boolean>(false);
const hasHC = GetClubMemberLevel() > 0;
const { maxPaletteCount = 1, gender = null, setGender = null, selectedColorParts = null, getFirstSelectableColor = null, selectEditorColor = null } = useAvatarEditor();
const activeCategory = useMemo(() =>
@@ -46,34 +49,56 @@ export const AvatarEditorModelView: FC<{
if(!activeCategory) return null;
return (
<div className="grid grid-cols-12 gap-2 overflow-hidden">
<div className="flex flex-col col-span-2">
<div className="flex flex-col overflow-hidden h-full gap-1">
{ /* ── Category / gender selector row ── */ }
<div className="flex items-center px-2 gap-3 shrink-0">
{ (name === AvatarEditorFigureCategory.GENERIC) &&
<>
<div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
<AvatarEditorIcon icon="male" selected={ gender === FigureDataContainer.MALE } />
</div>
<div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
<AvatarEditorIcon icon="female" selected={ gender === FigureDataContainer.FEMALE } />
</div>
</> }
{ (name !== AvatarEditorFigureCategory.GENERIC) && (categories.length > 0) && categories.map(category =>
{
return (
<div key={ category.setType } className="category-item items-center justify-center cursor-pointer flex" onClick={ event => selectSet(category.setType) }>
<AvatarEditorIcon icon={ category.setType } selected={ (activeSetType === category.setType) } />
<>
<div className="category-item flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
<AvatarEditorIcon icon="male" selected={ gender === FigureDataContainer.MALE } />
</div>
);
}) }
<div className="category-item flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
<AvatarEditorIcon icon="female" selected={ gender === FigureDataContainer.FEMALE } />
</div>
</> }
{ (name !== AvatarEditorFigureCategory.GENERIC) && categories.map(category =>
<div
key={ category.setType }
className="category-item flex items-center justify-center cursor-pointer"
onClick={ event => selectSet(category.setType) }>
<AvatarEditorIcon icon={ category.setType } selected={ activeSetType === category.setType } />
</div>
) }
</div>
<div className="flex flex-col overflow-hidden col-span-5">
<AvatarEditorFigureSetView category={ activeCategory } columnCount={ 3 } />
<div className="flex-1 min-h-0 overflow-hidden">
<AvatarEditorFigureSetView category={ activeCategory } columnCount={ 6 } />
</div>
<div className="flex flex-col overflow-hidden col-span-5">
<div className="flex shrink-0 items-center justify-end px-2">
<button
className={ `flex items-center gap-1 text-xs px-2 py-0.5 rounded border cursor-pointer transition-colors ${ advancedColorMode ? 'bg-sky-400 border-sky-300 text-white' : 'bg-sky-900/30 border-sky-600/50 text-white hover:text-yellow-800' }` }
onClick={ () => hasHC ? setAdvancedColorMode(prev => !prev) : CreateLinkEvent('habboUI/open/hccenter') }
>
Advanced Color
<LayoutCurrencyIcon type="hc" />
</button>
</div>
{ /* ── Colour palette row at bottom ── */ }
<div className={ `flex shrink-0 overflow-hidden gap-2 ${ maxPaletteCount === 2 ? 'dual-palette' : '' }` } style={ { height: '160px' } }>
{ (maxPaletteCount >= 1) &&
<AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 5 } paletteIndex={ 0 } /> }
<div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
{ advancedColorMode
? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 0 } />
: <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 0 } /> }
</div> }
{ (maxPaletteCount === 2) &&
<AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 5 } paletteIndex={ 1 } /> }
<div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
{ advancedColorMode
? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 1 } />
: <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 1 } /> }
</div> }
</div>
</div>
);
src/components/avatar-editor/AvatarEditorView.tsx
+23 -19
View File
@@ -2,19 +2,18 @@ import { AddLinkEventTracker, AvatarEditorFigureCategory, GetSessionDataManager,
import { FC, useEffect, useState } from 'react';
import { FaDice, FaRedo, FaTrash } from 'react-icons/fa';
import { AvatarEditorAction, LocalizeText, SendMessageComposer } from '../../api';
import { Button, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { Button, ButtonGroup, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { useAvatarEditor } from '../../hooks';
import { AvatarEditorFigurePreviewView } from './AvatarEditorFigurePreviewView';
import { AvatarEditorModelView } from './AvatarEditorModelView';
import { AvatarEditorWardrobeView } from './AvatarEditorWardrobeView';
const DEFAULT_MALE_FIGURE: string = 'hr-100.hd-180-7.ch-215-66.lg-270-79.sh-305-62.ha-1002-70.wa-2007';
const DEFAULT_FEMALE_FIGURE: string = 'hr-515-33.hd-600-1.ch-635-70.lg-716-66-62.sh-735-68';
export const AvatarEditorView: FC<{}> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const { setIsVisible: setEditorVisibility, avatarModels, activeModelKey, setActiveModelKey, loadAvatarData, getFigureStringWithFace, gender, figureSetIds = [], randomizeCurrentFigure = null, getFigureString = null } = useAvatarEditor();
const { setIsVisible: setEditorVisibility, avatarModels, activeModelKey, setActiveModelKey, loadAvatarData, getFigureStringWithFace, gender, randomizeCurrentFigure = null, getFigureString = null } = useAvatarEditor();
const isWardrobeOpen = (activeModelKey === AvatarEditorFigureCategory.WARDROBE);
const processAction = (action: string) =>
{
@@ -74,48 +73,53 @@ export const AvatarEditorView: FC<{}> = props =>
if(!isVisible) return null;
return (
<NitroCardView className="w-[620px] h-[374px] nitro-avatar-editor" uniqueKey="avatar-editor">
<NitroCardView
className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[620px]' } h-[374px]` }
uniqueKey="avatar-editor">
<NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardTabsView>
<NitroCardTabsView classNames={ ['avatar-editor-tabs'] }>
{ Object.keys(avatarModels).map(modelKey =>
{
const isActive = (activeModelKey === modelKey);
const isWardrobe = (modelKey === AvatarEditorFigureCategory.WARDROBE);
return (
<NitroCardTabsItemView key={ modelKey } isActive={ isActive } onClick={ event => setActiveModelKey(modelKey) }>
{ LocalizeText(`avatareditor.category.${ modelKey }`) }
<div className={ isWardrobe ? 'tab-wardrobe' : `tab ${ modelKey }` } />
</NitroCardTabsItemView>
);
}) }
</NitroCardTabsView>
<NitroCardContentView>
<Grid className="grid gap-2 overflow-hidden">
<div className="flex flex-col col-span-9 overflow-hidden">
{ ((activeModelKey.length > 0) && (activeModelKey !== AvatarEditorFigureCategory.WARDROBE)) &&
<div className="flex gap-2 overflow-hidden h-full">
{ /* left: model view or wardrobe */ }
<div className="flex flex-col flex-1 min-w-0 overflow-hidden">
{ (activeModelKey.length > 0 && !isWardrobeOpen) &&
<AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
{ (activeModelKey === AvatarEditorFigureCategory.WARDROBE) &&
{ isWardrobeOpen &&
<AvatarEditorWardrobeView /> }
</div>
<div className="flex flex-col col-span-3 overflow-hidden gap-1">
{ /* right: preview + actions */ }
<div className="flex flex-col shrink-0 w-[120px] gap-1 overflow-hidden">
<AvatarEditorFigurePreviewView />
<div className="flex flex-col grow! gap-1">
<div className="relative inline-flex align-middle">
<Button className="flex-auto " variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
<ButtonGroup className="w-full">
<Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
<FaRedo className="fa-icon" />
</Button>
<Button className="flex-auto" variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
<Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
<FaTrash className="fa-icon" />
</Button>
<Button className="flex-auto" variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
<Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
<FaDice className="fa-icon" />
</Button>
</div>
</ButtonGroup>
<Button className="w-full" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
{ LocalizeText('avatareditor.save') }
</Button>
</div>
</div>
</Grid>
</div>
</NitroCardContentView>
</NitroCardView>
);
src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
+10 -6
View File
@@ -1,6 +1,6 @@
import { AvatarFigurePartType } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { AvatarEditorThumbnailsHelper, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
import { AvatarEditorThumbnailsHelper, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
import { useAvatarEditor } from '../../../hooks';
import { InfiniteGrid } from '../../../layout';
@@ -17,7 +17,9 @@ export const AvatarEditorFigureSetItemView: FC<{
const [ assetUrl, setAssetUrl ] = useState<string>('');
const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
const clubLevel = partItem.partSet?.clubLevel ?? 0;
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (clubLevel > 0);
const isLocked = isHC && (GetClubMemberLevel() < clubLevel);
useEffect(() =>
{
@@ -25,17 +27,19 @@ export const AvatarEditorFigureSetItemView: FC<{
const loadImage = async () =>
{
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
const partClubLevel = partItem.partSet?.clubLevel ?? 0;
const partIsHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (partClubLevel > 0);
const partIsLocked = partIsHC && (GetClubMemberLevel() < partClubLevel);
let url: string = null;
if(setType === AvatarFigurePartType.HEAD)
{
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), isHC);
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked);
}
else
{
url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, isHC);
url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, partIsLocked);
}
if(url && url.length) setAssetUrl(url);
@@ -47,7 +51,7 @@ export const AvatarEditorFigureSetItemView: FC<{
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 }>
<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 }>
{ !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" /> }
src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx
+1 -1
View File
@@ -29,7 +29,7 @@ export const AvatarEditorFigureSetView: FC<{
};
return (
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ 50 } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
{
if(!item) return null;
src/components/avatar-editor/palette-set/AvatarEditorAdvancedColorView.tsx
+82
View File
@@ -0,0 +1,82 @@
import { IPartColor } from '@nitrots/nitro-renderer';
import { FC, useCallback, useMemo, useRef } from 'react';
import { ColorUtils, GetClubMemberLevel, IAvatarEditorCategory } from '../../../api';
import { useAvatarEditor } from '../../../hooks';
const findNearestColor = (hex: string, colors: IPartColor[]): IPartColor | null =>
{
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
const maxLevel = GetClubMemberLevel();
let nearest: IPartColor | null = null;
let minDist = Infinity;
for(const color of colors)
{
if(color.clubLevel > maxLevel) continue;
const cr = (color.rgb >> 16) & 0xFF;
const cg = (color.rgb >> 8) & 0xFF;
const cb = color.rgb & 0xFF;
const dist = (r - cr) ** 2 + (g - cg) ** 2 + (b - cb) ** 2;
if(dist < minDist) { minDist = dist; nearest = color; }
}
return nearest;
};
export const AvatarEditorAdvancedColorView: FC<{
category: IAvatarEditorCategory;
paletteIndex: number;
}> = ({ category, paletteIndex }) =>
{
const { selectedColorParts = null, selectEditorColor = null } = useAvatarEditor();
const inputRef = useRef<HTMLInputElement>(null);
const selectedColor = useMemo(() =>
{
if(!selectedColorParts?.[category?.setType]?.[paletteIndex]) return null;
return selectedColorParts[category.setType][paletteIndex];
}, [ category, selectedColorParts, paletteIndex ]);
const hexColor = useMemo(() =>
ColorUtils.makeColorNumberHex((selectedColor?.rgb ?? 0) & 0xFFFFFF),
[ selectedColor ]);
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) =>
{
const colors = category?.colorItems?.[paletteIndex];
if(!colors) return;
const nearest = findNearestColor(e.target.value, colors);
if(nearest) selectEditorColor(category.setType, paletteIndex, nearest.id);
}, [ category, paletteIndex, selectEditorColor ]);
return (
<div className="flex h-full p-1.5">
<div
className="flex-1 rounded-lg cursor-pointer relative border-2 border-white/20 overflow-hidden"
style={{ backgroundColor: hexColor }}
onClick={ () => inputRef.current?.click() }
>
<input
ref={ inputRef }
type="color"
value={ hexColor }
onChange={ handleChange }
className="absolute opacity-0 inset-0 w-full h-full cursor-pointer"
/>
<div className="absolute bottom-0 left-0 right-0 py-1 text-center bg-black/40">
<span className="text-xs font-mono font-bold text-white">
{ hexColor.toUpperCase() }
</span>
</div>
</div>
</div>
);
};
src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
+3 -2
View File
@@ -1,6 +1,6 @@
import { ColorConverter, IPartColor } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { GetConfigurationValue } from '../../../api';
import { GetClubMemberLevel, GetConfigurationValue } from '../../../api';
import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
import { InfiniteGrid } from '../../../layout';
@@ -16,9 +16,10 @@ export const AvatarEditorPaletteSetItem: FC<{
if(!partColor) return null;
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (partColor.clubLevel > 0);
const isLocked = isHC && (GetClubMemberLevel() < partColor.clubLevel);
return (
<InfiniteGrid.Item itemHighlight className="clear-bg" itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
<InfiniteGrid.Item itemHighlight className={ `clear-bg aspect-square${ isLocked ? ' opacity-50' : '' }` } itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
{ isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
</InfiniteGrid.Item>
);
src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export const AvatarEditorPaletteSetView: FC<{
};
return (
<InfiniteGrid<IPartColor> columnCount={ columnCount } itemRender={ (item: IPartColor) =>
<InfiniteGrid<IPartColor> columnCount={ columnCount } estimateSize={ 18 } squareItems itemRender={ (item: IPartColor) =>
{
if(!item) return null;
src/components/avatar-editor/palette-set/index.ts
+1
View File
@@ -1,2 +1,3 @@
export * from './AvatarEditorAdvancedColorView';
export * from './AvatarEditorPaletteSetItemView';
export * from './AvatarEditorPaletteSetView';