Skip to content

Commit 1175e24

Browse files
vas3avas3a
committed
MP-356 - demo feedback
1 parent 4074d0e commit 1175e24

File tree

13 files changed

+185
-91
lines changed

13 files changed

+185
-91
lines changed

‎src/apps/profiles/src/components/tc-achievements/ChallengeHistoryView/ChallengeHistoryCard/ChallengeHistoryCard.module.scss‎

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141

4242
.statsItem {
4343
display: flex;
44-
align-items: center;
45-
gap: $sp-1;
44+
align-items: baseline;
45+
gap: 2px;
4646

4747
&Value {
4848
color: $turq-160;
@@ -55,9 +55,32 @@
5555
&Label {
5656
color: $black-80;
5757
text-transform: capitalize;
58+
font-family: $font-barlow-condensed;
59+
font-weight: $font-weight-semibold;
60+
font-size: 14px;
61+
line-height: 22px;
5862
}
5963

6064
&Icon {
61-
margin-left: auto;
65+
display: none;
66+
&.placement-1,
67+
&.placement-2,
68+
&.placement-3,
69+
&.placement-4 {
70+
display: block;
71+
}
72+
73+
&.placement-1 path {
74+
fill: $gold-1;
75+
}
76+
&.placement-2 path {
77+
fill: $silver-1;
78+
}
79+
&.placement-3 path {
80+
fill: $bronze-1;
81+
}
82+
&.placement-4 path {
83+
fill: $turq-50;
84+
}
6285
}
6386
}

‎src/apps/profiles/src/components/tc-achievements/ChallengeHistoryView/ChallengeHistoryCard/ChallengeHistoryCard.tsx‎

Lines changed: 58 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,75 @@
11
import { FC } from 'react'
2+
import classNames from 'classnames'
23

34
import { IconSolid } from '~/libs/ui'
45
import { getRatingColor, StatsHistory } from '~/libs/core'
56
import { EnvironmentConfig } from '~/config'
67

8+
import { WinnerIcon } from '../../../../lib'
9+
710
import styles from './ChallengeHistoryCard.module.scss'
811

912
interface ChallengeHistoryCardProps {
1013
challenge: StatsHistory
1114
}
1215

13-
const ChallengeHistoryCard: FC<ChallengeHistoryCardProps> = props => (
14-
<a
15-
className={styles.wrap}
16-
href={`${EnvironmentConfig.URLS.CHALLENGES_PAGE}/${props.challenge.challengeId}`}
17-
target='_blank'
18-
rel='noreferrer'
19-
>
20-
<div className={styles.contentWrap}>
21-
<div className={styles.title}>
22-
<span className='body-small-bold'>
23-
{props.challenge.challengeName}
24-
</span>
25-
</div>
26-
<div className={styles.statsWrap}>
27-
{props.challenge.newRating !== undefined && (
28-
<div className={styles.statsItem}>
29-
<span
30-
className={styles.statsItemValue}
31-
style={{ color: getRatingColor(props.challenge.newRating) }}
32-
>
33-
{props.challenge.newRating}
34-
</span>
35-
<span className={styles.statsItemLabel}>
36-
<span className='label'>
16+
const ChallengeHistoryCard: FC<ChallengeHistoryCardProps> = props => {
17+
const rating = props.challenge.newRating ?? props.challenge.rating
18+
const placement = props.challenge.placement
19+
20+
return (
21+
<a
22+
className={styles.wrap}
23+
href={`${EnvironmentConfig.URLS.CHALLENGES_PAGE}/${props.challenge.challengeId}`}
24+
target='_blank'
25+
rel='noreferrer'
26+
>
27+
<div className={styles.contentWrap}>
28+
<div className={styles.title}>
29+
<span className='body-small-bold'>
30+
{props.challenge.challengeName}
31+
</span>
32+
</div>
33+
<div className={styles.statsWrap}>
34+
{placement && (
35+
<div className={styles.statsItem}>
36+
<WinnerIcon
37+
className={
38+
classNames(
39+
'icon-xxl',
40+
styles.statsItemIcon,
41+
styles[`placement-${placement}`],
42+
)
43+
}
44+
/>
45+
<span className={styles.statsItemValue}>
46+
{placement}
47+
</span>
48+
<span className={styles.statsItemLabel}>
49+
placement
50+
</span>
51+
</div>
52+
)}
53+
{rating && (
54+
<div className={styles.statsItem}>
55+
<span
56+
className={styles.statsItemValue}
57+
style={{ color: getRatingColor(rating) }}
58+
>
59+
{rating}
60+
</span>
61+
<span className={styles.statsItemLabel}>
3762
rating
3863
</span>
39-
</span>
40-
</div>
41-
)}
64+
</div>
65+
)}
66+
</div>
4267
</div>
43-
</div>
44-
<div className={styles.icon}>
45-
<IconSolid.ChevronRightIcon className='icon-xl' />
46-
</div>
47-
</a>
48-
)
68+
<div className={styles.icon}>
69+
<IconSolid.ChevronRightIcon className='icon-xl' />
70+
</div>
71+
</a>
72+
)
73+
}
4974

5075
export default ChallengeHistoryCard

‎src/apps/profiles/src/components/tc-achievements/ChallengeHistoryView/ChallengeHistoryView.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,13 @@ const ChallengeHistoryView: FC<ChallengeHistoryViewProps> = props => {
1616
const trackHistory: StatsHistory[] = get(
1717
find(get(statsHistory, `${props.trackData.path}`, []), { name: props.trackData.name }),
1818
'history',
19-
[],
19+
get(
20+
statsHistory,
21+
`${props.trackData.path}.${props.trackData.name}.history`,
22+
[],
23+
),
2024
)
25+
2126
return (
2227
<div className={styles.wrap}>
2328
<div className={styles.inner}>

‎src/apps/profiles/src/components/tc-achievements/DetailedTrackView/DetailedTrackView.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ enum Graphs {
2828
}
2929

3030
interface DetailedTrackViewProps {
31+
challengesLabel?: string
3132
trackData?: SRMStats | MemberStats
3233
trackHistory?: StatsHistory[]
3334
ratingDistribution?: UserStatsDistributionResponse
@@ -88,7 +89,7 @@ const DetailedTrackView: FC<DetailedTrackViewProps> = props => {
8889
/>
8990
<Button
9091
className={styles.btn}
91-
label='Challenge Details'
92+
label={`${props.challengesLabel ?? 'Challenges'} Details`}
9293
primary={viewMode === ViewMode.details}
9394
secondary={viewMode !== ViewMode.details}
9495
variant='linkblue'

‎src/apps/profiles/src/components/tc-achievements/MemberStatsBlock/MemberStatsBlock.module.scss‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
.containerWrap {
55
flex: 1;
6+
container-type: inline-size;
67
}
78

89
.container {
@@ -40,6 +41,10 @@
4041
}
4142

4243
.statsList {
44+
display: flex;
45+
flex-wrap: wrap;
46+
gap: $sp-1;
47+
4348
margin: auto 0;
4449
}
4550

@@ -55,8 +60,13 @@
5560
transition: 0.15s ease-in;
5661
cursor: pointer;
5762

58-
+ .trackListItem {
59-
margin-top: $sp-1;
63+
64+
@container (max-width: 582px) {
65+
flex: 1 1 auto;
66+
width: 100%;
67+
}
68+
@container (min-width: 583px) {
69+
width: calc(50% - 2px);
6070
}
6171

6272
&:hover {
@@ -95,3 +105,11 @@
95105
line-height: 12px;
96106
}
97107
}
108+
109+
.icon {
110+
display: block;
111+
@include icon-xxl;
112+
113+
background: currentColor;
114+
border-radius: 50%;
115+
}

‎src/apps/profiles/src/components/tc-achievements/MemberStatsBlock/MemberStatsBlock.tsx‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { FC } from 'react'
1+
import { FC, useCallback } from 'react'
22
import { Link } from 'react-router-dom'
33
import classNames from 'classnames'
44

5-
import { UserProfile } from '~/libs/core'
5+
import { getRatingColor, MemberStats, UserProfile } from '~/libs/core'
66
import { IconOutline } from '~/libs/ui'
77

88
import { useFetchActiveTracks } from '../../../hooks'
@@ -20,6 +20,11 @@ const MemberStatsBlock: FC<MemberStatsBlockProps> = props => {
2020

2121
const activeTracks = useFetchActiveTracks(props.profile.handle)
2222

23+
const getTrackRoute = useCallback((trackName: string, subTracks?: MemberStats[]): string => {
24+
const subTrackName = subTracks?.length === 1 ? subTracks[0].name : ''
25+
return statsRoute(props.profile.handle, trackName, subTrackName)
26+
}, [props.profile.handle, statsRoute])
27+
2328
return activeTracks?.length === 0 ? <></> : (
2429
<div className={styles.containerWrap}>
2530
<div className={styles.container}>
@@ -30,17 +35,17 @@ const MemberStatsBlock: FC<MemberStatsBlockProps> = props => {
3035
</span>
3136
</p>
3237
<ul className={styles.statsList}>
33-
{activeTracks.map((track: any) => (
38+
{activeTracks.map(track => (
3439
<Link
35-
to={statsRoute(props.profile.handle, track.name)}
40+
to={getTrackRoute(track.name, track.subTracks)}
3641
className={styles.trackListItem}
3742
key={track.name}
3843
>
3944
<span className={styles.trackName}>{track.name}</span>
4045
<div className={styles.trackDetails}>
4146
{!track.isDSTrack && ((track.submissions || track.wins) > 0) && (
4247
<>
43-
<WinnerIcon className={classNames('icon-xxxl', styles.winnerIcon)} />
48+
<WinnerIcon className='icon-xxxl' />
4449
<span className={styles.trackStats}>
4550
<span className={styles.count}>
4651
{track.wins || track.submissions}
@@ -53,15 +58,32 @@ const MemberStatsBlock: FC<MemberStatsBlockProps> = props => {
5358
)}
5459
{/* competitive programming only */}
5560
{track.isDSTrack && (
56-
<span className={styles.trackStats}>
57-
<span className={styles.count}>
58-
{track.percentile}
59-
%
60-
</span>
61-
<span className={styles.label}>
62-
Percentile
61+
(track.percentile as number) >= 50 ? (
62+
<span className={styles.trackStats}>
63+
<span className={styles.count}>
64+
{track.percentile}
65+
%
66+
</span>
67+
<span className={styles.label}>
68+
Percentile
69+
</span>
6370
</span>
64-
</span>
71+
) : (
72+
<>
73+
<span
74+
className={styles.icon}
75+
style={{ color: getRatingColor(track.rating as number) }}
76+
/>
77+
<span className={styles.trackStats}>
78+
<span className={styles.count}>
79+
{track.rating}
80+
</span>
81+
<span className={styles.label}>
82+
Rating
83+
</span>
84+
</span>
85+
</>
86+
)
6587
)}
6688
<IconOutline.ChevronRightIcon
6789
className={classNames('icon-lg', styles.rightArrowIcon)}

‎src/apps/profiles/src/components/tc-achievements/SRMView/SRMView.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ const SRMView: FC<SRMViewProps> = props => {
4747
ratingDistribution={ratingDistribution}
4848
showDetailsViewBtn={showDetailsViewBtn}
4949
defaultViewMode={ViewMode.statistics}
50+
challengesLabel='Competitions'
5051
challengesDetailedView={(
5152
<>
5253
<div className={styles.details}>

‎src/apps/profiles/src/components/tc-achievements/StatsSummaryBlock/StatsSummaryBlock.module.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020

2121
.summaryItem {
2222
display: flex;
23-
align-items: flex-end;
24-
gap: $sp-2;
23+
align-items: baseline;
24+
gap: 6px;
2525

2626
&Value {
2727
font-family: $font-barlow-condensed;
@@ -32,7 +32,7 @@
3232
}
3333

3434
&Label {
35-
line-height: 23px;
35+
line-height: 22px;
3636
text-transform: capitalize;
3737
}
3838
}

‎src/apps/profiles/src/components/tc-achievements/StatsSummaryBlock/StatsSummaryBlock.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const StatsSummaryBlock: FC<StatsSummaryBlockProps> = props => {
4040
</span>
4141
<span className={styles.summaryItemLabel}>
4242
<span className='body-small'>
43-
Challenges
43+
{props.trackTitle === 'Single Round Match' ? 'Competitions' : 'Challenges'}
4444
</span>
4545
</span>
4646
</div>

0 commit comments

Comments
 (0)