Skip to content

Commit 3476599

Browse files
bestinbthomaskumaran-14
bestinbthomas
authored and
kumaran-14
committed
Fix rating precision error in Leaderboard
- Style stats component for mobile view
1 parent b41ca19 commit 3476599

9 files changed

Lines changed: 341 additions & 294 deletions

File tree

‎src/app/apiFetch/Leaderboard.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,6 @@ export const getLeaderboardByDivAndType = (
9292
};
9393

9494
export const getLeaderboardByUsername = (body: LeaderboardInterfaces.Search) => {
95-
console.log(`${API_BASE_URL}leaderboard/${body.username}/${body.pageNo}/${body.pageSize}`);
9695
return fetch(`${API_BASE_URL}leaderboard/${body.username}/${body.pageNo}/${body.pageSize}`, {
9796
credentials: 'include',
9897
headers: {
@@ -113,15 +112,15 @@ export const getLeaderboardByUsername = (body: LeaderboardInterfaces.Search) =>
113112
};
114113

115114
export const getTimer = () => {
116-
return fetch(`${API_BASE_URL}leaderboard/timer`, {
115+
return fetch(`${API_BASE_URL}user/wait-time`, {
117116
credentials: 'include',
118117
headers: {
119118
Accept: 'application/json',
120119
'Content-Type': 'application/json',
121120
},
122121
method: 'GET',
123122
})
124-
.then((response) => response.json())
123+
.then((response) => response.text())
125124
.then((data) => data)
126125
.catch((err) => {
127126
console.error(err);

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

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import { faHandshake, faThumbsDown, faTrophy } from '@fortawesome/free-solid-svg-icons';
1+
import {
2+
faGraduationCap,
3+
faHandshake,
4+
faThumbsDown,
5+
faTrophy,
6+
} from '@fortawesome/free-solid-svg-icons';
27
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
38
import * as styles from 'app/styles/Leaderboard.module.css';
49
import classnames from 'classnames';
@@ -8,6 +13,28 @@ import * as React from 'react';
813
export const IconsComponent = ({ player }: any) => {
914
return (
1015
<div style={{ fontSize: '1.5rem' }}>
16+
<div
17+
className={classnames(styles['leader-score_title'])}
18+
style={{
19+
color: 'gray',
20+
display: 'block',
21+
fontSize: '26px',
22+
left: '35%',
23+
marginTop: '5px',
24+
position: 'absolute',
25+
textAlign: 'center',
26+
top: '15px',
27+
}}
28+
>
29+
{player.rating[player.rating.length - 1].rating}{' '}
30+
{player.type === 'Student' ? (
31+
<FontAwesomeIcon
32+
style={{ fontSize: 18, display: 'inline' }}
33+
icon={faGraduationCap}
34+
title={'Student Participant'}
35+
/>
36+
) : null}
37+
</div>
1138
<div style={{ position: 'absolute', left: '50%', top: '15px', textAlign: 'center' }}>
1239
<FontAwesomeIcon
1340
title="Won"

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

Lines changed: 54 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import {
2-
faCaretDown,
3-
faCaretUp,
4-
faCrown,
5-
faGraduationCap,
6-
} from '@fortawesome/free-solid-svg-icons';
1+
import { faCaretDown, faCaretUp, faCrown } from '@fortawesome/free-solid-svg-icons';
72
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
83
import { IconsComponent } from 'app/components/Leaderboard/IconElement';
94
import * as styles from 'app/styles/Leaderboard.module.css';
@@ -115,7 +110,7 @@ export class LeaderboardElement extends React.Component<
115110
const ratingArray: number[] = [];
116111
const labelArray: string[] = [];
117112
player.rating.forEach((element) => {
118-
ratingArray.push(element.rating);
113+
ratingArray.push(Math.round((element.rating + Number.EPSILON) * 100) / 100);
119114
const dateobj = new Date(element.validFrom);
120115
labelArray.push(dateobj.toLocaleDateString('en-GB').substr(0, 5));
121116
});
@@ -249,63 +244,50 @@ export class LeaderboardElement extends React.Component<
249244
}}
250245
>
251246
<div style={{ display: 'flex' }}>
252-
<div
253-
className={classnames('text-light', styles['leader-score_title'])}
254-
style={{
255-
display: 'block',
256-
fontSize: '16px',
257-
whiteSpace: 'nowrap',
258-
}}
259-
title={player.username}
260-
>
261-
<span style={{ fontFamily: 'Lato' }}>{`${player.username.substr(0, 15)}${
262-
player.username.length > 15 ? '...' : ''
263-
}`}</span>
264-
</div>
265-
<div className={classnames(styles['leader-flag'])}>
266-
<ReactCountryFlag
267-
code={player.country === 'null' ? player.country : 'USA'}
268-
svg
269-
alt={player.country}
270-
/>
247+
<div className="col-auto">
248+
<div
249+
className={classnames('text-light', styles['leader-score_title'])}
250+
style={{
251+
display: 'block',
252+
fontSize: '16px',
253+
whiteSpace: 'nowrap',
254+
}}
255+
title={player.username}
256+
>
257+
<span style={{ fontFamily: 'Lato' }}>{`${player.username.substr(0, 15)}${
258+
player.username.length > 15 ? '...' : ''
259+
}`}</span>
260+
</div>
261+
<div className={classnames(styles['leader-flag'], 'mt-2')}>
262+
<ReactCountryFlag
263+
code={player.country === 'null' ? player.country : 'IN'}
264+
svg
265+
alt={player.country}
266+
/>
267+
</div>
271268
</div>
272269
</div>
273-
<div
274-
className={classnames(styles['leader-score_title'])}
275-
style={{
276-
color: 'gray',
277-
display: 'block',
278-
fontSize: '26px',
279-
marginTop: '5px',
280-
}}
281-
>
282-
{player.rating[player.rating.length - 1].rating}{' '}
283-
{player.type === 'Student' ? (
284-
<FontAwesomeIcon
285-
style={{ fontSize: 18, display: 'inline' }}
286-
icon={faGraduationCap}
287-
title={'Student Participant'}
288-
/>
289-
) : null}
290-
</div>
291270
</div>
292271
</div>
293272
</div>
294273

295274
<div className={classnames(styles['player-info-2'])}>
296275
{!(isPlayAgainstDisabled || currentUsername === player.username) ? (
297-
<div
298-
style={{ fontSize: '0.55em', cursor: 'pointer' }}
299-
onClick={async (e) => {
300-
// hello
301-
await updatePlayerId2(player.userId);
302-
await updateRequest(Request.MANUAL);
303-
e.stopPropagation();
304-
}}
305-
title={`Start match`}
306-
>
276+
<div style={{ fontSize: '0.55em', cursor: 'pointer' }} title={`Start match`}>
307277
{this.state.onHover ? (
308-
<img src="assets/img/fight.png" width={15} height={15} />
278+
<img
279+
src="assets/img/fight.png"
280+
width={30}
281+
height={30}
282+
className="mr-3"
283+
onClickCapture={async (e) => {
284+
// hello
285+
e.stopPropagation();
286+
await updatePlayerId2(player.userId);
287+
await updateRequest(Request.MANUAL);
288+
this.props.getTimer();
289+
}}
290+
/>
309291
) : null}
310292
</div>
311293
) : null}
@@ -323,38 +305,27 @@ export class LeaderboardElement extends React.Component<
323305
>
324306
{this.state.isModelOpen ? (
325307
<div
326-
style={{ marginLeft: '-2% !important', right: '0px !important ' }}
327-
onClick={(event) => {
328-
event.stopPropagation();
329-
}}
330-
>
331-
<Chart
332-
options={this.state.optionsPie}
333-
series={[player.ties, player.wins, player.losses]}
334-
type="donut"
335-
width="380"
336-
/>
337-
</div>
338-
) : null}
339-
340-
{this.state.isModelOpen ? (
341-
<div
308+
className="row justify-content-center"
342309
onClick={(event) => {
343310
event.stopPropagation();
344311
}}
345-
style={{ transform: 'scaleX(0.7) translate(50px)', marginLeft: '-20% !important' }}
346-
className={classnames(
347-
styles['apexcharts-canvas'],
348-
styles['apexcharts-zoomable'],
349-
styles['hovering-zoom'],
350-
)}
351312
>
352-
<Chart
353-
options={this.state.optionsLine}
354-
series={[this.state.series]}
355-
type="line"
356-
width="500"
357-
/>
313+
<div className={classnames(styles.chart_div, 'col col-lg-5')}>
314+
<Chart
315+
options={this.state.optionsPie}
316+
series={[player.ties, player.wins, player.losses]}
317+
type="donut"
318+
width="380"
319+
/>
320+
</div>
321+
<div className={classnames(styles.chart_div, 'col-lg-5')}>
322+
<Chart
323+
options={this.state.optionsLine}
324+
series={[this.state.series]}
325+
type="line"
326+
width="500"
327+
/>
328+
</div>
358329
</div>
359330
) : null}
360331
</div>

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

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@ export class Timer extends React.Component<TimerProps, TimerState> {
77
super(props);
88

99
this.state = {
10-
minutes: 0,
11-
seconds: 0,
12-
totalSeconds: this.props.timerData,
10+
seconds: this.props.timerData,
1311
};
1412
}
1513

@@ -24,26 +22,27 @@ export class Timer extends React.Component<TimerProps, TimerState> {
2422
// @ts-ignore
2523
this.intervalHandle = setInterval(this.tick, 1000);
2624
}
27-
const { minutes, seconds } = this.state;
25+
const { seconds } = this.state;
2826
return (
29-
<span>{`Please wait ${minutes} minutes, ${Math.floor(
30-
seconds,
31-
)} seconds to initiate a match.`}</span>
27+
<span>
28+
{seconds > 0
29+
? `Please wait ${Math.floor(seconds)} seconds to initiate a match.`
30+
: seconds === 0
31+
? 'Ready to initiate Match'
32+
: 'Something went wrong'}
33+
</span>
3234
);
3335
}
3436

3537
private tick = (): void => {
36-
const { totalSeconds } = this.state;
37-
const min = Math.floor(totalSeconds / 60);
38-
const sec = Math.floor(totalSeconds - Math.floor(totalSeconds / 60) * 60);
38+
const { seconds } = this.state;
39+
const sec = Math.floor(seconds - Math.floor(seconds / 60) * 60);
3940

4041
this.setState({
41-
minutes: min,
42-
seconds: sec,
43-
totalSeconds: totalSeconds <= 0 ? 0 : totalSeconds - 1,
42+
seconds: seconds <= 0 ? 0 : seconds - 1,
4443
});
4544

46-
if (min === 0 && sec === 0) {
45+
if (sec === 0) {
4746
clearInterval(this.intervalHandle);
4847
this.intervalHandle = 0;
4948
this.props.setTimer(0);

0 commit comments

Comments
 (0)