Skip to content

Commit 9b604ae

Browse files
hognejhognej
committed
Added trend arrows
1 parent ea6a59d commit 9b604ae

File tree

3 files changed

+239
-62
lines changed

3 files changed

+239
-62
lines changed

‎app/components/TrendArrow.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
export const TrendArrow = ({ trend }: { trend: number }) => {
2+
if (trend >= 100) {
3+
return (
4+
<span
5+
title={`+${trend}`}
6+
className="text-sm text-[#1D9E74] dark:text-[#45B08C]"
7+
>
8+
↑&nbsp;+{trend}
9+
</span>
10+
);
11+
}
12+
if (trend > 0) {
13+
return (
14+
<span
15+
title={`+${trend}`}
16+
className="text-sm text-[#90E0C5] dark:text-[#90E0C5]"
17+
>
18+
↗&nbsp;+{trend}
19+
</span>
20+
);
21+
}
22+
if (trend == 0) {
23+
return (
24+
<span
25+
title={trend.toString()}
26+
className="text-sm text-white dark:text-white"
27+
>
28+
-
29+
</span>
30+
);
31+
}
32+
if (trend >= -100) {
33+
return (
34+
<span title={trend.toString()} className="text-sm text-[#EC7B7C]">
35+
↘&nbsp;{trend}
36+
</span>
37+
);
38+
}
39+
return (
40+
<span title={trend.toString()} className="text-sm text-[#E44244]">
41+
↓&nbsp;{trend}
42+
</span>
43+
);
44+
};

‎app/routes/duel-stats.tsx‎

Lines changed: 80 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { useFetcher } from '@remix-run/react';
2-
import { getPlayers } from '~/services/player-service';
2+
import {
3+
getPlayers,
4+
PlayerWithMatches,
5+
} from '~/services/player-service';
36
import {
47
getRecent1v1Matches,
58
revertLatest1v1Match,
69
} from '~/services/match-service';
710
import { PageContainerStyling } from './team-duel';
811
import { typedjson, useTypedLoaderData } from 'remix-typedjson';
912
import { BASE_ELO } from '~/utils/constants';
13+
import { TrendArrow } from '~/components/TrendArrow';
1014

