Merge pull request #69 from duckietm/Dev

small fixes

src/api/avatar/AvatarEditorThumbnailsHelper.ts

@@ -150,34 +150,39 @@ export class AvatarEditorThumbnailsHelper
 
         if(cached) return cached;
 
-        return new Promise(async (resolve, reject) =>
+        const avatarImage = GetAvatarRenderManager().createAvatarImage(figureString, AvatarScaleType.LARGE, null, null);
+
+        if(avatarImage.isPlaceholder())
         {
-            const resetFigure = async (figure: string) =>
+            avatarImage.dispose();
-            {
-                const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, null, { resetFigure, dispose: null, disposed: false });
 
-                if(avatarImage.isPlaceholder()) return;
+            return null;
+        }
 
-                const texture = avatarImage.processAsTexture(AvatarSetType.HEAD, false);
+        const texture = avatarImage.processAsTexture(AvatarSetType.HEAD, false);
-                const sprite = new NitroSprite(texture);
 
-                if(isDisabled) sprite.filters = [ AvatarEditorThumbnailsHelper.ALPHA_FILTER ];
+        if(!texture)
+        {
+            avatarImage.dispose();
 
-                const imageUrl = await TextureUtils.generateImageUrl({
+            return null;
-                    target: sprite,
+        }
-                    frame: new NitroRectangle(0, 0, texture.width, texture.height)
-                });
 
-                sprite.destroy();
+        const sprite = new NitroSprite(texture);
-                avatarImage.dispose();
 
-                AvatarEditorThumbnailsHelper.THUMBNAIL_CACHE.set(thumbnailKey, imageUrl);
+        if(isDisabled) sprite.filters = [ AvatarEditorThumbnailsHelper.ALPHA_FILTER ];
 
-                resolve(imageUrl);
+        const imageUrl = await TextureUtils.generateImageUrl({
-            };
+            target: sprite,
-
+            frame: new NitroRectangle(0, 0, texture.width, texture.height)
-            resetFigure(figureString);
         });
+
+        sprite.destroy();
+        avatarImage.dispose();
+
+        if(imageUrl) AvatarEditorThumbnailsHelper.THUMBNAIL_CACHE.set(thumbnailKey, imageUrl);
+
+        return imageUrl;
     }
 
     private static sortByDrawOrder(a: IFigurePart, b: IFigurePart): number

src/common/layout/LayoutAvatarImageView.tsx

@@ -1,6 +1,7 @@
-import { AvatarScaleType, AvatarSetType, GetAvatarRenderManager } from '@nitrots/nitro-renderer';
+import { AvatarScaleType, AvatarSetType, GetAvatarRenderManager, NitroEventType } from '@nitrots/nitro-renderer';
 import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react';
 import { Base, BaseProps } from '../Base';
+import { useNitroEvent } from '../../hooks/events';
 
 const AVATAR_IMAGE_CACHE: Map<string, string> = new Map();
 
@@ -18,7 +19,14 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
     const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
     const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
     const [ isReady, setIsReady ] = useState<boolean>(false);
+    const [ updateId, setUpdateId ] = useState<number>(0);
     const isDisposed = useRef(false);
