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

🆙 Fix the avatar-editor faces

Browse Source
This commit is contained in:
duckietm
2026-04-29 15:44:17 +02:00
parent 78aedc4faa
commit eb0bf80dfa
9 changed files with 102 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/UITexts.example
+2 -1
View File
@@ -168,6 +168,7 @@
"nitro.login.error.missing_username": "Please choose a Habbo name.",
"nitro.login.error.username_length": "Habbo name must be 3–16 characters.",
"nitro.login.error.username_taken": "This Habbo name is already taken.",
"nitro.login.error.missing_email": "Please enter your email address."
"nitro.login.error.missing_email": "Please enter your email address.",
"inventory.effects.activate": "Use selected effect"
}
}
src/api/avatar/AvatarEditorThumbnailsHelper.ts
+47 -1
View File
@@ -227,9 +227,11 @@ export class AvatarEditorThumbnailsHelper
if(isDisabled) sprite.filters = [ AvatarEditorThumbnailsHelper.ALPHA_FILTER ];
const frame = AvatarEditorThumbnailsHelper.findOpaqueBoundsFrame(sprite, texture.width, texture.height);
const imageUrl = await TextureUtils.generateImageUrl({
target: sprite,
frame: new NitroRectangle(0, 0, texture.width, texture.height)
frame
});
sprite.destroy();
@@ -244,6 +246,50 @@ export class AvatarEditorThumbnailsHelper
});
}
private static findOpaqueBoundsFrame(sprite: NitroSprite, fallbackWidth: number, fallbackHeight: number): NitroRectangle
{
try
{
const data = TextureUtils.getPixels(sprite);
if(!data) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
const pixels = data.pixels as Uint8ClampedArray | Uint8Array;
const width = data.width;
const height = data.height;
if(!pixels || width <= 0 || height <= 0) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
const ALPHA_THRESHOLD = 8;
let minX = width;
let minY = height;
let maxX = -1;
let maxY = -1;
for(let y = 0; y < height; y++)
{
const rowStart = y * width * 4;
for(let x = 0; x < width; x++)
{
if(pixels[rowStart + (x * 4) + 3] > ALPHA_THRESHOLD)
{
if(x < minX) minX = x;
if(x > maxX) maxX = x;
if(y < minY) minY = y;
if(y > maxY) maxY = y;
}
}
}
if(maxX < minX || maxY < minY) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
return new NitroRectangle(minX, minY, (maxX - minX) + 1, (maxY - minY) + 1);
}
catch
{
return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
}
}
private static sortByDrawOrder(a: IFigurePart, b: IFigurePart): number
{
const indexA = AvatarEditorThumbnailsHelper.DRAW_ORDER.indexOf(a.type);
src/components/avatar-editor/AvatarEditorView.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export const AvatarEditorView: FC<{}> = props =>
return (
<NitroCardView
className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[620px]' } h-[460px]` }
className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[600px]' } h-[460px]` }
uniqueKey="avatar-editor">
<NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardTabsView classNames={ ['avatar-editor-tabs'] }>
src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ export const AvatarEditorFigureSetItemView: FC<{
itemActive={ isSelected }
itemImage={ (!partItem.isClear && isHead) ? assetUrl : undefined }
className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ !partItem.isClear && isSellableNotOwned ? ' pet-sellable-locked' : '' }` }
style={ isHead ? { backgroundSize: '200%', backgroundPosition: 'center -32px' } : undefined }
style={ isHead ? { backgroundSize: 'auto 80%', backgroundPosition: 'center', imageRendering: 'pixelated' } : undefined }
{ ...rest }
>
{ !partItem.isClear && assetUrl && !isHead &&
src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx
+2 -2
View File
@@ -30,12 +30,12 @@ export const AvatarEditorFigureSetView: FC<{
};
return (
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ estimateSize } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } itemMinWidth={ 42 } rowGap={ 8 } estimateSize={ estimateSize } 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) } />
<AvatarEditorFigureSetItemView isSelected={ isPartItemSelected(item) } partItem={ item } setType={ category.setType } onClick={ event => selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
);
} } items={ category.partItems } overscan={ columnCount } />
);
src/components/friends/views/friends-bar/FriendBarItemView.tsx
+4 -4
View File
@@ -33,7 +33,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
onClick={() => setVisible(prev => !prev)}
>
<div className="absolute left-[6px] top-1/2 h-[24px] w-[24px] -translate-y-1/2 bg-[url('@/assets/images/toolbar/friend-search.png')] bg-contain bg-center bg-no-repeat pointer-events-none" />
<div className="truncate text-[0.8rem] font-bold">{LocalizeText('friend.bar.find.title')}</div>
<div className="truncate text-[0.83rem]">{LocalizeText('friend.bar.find.title')}</div>
</motion.button>
<AnimatePresence>
@@ -45,10 +45,10 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
transition={{ type: "spring", stiffness: 400, damping: 25 }}
className="absolute bottom-[calc(100%+12px)] left-1/2 -translate-x-1/2 tbme-panel whitespace-nowrap z-[80] flex flex-col items-center gap-2 pointer-events-auto min-w-[170px]"
>
<div className="text-white text-[13px] font-bold drop-shadow-[1px_1px_0_#000]">{LocalizeText('friend.bar.find.title')}</div>
<div className="text-white text-[13px] drop-shadow-[1px_1px_0_#000]">{LocalizeText('friend.bar.find.title')}</div>
<div className="text-white/80 text-xs px-2">{LocalizeText('friend.bar.find.text')}</div>
<button
className="px-3 py-1 bg-black/40 hover:bg-black/60 border border-white/10 rounded-lg text-white text-[11px] font-bold transition-colors cursor-pointer mt-1"
className="px-3 py-1 bg-black/40 hover:bg-black/60 border border-white/10 rounded-lg text-white text-[11px] transition-colors cursor-pointer mt-1"
onClick={event => { event.stopPropagation(); SendMessageComposer(new FindNewFriendsMessageComposer()); setVisible(false); }}
>
{LocalizeText('friend.bar.find.button')}
@@ -83,7 +83,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
className="relative flex h-[34px] w-[132px] items-center rounded-[7px] border border-[#9fc56f] bg-[#6f8f39] pl-[44px] pr-[10px] text-left text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)] overflow-visible"
onClick={() => setVisible(prev => !prev)}
>
<div className="truncate text-[0.82rem] font-bold">{friend.name}</div>
<div className="truncate text-[0.83rem]">{friend.name}</div>
</motion.button>
<AnimatePresence>
src/components/friends/views/friends-bar/FriendsBarView.tsx
+2 -2
View File
@@ -37,7 +37,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
>
{ (requestsCount > 0) &&
<motion.div variants={ itemVariants }>
<div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.74rem] font-bold whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
<div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.83rem] whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
{ requestsCount } { LocalizeText('friendbar.requests.title') }
</div>
</motion.div> }
@@ -82,7 +82,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
animate="visible"
exit="exit"
>
<div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.74rem] font-medium whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
<div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.83rem] font-medium whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
Nessun amico online
</div>
</motion.div> }
src/css/index.css
+1 -1
View File
@@ -1823,7 +1823,7 @@ body {
position: relative;
aspect-ratio: 1;
width: 100%;
max-width: 42px;
max-width: 64px;
border-radius: 0.3rem !important;
overflow: hidden !important;
background-color: #e9e8e4;
src/layout/InfiniteGrid.tsx
+42 -5
View File
@@ -10,19 +10,54 @@ type Props<T> = {
overscan?: number;
estimateSize?: number;
squareItems?: boolean;
itemMinWidth?: number;
rowGap?: number;
itemRender?: (item: T, index?: number) => ReactElement;
}
const GRID_GAP_PX = 4;
const InfiniteGridRoot = <T,>(props: Props<T>) =>
{
const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, squareItems = false, itemRender = null } = props;
const { items = [], columnCount: columnCountProp = 4, overscan = 5, estimateSize = 45, squareItems = false, itemMinWidth = null, rowGap = null, itemRender = null } = props;
const parentRef = useRef<HTMLDivElement>(null);
const [ measuredColumnCount, setMeasuredColumnCount ] = useState<number>(columnCountProp);
const columnCount = (itemMinWidth && itemMinWidth > 0) ? measuredColumnCount : columnCountProp;
const rowsContainerClassName = (rowGap !== null) ? 'flex flex-col w-full relative' : 'flex flex-col w-full *:pb-1 relative';
useEffect(() =>
{
if(!itemMinWidth || itemMinWidth <= 0) return;
const element = parentRef.current;
if(!element) return;
const recompute = () =>
{
const width = element.clientWidth;
const cols = Math.max(1, Math.floor((width + GRID_GAP_PX) / (itemMinWidth + GRID_GAP_PX)));
setMeasuredColumnCount(prev => prev === cols ? prev : cols);
};
recompute();
const observer = new ResizeObserver(recompute);
observer.observe(element);
return () => observer.disconnect();
}, [ itemMinWidth ]);
const autoFillStyle = (itemMinWidth && itemMinWidth > 0)
? { gridTemplateColumns: `repeat(auto-fill, ${ itemMinWidth }px)` }
: null;
const fixedColsClass = (itemMinWidth && itemMinWidth > 0) ? '' : `grid-cols-${ columnCountProp }`;
if(squareItems)
{
return (
<div ref={ parentRef } className="overflow-y-auto size-full">
<div className={ `grid grid-cols-${ columnCount } gap-1 w-full` }>
<div className={ `grid ${ fixedColsClass } gap-1 w-full` } style={ autoFillStyle ?? undefined }>
{ items.map((item, index) =>
{
if(!item) return <Fragment key={ `${ index }-empty` } />;
@@ -78,7 +113,7 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
ref={ parentRef }
className="overflow-y-auto size-full">
<div
className="flex flex-col w-full *:pb-1 relative"
className={ rowsContainerClassName }
style={ {
height: virtualizer.getTotalSize()
} }>
@@ -86,10 +121,12 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
<div
key={ virtualRow.key + 'a' }
ref={ virtualizer.measureElement }
className={ `grid grid-cols-${ columnCount } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
className={ `grid ${ fixedColsClass } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
data-index={ virtualRow.index }
style={ {
...(!squareItems && { height: virtualRow.size }),
...(!squareItems && rowGap === null && { height: virtualRow.size }),
...(autoFillStyle ?? {}),
...(rowGap !== null && { paddingBottom: `${ rowGap }px` }),
transform: `translateY(${ virtualRow.start }px)`
} }>
{ Array.from(Array(columnCount)).map((e, i) =>