From 13753e8b42a3bad214b7cb87a9391add1ebac9de Mon Sep 17 00:00:00 2001
From: MyNameIsBatman <montevechiol@gmail.com>
Date: Fri, 3 Sep 2021 16:02:05 -0300
Subject: [PATCH] Groups updates

---
 public/renderer-config.json                   |   2 ++
 .../handlers/RoomWidgetInfostandHandler.ts    |   2 +-
 .../images/groups/icons/group_favorite.png    | Bin 0 -> 198 bytes
 .../images/groups/icons/group_notfavorite.png | Bin 0 -> 175 bytes
 src/assets/styles/icons.scss                  |  12 ++++++++++
 .../views/user/InfoStandWidgetUserView.tsx    |  19 ++++++++-------
 src/views/shared/badge-image/BadgeImage.scss  |  12 ++++++++++
 .../shared/badge-image/BadgeImageView.tsx     |   9 ++++---
 .../badge-image/BadgeImageView.types.ts       |   2 ++
 .../badge-info/BadgeInformationView.scss      |  22 ++++++++++++++++++
 .../badge-info/BadgeInformationView.tsx       |  14 +++++++++++
 .../badge-info/BadgeInformationView.types.ts  |   5 ++++
 .../groups-container/GroupsContainerView.scss |   6 +++++
 .../groups-container/GroupsContainerView.tsx  |  10 ++++++--
 .../user-container/UserContainerView.tsx      |   2 +-
 15 files changed, 101 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/images/groups/icons/group_favorite.png
 create mode 100644 src/assets/images/groups/icons/group_notfavorite.png
 create mode 100644 src/views/shared/badge-image/badge-info/BadgeInformationView.scss
 create mode 100644 src/views/shared/badge-image/badge-info/BadgeInformationView.tsx
 create mode 100644 src/views/shared/badge-image/badge-info/BadgeInformationView.types.ts

diff --git a/public/renderer-config.json b/public/renderer-config.json
index c6fa1e3a..bf3a12a3 100644
--- a/public/renderer-config.json
+++ b/public/renderer-config.json
@@ -22,6 +22,8 @@
     "generic.asset.url": "${asset.url}/bundled/generic/%libname%.nitro",
     "badge.asset.url": "${image.library.url}album1584/%badgename%.gif",
     "badge.asset.group.url": "https://cdn.ironhotel.biz/group-badge/%badgedata%.gif",
+    "badge.asset.group.external.url": "",
+    "badge.asset.grouparts.url": "https://cdn.ironhotel.biz/static_iron_active/c_images/Badgeparts/badgepart_%part%.png",
     "furni.rotation.bounce.steps": 20,
     "furni.rotation.bounce.height": 0.0625,
     "enable.avatar.arrow": false,
diff --git a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
index 8693cb23..1ee584ce 100644
--- a/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
+++ b/src/api/nitro/room/widgets/handlers/RoomWidgetInfostandHandler.ts
@@ -522,7 +522,7 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
         }
 
         event.groupId = parseInt(userData.guildId);
-        //event._Str_5235 = GetSessionDataManager()._Str_17173(int(userData._Str_4592));
+        event.groupBadgeId = GetSessionDataManager().getGroupBadge(event.groupId);
         event.groupName = userData.groupName;
         event.badges = this.container.roomSession.userDataManager.getUserBadges(userData.webID);
         event.figure = userData.figure;
diff --git a/src/assets/images/groups/icons/group_favorite.png b/src/assets/images/groups/icons/group_favorite.png
new file mode 100644
index 0000000000000000000000000000000000000000..4cd734d12d6c5bbd6335c579f32e7dab3fac4ea4
GIT binary patch
literal 198
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa&H|6fVg?3oArNM~bhqvgP_V+&
z#WAGf*3?TEIU5XkST3x2(4MT}alAlyd8v}<QqAkHmu4x-pS|ncGV7`F+0!qROAft>
zlUY3Vpwo=Rg1pzpaUXcTvlgFF-I|}UzGp7iCxf8>GiBa4pHxbdT*~DpQO+@Y{i?td
tpHz>u2-ypC-k)$JKCt=!0<P~DSpS}9TrlTHln&4h44$rjF6*2UngHaYOQrw-