+    const isPlaceholderRef = useRef(false);
+
+    useNitroEvent(NitroEventType.AVATAR_ASSET_LOADED, () =>
+    {
+        if(isPlaceholderRef.current) setUpdateId(prev => prev + 1);
+    });
 
     const getClassNames = useMemo(() =>
     {
@@ -55,37 +63,49 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 
         if(AVATAR_IMAGE_CACHE.has(figureKey))
         {
+            isPlaceholderRef.current = false;
             setAvatarUrl(AVATAR_IMAGE_CACHE.get(figureKey));
         }
         else
         {
-            const resetFigure = (_figure: string) =>
+            const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
-            {
+                resetFigure: (figure: string) =>
-                if(isDisposed.current) return;
-
-                const avatarImage = GetAvatarRenderManager().createAvatarImage(_figure, AvatarScaleType.LARGE, gender, { resetFigure: (figure: string) => resetFigure(figure), dispose: null, disposed: false });
-
-                let setType = AvatarSetType.FULL;
-
-                if(headOnly) setType = AvatarSetType.HEAD;
-
-                avatarImage.setDirection(setType, direction);
-
-                const imageUrl = avatarImage.processAsImageUrl(setType);
-
-                if(imageUrl && !isDisposed.current)
                 {
-                    if(!avatarImage.isPlaceholder()) AVATAR_IMAGE_CACHE.set(figureKey, imageUrl);
+                    if(isDisposed.current) return;
 
-                    setAvatarUrl(imageUrl);
+                    isPlaceholderRef.current = false;
+                    setUpdateId(prev => prev + 1);
+                },
+                dispose: null,
+                disposed: false
+            });
+
+            let setType = AvatarSetType.FULL;
+
+            if(headOnly) setType = AvatarSetType.HEAD;
+
+            avatarImage.setDirection(setType, direction);
+
+            const imageUrl = avatarImage.processAsImageUrl(setType);
+
+            if(imageUrl && !isDisposed.current)
+            {
+                if(!avatarImage.isPlaceholder())
+                {
+                    AVATAR_IMAGE_CACHE.set(figureKey, imageUrl);
+                    isPlaceholderRef.current = false;
+                }
+                else
+                {
+                    isPlaceholderRef.current = true;
                 }
 
-                avatarImage.dispose();
+                setAvatarUrl(imageUrl);
-            };
+            }
 
-            resetFigure(figure);
+            avatarImage.dispose();
         }
