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

Update profile

Browse Source
This commit is contained in:
Bill 2024-06-20 16:42:55 -04:00
parent 15157e3636
commit 8d3c16b624
6 changed files with 55 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/user-profile/views/FriendsContainerView.tsx → src/components/user-profile/FriendsContainerView.tsx
View File

@ -1,7 +1,6 @@
import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer'; import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
import { FC } from 'react'; import { FC } from 'react';
import { LocalizeText } from '../../../api'; import { LocalizeText } from '../../api';
import { Text } from '../../../common';
import { RelationshipsContainerView } from './RelationshipsContainerView'; import { RelationshipsContainerView } from './RelationshipsContainerView';
interface FriendsContainerViewProps interface FriendsContainerViewProps
@ -16,11 +15,11 @@ export const FriendsContainerView: FC<FriendsContainerViewProps> = props =>
return ( return (
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text small> <p className="text-sm">
<b>{ LocalizeText('extendedprofile.friends.count') }</b> { friendsCount } <b>{ LocalizeText('extendedprofile.friends.count') }</b> { friendsCount }
</Text> </p>
<Text bold small>{ LocalizeText('extendedprofile.relstatus') }</Text> <div className="flex flex-col gap-1">
<div className="flex flex-col gap-2"> <p className="text-sm font-bold">{ LocalizeText('extendedprofile.relstatus') }</p>
<RelationshipsContainerView relationships={ relationships } /> <RelationshipsContainerView relationships={ relationships } />
</div> </div>
</div> </div>

8
src/components/user-profile/views/GroupsContainerView.tsx → src/components/user-profile/GroupsContainerView.tsx
View File

@ -1,9 +1,9 @@
import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer'; import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { SendMessageComposer, ToggleFavoriteGroup } from '../../../api'; import { SendMessageComposer, ToggleFavoriteGroup } from '../../api';
import { AutoGrid, Column, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../../common'; import { AutoGrid, Column, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../common';
import { useMessageEvent } from '../../../hooks'; import { useMessageEvent } from '../../hooks';
import { GroupInformationView } from '../../groups/views/GroupInformationView'; import { GroupInformationView } from '../groups/views/GroupInformationView';
interface GroupsContainerViewProps extends GridProps interface GroupsContainerViewProps extends GridProps
{ {

18
src/components/user-profile/views/RelationshipsContainerView.tsx → src/components/user-profile/RelationshipsContainerView.tsx
View File

@ -1,7 +1,7 @@
import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer'; import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
import { FC } from 'react'; import { FC } from 'react';
import { GetUserProfile, LocalizeText } from '../../../api'; import { GetUserProfile, LocalizeText } from '../../api';
import { Flex, LayoutAvatarImageView, Text } from '../../../common'; import { Flex, LayoutAvatarImageView } from '../../common';
interface RelationshipsContainerViewProps interface RelationshipsContainerViewProps
{ {
@ -27,26 +27,26 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
<Flex center className="h-[25px]"> <Flex center className="h-[25px]">
<i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } /> <i className={ `nitro-friends-spritesheet icon-${ relationshipName }` } />
</Flex> </Flex>
<div className="flex flex-col !flex-grow gap-0"> <div className="flex flex-col flex-grow gap-0">
<Flex alignItems="center" className="bg-white rounded px-2 py-1 h-[25px]" justifyContent="between"> <div className="flex items-center justify-between bg-white rounded px-2 py-1 h-[25px]">
<Text pointer small underline onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }> <p className="text-sm underline pointer" onClick={ event => (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }>
{ (!relationshipInfo || (relationshipInfo.friendCount === 0)) && { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
LocalizeText('extendedprofile.add.friends') } LocalizeText('extendedprofile.add.friends') }
{ (relationshipInfo && (relationshipInfo.friendCount >= 1)) && { (relationshipInfo && (relationshipInfo.friendCount >= 1)) &&
relationshipInfo.randomFriendName } relationshipInfo.randomFriendName }
</Text> </p>
{ (relationshipInfo && (relationshipInfo.friendCount >= 1)) && { (relationshipInfo && (relationshipInfo.friendCount >= 1)) &&
<div className="flex items-center justify-center w-[50px] h-[50px] top-[20px] -right-[8px] relative"> <div className="flex items-center justify-center w-[50px] h-[50px] top-[20px] -right-[8px] relative">
<LayoutAvatarImageView direction={ 4 } figure={ relationshipInfo.randomFriendFigure } headOnly={ true } /> <LayoutAvatarImageView direction={ 4 } figure={ relationshipInfo.randomFriendFigure } headOnly={ true } />
</div> } </div> }
</Flex> </div>
<Text italics small className="mt-[2px] ml-[5px] !text-[#939392]"> <p className="italics text-sm mt-[2px] ml-[5px] !text-[#939392]">
{ (!relationshipInfo || (relationshipInfo.friendCount === 0)) && { (!relationshipInfo || (relationshipInfo.friendCount === 0)) &&
LocalizeText('extendedprofile.no.friends.in.this.category') } LocalizeText('extendedprofile.no.friends.in.this.category') }
{ (relationshipInfo && (relationshipInfo.friendCount > 1)) && { (relationshipInfo && (relationshipInfo.friendCount > 1)) &&
LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationshipInfo.friendCount - 1).toString() ]) } LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationshipInfo.friendCount - 1).toString() ]) }
&nbsp; &nbsp;
</Text> </p>
</div> </div>
</div> </div>
); );

