nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Infostand layout changes

Browse Source
This commit is contained in:
Bill 2022-08-03 10:13:45 -04:00
parent 784d7cbecd
commit e35bfde816
3 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserRelationshipItemView.tsx Normal file
View File

@ -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>
);
}

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

@ -1,48 +1,23 @@
import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { GetUserProfile, LocalizeText } from '../../../../../api';
import { Flex, Text } from '../../../../../common';
import { InfoStandWidgetUserRelationshipsRelationshipItemView } from './InfoStandWidgetUserRelationshipItemView';
interface InfoStandWidgetUserRelationshipsViewProps
{
relationships: RelationshipStatusInfoMessageParser;
}
interface InfoStandWidgetUserRelationshipsRelationshipViewProps
{
type: number;
}
export const InfoStandWidgetUserRelationshipsView: FC<InfoStandWidgetUserRelationshipsViewProps> = props =>
{
const { relationships = null } = props;
const RelationshipComponent = ({ type }: InfoStandWidgetUserRelationshipsRelationshipViewProps) =>
{
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>
);
}
if(!relationships || !relationships.relationshipStatusMap.length) return null;
return (
<>
<RelationshipComponent type={ RelationshipStatusEnum.HEART } />
<RelationshipComponent type={ RelationshipStatusEnum.SMILE } />
<RelationshipComponent type={ RelationshipStatusEnum.BOBBA } />
<InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.HEART } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.HEART) } />
<InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.SMILE } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.SMILE) } />
<InfoStandWidgetUserRelationshipsRelationshipItemView type={ RelationshipStatusEnum.BOBBA } relationship={ relationships.relationshipStatusMap.getValue(RelationshipStatusEnum.BOBBA) } />
</>
);
}

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

@ -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>
<Base pointer={ ( avatarInfo.groupId > 0) } className="badge-image" onClick={ event => GetGroupInformation(avatarInfo.groupId) }>
</Flex>
<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 }>
<Base className="badge-image">
<Flex center gap={ 1 }>
<Flex center className="badge-image">
{ avatarInfo.badges[1] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[1] } showInfo={ true } /> }
</Base>
<Base className="badge-image">
</Flex>
<Flex center className="badge-image">
{ avatarInfo.badges[2] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[2] } showInfo={ true } /> }
</Base>
</Flex>
</Flex>
<Flex gap={ 1 }>
<Base className="badge-image">
<Flex center gap={ 1 }>
<Flex center className="badge-image">
{ avatarInfo.badges[3] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[3] } showInfo={ true } /> }
</Base>
<Base className="badge-image">
</Flex>
<Flex center className="badge-image">
{ avatarInfo.badges[4] && <LayoutBadgeImageView badgeCode={ avatarInfo.badges[4] } showInfo={ true } /> }
</Base>
</Flex>
</Flex>
</Column>
</Flex>