diff --git a/public/ui-config.json.example b/public/ui-config.json.example index de2d3f2f..8b1ab50b 100644 --- a/public/ui-config.json.example +++ b/public/ui-config.json.example @@ -11,6 +11,7 @@ "widget.dimmer.colorwheel": false, "avatar.wardrobe.max.slots": 10, "user.badges.max.slots": 5, + "user.tags.enabled": false, "camera.publish.disabled": false, "hc.disabled": false, "badge.descriptions.enabled": true, diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss index 558b0297..e207786b 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss +++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss @@ -106,6 +106,22 @@ font-style: italic; } } + + .flex-tags + { + flex-wrap: wrap; + margin-bottom: -10px; + + .text-tags + { + padding: 2px; + border-radius: 3px; + background: #333; + margin-right: 5px; + margin-bottom: 10px; + cursor: pointer; + } + } } .button-container { diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx index 410f515e..f70c2b0a 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx +++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx @@ -1,6 +1,6 @@ import { RoomEngineEvent, RoomEnterEffect, RoomSessionDanceEvent } from '@nitrots/nitro-renderer'; import { FC, useState } from 'react'; -import { AvatarInfoFurni, AvatarInfoPet, AvatarInfoRentableBot, AvatarInfoUser, GetSessionDataManager, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api'; +import { AvatarInfoFurni, AvatarInfoPet, AvatarInfoRentableBot, AvatarInfoUser, GetConfiguration, GetSessionDataManager, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api'; import { Column } from '../../../../common'; import { useAvatarInfoWidget, useRoom, useRoomEngineEvent, useRoomSessionManagerEvent, useUiEvent } from '../../../../hooks'; import { AvatarInfoRentableBotChatView } from './AvatarInfoRentableBotChatView'; @@ -67,6 +67,7 @@ export const AvatarInfoWidgetView: FC<{}> = props => case AvatarInfoUser.OWN_USER: case AvatarInfoUser.PEER: { const info = (avatarInfo as AvatarInfoUser); + if (GetConfiguration('user.tags.enabled')) GetSessionDataManager().getUserTags(info.roomIndex); if(info.isSpectatorMode) return null; @@ -111,7 +112,7 @@ export const AvatarInfoWidgetView: FC<{}> = props => case AvatarInfoRentableBot.RENTABLE_BOT: return setAvatarInfo(null) } />; case AvatarInfoPet.PET_INFO: - return setAvatarInfo(null) } /> + return setAvatarInfo(null) } /> } } diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx new file mode 100644 index 00000000..b5fc7036 --- /dev/null +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx @@ -0,0 +1,31 @@ +import { NavigatorSearchComposer } from '@nitrots/nitro-renderer'; +import { FC } from 'react'; +import { CreateLinkEvent, SendMessageComposer } from '../../../../../api'; +import { Flex, Text } from '../../../../../common'; + +interface InfoStandWidgetUserTagsViewProps +{ + tags: string[]; +} + +const processAction = (tag: string) => +{ + CreateLinkEvent(`navigator/search/${ tag }`); + SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${ tag }`)); +} + +export const InfoStandWidgetUserTagsView: FC = props => +{ + const { tags = null } = props; + + if(!tags || !tags.length) return null; + + return ( + <> +
+ + { tags && (tags.length > 0) && tags.map((tag, index) => processAction(tag) }>{ tag }) } + + + ); +} diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx index 238ffae1..7c7a7c82 100644 --- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx @@ -5,6 +5,7 @@ import { AvatarInfoUser, CloneObject, GetConfiguration, GetGroupInformation, Get import { Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../../common'; import { useMessageEvent, useRoom, useRoomSessionManagerEvent } from '../../../../../hooks'; import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView'; +import { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView'; interface InfoStandWidgetUserViewProps { @@ -35,7 +36,7 @@ export const InfoStandWidgetUserView: FC = props = const onMottoKeyDown = (event: KeyboardEvent) => { event.stopPropagation(); - + switch(event.key) { case 'Enter': @@ -49,7 +50,7 @@ export const InfoStandWidgetUserView: FC = props = if(!avatarInfo || (avatarInfo.webID !== event.userId)) return; const oldBadges = avatarInfo.badges.join(''); - + if(oldBadges === event.badges.join('')) return; setAvatarInfo(prevValue => @@ -108,10 +109,10 @@ export const InfoStandWidgetUserView: FC = props = { setIsEditingMotto(false); setMotto(avatarInfo.motto); - + SendMessageComposer(new UserRelationshipsComposer(avatarInfo.webID)); - return () => + return () => { setIsEditingMotto(false); setMotto(null); @@ -203,6 +204,11 @@ export const InfoStandWidgetUserView: FC = props = + { GetConfiguration('user.tags.enabled') && + + + + } );