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

Add NFT avatar tab and wired extras UI

Browse Source
This commit is contained in:
Lorenzune
2026-03-26 05:24:53 +01:00
parent a1b267d8f2
commit 3b3e91f6d9
20 changed files with 542 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
+2 -2
View File
@@ -9,7 +9,7 @@ const DEFAULT_DIRECTION: number = 4;
export const AvatarEditorFigurePreviewView: FC<{}> = props =>
{
const [ direction, setDirection ] = useState<number>(DEFAULT_DIRECTION);
const { getFigureString = null } = useAvatarEditor();
const { getFigureString = null, gender = 'M' } = useAvatarEditor();
const rotateFigure = (newDirection: number) =>
{
@@ -28,7 +28,7 @@ export const AvatarEditorFigurePreviewView: FC<{}> = props =>
return (
<div className="flex flex-col figure-preview-container overflow-hidden relative">
<LayoutAvatarImageView direction={ direction } figure={ getFigureString } scale={ 2 } />
<LayoutAvatarImageView direction={ direction } figure={ getFigureString } gender={ gender } scale={ 2 } />
<AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
<div className="avatar-shadow" />
<div className="arrow-container">
src/components/avatar-editor/AvatarEditorNftView.tsx
+117
View File
@@ -0,0 +1,117 @@
import { AvatarFigurePartType, FigureDataContainer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { CreateLinkEvent, GetClubMemberLevel, IAvatarEditorCategory } from '../../api';
import { LayoutAvatarImageView, LayoutCurrencyIcon } from '../../common';
import { useAvatarEditor } from '../../hooks';
import { AvatarEditorIcon } from './AvatarEditorIcon';
import { AvatarEditorFigureSetView } from './figure-set';
import { AvatarEditorAdvancedColorView, AvatarEditorPaletteSetView } from './palette-set';
export const AvatarEditorNftView: FC<{
categories: IAvatarEditorCategory[];
}> = props =>
{
const { categories = [] } = props;
const [ didChange, setDidChange ] = useState(false);
const [ activeSetType, setActiveSetType ] = useState('');
const [ advancedColorMode, setAdvancedColorMode ] = useState(false);
const hasHC = GetClubMemberLevel() > 0;
const { maxPaletteCount = 1, selectedColorParts = null, getFirstSelectableColor = null, selectEditorColor = null, gender = null, setGender = null, getFigureString = '' } = useAvatarEditor();
const activeCategory = useMemo(() =>
{
return categories.find(category => category.setType === activeSetType) ?? null;
}, [ categories, activeSetType ]);
const selectSet = useCallback((setType: string) =>
{
const selectedPalettes = selectedColorParts[setType];
if(!selectedPalettes || !selectedPalettes.length) selectEditorColor(setType, 0, getFirstSelectableColor(setType));
setActiveSetType(setType);
}, [ getFirstSelectableColor, selectEditorColor, selectedColorParts ]);
useEffect(() =>
{
if(!categories || !categories.length || !didChange) return;
selectSet(categories[0]?.setType);
setDidChange(false);
}, [ categories, didChange, selectSet ]);
useEffect(() =>
{
setDidChange(true);
}, [ categories ]);
if(!categories.length || !activeCategory)
{
return (
<div className="flex flex-col items-center justify-center h-full text-sm text-[#888] gap-2">
<div className="text-lg font-bold text-white">NFT</div>
<div>No NFT items available.</div>
</div>
);
}
return (
<div className="flex flex-col overflow-hidden h-full gap-1">
<div className="flex items-center px-2 gap-2 shrink-0 flex-wrap">
{ categories.map(category =>
<div
key={ category.setType }
className="category-item flex items-center justify-center cursor-pointer"
onClick={ event => selectSet(category.setType) }>
{ (category.setType === AvatarFigurePartType.HEAD)
? (
<div className={ `relative flex items-center justify-center w-[28px] h-[28px] rounded-full overflow-hidden border ${ activeSetType === category.setType ? 'border-white bg-white/20' : 'border-white/30 bg-black/20' }` }>
<LayoutAvatarImageView classNames={ ['!w-[28px]', '!h-[28px]', '!left-0'] } direction={ 2 } figure={ getFigureString } gender={ gender } headOnly={ true } scale={ 0.42 } />
</div>
)
: <AvatarEditorIcon icon={ category.setType } selected={ activeSetType === category.setType } /> }
</div>
) }
</div>
{ (activeSetType === AvatarFigurePartType.HEAD) &&
<div className="flex items-center px-2 gap-2 shrink-0">
<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>
</div> }
<div className="flex-1 min-h-0 overflow-hidden">
<AvatarEditorFigureSetView category={ activeCategory } columnCount={ 6 } />
</div>
<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>
<div className={ `flex shrink-0 overflow-hidden gap-2 ${ maxPaletteCount === 2 ? 'dual-palette' : '' }` } style={ { height: '160px' } }>
{ (maxPaletteCount >= 1) &&
<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) &&
<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
+7 -1
View File
@@ -6,6 +6,7 @@ import { Button, ButtonGroup, NitroCardContentView, NitroCardHeaderView, NitroCa
import { useAvatarEditor } from '../../hooks';
import { AvatarEditorFigurePreviewView } from './AvatarEditorFigurePreviewView';
import { AvatarEditorModelView } from './AvatarEditorModelView';
import { AvatarEditorNftView } from './AvatarEditorNftView';
import { AvatarEditorPetView } from './AvatarEditorPetView';
import { AvatarEditorWardrobeView } from './AvatarEditorWardrobeView';
@@ -16,6 +17,7 @@ export const AvatarEditorView: FC<{}> = props =>
const isWardrobeOpen = (activeModelKey === AvatarEditorFigureCategory.WARDROBE);
const isPetsOpen = (activeModelKey === AvatarEditorFigureCategory.PETS);
const isNftOpen = (activeModelKey === AvatarEditorFigureCategory.NFT);
const processAction = (action: string) =>
{
@@ -85,10 +87,12 @@ export const AvatarEditorView: FC<{}> = props =>
const isActive = (activeModelKey === modelKey);
const isWardrobe = (modelKey === AvatarEditorFigureCategory.WARDROBE);
const isPets = (modelKey === AvatarEditorFigureCategory.PETS);
const isNft = (modelKey === AvatarEditorFigureCategory.NFT);
let tabClass = `tab ${ modelKey }`;
if(isWardrobe) tabClass = 'tab-wardrobe';
else if(isPets) tabClass = 'tab-pets';
else if(isNft) tabClass = 'tab-nft';
return (
<NitroCardTabsItemView key={ modelKey } isActive={ isActive } onClick={ event => setActiveModelKey(modelKey) }>
@@ -101,12 +105,14 @@ export const AvatarEditorView: FC<{}> = props =>
<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 && !isPetsOpen) &&
{ (activeModelKey.length > 0 && !isWardrobeOpen && !isPetsOpen && !isNftOpen) &&
<AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
{ isWardrobeOpen &&
<AvatarEditorWardrobeView /> }
{ isPetsOpen &&
<AvatarEditorPetView categories={ avatarModels[activeModelKey] } /> }
{ isNftOpen &&
<AvatarEditorNftView categories={ avatarModels[activeModelKey] } /> }
</div>
{ /* right: preview + actions */ }
<div className="flex flex-col shrink-0 w-[120px] gap-1 overflow-hidden">
src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
+16 -5
View File
@@ -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(() =>
{
@@ -35,26 +36,36 @@ export const AvatarEditorFigureSetItemView: FC<{
if(setType === AvatarFigurePartType.HEAD)
{
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked);
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked || isSellableNotOwned);
}
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>
);
};
src/components/avatar-editor/index.ts
+1
View File
@@ -1,6 +1,7 @@
export * from './AvatarEditorFigurePreviewView';
export * from './AvatarEditorIcon';
export * from './AvatarEditorModelView';
export * from './AvatarEditorNftView';
export * from './AvatarEditorPetView';
export * from './AvatarEditorView';
export * from './AvatarEditorWardrobeView';