nitro
/
nitro
mirror of https://github.com/Gurkengewuerz/nitro.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: Relationship Icon 

From @Cold-FR
https://github.com/billsonnn/nitro-react/pull/160
This commit is contained in:
Niklas 2023-10-23 16:05:31 +02:00
parent 6710132cc0
commit 6c48eea770
4 changed files with 52 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,6 +5,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
) {}
}

17
apps/frontend/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetNameView.tsx
View File

@ -1,6 +1,6 @@
import {FC, useMemo} from "react";
import {AvatarInfoName, GetSessionDataManager} from "../../../../../api";
import {AvatarInfoName, GetSessionDataManager, MessengerFriend} from "../../../../../api";
import {ContextMenuView} from "../../context-menu/ContextMenuView";
interface AvatarInfoWidgetNameViewProps {
@ -15,6 +15,17 @@ 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]);
@ -26,8 +37,8 @@ export const AvatarInfoWidgetNameView: FC<AvatarInfoWidgetNameViewProps> = props
userType={nameInfo.userType}
fades={nameInfo.id !== GetSessionDataManager().userId}
classNames={getClassNames}
onClose={onClose}
>
onClose={onClose}>
<div className="relation-icon"></div>
<div className="text-shadow">{nameInfo.name}</div>
</ContextMenuView>
);

31
apps/frontend/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) {
@ -125,4 +148,12 @@
}
}
}
.relation-icon {
display: none;
background: url("@/assets/images/friends/friends-spritesheet.png") transparent no-repeat;
width: 16px;
height: 14px;
margin-right: 3px;
}
}

7
apps/frontend/src/hooks/rooms/widgets/useAvatarInfoWidget.ts
View File

@ -132,8 +132,11 @@ const useAvatarInfoWidgetState = () => {
event.addedUsers.forEach(user => {
if (user.webID === GetSessionDataManager().userId) return;
if (friends.find(friend => friend.id === user.webID)) {
addedNameBubbles.push(new AvatarInfoName(user.roomIndex, RoomObjectCategory.UNIT, user.webID, user.name, user.type, true));
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, addedNameBubblesUserFriend.relationshipStatus)
);
}
});