🆙 Fix the avatar-editor faces

public/UITexts.example

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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) =>