nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Enhancement - Relationship Icon

Browse Source
This commit is contained in:
Cold 2023-08-22 00:54:24 +02:00
parent 5ef5cdd6c6
commit 094ffb6df9
4 changed files with 49 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/api/room/widgets/AvatarInfoName.ts
View File

@ -6,6 +6,7 @@ export class AvatarInfoName
public readonly id: number,
public readonly name: string,
public readonly userType: number,
public readonly isFriend: boolean = false)
public readonly isFriend: boolean = false,
public readonly relationshipStatus: number = 0)
{}
}

15
src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetNameView.tsx
View File

@ -1,5 +1,5 @@
import { FC, useMemo } from 'react';
import { AvatarInfoName, GetSessionDataManager } from '../../../../../api';
import { AvatarInfoName, GetSessionDataManager, MessengerFriend } from '../../../../../api';
import { ContextMenuView } from '../../context-menu/ContextMenuView';
interface AvatarInfoWidgetNameViewProps
@ -17,12 +17,25 @@ export const AvatarInfoWidgetNameView: FC<AvatarInfoWidgetNameViewProps> = props
const newClassNames: string[] = [ 'name-only' ];
if(nameInfo.isFriend) newClassNames.push('is-friend');
switch(nameInfo.relationshipStatus)
{
case MessengerFriend.RELATIONSHIP_HEART:
newClassNames.push('is-heart');
break;
case MessengerFriend.RELATIONSHIP_SMILE:
newClassNames.push('is-smile');
break;
case MessengerFriend.RELATIONSHIP_BOBBA:
newClassNames.push('is-bobba');
break;
}
return newClassNames;
}, [ nameInfo ]);
return (
<ContextMenuView objectId={ nameInfo.roomIndex } category={ nameInfo.category } userType={ nameInfo.userType } fades={ (nameInfo.id !== GetSessionDataManager().userId) } classNames={ getClassNames } onClose={ onClose }>
<div className="relation-icon"></div>
<div className="text-shadow">
{ nameInfo.name }
</div>

30
src/components/room/widgets/context-menu/ContextMenu.scss
View File

@ -18,10 +18,33 @@
width: unset;
text-align: center;
font-size: 18px;
display: flex;
align-items: center;
&.is-friend {
background-color: rgba($green, 0.5);
}
&.is-heart {
.relation-icon {
display: block;
background-position: -5px -67px;
}
}
&.is-smile {
.relation-icon {
display: block;
background-position: -57px -67px;
}
}
&.is-bobba {
.relation-icon {
display: block;
background-position: -96px -5px;
}
}
}
&:not(.name-only):not(.menu-hidden) {
@ -126,4 +149,11 @@
}
}
}
.relation-icon {
display: none;
background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat;
width: 16px; height: 14px;
margin-right: 3px;
}
}

5
src/hooks/rooms/widgets/useAvatarInfoWidget.ts
View File

@ -123,9 +123,10 @@ const useAvatarInfoWidgetState = () =>
{
if(user.webID === GetSessionDataManager().userId) return;
if(friends.find(friend => (friend.id === user.webID)))
const addedNameBubblesUserFriend = friends.find(friend => (friend.id === user.webID));
if (addedNameBubblesUserFriend)
{
addedNameBubbles.push(new AvatarInfoName(user.roomIndex, RoomObjectCategory.UNIT, user.webID, user.name, user.type, true));
addedNameBubbles.push(new AvatarInfoName(user.roomIndex, RoomObjectCategory.UNIT, user.webID, user.name, user.type, true, addedNameBubblesUserFriend.relationshipStatus));
}
});