-    }, [ figure, gender, direction, headOnly, isReady ]);
+    }, [ figure, gender, direction, headOnly, isReady, updateId ]);
 
     useEffect(() =>
     {

src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx

@@ -1,7 +1,9 @@
+import { NitroEventType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { AvatarEditorThumbnailsHelper, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
 import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
 import { useAvatarEditor } from '../../../hooks';
+import { useNitroEvent } from '../../../hooks/events';
 import { InfiniteGrid } from '../../../layout';
 import { AvatarEditorIcon } from '../AvatarEditorIcon';
 
@@ -14,6 +16,7 @@ export const AvatarEditorFigureSetItemView: FC<{
 {
     const { setType = null, partItem = null, isSelected = false, width = '100%', ...rest } = props;
     const [ assetUrl, setAssetUrl ] = useState<string>('');
+    const [ retryId, setRetryId ] = useState<number>(0);
     const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
 
     const clubLevel = partItem.partSet?.clubLevel ?? 0;
@@ -21,6 +24,11 @@ export const AvatarEditorFigureSetItemView: FC<{
     const isLocked = isHC && (GetClubMemberLevel() < clubLevel);
     const isSellableNotOwned = partItem.isSellableNotOwned ?? false;
 
+    useNitroEvent(NitroEventType.AVATAR_ASSET_LOADED, () =>
+    {
+        if(!assetUrl || !assetUrl.length) setRetryId(prev => prev + 1);
+    });
+
     useEffect(() =>
     {
         setAssetUrl('');
@@ -54,7 +62,7 @@ export const AvatarEditorFigureSetItemView: FC<{
         };
 
         loadImage();
-    }, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned ]);
+    }, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned, retryId ]);
 
     if(!partItem) return null;
 

src/components/user-profile/UserContainerView.tsx

@@ -8,8 +8,11 @@ export const UserContainerView: FC<{
 }> = props =>
 {
     const { userProfile = null } = props;
+
     const [ requestSent, setRequestSent ] = useState(userProfile.requestSent);
+
     const isOwnProfile = (userProfile.id === GetSessionDataManager().userId);
+
     const canSendFriendRequest = !requestSent && (!isOwnProfile && !userProfile.isMyFriend && !userProfile.requestSent);
 
     const infostandBackgroundClass = `background-${userProfile.backgroundId ?? 'default'}`;
@@ -35,36 +38,75 @@ export const UserContainerView: FC<{
                 <LayoutAvatarImageView direction={ 2 } figure={ userProfile.figure } />
                 <div className={`absolute inset-0 profile-overlay ${infostandOverlayClass}`} />
             </div>
+
             <div className="flex flex-col gap-2">
                 <div className="flex flex-col gap-0">
                     <p className="leading-tight font-bold">{ userProfile.username }</p>
                     <p className="text-sm italic leading-tight">{ userProfile.motto }</p>
                 </div>
+
                 <div className="flex flex-col gap-1">
-                    <p className="text-sm leading-none" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.created', ['created'], [userProfile.registration]) }} />
+                    <p
-                    <p className="text-sm leading-none" dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.last.login', ['lastlogin'], [FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2)]) }} />
+                        className="text-sm leading-none"
-                    <p className="text-sm leading-none">
+                        dangerouslySetInnerHTML={{
-                        <b>{ LocalizeText('extendedprofile.friends.count') }</b> { userProfile.friendsCount }
+                            __html: LocalizeText(
-                    </p>
+                                'extendedprofile.created',
+                                ['created'],
+                                [userProfile.registration]
+                            )
+                        }}
+                    />
+
+                    <p
+                        className="text-sm leading-none"
+                        dangerouslySetInnerHTML={{
+                            __html: LocalizeText(
+                                'extendedprofile.last.login',
+                                ['lastlogin'],
+                                [FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2)]
+                            )
+                        }}
+                    />
+
+                    <p
+                        className="text-sm leading-none"
+                        dangerouslySetInnerHTML={{
+                            __html: LocalizeText(
+                                'extendedprofile.friends.count',
+                                ['count'],
+                                [userProfile.friendsCount]
+                            )
+                        }}
+                    />
+
                     <p className="text-sm leading-none">
                         <b>{ LocalizeText('extendedprofile.achievementscore') }</b> { userProfile.achievementPoints }
                     </p>
                 </div>
+
                 <div className="flex items-center gap-1">
                     { userProfile.isOnline &&
                         <i className="nitro-icon icon-pf-online" /> }
+
                     { !userProfile.isOnline &&
                         <i className="nitro-icon icon-pf-offline" /> }
+
                     <div className="flex items-center gap-1">
                         { canSendFriendRequest &&
-                            <Text pointer small underline onClick={ addFriend }>{ LocalizeText('extendedprofile.addasafriend') }</Text> }
+                            <Text pointer small underline onClick={ addFriend }>
+                                { LocalizeText('extendedprofile.addasafriend') }
+                            </Text> }
+
                         { !canSendFriendRequest &&
                             <>
                                 <i className="nitro-icon icon-pf-tick" />
+
                                 { isOwnProfile &&
                                     <p>{ LocalizeText('extendedprofile.me') }</p> }
+
                                 { userProfile.isMyFriend &&
                                     <p>{ LocalizeText('extendedprofile.friend') }</p> }
+
                                 { (requestSent || userProfile.requestSent) &&
                                     <p>{ LocalizeText('extendedprofile.friendrequestsent') }</p> }
                             </> }
@@ -73,4 +115,4 @@ export const UserContainerView: FC<{
             </div>
         </div>
     );
-};
+};

src/components/user-profile/UserProfileView.tsx

@@ -9,7 +9,7 @@ import { FriendsContainerView } from './FriendsContainerView';
 import { GroupsContainerView } from './GroupsContainerView';
 import { UserContainerView } from './UserContainerView';
 
-type ProfileTab = 'badge' | 'amici' | 'stanze' | 'gruppi';
+type ProfileTab = 'badge' | 'friends' | 'rooms' | 'groups';
 
 export const UserProfileView: FC<{}> = props =>
 {
@@ -39,7 +39,7 @@ export const UserProfileView: FC<{}> = props =>
     {
         setActiveTab(tab);
 
-        if(tab === 'stanze' && !userRooms && userProfile)
+        if(tab === 'rooms' && !userRooms && userProfile)
         {
             SendMessageComposer(new NavigatorSearchComposer('hotel_view', `owner:${ userProfile.username }`));
         }
@@ -99,7 +99,7 @@ export const UserProfileView: FC<{}> = props =>
 
     useMessageEvent<NavigatorSearchEvent>(NavigatorSearchEvent, event =>
     {
-        if(!userProfile || activeTab !== 'stanze') return;
+        if(!userProfile || activeTab !== 'rooms') return;
 
         const parser = event.getParser();
         const result = parser.result;
@@ -145,16 +145,16 @@ export const UserProfileView: FC<{}> = props =>
                 </div>
                 <NitroCard.Tabs>
                     <NitroCard.TabItem isActive={ activeTab === 'badge' } count={ userBadges.length } onClick={ () => onTabClick('badge') }>
-                        { LocalizeText('extendedprofile.tab.badge') }
+                        { LocalizeText('levelinfo.category.badge') }
                     </NitroCard.TabItem>
-                    <NitroCard.TabItem isActive={ activeTab === 'amici' } count={ userProfile.friendsCount } onClick={ () => onTabClick('amici') }>
+                    <NitroCard.TabItem isActive={ activeTab === 'friends' } count={ userProfile.friendsCount } onClick={ () => onTabClick('friends') }>
-                        { LocalizeText('extendedprofile.tab.friends') }
+                        { LocalizeText('navigator.tab.3') }
                     </NitroCard.TabItem>
-                    <NitroCard.TabItem isActive={ activeTab === 'stanze' } onClick={ () => onTabClick('stanze') }>
+                    <NitroCard.TabItem isActive={ activeTab === 'rooms' } onClick={ () => onTabClick('rooms') }>
-                        { LocalizeText('extendedprofile.tab.rooms') }
+                        { LocalizeText('navigator.tab.2') }
                     </NitroCard.TabItem>
-                    <NitroCard.TabItem isActive={ activeTab === 'gruppi' } count={ userProfile.groups?.length } onClick={ () => onTabClick('gruppi') }>
+                    <NitroCard.TabItem isActive={ activeTab === 'groups' } count={ userProfile.groups?.length } onClick={ () => onTabClick('groups') }>
-                        { LocalizeText('extendedprofile.tab.groups') }
+                        { LocalizeText('navigator.searchcode.title.groups') }
                     </NitroCard.TabItem>
                 </NitroCard.Tabs>
                 <div className="flex-1 overflow-auto p-2">
@@ -172,7 +172,7 @@ export const UserProfileView: FC<{}> = props =>
                             }
                         </div>
                     ) }
-                    { activeTab === 'amici' && (
+                    { activeTab === 'friends' && (
                         <div className="flex flex-col gap-2 h-full">
                             { userRelationships ? (
                                 <FriendsContainerView friendsCount={ userProfile.friendsCount } relationships={ userRelationships } />
@@ -183,7 +183,7 @@ export const UserProfileView: FC<{}> = props =>
                             ) }
                         </div>
                     ) }
-                    { activeTab === 'stanze' && (
+                    { activeTab === 'rooms' && (
                         <div className="flex flex-col gap-1 h-full">
                             { !userRooms && (
                                 <Flex center className="h-full">
@@ -206,7 +206,7 @@ export const UserProfileView: FC<{}> = props =>
                             )) }
                         </div>
                     ) }
-                    { activeTab === 'gruppi' && (
+                    { activeTab === 'groups' && (
                         <div className="h-full">
                             <GroupsContainerView fullWidth groups={ userProfile.groups } itsMe={ userProfile.id === GetSessionDataManager().userId } onLeaveGroup={ onLeaveGroup } />
                         </div>