literal 0
HcmV?d00001

diff --git a/src/assets/images/groups/icons/group_notfavorite.png b/src/assets/images/groups/icons/group_notfavorite.png
new file mode 100644
index 0000000000000000000000000000000000000000..835d8eb7e4aaa03b8a858581fa5cef4dfca55243
GIT binary patch
literal 175
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa&H|6fVg?3oArNM~bhqvgP%zQc
z#WAGfR&v4uwhLFU&gMLHr0cNi`+IwT%ePDveJFH%0t@2|r5P4JJkG|Om?Rv`I3jtL
zyOkV0k;F2$dyQlyPd39r6FG|l23NyP5(g)+YPuY&FnxH*XNuaQM}2ofObQqnTD*Vd
Un$!dz0b0i3>FVdQ&MBb@0OD>qrT_o{

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 889f6c82..fe595b1b 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -591,6 +591,18 @@
         height: 20px;
     }
 
+    &.icon-group-favorite {
+        background: url('../images/groups/icons/group_favorite.png');
+        width: 14px;
+        height: 14px;
+    }
+
+    &.icon-group-not-favorite {
+        background: url('../images/groups/icons/group_notfavorite.png');
+        width: 14px;
+        height: 14px;
+    }
+
     &.icon-navigator-info {
         background: url('../images/navigator/icons/info.png');
         width: 18px;
diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
index 92a873b4..c952eff7 100644
--- a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
+++ b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx
@@ -1,6 +1,7 @@
 import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
+import classNames from 'classnames';
 import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
-import { LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
+import { GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent } from '../../../../../../api';
 import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../../hooks/events';
 import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
@@ -82,7 +83,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
 
     return (
         <div className="d-flex flex-column nitro-card nitro-infostand rounded">
-            <div className="container-fluid content-area">
+            <div className="container-fluid content-area overflow-visible">
                 <div className="d-flex justify-content-between align-items-center">
                     <div className="small text-wrap">
                         <UserProfileIconView userId={ userData.webID } />
@@ -98,26 +99,26 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                     <div>
                         <div className="d-flex justify-content-between">
                             <div className="badge-image">
-                                { badges[0] && <BadgeImageView badgeCode={ badges[0] } /> }
+                                { badges[0] && <BadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
                             </div>
-                            <div className="badge-image">
-                                { userData.groupId > 0 && <BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } /> }
+                            <div className={ 'badge-image' + classNames({ ' cursor-pointer': userData.groupId > 0 }) } onClick={ () => GetGroupInformation(userData.groupId) }>
+                                { userData.groupId > 0 && <BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
                             </div>
                         </div>
                         <div className="d-flex justify-content-between">
                             <div className="badge-image">
-                                { badges[1] && <BadgeImageView badgeCode={ badges[1] } /> }
+                                { badges[1] && <BadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
                             </div>
                             <div className="badge-image">
-                                { badges[2] && <BadgeImageView badgeCode={ badges[2] } /> }
+                                { badges[2] && <BadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
                             </div>
                         </div>
                         <div className="d-flex justify-content-between">
                             <div className="badge-image">
-                                { badges[3] && <BadgeImageView badgeCode={ badges[3] } /> }
+                                { badges[3] && <BadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
                             </div>
                             <div className="badge-image">
-                                { badges[4] && <BadgeImageView badgeCode={ badges[4] } /> }
+                                { badges[4] && <BadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
                             </div>
                         </div>
                     </div>
diff --git a/src/views/shared/badge-image/BadgeImage.scss b/src/views/shared/badge-image/BadgeImage.scss
index bce21ef4..d7067045 100644
--- a/src/views/shared/badge-image/BadgeImage.scss
+++ b/src/views/shared/badge-image/BadgeImage.scss
@@ -4,4 +4,16 @@
     height: 100%;
     background-repeat: no-repeat;
     background-position: center;
+    
+    .badge-information {
+        display: none;
+    }
+
+    &:hover {
+        .badge-information {
+            display: block;
+        }
+    }
+
+    @import './badge-info/BadgeInformationView';
 }
diff --git a/src/views/shared/badge-image/BadgeImageView.tsx b/src/views/shared/badge-image/BadgeImageView.tsx
index 35ca8d7d..c815f7f7 100644
--- a/src/views/shared/badge-image/BadgeImageView.tsx
+++ b/src/views/shared/badge-image/BadgeImageView.tsx
@@ -1,10 +1,11 @@
 import { FC } from 'react';
-import { GetConfiguration } from '../../../api';
+import { GetConfiguration, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
+import { BadgeInformationView } from './badge-info/BadgeInformationView';
 import { BadgeImageViewProps } from './BadgeImageView.types';
 
 export const BadgeImageView: FC<BadgeImageViewProps> = props =>
 {
-    const { badgeCode = null, isGroup = false } = props;
+    const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null } = props;
 
     function getBadgeUrl(): string
     {
@@ -20,5 +21,7 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
 
     const url = `url('${ getBadgeUrl() }')`;
 
-    return <div className="badge-image" style={ (url && url.length) ? { backgroundImage: url } : {} }></div>;
+    return <div className="badge-image" style={ (url && url.length) ? { backgroundImage: url } : {} }>
+        { showInfo && <BadgeInformationView title={ isGroup ? customTitle : LocalizeBadgeName(badgeCode) } description={ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) } /> }
+    </div>;
 }
diff --git a/src/views/shared/badge-image/BadgeImageView.types.ts b/src/views/shared/badge-image/BadgeImageView.types.ts
index 73207a60..76fba1c5 100644
--- a/src/views/shared/badge-image/BadgeImageView.types.ts
+++ b/src/views/shared/badge-image/BadgeImageView.types.ts
@@ -2,4 +2,6 @@ export interface BadgeImageViewProps
 {
     badgeCode: string;
     isGroup?: boolean;
+    showInfo?: boolean;
+    customTitle?: string;
 }
diff --git a/src/views/shared/badge-image/badge-info/BadgeInformationView.scss b/src/views/shared/badge-image/badge-info/BadgeInformationView.scss
new file mode 100644
index 00000000..33b11dff
--- /dev/null
+++ b/src/views/shared/badge-image/badge-info/BadgeInformationView.scss
@@ -0,0 +1,22 @@
+.badge-information {
+    position: absolute;
+    pointer-events: none;
+    user-select: none;
+    width: 260px;
+    border-radius: $border-radius;
+    background: $white;
+    left: -270px;
+    z-index: 100;
+
+    &:before {
+        position: absolute;
+        content: ' ';
+        width: 0;
+        height: 0;
+        border-left: 10px solid $white;
+        border-bottom: 10px solid transparent;
+        border-top: 10px solid transparent;
+        top: 10px;
+        right: -10px;
+    }
+}
diff --git a/src/views/shared/badge-image/badge-info/BadgeInformationView.tsx b/src/views/shared/badge-image/badge-info/BadgeInformationView.tsx
new file mode 100644
index 00000000..5d982d5d
--- /dev/null
+++ b/src/views/shared/badge-image/badge-info/BadgeInformationView.tsx
@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { BadgeInformationViewProps } from './BadgeInformationView.types';
+
+export const BadgeInformationView: FC<BadgeInformationViewProps> = props =>
+{
+    const { title = null, description = null } = props;
+
+    return (
+        <div className="badge-information text-black py-1 px-2 small">
+            <div className="fw-bold mb-2">{ title }</div>
+            <div>{ description }</div>
+        </div>
+    );
+};
diff --git a/src/views/shared/badge-image/badge-info/BadgeInformationView.types.ts b/src/views/shared/badge-image/badge-info/BadgeInformationView.types.ts
new file mode 100644
index 00000000..dcabc965
--- /dev/null
+++ b/src/views/shared/badge-image/badge-info/BadgeInformationView.types.ts
@@ -0,0 +1,5 @@
+export interface BadgeInformationViewProps
+{
+    title: string;
+    description: string;
+}
diff --git a/src/views/user-profile/views/groups-container/GroupsContainerView.scss b/src/views/user-profile/views/groups-container/GroupsContainerView.scss
index 0389d704..c4d8b17e 100644
--- a/src/views/user-profile/views/groups-container/GroupsContainerView.scss
+++ b/src/views/user-profile/views/groups-container/GroupsContainerView.scss
@@ -13,5 +13,11 @@
             border-color: $grid-active-border-color !important;
             background-color: $grid-active-bg-color !important;
         }
+
+        .icon {
+            z-index: 1;
+            top: 0px;
+            right: 0px;
+        }
     }
 }
diff --git a/src/views/user-profile/views/groups-container/GroupsContainerView.tsx b/src/views/user-profile/views/groups-container/GroupsContainerView.tsx
index dc7ee616..50eadaa5 100644
--- a/src/views/user-profile/views/groups-container/GroupsContainerView.tsx
+++ b/src/views/user-profile/views/groups-container/GroupsContainerView.tsx
@@ -1,4 +1,4 @@
-import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser } from '@nitrots/nitro-renderer';
+import { GroupFavoriteComposer, GroupInformationComposer, GroupInformationEvent, GroupInformationParser } from '@nitrots/nitro-renderer';
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks';
@@ -36,6 +36,11 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
         if(selectedGroupId) SendMessageHook(new GroupInformationComposer(selectedGroupId, false));
     }, [ selectedGroupId ]);
 
+    const favoriteGroup = useCallback((groupId: number) =>
+    {
+        SendMessageHook(new GroupFavoriteComposer(groupId));
+    }, []);
+
     if(!groups) return null;
     
     return (
@@ -44,7 +49,8 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
                 <div className="h-100 overflow-auto d-flex flex-column gap-1">
                     { groups.map((group, index) =>
                         {
-                            return <div key={ index } onClick={ () => setSelectedGroupId(group.id) } className={ 'profile-groups-item flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': selectedGroupId === group.id }) }>
+                            return <div key={ index } onClick={ () => setSelectedGroupId(group.id) } className={ 'profile-groups-item position-relative flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': selectedGroupId === group.id }) }>
+                                <i className={ 'position-absolute icon icon-group-' + (group.ownerOrFavorite ? 'favorite' : 'not-favorite') } onClick={ () => favoriteGroup(group.id) } />
                                 <BadgeImageView badgeCode={ group.badge } isGroup={ true } />
                             </div>
                         }) }
diff --git a/src/views/user-profile/views/user-container/UserContainerView.tsx b/src/views/user-profile/views/user-container/UserContainerView.tsx
index 8d024a39..e639b8e6 100644
--- a/src/views/user-profile/views/user-container/UserContainerView.tsx
+++ b/src/views/user-profile/views/user-container/UserContainerView.tsx
@@ -33,7 +33,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
             <div className="col-sm-8">
                 <div className="user-info-container">
                     <div className="fw-bold">{userProfile.username}</div>
-                    <div className="fst-italic">{userProfile.motto}</div>
+                    <div className="fst-italic text-break small">{userProfile.motto}</div>
                     <div dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.created', ['created'], [userProfile.registration]) }} />
                     <div dangerouslySetInnerHTML={{ __html: LocalizeText('extendedprofile.last.login', ['lastlogin'], [FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2)]) }} />
                     <div><b>{LocalizeText('extendedprofile.achievementscore')}</b> {userProfile.achievementPoints}</div>