From 9edaa66e94085269575e58a25f56e58663620341 Mon Sep 17 00:00:00 2001 From: Dank074 Date: Thu, 12 Aug 2021 01:30:02 -0500 Subject: [PATCH 1/4] started user profiles --- src/assets/images/profile/icons/bobba.png | Bin 0 -> 169 bytes src/assets/images/profile/icons/heart.png | Bin 0 -> 201 bytes src/assets/images/profile/icons/offline.png | Bin 0 -> 306 bytes src/assets/images/profile/icons/online.gif | Bin 0 -> 666 bytes src/assets/images/profile/icons/smile.png | Bin 0 -> 205 bytes src/assets/images/profile/icons/tick.png | Bin 0 -> 129 bytes src/assets/styles/icons.scss | 36 +++++++ src/views/Styles.scss | 1 + .../friend-bar-item/FriendBarItemView.tsx | 9 +- src/views/main/MainView.tsx | 2 + src/views/toolbar/me/ToolbarMeView.tsx | 13 ++- src/views/user-profile/UserProfileVew.scss | 77 +++++++++++++++ src/views/user-profile/UserProfileView.tsx | 92 ++++++++++++++++++ .../badges-container/BadgesContainerView.tsx | 20 ++++ .../BadgesContainerView.types.ts | 3 + .../FriendsContainerView.tsx | 44 +++++++++ .../FriendsContainerView.types.ts | 6 ++ .../user-container/UserContainerView.tsx | 45 +++++++++ .../user-container/UserContainerView.types.ts | 12 +++ 19 files changed, 355 insertions(+), 5 deletions(-) create mode 100644 src/assets/images/profile/icons/bobba.png create mode 100644 src/assets/images/profile/icons/heart.png create mode 100644 src/assets/images/profile/icons/offline.png create mode 100644 src/assets/images/profile/icons/online.gif create mode 100644 src/assets/images/profile/icons/smile.png create mode 100644 src/assets/images/profile/icons/tick.png create mode 100644 src/views/user-profile/UserProfileVew.scss create mode 100644 src/views/user-profile/UserProfileView.tsx create mode 100644 src/views/user-profile/views/badges-container/BadgesContainerView.tsx create mode 100644 src/views/user-profile/views/badges-container/BadgesContainerView.types.ts create mode 100644 src/views/user-profile/views/friends-container/FriendsContainerView.tsx create mode 100644 src/views/user-profile/views/friends-container/FriendsContainerView.types.ts create mode 100644 src/views/user-profile/views/user-container/UserContainerView.tsx create mode 100644 src/views/user-profile/views/user-container/UserContainerView.types.ts diff --git a/src/assets/images/profile/icons/bobba.png b/src/assets/images/profile/icons/bobba.png new file mode 100644 index 0000000000000000000000000000000000000000..eaea89573d4520b0e2f808d522f2653d64305969 GIT binary patch literal 169 zcmeAS@N?(olHy`uVBq!ia0vp^0zk~i!3HGN^yhQ|sRBF!TQ4PYH5hQPCiw5( z{U$_iZPi8Qi=Dp~vj^$?oRzGkc3t67vukK>xPwiDYJ9H3>|;ur0kW(Ug&u74f3LaW zdmiHpZiWzUgFmxn8Efz7DLb@0{-Iv|kG12+ru*ItRx#K_PF~$pXPLtL>MZZA1-ESs TnliG1b~AXo`njxgN@xNA$niZ) literal 0 HcmV?d00001 diff --git a/src/assets/images/profile/icons/heart.png b/src/assets/images/profile/icons/heart.png new file mode 100644 index 0000000000000000000000000000000000000000..5dd1015e96c2e0e20406db65649298b01fb76c0f GIT binary patch literal 201 zcmeAS@N?(olHy`uVBq!ia0vp^0zk~i!3HGN^yhQ|sR^Dgjv*DdrcOG@+n~VXI`gQZ zMP-oyzsek$Lz9gyT9hrCltb+{ZftZq=#q#xy}p!CWwZ!9j>-L8zQ9Xa5|$l zyy4TVG^O{(FLoZAqZ-SoAJDU3=c>*YZjoJ0$v0Q2d;H+E2V+CI%iulfD9T@GFn zJ9C6QJa^`ZZE%@An^jlK(M#gz)WUn3oXk)5)Eo4QcnHPs0=kXC)78&qol`;+00&4& Ad;kCd literal 0 HcmV?d00001 diff --git a/src/assets/images/profile/icons/offline.png b/src/assets/images/profile/icons/offline.png new file mode 100644 index 0000000000000000000000000000000000000000..677aadcf2ea9a6a338eaf69694bacc21f0a48bd7 GIT binary patch literal 306 zcmV-20nPr2P)t3uZ}msh(;q*FZl=Eg8r5*&IivDX~&YOWI>we@9M)zWGq8 zL~32vw(onhrd;)5N?Kwf6ZtTLA{P|rxTy==}Ix|G(`-~F*>!O@tMOpL`TYsZIxQLwJLC$PfZdsOAYfat1m_>@5!T4PD zh@8jUUBY*p=Q$-N;wCsahX4Qo literal 0 HcmV?d00001 diff --git a/src/assets/images/profile/icons/online.gif b/src/assets/images/profile/icons/online.gif new file mode 100644 index 0000000000000000000000000000000000000000..3a79838bd329181393f7e91ac17fd74b09d95b8d GIT binary patch literal 666 zcmZ?wbhEHb)L;-`*v!eWbLY;Ej*h6Ps8!)C|7S4#Kg)IZ?p+23hW}syWS{}X|J;7A zA;Hd$0j@@R2F#2=X~mx`tS1;a8FWBOLB=w$v>BY7$+Fktb?)~6(-rz;Guj#&*RTc5 zTQ)(e(z$}YlEhSXen9e`ppZNI&HUZ^7fmb zPDv{4xSvRWTlB~>(o7N|;QpAOSJI%{*tor+J_N}B## zg`fU@`eoVSMS&q6t$t^3cnUEhEaqTfXOIS4tY&c1bF~TQ^PDYz#kW@~bj;0&tW5V< z6|;I_)JMe)t#8WW-r2-!G9k1g+$>|@nUJ!|EbwsQyBIS@6@|D5l}jEe3Lcqxbdw0! zE>5r~5w5lbx|(rsg;et9`?IGrsx)+nXZW;VQF}Xkg*Nx`4K8nL<{h_~ccJ|=XS?}y zqrx`}XSA;PvU0N9%1Imu>k+Y;268ztHqY+ers!aP4N9 caD(Ig2>~yD|7BrzlBlV#Z*1=D5@fIj0HK@smH+?% literal 0 HcmV?d00001 diff --git a/src/assets/images/profile/icons/smile.png b/src/assets/images/profile/icons/smile.png new file mode 100644 index 0000000000000000000000000000000000000000..62fcae6ebcbc60a6e7a441c595e425835774fd0c GIT binary patch literal 205 zcmeAS@N?(olHy`uVBq!ia0vp^0zk~i!3HGN^yhQ|sVSZ=jv*DdrcOG@+n~VXYTaV~ zJ(=e{-=mw1HWm%DD?aBn)i`-x_R_Hb**NVybB~MD$7L@}GZ$9AtCQ|vTd?#k+k&3= zsXB_j4tM|fe7y0@=6v!h)g!DAD&=e&N*7A4TP{}ITl$2DA%sm~&Hm;$%Hesp**;|E z>~j@gp!kV%&ra@yj%_jTnX1ehmKc1}R`$2&Vm|ka!T55^XP{05H literal 0 HcmV?d00001 diff --git a/src/assets/images/profile/icons/tick.png b/src/assets/images/profile/icons/tick.png new file mode 100644 index 0000000000000000000000000000000000000000..ec8c52fdf71f359dbd22ddeae746f2df2459e03f GIT binary patch literal 129 zcmeAS@N?(olHy`uVBq!ia0vp^+(695!3HFgJ}hYlQXZZzjv*DddV3hT7!){;ynA1# z5TBDFkvNOD>BY7NwluLn36C0L9BT?L^2s{>Q52qPD)23$t1B*PLf1LbkR&miqY_&l cNrv2JDa>e9Jhg1gZJ?P9p00i_>zopr09Ai08UO$Q literal 0 HcmV?d00001 diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index 53cfa487..7543bd5d 100644 --- a/src/assets/styles/icons.scss +++ b/src/assets/styles/icons.scss @@ -513,6 +513,42 @@ height: 21px; } + &.icon-pf-online { + background: url('../images/profile/icons/online.gif'); + width: 40px; + height: 16px; + } + + &.icon-pf-offline { + background: url('../images/profile/icons/offline.png'); + width: 40px; + height: 16px; + } + + &.icon-pf-tick { + background: url('../images/profile/icons/tick.png'); + width: 11px; + height: 10px; + } + + &.icon-relationship-heart { + background: url('../images/profile/icons/heart.png'); + width: 16px; + height: 14px; + } + + &.icon-relationship-bobba { + background: url('../images/profile/icons/bobba.png'); + width: 16px; + height: 14px; + } + + &.icon-relationship-smile { + background: url('../images/profile/icons/smile.png'); + width: 16px; + height: 14px; + } + &.spin { animation: rotating 1s linear infinite; } diff --git a/src/views/Styles.scss b/src/views/Styles.scss index 7949875c..3538a563 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -16,3 +16,4 @@ @import './wired/WiredView'; @import './mod-tools/ModToolsView'; @import './achievements/AchievementsView'; +@import './user-profile/UserProfileVew'; diff --git a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx b/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx index 312cb6b0..765542c4 100644 --- a/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx +++ b/src/views/friend-list/views/friend-bar-item/FriendBarItemView.tsx @@ -1,4 +1,4 @@ -import { FollowFriendComposer, MouseEventType } from '@nitrots/nitro-renderer'; +import { FollowFriendComposer, MouseEventType, UserProfileComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { SendMessageHook } from '../../../../hooks/messages'; import { LocalizeText } from '../../../../utils/LocalizeText'; @@ -16,6 +16,11 @@ export const FriendBarItemView: FC = props => SendMessageHook(new FollowFriendComposer(friend.id)); }, [ friend ]); + const openProfile = useCallback(() => + { + SendMessageHook(new UserProfileComposer(friend.id)); + }, [ friend ]); + const onClick = useCallback((event: MouseEvent) => { const element = elementRef.current; @@ -56,7 +61,7 @@ export const FriendBarItemView: FC = props =>
{ friend.followingAllowed && } - +
} ); diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx index eab47e1c..b6699865 100644 --- a/src/views/main/MainView.tsx +++ b/src/views/main/MainView.tsx @@ -14,6 +14,7 @@ import { NotificationCenterView } from '../notification-center/NotificationCente import { RightSideView } from '../right-side/RightSideView'; import { RoomHostView } from '../room-host/RoomHostView'; import { ToolbarView } from '../toolbar/ToolbarView'; +import { UserProfileView } from '../user-profile/UserProfileView'; import { WiredView } from '../wired/WiredView'; import { MainViewProps } from './MainView.types'; @@ -60,6 +61,7 @@ export const MainView: FC = props => + ); } diff --git a/src/views/toolbar/me/ToolbarMeView.tsx b/src/views/toolbar/me/ToolbarMeView.tsx index 37228c04..1e9a42ef 100644 --- a/src/views/toolbar/me/ToolbarMeView.tsx +++ b/src/views/toolbar/me/ToolbarMeView.tsx @@ -1,5 +1,7 @@ -import { MouseEventType } from '@nitrots/nitro-renderer'; -import { FC, useEffect, useRef } from 'react'; +import { MouseEventType, UserProfileComposer } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useEffect, useRef } from 'react'; +import { GetSessionDataManager } from '../../../api'; +import { SendMessageHook } from '../../../hooks'; import { ToolbarViewItems } from '../ToolbarView.types'; import { ToolbarMeViewProps } from './ToolbarMeView.types'; @@ -29,6 +31,11 @@ export const ToolbarMeView: FC = props => } }, [ elementRef, setMeExpanded ]); + const openProfile = useCallback(() => + { + SendMessageHook(new UserProfileComposer(GetSessionDataManager().userId)); + }, []); + return (
@@ -42,7 +49,7 @@ export const ToolbarMeView: FC = props =>
- + openProfile()}>
diff --git a/src/views/user-profile/UserProfileVew.scss b/src/views/user-profile/UserProfileVew.scss new file mode 100644 index 00000000..4e8c2218 --- /dev/null +++ b/src/views/user-profile/UserProfileVew.scss @@ -0,0 +1,77 @@ +.user-profile { + .content-area { + color: black; + } + + .user-container + { + border-right: 1px solid gray; + + .avatar-image { + left: -10px; + } + } + + .badge-container + { + min-height: 50px; + background: rgba(0, 0, 0, .1); + border-radius: 5px; + margin: 0px; + margin-bottom: 2px; + + .badge-image { + margin-left: 2px; + margin-right: 2px; + } + } + + .rooms-button-container + { + border-top: 1px solid gray; + border-bottom: 1px solid gray; + padding: 1px; + + .rooms-button { + display:inline-block; + text-align: center; + height: 100%; + text-decoration: underline; + margin-left: 10px; + } + } + + .friends-container + { + height: 100%; + + .relationships-container { + + .relationship-container { + margin: 10px; + + .relationship + { + margin-left: 10px; + background-color: white; + padding: 5px; + border-radius: 5px; + display: inline-block; + text-decoration: underline; + width: 100%; + + .avatar-image { + position: absolute; + width: 50px; + height: 80px; + right: 0; + margin-top: -60px; + margin-right: 10px; + } + } + } + + } + + } +} diff --git a/src/views/user-profile/UserProfileView.tsx b/src/views/user-profile/UserProfileView.tsx new file mode 100644 index 00000000..7fb6a222 --- /dev/null +++ b/src/views/user-profile/UserProfileView.tsx @@ -0,0 +1,92 @@ +import { UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer, UserRelationshipsEvent, UserRelationshipsParser } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useState } from 'react'; +import { CreateMessageHook, SendMessageHook } from '../../hooks'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout'; +import { LocalizeText } from '../../utils'; +import { BadgesContainerView } from './views/badges-container/BadgesContainerView'; +import { FriendsContainerView } from './views/friends-container/FriendsContainerView'; +import { UserContainerView } from './views/user-container/UserContainerView'; + +export const UserProfileView: FC = props => +{ + const [userProfile, setUserProfile] = useState(null); + const [userBadges, setUserBadges] = useState([]); + const [userRelationships, setUserRelationships] = useState(null); + + const OnClose = useCallback(() => + { + setUserProfile(null); + setUserBadges([]); + setUserRelationships(null); + }, []); + + const OnUserCurrentBadgesEvent = useCallback((event: UserCurrentBadgesEvent) => + { + const parser = event.getParser(); + + if (userProfile && parser.userId === userProfile.id) + setUserBadges(parser.badges); + }, [userProfile, setUserBadges]); + + CreateMessageHook(UserCurrentBadgesEvent, OnUserCurrentBadgesEvent); + + const OnUserRelationshipsEvent = useCallback((event: UserRelationshipsEvent) => + { + const parser = event.getParser(); + + if (userProfile && parser.id === userProfile.id) + setUserRelationships(parser); + }, [userProfile, setUserRelationships]); + + CreateMessageHook(UserRelationshipsEvent, OnUserRelationshipsEvent); + + const OnUserProfileEvent = useCallback((event: UserProfileEvent) => + { + const parser = event.getParser(); + + if(userProfile && userProfile.id === parser.id) + OnClose(); + + setUserProfile(parser); + SendMessageHook(new UserCurrentBadgesComposer(parser.id)); + SendMessageHook(new UserRelationshipsComposer(parser.id)); + }, [OnClose, userProfile]); + + CreateMessageHook(UserProfileEvent, OnUserProfileEvent); + + if (!userProfile) return null; + + return ( +
+ + + +
+
+ + +
+
+ { + userRelationships && + } +
+
+
+
+ {LocalizeText('extendedprofile.rooms')} +
+
+
+
+ groups list goes here +
+
+ group info goes here +
+
+ + +
+ ) +} diff --git a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx new file mode 100644 index 00000000..246dac09 --- /dev/null +++ b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx @@ -0,0 +1,20 @@ +import { FC } from 'react'; +import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView'; +import { BadgesContainerViewProps } from './BadgesContainerView.types'; + +export const BadgesContainerView: FC = props => +{ + const {badges = null} = props; + + return ( +
+
+ { + badges.map( (badge, index) => { + return + }) + } +
+
+ ); +} diff --git a/src/views/user-profile/views/badges-container/BadgesContainerView.types.ts b/src/views/user-profile/views/badges-container/BadgesContainerView.types.ts new file mode 100644 index 00000000..d57276ab --- /dev/null +++ b/src/views/user-profile/views/badges-container/BadgesContainerView.types.ts @@ -0,0 +1,3 @@ +export interface BadgesContainerViewProps { + badges: string[]; +} diff --git a/src/views/user-profile/views/friends-container/FriendsContainerView.tsx b/src/views/user-profile/views/friends-container/FriendsContainerView.tsx new file mode 100644 index 00000000..c11ab7cb --- /dev/null +++ b/src/views/user-profile/views/friends-container/FriendsContainerView.tsx @@ -0,0 +1,44 @@ +import { FC, useCallback } from 'react'; +import { LocalizeText } from '../../../../utils'; +import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; +import { FriendsContainerViewProps } from './FriendsContainerView.types'; + +export const FriendsContainerView: FC = props => +{ + const { relationships = null, friendsCount = null } = props; + + const RelationshipComponent = useCallback(({ type }) => + { + const randomUserIndex = (relationships && relationships.has(type) && relationships.get(type).length) ? + Math.floor(Math.random() * relationships.get(type).length) : -1; + + const randomUser = randomUserIndex > -1 ? relationships.get(type)[randomUserIndex] : null; + + return ( +
+ + + { + randomUser ? randomUser.username : LocalizeText('extendedprofile.add.friends') + } + { + randomUser && + + } + +
+ ); + }, [relationships]); + + return ( +
+
+
{LocalizeText('extendedprofile.relstatus')}
+
+ + + +
+
+ ) +} diff --git a/src/views/user-profile/views/friends-container/FriendsContainerView.types.ts b/src/views/user-profile/views/friends-container/FriendsContainerView.types.ts new file mode 100644 index 00000000..7d215e2d --- /dev/null +++ b/src/views/user-profile/views/friends-container/FriendsContainerView.types.ts @@ -0,0 +1,6 @@ +import { UserRelationshipDataParser } from '@nitrots/nitro-renderer'; + +export interface FriendsContainerViewProps { + relationships: Map; + friendsCount: number; +} diff --git a/src/views/user-profile/views/user-container/UserContainerView.tsx b/src/views/user-profile/views/user-container/UserContainerView.tsx new file mode 100644 index 00000000..f2194408 --- /dev/null +++ b/src/views/user-profile/views/user-container/UserContainerView.tsx @@ -0,0 +1,45 @@ +import { FriendlyTime } from '@nitrots/nitro-renderer'; +import { FC, useCallback } from 'react'; +import { GetSessionDataManager } from '../../../../api'; +import { LocalizeText } from '../../../../utils'; +import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; +import { UserContainerViewProps } from './UserContainerView.types'; + +export const UserContainerView: FC = props => +{ + const {figure = null, username = null, motto = null, creation = null, secondsSinceLastLogin = null, achievementScore, isFriend = null, isOnline = null, id = null, requestSent = null} = props; + + const OnlineIcon = useCallback(() => { + if(isOnline) return (); + else return (); + }, [isOnline]); + + const FriendRequestComponent = useCallback(() => { + if(id === GetSessionDataManager().userId) return ({LocalizeText('extendedprofile.me')} ); + + if(isFriend) return ({LocalizeText('extendedprofile.friend')}); + + if(requestSent) return ({LocalizeText('extendedprofile.friendrequestsent')}); + + return () + }, [id, isFriend, requestSent]); + + return ( +
+
+ +
+
+
+
{username}
+
{motto}
+
+
+
{LocalizeText('extendedprofile.achievementscore')} {achievementScore}
+ + +
+
+
+ ) +} diff --git a/src/views/user-profile/views/user-container/UserContainerView.types.ts b/src/views/user-profile/views/user-container/UserContainerView.types.ts new file mode 100644 index 00000000..9ef01c32 --- /dev/null +++ b/src/views/user-profile/views/user-container/UserContainerView.types.ts @@ -0,0 +1,12 @@ +export interface UserContainerViewProps { + id: number; + username: string; + figure: string; + motto: string; + creation: string; + secondsSinceLastLogin: number; + achievementScore: number; + isFriend: boolean; + requestSent: boolean; + isOnline: boolean; +} From dcc1b7cb70214325c26a2f02a6efbc91056f0992 Mon Sep 17 00:00:00 2001 From: Dank074 Date: Thu, 12 Aug 2021 01:48:51 -0500 Subject: [PATCH 2/4] style fixes --- src/views/user-profile/UserProfileVew.scss | 10 +++++ .../FriendsContainerView.tsx | 38 ++++++++++++------- .../user-container/UserContainerView.tsx | 2 +- 3 files changed, 35 insertions(+), 15 deletions(-) diff --git a/src/views/user-profile/UserProfileVew.scss b/src/views/user-profile/UserProfileVew.scss index 4e8c2218..86945fc4 100644 --- a/src/views/user-profile/UserProfileVew.scss +++ b/src/views/user-profile/UserProfileVew.scss @@ -10,6 +10,11 @@ .avatar-image { left: -10px; } + + .add-friend { + margin: 5px; + margin-left: 10px; + } } .badge-container @@ -60,6 +65,11 @@ text-decoration: underline; width: 100%; + .relationship-text + { + cursor: pointer; + } + .avatar-image { position: absolute; width: 50px; diff --git a/src/views/user-profile/views/friends-container/FriendsContainerView.tsx b/src/views/user-profile/views/friends-container/FriendsContainerView.tsx index c11ab7cb..5593da4f 100644 --- a/src/views/user-profile/views/friends-container/FriendsContainerView.tsx +++ b/src/views/user-profile/views/friends-container/FriendsContainerView.tsx @@ -1,4 +1,6 @@ +import { UserProfileComposer, UserRelationshipDataParser } from '@nitrots/nitro-renderer'; import { FC, useCallback } from 'react'; +import { SendMessageHook } from '../../../../hooks'; import { LocalizeText } from '../../../../utils'; import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; import { FriendsContainerViewProps } from './FriendsContainerView.types'; @@ -7,28 +9,36 @@ export const FriendsContainerView: FC = props => { const { relationships = null, friendsCount = null } = props; + const OnUserClick = useCallback((user: UserRelationshipDataParser) => + { + if(user) + SendMessageHook(new UserProfileComposer(user.userId)); + }, []); + const RelationshipComponent = useCallback(({ type }) => { - const randomUserIndex = (relationships && relationships.has(type) && relationships.get(type).length) ? - Math.floor(Math.random() * relationships.get(type).length) : -1; + const randomUserIndex = (relationships && relationships.has(type) && relationships.get(type).length) ? + Math.floor(Math.random() * relationships.get(type).length) : -1; - const randomUser = randomUserIndex > -1 ? relationships.get(type)[randomUserIndex] : null; + const randomUser = randomUserIndex > -1 ? relationships.get(type)[randomUserIndex] : null; - return ( -
- - + return ( +
+ + + OnUserClick(randomUser)}> { randomUser ? randomUser.username : LocalizeText('extendedprofile.add.friends') } - { - randomUser && - - } -
- ); - }, [relationships]); + { + randomUser && + + } + +
+ ); + }, [OnUserClick, relationships]); return (
diff --git a/src/views/user-profile/views/user-container/UserContainerView.tsx b/src/views/user-profile/views/user-container/UserContainerView.tsx index f2194408..28a5ad6b 100644 --- a/src/views/user-profile/views/user-container/UserContainerView.tsx +++ b/src/views/user-profile/views/user-container/UserContainerView.tsx @@ -21,7 +21,7 @@ export const UserContainerView: FC = props => if(requestSent) return ({LocalizeText('extendedprofile.friendrequestsent')}); - return () + return () }, [id, isFriend, requestSent]); return ( From ec05810c90276c1c6dddd90e4c8e521a416876a1 Mon Sep 17 00:00:00 2001 From: Dank074 Date: Thu, 12 Aug 2021 02:16:19 -0500 Subject: [PATCH 3/4] shit oops --- src/views/user-profile/UserProfileView.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/views/user-profile/UserProfileView.tsx b/src/views/user-profile/UserProfileView.tsx index 7fb6a222..8c443849 100644 --- a/src/views/user-profile/UserProfileView.tsx +++ b/src/views/user-profile/UserProfileView.tsx @@ -44,13 +44,16 @@ export const UserProfileView: FC = props => { const parser = event.getParser(); - if(userProfile && userProfile.id === parser.id) - OnClose(); + if(userProfile && userProfile.id !== parser.id) + { + setUserBadges([]); + setUserRelationships(null); + } setUserProfile(parser); SendMessageHook(new UserCurrentBadgesComposer(parser.id)); SendMessageHook(new UserRelationshipsComposer(parser.id)); - }, [OnClose, userProfile]); + }, [userProfile]); CreateMessageHook(UserProfileEvent, OnUserProfileEvent); From 262fe87660bd832e35cb233fc338147e6e1ecc96 Mon Sep 17 00:00:00 2001 From: Dank074 Date: Fri, 13 Aug 2021 02:46:37 -0500 Subject: [PATCH 4/4] fix relationships --- src/views/Styles.scss | 1 + .../views/user/InfoStandWidgetUserView.tsx | 25 ++++++- src/views/user-profile/UserProfileVew.scss | 39 ----------- src/views/user-profile/UserProfileView.tsx | 18 ++--- .../badges-container/BadgesContainerView.tsx | 12 +++- .../FriendsContainerView.tsx | 45 ++---------- .../FriendsContainerView.types.ts | 4 +- .../RelationshipsContainerView.scss | 38 ++++++++++ .../RelationshipsContainerView.tsx | 69 +++++++++++++++++++ .../RelationshipsContainerView.types.ts | 7 ++ .../user-container/UserContainerView.tsx | 2 +- 11 files changed, 163 insertions(+), 97 deletions(-) create mode 100644 src/views/user-profile/views/relationships-container/RelationshipsContainerView.scss create mode 100644 src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx create mode 100644 src/views/user-profile/views/relationships-container/RelationshipsContainerView.types.ts diff --git a/src/views/Styles.scss b/src/views/Styles.scss index 3538a563..53237ab7 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -17,3 +17,4 @@ @import './mod-tools/ModToolsView'; @import './achievements/AchievementsView'; @import './user-profile/UserProfileVew'; +@import './user-profile/views/relationships-container/RelationshipsContainerView'; diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx index 5d8b3cb5..ea65abe3 100644 --- a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx +++ b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx @@ -1,9 +1,11 @@ -import { RoomSessionUserBadgesEvent } from '@nitrots/nitro-renderer'; +import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer'; import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react'; +import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks'; import { CreateEventDispatcherHook } from '../../../../../../hooks/events'; import { LocalizeText } from '../../../../../../utils/LocalizeText'; import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView'; import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView'; +import { RelationshipsContainerView } from '../../../../../user-profile/views/relationships-container/RelationshipsContainerView'; import { useRoomContext } from '../../../../context/RoomContext'; import { RoomWidgetUpdateInfostandUserEvent } from '../../../../events/RoomWidgetUpdateInfostandUserEvent'; import { RoomWidgetChangeMottoMessage } from '../../../../messages'; @@ -16,6 +18,7 @@ export const InfoStandWidgetUserView: FC = props = const [ badges, setBadges ] = useState([]); const [ motto, setMotto ] = useState(null); const [ isEditingMotto, setIsEditingMotto ] = useState(false); + const [ userRelationships, setUserRelationships ] = useState(null); const saveMotto = useCallback((motto: string) => { @@ -50,11 +53,27 @@ export const InfoStandWidgetUserView: FC = props = CreateEventDispatcherHook(RoomSessionUserBadgesEvent.RSUBE_BADGES, eventDispatcher, onRoomSessionUserBadgesEvent); + const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) => + { + const parser = event.getParser(); + + if (userData && userData.webID === parser.userId) + setUserRelationships(parser); + }, [userData]); + + CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent); + useEffect(() => { setBadges(userData.badges); setIsEditingMotto(false); setMotto(userData.motto); + SendMessageHook(new UserRelationshipsComposer(userData.webID)); + + return () => { + setBadges([]); + setUserRelationships(null); + } }, [ userData ]); if(!userData) return null; @@ -122,7 +141,9 @@ export const InfoStandWidgetUserView: FC = props =
{ LocalizeText('infostand.text.handitem', [ 'item' ], [ LocalizeText('handitem' + userData.carryItem) ]) }
- } + + } +
); } diff --git a/src/views/user-profile/UserProfileVew.scss b/src/views/user-profile/UserProfileVew.scss index 86945fc4..49fd142f 100644 --- a/src/views/user-profile/UserProfileVew.scss +++ b/src/views/user-profile/UserProfileVew.scss @@ -24,11 +24,6 @@ border-radius: 5px; margin: 0px; margin-bottom: 2px; - - .badge-image { - margin-left: 2px; - margin-right: 2px; - } } .rooms-button-container @@ -49,39 +44,5 @@ .friends-container { height: 100%; - - .relationships-container { - - .relationship-container { - margin: 10px; - - .relationship - { - margin-left: 10px; - background-color: white; - padding: 5px; - border-radius: 5px; - display: inline-block; - text-decoration: underline; - width: 100%; - - .relationship-text - { - cursor: pointer; - } - - .avatar-image { - position: absolute; - width: 50px; - height: 80px; - right: 0; - margin-top: -60px; - margin-right: 10px; - } - } - } - - } - } } diff --git a/src/views/user-profile/UserProfileView.tsx b/src/views/user-profile/UserProfileView.tsx index 8c443849..2865137b 100644 --- a/src/views/user-profile/UserProfileView.tsx +++ b/src/views/user-profile/UserProfileView.tsx @@ -1,4 +1,4 @@ -import { UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer, UserRelationshipsEvent, UserRelationshipsParser } from '@nitrots/nitro-renderer'; +import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useState } from 'react'; import { CreateMessageHook, SendMessageHook } from '../../hooks'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout'; @@ -11,7 +11,7 @@ export const UserProfileView: FC = props => { const [userProfile, setUserProfile] = useState(null); const [userBadges, setUserBadges] = useState([]); - const [userRelationships, setUserRelationships] = useState(null); + const [userRelationships, setUserRelationships] = useState(null); const OnClose = useCallback(() => { @@ -30,15 +30,15 @@ export const UserProfileView: FC = props => CreateMessageHook(UserCurrentBadgesEvent, OnUserCurrentBadgesEvent); - const OnUserRelationshipsEvent = useCallback((event: UserRelationshipsEvent) => + const OnUserRelationshipsEvent = useCallback((event: RelationshipStatusInfoEvent) => { const parser = event.getParser(); - if (userProfile && parser.id === userProfile.id) + if (userProfile && parser.userId === userProfile.id) setUserRelationships(parser); }, [userProfile, setUserRelationships]); - CreateMessageHook(UserRelationshipsEvent, OnUserRelationshipsEvent); + CreateMessageHook(RelationshipStatusInfoEvent, OnUserRelationshipsEvent); const OnUserProfileEvent = useCallback((event: UserProfileEvent) => { @@ -65,13 +65,13 @@ export const UserProfileView: FC = props =>
-
- +
+
-
+
{ - userRelationships && + userRelationships && }
diff --git a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx index 246dac09..4e7eafb2 100644 --- a/src/views/user-profile/views/badges-container/BadgesContainerView.tsx +++ b/src/views/user-profile/views/badges-container/BadgesContainerView.tsx @@ -7,13 +7,19 @@ export const BadgesContainerView: FC = props => const {badges = null} = props; return ( -
-
+
+
+
{ badges.map( (badge, index) => { - return + return ( +
+ +
+ ) }) } +
); diff --git a/src/views/user-profile/views/friends-container/FriendsContainerView.tsx b/src/views/user-profile/views/friends-container/FriendsContainerView.tsx index 5593da4f..3bb06e9f 100644 --- a/src/views/user-profile/views/friends-container/FriendsContainerView.tsx +++ b/src/views/user-profile/views/friends-container/FriendsContainerView.tsx @@ -1,54 +1,17 @@ -import { UserProfileComposer, UserRelationshipDataParser } from '@nitrots/nitro-renderer'; -import { FC, useCallback } from 'react'; -import { SendMessageHook } from '../../../../hooks'; +import { FC } from 'react'; import { LocalizeText } from '../../../../utils'; -import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; +import { RelationshipsContainerView } from '../relationships-container/RelationshipsContainerView'; import { FriendsContainerViewProps } from './FriendsContainerView.types'; export const FriendsContainerView: FC = props => { const { relationships = null, friendsCount = null } = props; - const OnUserClick = useCallback((user: UserRelationshipDataParser) => - { - if(user) - SendMessageHook(new UserProfileComposer(user.userId)); - }, []); - - const RelationshipComponent = useCallback(({ type }) => - { - const randomUserIndex = (relationships && relationships.has(type) && relationships.get(type).length) ? - Math.floor(Math.random() * relationships.get(type).length) : -1; - - const randomUser = randomUserIndex > -1 ? relationships.get(type)[randomUserIndex] : null; - - return ( -
- - - OnUserClick(randomUser)}> - { - randomUser ? randomUser.username : LocalizeText('extendedprofile.add.friends') - } - - { - randomUser && - - } - -
- ); - }, [OnUserClick, relationships]); - return ( -
+
{LocalizeText('extendedprofile.relstatus')}
-
- - - -
+
) } diff --git a/src/views/user-profile/views/friends-container/FriendsContainerView.types.ts b/src/views/user-profile/views/friends-container/FriendsContainerView.types.ts index 7d215e2d..99ba31df 100644 --- a/src/views/user-profile/views/friends-container/FriendsContainerView.types.ts +++ b/src/views/user-profile/views/friends-container/FriendsContainerView.types.ts @@ -1,6 +1,6 @@ -import { UserRelationshipDataParser } from '@nitrots/nitro-renderer'; +import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer'; export interface FriendsContainerViewProps { - relationships: Map; + relationships: RelationshipStatusInfoMessageParser; friendsCount: number; } diff --git a/src/views/user-profile/views/relationships-container/RelationshipsContainerView.scss b/src/views/user-profile/views/relationships-container/RelationshipsContainerView.scss new file mode 100644 index 00000000..cc722c8f --- /dev/null +++ b/src/views/user-profile/views/relationships-container/RelationshipsContainerView.scss @@ -0,0 +1,38 @@ +.relationships-container { + + .relationship-container { + //margin-bottom: 10px; + + .relationship + { + margin-left: 10px; + display: inline-block; + + &.advanced { + background-color: white; + padding: 5px; + border-radius: 5px; + } + + .relationship-text { + text-decoration: underline; + } + + .avatar-image { + position: absolute; + width: 50px; + height: 80px; + right: 0; + margin-top: -60px; + margin-right: 10px; + } + } + + .others-text { + margin-left: 20px; + height: 21px; + color: #939392; + } + } + +} diff --git a/src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx b/src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx new file mode 100644 index 00000000..be21d944 --- /dev/null +++ b/src/views/user-profile/views/relationships-container/RelationshipsContainerView.tsx @@ -0,0 +1,69 @@ +import { RelationshipStatusEnum, RelationshipStatusInfo, UserProfileComposer } from '@nitrots/nitro-renderer'; +import { FC, useCallback } from 'react'; +import { SendMessageHook } from '../../../../hooks'; +import { LocalizeText } from '../../../../utils'; +import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView'; +import { RelationshipsContainerViewProps } from './RelationshipsContainerView.types'; + +export const RelationshipsContainerView: FC = props => +{ + const { relationships = null, simple = false } = props; + + const OnUserClick = useCallback((user: RelationshipStatusInfo) => + { + if (user) + SendMessageHook(new UserProfileComposer(user.randomFriendId)); + }, []); + + const RelationshipComponent = useCallback(({ type }) => + { + const relationshipInfo = (relationships && relationships.relationshipStatusMap.hasKey(type)) ? relationships.relationshipStatusMap.getValue(type) : null; + + if (simple && !relationshipInfo) return null; + + const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase(); + + return ( +
+ + + OnUserClick(relationshipInfo)}> + { + (relationshipInfo && relationshipInfo.friendCount > 0) ? relationshipInfo.randomFriendName : LocalizeText('extendedprofile.add.friends') + } + + { + (simple && relationshipInfo && relationshipInfo.friendCount > 1) && + + {' ' + LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()])} + + } + { + (!simple && relationshipInfo && relationshipInfo.friendCount > 0) && + + } + + + { + !simple &&
+ { + (relationshipInfo && relationshipInfo.friendCount > 1) ? LocalizeText(`extendedprofile.relstatus.others.${relationshipName}`, ['count'], [(relationshipInfo.friendCount - 1).toString()]) : '' + } + { + (relationshipInfo && relationshipInfo.friendCount < 1) ? LocalizeText('extendedprofile.no.friends.in.this.category') : '' + } +
+ } + +
+ ); + }, [OnUserClick, relationships, simple]); + + return ( +
+ + + +
+ ); +} diff --git a/src/views/user-profile/views/relationships-container/RelationshipsContainerView.types.ts b/src/views/user-profile/views/relationships-container/RelationshipsContainerView.types.ts new file mode 100644 index 00000000..2bf0d119 --- /dev/null +++ b/src/views/user-profile/views/relationships-container/RelationshipsContainerView.types.ts @@ -0,0 +1,7 @@ +import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer'; + +export interface RelationshipsContainerViewProps +{ + relationships: RelationshipStatusInfoMessageParser; + simple?: boolean; +} diff --git a/src/views/user-profile/views/user-container/UserContainerView.tsx b/src/views/user-profile/views/user-container/UserContainerView.tsx index 28a5ad6b..5cd9393d 100644 --- a/src/views/user-profile/views/user-container/UserContainerView.tsx +++ b/src/views/user-profile/views/user-container/UserContainerView.tsx @@ -34,7 +34,7 @@ export const UserContainerView: FC = props =>
{username}
{motto}
-
+
{LocalizeText('extendedprofile.achievementscore')} {achievementScore}