Infostand layout changes

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipItemView.tsx

@@ -0,0 +1,31 @@
+import { RelationshipStatusEnum, RelationshipStatusInfo } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { GetUserProfile, LocalizeText } from '../../../../../api';
+import { Flex, Text } from '../../../../../common';
+
+interface InfoStandWidgetUserRelationshipsRelationshipItemViewProps
+{
+    type: number;
+    relationship: RelationshipStatusInfo;
+}
+
+export const InfoStandWidgetUserRelationshipsRelationshipItemView: FC<InfoStandWidgetUserRelationshipsRelationshipItemViewProps> = props =>
+{
+    const { type = -1, relationship = null } = props;
+
+    if(!relationship) return null;
+
+    const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
+
+    return (
+        <Flex alignItems="center" gap={ 1 }>
+            <i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
+            <Flex alignItems="center" gap={ 0 }>
+                <Text small variant="white" onClick={ event => GetUserProfile(relationship.randomFriendId) }>
+                    <u>{ relationship.randomFriendName }</u>
+                    { (relationship.friendCount > 1) && (' ' + LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationship.friendCount - 1).toString() ])) }
+                </Text>
+            </Flex>
+        </Flex>
+    );
+}

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipsView.tsx

@@ -1,48 +1,23 @@
 import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { GetUserProfile, LocalizeText } from '../../../../../api';
+import { InfoStandWidgetUserRelationshipsRelationshipItemView } from './InfoStandWidgetUserRelationshipItemView';
-import { Flex, Text } from '../../../../../common';
 
 interface InfoStandWidgetUserRelationshipsViewProps
 {
     relationships: RelationshipStatusInfoMessageParser;
 }
 
-interface InfoStandWidgetUserRelationshipsRelationshipViewProps
-{
-    type: number;
-}
-
 export const InfoStandWidgetUserRelationshipsView: FC<InfoStandWidgetUserRelationshipsViewProps> = props =>
 {
     const { relationships = null } = props;
 
-    const RelationshipComponent = ({ type }: InfoStandWidgetUserRelationshipsRelationshipViewProps) =>
+    if(!relationships || !relationships.relationshipStatusMap.length) return null;
-    {
-        const relationshipInfo = (relationships && relationships.relationshipStatusMap.hasKey(type)) ? relationships.relationshipStatusMap.getValue(type) : null;
-
-        if(!relationshipInfo || !relationshipInfo.friendCount) return null;
-
-        const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
-
-        return (
-            <Flex alignItems="center" gap={ 1 }>
-                <i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
-                <Flex alignItems="center" gap={ 0 }>
-                    <Text small variant="white" onClick={ event => GetUserProfile(relationshipInfo.randomFriendId) }>
-                        <u>{ relationshipInfo.randomFriendName }</u>
-                        { (relationshipInfo.friendCount > 1) && (' ' + LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationshipInfo.friendCount - 1).toString() ])) }
-                    </Text>
-                </Flex>
-            </Flex>
-        );
-    }
 
     return (
         <>
-            <RelationshipComponent type={ RelationshipStatusEnum.HEART } />
+            <InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.HEART } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.HEART) } />
-            <RelationshipComponent type={ RelationshipStatusEnum.SMILE } />
+            <InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.SMILE } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.SMILE) } />
-            <RelationshipComponent type={ RelationshipStatusEnum.BOBBA } />
+            <InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.BOBBA } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.BOBBA) } />
         </>
     );
 }

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx

@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionFavoriteGroupUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, FocusEvent, KeyboardEvent, SetStateAction, useEffect, useState } from 'react';
 import { AvatarInfoUser, CloneObject, GetConfiguration, GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../../common';
+import { Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../../common';
 import { useMessageEvent, useRoom, useRoomSessionManagerEvent } from '../../../../../hooks';
 import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
 
@@ -20,7 +20,6 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     const [ isEditingMotto, setIsEditingMotto ] = useState(false);
     const [ relationships, setRelationships ] = useState<RelationshipStatusInfoMessageParser>(null);
     const { roomSession = null } = useRoom();
-    const maxBadgeCount = GetConfiguration<number>('user.badges.max.slots', 5);
 
     const saveMotto = (motto: string) =>
     {
@@ -49,6 +48,10 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     {
         if(!avatarInfo || (avatarInfo.webID !== event.userId)) return;
 
+        const oldBadges = avatarInfo.badges.join('');
+        
+        if(oldBadges === event.badges.join('')) return;
+
         setAvatarInfo(prevValue =>
         {
             const newValue = CloneObject(prevValue);
@@ -82,7 +85,6 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
         setAvatarInfo(prevValue =>
         {
             const newValue = CloneObject(prevValue);
-
             const clearGroup = ((event.status === -1) || (event.habboGroupId <= 0));
 
             newValue.groupId = clearGroup ? -1 : event.habboGroupId;
@@ -137,31 +139,31 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                         <Column fullWidth className="body-image" onClick={ event => GetUserProfile(avatarInfo.webID) }>
                             <LayoutAvatarImageView figure={ avatarInfo.figure } direction={ 4 } />
                         </Column>
-                        <Column grow gap={ 0 }>
+                        <Column grow alignItems="center" gap={ 0 }>
                             <Flex gap={ 1 }>
-                                <Base className="badge-image">
+                                <Flex center className="badge-image">
                                     { avatarInfo.badges[0] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[0] } showInfo={ true } /> }
-                                </Base>
+                                </Flex>
-                                <Base pointer={ ( avatarInfo.groupId > 0) } className="badge-image" onClick={ event => GetGroupInformation(avatarInfo.groupId) }>
+                                <Flex center pointer={ ( avatarInfo.groupId > 0) } className="badge-image" onClick={ event => GetGroupInformation(avatarInfo.groupId) }>
                                     { avatarInfo.groupId > 0 &&
                                         <LayoutBadgeImageView badgeCode={ avatarInfo.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ avatarInfo.groupName } /> }
-                                </Base>
+                                </Flex>
                             </Flex>
-                            <Flex gap={ 1 }>
+                            <Flex center gap={ 1 }>
-                                <Base className="badge-image">
+                                <Flex center className="badge-image">
                                     { avatarInfo.badges[1] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[1] } showInfo={ true } /> }
-                                </Base>
+                                </Flex>
-                                <Base className="badge-image">
+                                <Flex center className="badge-image">
                                     { avatarInfo.badges[2] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[2] } showInfo={ true } /> }
-                                </Base>
+                                </Flex>
                             </Flex>
-                            <Flex gap={ 1 }>
+                            <Flex center gap={ 1 }>
-                                <Base className="badge-image">
+                                <Flex center className="badge-image">
                                     { avatarInfo.badges[3] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[3] } showInfo={ true } /> }
-                                </Base>
+                                </Flex>
-                                <Base className="badge-image">
+                                <Flex center className="badge-image">
                                     { avatarInfo.badges[4] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[4] } showInfo={ true } /> }
-                                </Base>
+                                </Flex>
                             </Flex>
                         </Column>
                     </Flex>