1115
export const loader = async () => {
1216
const players = await getPlayers();
@@ -32,6 +36,29 @@ const getRowHighlightClass = (idx: number, matchDate: Date) =>
3236
? 'bg-slate-100 dark:bg-gray-700'
3337
: '';
3438

39+
const calculatePlayerTrend = (player: PlayerWithMatches) => {
40+
if (!player.eloLogs?.length) return 0;
41+
42+
const twoWeeksAgo = new Date();
43+
twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
44+
45+
const sortedLogs = [...player.eloLogs].sort(
46+
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
47+
);
48+
49+
const recentLogs = sortedLogs.filter(
50+
(log) => new Date(log.date) > twoWeeksAgo
51+
);
52+
if (recentLogs.length === 0) return 0;
53+
54+
const currentElo = recentLogs[0].elo;
55+
const twoWeeksAgoElo =
56+
sortedLogs.find((log) => new Date(log.date) <= twoWeeksAgo)?.elo ??
57+
BASE_ELO;
58+
59+
return currentElo - twoWeeksAgoElo;
60+
};
61+
3562
export default function Index() {
3663
const fetcher = useFetcher();
3764
const { players, recent1v1Matches } = useTypedLoaderData<typeof loader>();
@@ -114,10 +141,21 @@ export default function Index() {
114141
<table className="min-w-full">
115142
<thead>
116143
<tr>
117-
<th className="w-2/5 py-2 dark:text-white">Navn</th>
118-
<th className="w-1/5 py-2 dark:text-white">Seiere (&#128293;)</th>
119-
<th className="w-1/5 py-2 dark:text-white">Tap</th>
120-
<th className="w-1/5 py-2 dark:text-white">ELO</th>
144+
<th className="w-[35%] whitespace-nowrap px-3 py-2 text-center dark:text-white">
145+
Navn
146+
</th>
147+
<th className="w-[18%] whitespace-nowrap px-3 py-2 text-center dark:text-white">
148+
Seiere (&#128293;)
149+
</th>
150+
<th className="w-[15%] px-3 py-2 text-center dark:text-white">
151+
Tap
152+
</th>
153+
<th className="w-[17%] px-3 py-2 text-center dark:text-white">
154+
ELO
155+
</th>
156+
<th className="w-[15%] py-2 pr-4 text-center dark:text-white">
157+
Trend
158+
</th>
121159
</tr>
122160
</thead>
123161

@@ -133,28 +171,35 @@ export default function Index() {
133171
key={player.id}
134172
className="border-t text-lg dark:border-gray-700"
135173
>
136-
<td className="py-2 font-semibold dark:text-white">
174+
<td className="px-3 py-2 font-semibold dark:text-white">
137175
{player.name}
138176
</td>
139-
<td className="py-2 dark:text-white">
177+
<td className="px-3 py-2 text-center dark:text-white">
140178
{`${player.matchesAsWinner.length}` +
141179
(player.winStreak > 0 ? ` (${player.winStreak})` : '')}
142180
</td>
143-
<td className="py-2 dark:text-white">
181+
<td className="px-3 py-2 text-center dark:text-white">
144182
{player.matchesAsLoser.length}
145183
</td>
146-
<td className="py-2 dark:text-white">{player.currentELO}</td>
184+
<td className="px-3 py-2 text-center dark:text-white">
185+
{player.currentELO}
186+
</td>
187+
<td className="py-2 pr-4 text-center">
188+
{player.matchesAsWinner.length +
189+
player.matchesAsLoser.length >
190+
0 && <TrendArrow trend={calculatePlayerTrend(player)} />}
191+
</td>
147192
</tr>
148193
))}
149194
</tbody>
150195
<tbody>
151196
<tr>
152-
<th colSpan={4} scope="col" className="py-4">
197+
<th colSpan={5} scope="col" className="py-8 pt-12 text-center">
153198
<span className="text-xl font-bold md:text-2xl dark:text-white">
154199
Spillere med få kamper
155200
</span>
156-
<div>
157-
<span className="pl-2 text-sm dark:text-gray-400">
201+
<div className="text-center">
202+
<span className="text-sm dark:text-gray-400">
158203
(Mindre enn 5 kamper spilt)
159204
</span>
160205
</div>
@@ -171,31 +216,39 @@ export default function Index() {
171216
key={player.id}
172217
className="border-t text-lg dark:border-gray-700"
173218
>
174-
<td className="py-2 font-semibold dark:text-white">
219+
<td className="px-3 py-2 text-center font-semibold dark:text-white">
175220
{player.name}
176221
</td>
177-
<td className="py-2 dark:text-white">
222+
<td className="px-3 py-2 text-center dark:text-white">
178223
{`${player.matchesAsWinner.length}` +
179224
(player.winStreak > 0 ? ` (${player.winStreak})` : '')}
180225
</td>
181-
<td className="py-2 dark:text-white">
226+
<td className="px-3 py-2 text-center dark:text-white">
182227
{player.matchesAsLoser.length}
183228
</td>
184-
<td></td>
229+
<td className="px-3 py-2 text-center dark:text-white">
230+
{player.currentELO}
231+
</td>
232+
<td className="py-2 pr-4"></td>
185233
</tr>
186234
))}
187235
</tbody>
188236
</table>
189-
<h2 className="mb-3 text-xl font-bold md:text-2xl dark:text-white">
237+
<h2 className="mb-3 mt-12 text-xl font-bold md:text-2xl dark:text-white">
190238
Inaktive spillere
191239
</h2>
192240
<table className="min-w-full">
193241
<thead>
194242
<tr>
195-
<th className="w-2/5 py-2 dark:text-white">Navn</th>
196-
<th className="w-1/5 py-2 dark:text-white">Seiere</th>
197-
<th className="w-1/5 py-2 dark:text-white">Tap</th>
198-
<th className="w-1/5 py-2 dark:text-white">ELO</th>
243+
<th className="w-1/3 px-4 py-2 text-center dark:text-white">
244+
Navn
245+
</th>
246+
<th className="w-1/3 px-4 py-2 text-center dark:text-white">
247+
Seiere
248+
</th>
249+
<th className="w-1/3 py-2 pr-6 text-center dark:text-white">
250+
Tap
251+
</th>
199252
</tr>
200253
</thead>
201254
<tbody>
@@ -206,16 +259,18 @@ export default function Index() {
206259
key={player.id}
207260
className="border-t text-lg dark:border-gray-700"
208261
>
209-
<td className="py-2 font-semibold dark:text-white">
262+
<td className="px-3 py-2 pr-6 font-semibold dark:text-white">
210263
{player.name}
211264
</td>
212-
<td className="py-2 dark:text-white">
265+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
213266
{`${player.matchesAsWinner.length}`}
214267
</td>
215-
<td className="py-2 dark:text-white">
268+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
216269
{player.matchesAsLoser.length}
217270
</td>
218-
<td className="py-2 dark:text-white">{player.currentELO}</td>
271+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
272+
{player.currentELO}
273+
</td>
219274
</tr>
220275
))}
221276
</tbody>

0 commit comments

Comments
 (0)