Skip to content

Commit 6418513

Browse files
bestinbthomasCaptainIRS
bestinbthomas
and
CaptainIRS
authored
fix(leaderboard) (#86)
* Minor fixes in dashboard * Minor fixes in landing page * Make leaderboard responsive * Lint * Fix meta tag for mobile * Minor fixes in leaderboard * Update Register.tsx Co-authored-by: CaptainIRS <[email protected]>
1 parent 71a3fe1 commit 6418513

File tree

10 files changed

+243
-317
lines changed

10 files changed

+243
-317
lines changed

‎src/app/components/Authentication/Register.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export class Register extends React.Component<RegisterInterfaces.Props, Register
3939
currentStep: RegisterInterfaces.Steps.USER_DETAILS,
4040
email: '',
4141
fullName: '',
42-
isCaptchaValidated: true,
42+
isCaptchaValidated: false,
4343
isFormSubmitted: false,
4444
isRegistered: false,
4545
isStudent: false,

‎src/app/components/Dashboard.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export class Dashboard extends React.Component<
2626
> {
2727
public sideBarWidth = 50;
2828
public sidePanelWidth = 380;
29-
public minEditorWidth = 350;
29+
public minEditorWidth = 250;
3030
public minRendererWidth = 50;
3131
public initialEditorRatio = 0.4;
3232
public initialRendererHeight = 400;

‎src/app/components/Leaderboard/IconElement.tsx

+15-32
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import {
2-
faGraduationCap,
3-
faHandshake,
4-
faThumbsDown,
5-
faTrophy,
6-
} from '@fortawesome/free-solid-svg-icons';
1+
import { faHandshake, faThumbsDown, faTrophy } from '@fortawesome/free-solid-svg-icons';
72
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
83
import * as styles from 'app/styles/Leaderboard.module.css';
94
import classnames from 'classnames';
@@ -12,60 +7,48 @@ import * as React from 'react';
127
// tslint:disable-next-line
138
export const IconsComponent = ({ player }: any) => {
149
return (
15-
<div style={{ fontSize: '1.5rem', color: 'light-gray' }}>
16-
<div
10+
<>
11+
<td
1712
className={classnames(styles['leader-score_title'])}
1813
style={{
19-
color: 'light-gray',
20-
display: 'block',
14+
color: 'white',
2115
fontSize: '26px',
22-
left: '35%',
23-
lineHeight: '2',
24-
marginTop: '5px',
25-
position: 'absolute',
2616
textAlign: 'center',
2717
top: '15px',
2818
}}
2919
>
3020
{player.rating[player.rating.length - 1].rating.toFixed(2)}{' '}
31-
{player.type === 'Student' ? (
32-
<FontAwesomeIcon
33-
style={{ fontSize: 18, display: 'inline' }}
34-
icon={faGraduationCap}
35-
title={'Student Participant'}
36-
/>
37-
) : null}
38-
</div>
39-
<div style={{ position: 'absolute', left: '52%', top: '15px', textAlign: 'center' }}>
21+
</td>
22+
<td style={{ textAlign: 'center' }}>
4023
<FontAwesomeIcon
4124
title="Won"
4225
icon={faTrophy}
4326
className={classnames(styles.trophy)}
4427
aria-hidden="true"
4528
color="#00e396"
4629
/>
47-
<p style={{ color: 'light-gray' }}>{player.wins}</p>
48-
</div>
49-
<div style={{ position: 'absolute', left: '68%', top: '15px', textAlign: 'center' }}>
30+
<p style={{ color: 'white' }}>{player.wins}</p>
31+
</td>
32+
<td style={{ textAlign: 'center' }}>
5033
<FontAwesomeIcon
5134
title="Tied"
5235
icon={faHandshake}
5336
className={classnames(styles.handshake)}
5437
aria-hidden="true"
5538
color="#008ffb"
5639
/>
57-
<p style={{ color: 'light-gray' }}>{player.ties}</p>
58-
</div>
59-
<div style={{ position: 'absolute', left: '85%', top: '15px', textAlign: 'center' }}>
40+
<p style={{ color: 'white' }}>{player.ties}</p>
41+
</td>
42+
<td style={{ textAlign: 'center' }}>
6043
<FontAwesomeIcon
6144
title="Lost"
6245
icon={faThumbsDown}
6346
className={classnames(styles.thumbdown)}
6447
aria-hidden="true"
6548
color="#feb019"
6649
/>
67-
<p style={{ color: 'light-gray' }}>{player.losses}</p>
68-
</div>
69-
</div>
50+
<p style={{ color: 'white' }}>{player.losses}</p>
51+
</td>
52+
</>
7053
);
7154
};

‎src/app/components/Leaderboard/LeaderboardElement.tsx

+94-101
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import classnames from 'classnames';
1010
import * as React from 'react';
1111
/* tslint:disable-next-line:import-name */
1212
import Chart from 'react-apexcharts';
13-
import { Col } from 'react-bootstrap';
13+
import { Button, Modal } from 'react-bootstrap';
1414

1515
// @ts-ignore
1616
// tslint:disable-next-line:import-name
@@ -34,7 +34,7 @@ export class LeaderboardElement extends React.Component<
3434
optionsPie: {
3535
chart: {
3636
foreColor: 'gray',
37-
width: '50%',
37+
width: '100%',
3838
},
3939
dataLabels: {
4040
markers: {
@@ -155,6 +155,9 @@ export class LeaderboardElement extends React.Component<
155155
stroke: {
156156
curve: 'smooth',
157157
},
158+
tooltip: {
159+
theme: 'dark',
160+
},
158161
xaxis: {
159162
axisBorder: {
160163
color: '#000',
@@ -179,19 +182,21 @@ export class LeaderboardElement extends React.Component<
179182
},
180183
};
181184
return (
182-
<Col
183-
md={26}
184-
style={{
185-
animationDelay: `${(index % 10) * 0.15}s`,
186-
position: 'relative',
187-
}}
188-
className={classnames('mb-1', styles.leader)}
189-
onClick={this.handleOnClick}
190-
onMouseEnter={this.handleOnMouseEnter}
191-
onMouseLeave={this.handleOnMouseLeave}
192-
>
193-
<div className={classnames(styles['leader-wrap'])}>
194-
<div className={classnames(styles['player-info-1'])}>
185+
<>
186+
<tr
187+
style={{
188+
animationDelay: `${(index % 10) * 0.15}s`,
189+
position: 'relative',
190+
}}
191+
className={classnames('mb-1', styles.leader)}
192+
onClick={this.handleOnClick}
193+
onMouseEnter={this.handleOnMouseEnter}
194+
onMouseLeave={this.handleOnMouseLeave}
195+
>
196+
<td
197+
className={classnames(styles['player-info-1'])}
198+
style={{ alignItems: 'flex-end', paddingTop: 0 }}
199+
>
195200
<FontAwesomeIcon
196201
style={{
197202
color:
@@ -233,7 +238,7 @@ export class LeaderboardElement extends React.Component<
233238
) : (
234239
<div
235240
style={{
236-
fontSize: 38,
241+
color: 'white',
237242
marginLeft: '4px',
238243
}}
239244
className={classnames(
@@ -243,62 +248,52 @@ export class LeaderboardElement extends React.Component<
243248
{player.rank}
244249
</div>
245250
)}
246-
<div className={classnames(styles['leader-content'])}>
247-
<div
248-
className={classnames(styles['leader-name'])}
249-
style={{
250-
display: 'inline-block',
251-
}}
252-
>
253-
{
254-
<img
255-
width={35}
256-
height={35}
257-
// @ts-ignore
258-
src={Avatar[avatarName[player.avatarId]]}
259-
className={classnames({
260-
[`${styles['leader-avatar']}`]: currentUsername !== player.username,
261-
[`${styles['leader-avatar-current']}`]: currentUsername === player.username,
262-
})}
263-
/>
264-
}
265-
</div>
251+
</td>
266252

267-
<div
268-
className={classnames(styles['leader-score'])}
269-
style={{
270-
display: 'inline-block',
271-
}}
272-
>
273-
<div style={{ display: 'flex' }}>
274-
<div className="col-auto">
275-
<div
276-
className={classnames('text-light', styles['leader-score_title'])}
277-
style={{
278-
display: 'block',
279-
fontSize: '16px',
280-
whiteSpace: 'nowrap',
281-
}}
282-
title={player.username}
283-
>
284-
<span style={{ fontFamily: 'Lato' }}>{`${player.username.substr(0, 15)}${
285-
player.username.length > 15 ? '...' : ''
286-
}`}</span>
287-
</div>
288-
<div className={classnames(styles['leader-flag'], 'mt-2')}>
289-
<ReactCountryFlag
290-
code={player.country === 'null' ? player.country : 'IN'}
291-
svg
292-
alt={player.country}
293-
/>
294-
</div>
253+
<td className={classnames(styles['leader-score'], 'text-center', 'pb-0')}>
254+
<div style={{ display: 'inline-flex', float: 'left' }}>
255+
<img
256+
style={{ marginTop: '5px' }}
257+
width={35}
258+
height={35}
259+
// @ts-ignore
260+
src={Avatar[avatarName[player.avatarId]]}
261+
className={classnames({
262+
[`${styles['leader-avatar']}`]: currentUsername !== player.username,
263+
[`${styles['leader-avatar-current']}`]: currentUsername === player.username,
264+
})}
265+
/>
266+
<div style={{ display: 'flex' }}>
267+
<div className="col-auto">
268+
<div
269+
className={classnames('text-light', styles['leader-score_title'])}
270+
style={{
271+
display: 'block',
272+
fontSize: '16px',
273+
whiteSpace: 'nowrap',
274+
}}
275+
title={player.username}
276+
>
277+
<span style={{ fontFamily: 'Lato' }}>{`${player.username.substr(0, 15)}${
278+
player.username.length > 15 ? '...' : ''
279+
}`}</span>
280+
</div>
281+
<div
282+
className={classnames(styles['leader-flag'], 'mt-2', 'ml-0')}
283+
style={{ float: 'left' }}
284+
>
285+
<ReactCountryFlag
286+
code={player.country === 'null' ? player.country : 'IN'}
287+
svg
288+
alt={player.country}
289+
/>
295290
</div>
296291
</div>
297292
</div>
298293
</div>
299-
</div>
300-
301-
<div className={classnames(styles['player-info-2'])}>
294+
</td>
295+
<IconsComponent player={player} />
296+
<td>
302297
{!(isPlayAgainstDisabled || currentUsername === player.username) ? (
303298
<div style={{ fontSize: '0.55em', cursor: 'pointer' }} title={`Start match`}>
304299
<img
@@ -320,43 +315,41 @@ export class LeaderboardElement extends React.Component<
320315
/>
321316
</div>
322317
) : null}
323-
</div>
324-
</div>
325-
<div>
326-
<IconsComponent player={player} />
327-
</div>
328-
<div
329-
style={{
330-
borderTop: `${this.state.isModelOpen ? '1px solid grey' : ''}`,
331-
display: 'flex',
332-
justifyContent: 'space-between',
333-
}}
334-
>
335-
{this.state.isModelOpen ? (
336-
<div
337-
className={classnames(styles.chart_holder, 'row', 'justify-content-center')}
338-
onClick={(event) => {
339-
event.stopPropagation();
340-
}}
341-
>
342-
<div className={classnames(styles.chart_div, styles.pie_chart)}>
343-
<Chart
344-
options={this.state.optionsPie}
345-
series={[player.ties, player.wins, player.losses]}
346-
type="donut"
347-
width="400"
348-
/>
349-
<div className={classnames(styles.winning_streak)}>
350-
Highest winning streak: {maxWinningStreak}
318+
</td>
319+
</tr>
320+
<div onClick={(e) => e.stopPropagation()}>
321+
<Modal
322+
show={this.state.isModelOpen}
323+
onHide={this.handleOnClick}
324+
animation={false}
325+
className="leaderboard-modal"
326+
>
327+
<Modal.Header style={{ backgroundColor: '#2c2c2c', borderBottom: '0px' }}>
328+
<Button className="close" onClick={this.handleOnClick} style={{ color: 'white' }}>
329+
×
330+
</Button>
331+
</Modal.Header>
332+
<Modal.Body style={{ backgroundColor: '#2c2c2c' }}>
333+
<div className={classnames(styles.chart_holder, 'row', 'justify-content-center')}>
334+
<div className={classnames(styles.chart_div, styles.pie_chart)}>
335+
<Chart
336+
options={this.state.optionsPie}
337+
series={[player.ties, player.wins, player.losses]}
338+
type="donut"
339+
width="100%"
340+
/>
341+
<div className={classnames(styles.winning_streak)}>
342+
Highest winning streak: {maxWinningStreak}
343+
</div>
344+
</div>
345+
<div className={classnames(styles.chart_div)}>
346+
<Chart options={optionsLine} series={[series]} type="line" width="100%" />
351347
</div>
352348
</div>
353-
<div className={classnames(styles.chart_div)}>
354-
<Chart options={optionsLine} series={[series]} type="line" width="760" />
355-
</div>
356-
</div>
357-
) : null}
349+
</Modal.Body>
350+
</Modal>
358351
</div>
359-
</Col>
352+
</>
360353
);
361354
}
362355
}

0 commit comments

Comments
 (0)