35
src/components/user-profile/views/UserContainerView.tsx → src/components/user-profile/UserContainerView.tsx
View File

@ -1,14 +1,11 @@
import { GetSessionDataManager, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer'; import { GetSessionDataManager, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react'; import { FC, useEffect, useState } from 'react';
import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../../api'; import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../api';
import { LayoutAvatarImageView, Text } from '../../../common'; import { LayoutAvatarImageView, Text } from '../../common';
interface UserContainerViewProps export const UserContainerView: FC<{
{
userProfile: UserProfileParser; userProfile: UserProfileParser;
} }> = props =>
export const UserContainerView: FC<UserContainerViewProps> = props =>
{ {
const { userProfile = null } = props; const { userProfile = null } = props;
const [ requestSent, setRequestSent ] = useState(userProfile.requestSent); const [ requestSent, setRequestSent ] = useState(userProfile.requestSent);
@ -34,21 +31,21 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="flex flex-col gap-0"> <div className="flex flex-col gap-0">
<Text bold>{ userProfile.username }</Text> <p className="leading-tight">{ userProfile.username }</p>
<Text italics small textBreak>{ userProfile.motto }&nbsp;</Text> <p className="text-sm italic leading-tight">{ userProfile.motto }</p>
</div> </div>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Text small> <p className="text-sm leading-none">
<b>{ LocalizeText('extendedprofile.created') }</b> { userProfile.registration } <b>{ LocalizeText('extendedprofile.created') }</b> { userProfile.registration }
</Text> </p>
<Text small> <p className="text-sm leading-none">
<b>{ LocalizeText('extendedprofile.last.login') }</b> { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) } <b>{ LocalizeText('extendedprofile.last.login') }</b> { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) }
</Text> </p>
<Text small> <p className="text-sm leading-none">
<b>{ LocalizeText('extendedprofile.achievementscore') }</b> { userProfile.achievementPoints } <b>{ LocalizeText('extendedprofile.achievementscore') }</b> { userProfile.achievementPoints }
</Text> </p>
</div> </div>
<div className="flex gap-1"> <div className="flex items-center gap-1">
{ userProfile.isOnline && { userProfile.isOnline &&
<i className="nitro-icon icon-pf-online" /> } <i className="nitro-icon icon-pf-online" /> }
{ !userProfile.isOnline && { !userProfile.isOnline &&
@ -60,11 +57,11 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
<> <>
<i className="nitro-icon icon-pf-tick" /> <i className="nitro-icon icon-pf-tick" />
{ isOwnProfile && { isOwnProfile &&
<Text>{ LocalizeText('extendedprofile.me') }</Text> } <p>{ LocalizeText('extendedprofile.me') }</p> }
{ userProfile.isMyFriend && { userProfile.isMyFriend &&
<Text>{ LocalizeText('extendedprofile.friend') }</Text> } <p>{ LocalizeText('extendedprofile.friend') }</p> }
{ (requestSent || userProfile.requestSent) && { (requestSent || userProfile.requestSent) &&
<Text>{ LocalizeText('extendedprofile.friendrequestsent') }</Text> } <p>{ LocalizeText('extendedprofile.friendrequestsent') }</p> }
</> } </> }
</div> </div>
</div> </div>

39
src/components/user-profile/UserProfileView.tsx
View File

@ -1,12 +1,12 @@
import { CreateLinkEvent, ExtendedProfileChangedMessageEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer'; import { CreateLinkEvent, ExtendedProfileChangedMessageEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
import { FC, useState } from 'react'; import { FC, useState } from 'react';
import { GetRoomSession, GetUserProfile, LocalizeText, SendMessageComposer } from '../../api'; import { GetRoomSession, GetUserProfile, LocalizeText, SendMessageComposer } from '../../api';
import { Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common'; import { Flex, Grid, LayoutBadgeImageView, Text } from '../../common';
import { useMessageEvent, useNitroEvent } from '../../hooks'; import { useMessageEvent, useNitroEvent } from '../../hooks';
import { BadgesContainerView } from './views/BadgesContainerView'; import { NitroCard } from '../../layout';
import { FriendsContainerView } from './views/FriendsContainerView'; import { FriendsContainerView } from './FriendsContainerView';
import { GroupsContainerView } from './views/GroupsContainerView'; import { GroupsContainerView } from './GroupsContainerView';
import { UserContainerView } from './views/UserContainerView'; import { UserContainerView } from './UserContainerView';
export const UserProfileView: FC<{}> = props => export const UserProfileView: FC<{}> = props =>
{ {
@ -94,29 +94,32 @@ export const UserProfileView: FC<{}> = props =>
if(!userProfile) return null; if(!userProfile) return null;
return ( return (
<NitroCardView className="w-[470px] h-[460px]" theme="primary-slim" uniqueKey="nitro-user-profile"> <NitroCard className="w-[470px] h-[460px]" uniqueKey="nitro-user-profile">
<NitroCardHeaderView headerText={ LocalizeText('extendedprofile.caption') } onCloseClick={ onClose } /> <NitroCard.Header
<NitroCardContentView overflow="hidden"> headerText={ LocalizeText('extendedprofile.caption') }
onCloseClick={ onClose } />
<NitroCard.Content
className="overflow-hidden">
<Grid fullHeight={ false } gap={ 2 }> <Grid fullHeight={ false } gap={ 2 }>
<Column className="border-r border-r-gray pe-2" gap={ 1 } size={ 7 }> <div className="flex flex-col col-span-7 gap-1 border-r border-r-gray pe-2">
<UserContainerView userProfile={ userProfile } /> <UserContainerView userProfile={ userProfile } />
<Grid fullHeight className="bg-muted rounded px-2 py-1" columnCount={ 5 }> <div className="flex items-center justify-center w-full gap-3 p-2 rounded bg-muted">
<BadgesContainerView center fullWidth badges={ userBadges } /> { userBadges && (userBadges.length > 0) && userBadges.map((badge, index) => <LayoutBadgeImageView key={ badge } badgeCode={ badge } />) }
</Grid> </div>
</Column> </div>
<Column size={ 5 }> <div className="flex flex-col col-span-5">
{ userRelationships && { userRelationships &&
<FriendsContainerView friendsCount={ userProfile.friendsCount } relationships={ userRelationships } /> } <FriendsContainerView friendsCount={ userProfile.friendsCount } relationships={ userRelationships } /> }
</Column> </div>
</Grid> </Grid>
<Flex alignItems="center" className=" border-t border-t-gray border-b border-b-gray px-2 py-1"> <Flex alignItems="center" className="px-2 py-1 border-t border-b border-t-gray border-b-gray">
<Flex alignItems="center" gap={ 1 } onClick={ event => CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`) }> <Flex alignItems="center" gap={ 1 } onClick={ event => CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`) }>
<i className="nitro-icon icon-rooms" /> <i className="nitro-icon icon-rooms" />
<Text bold pointer underline>{ LocalizeText('extendedprofile.rooms') }</Text> <Text bold pointer underline>{ LocalizeText('extendedprofile.rooms') }</Text>
</Flex> </Flex>
</Flex> </Flex>
<GroupsContainerView fullWidth groups={ userProfile.groups } itsMe={ userProfile.id === GetSessionDataManager().userId } onLeaveGroup={ onLeaveGroup } /> <GroupsContainerView fullWidth groups={ userProfile.groups } itsMe={ userProfile.id === GetSessionDataManager().userId } onLeaveGroup={ onLeaveGroup } />
</NitroCardContentView> </NitroCard.Content>
</NitroCardView> </NitroCard>
); );
}; };

25
src/components/user-profile/views/BadgesContainerView.tsx
View File

@ -1,25 +0,0 @@
import { FC } from 'react';
import { Column, FlexProps, LayoutBadgeImageView } from '../../../common';
interface BadgesContainerViewProps extends FlexProps
{
badges: string[];
}
export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
{
const { badges = null, gap = 1, justifyContent = 'between', ...rest } = props;
return (
<>
{ badges && (badges.length > 0) && badges.map((badge, index) =>
{
return (
<Column key={ badge } center>
<LayoutBadgeImageView key={ badge } badgeCode={ badge } />
</Column>
);
}) }
</>
);
};