Skip to content

Commit 2491a8f

Browse files
hognejhognej
committed
Added trend arrows
1 parent ea6a59d commit 2491a8f

File tree

3 files changed

+236
-62
lines changed

3 files changed

+236
-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-[#00754E] 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-[#1D9E74] 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-black 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: 77 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { useFetcher } from '@remix-run/react';
2-
import { getPlayers } from '~/services/player-service';
2+
import { getPlayers, PlayerWithMatches } from '~/services/player-service';
33
import {
44
getRecent1v1Matches,
55
revertLatest1v1Match,
66
} from '~/services/match-service';
77
import { PageContainerStyling } from './team-duel';
88
import { typedjson, useTypedLoaderData } from 'remix-typedjson';
99
import { BASE_ELO } from '~/utils/constants';
10+
import { TrendArrow } from '~/components/TrendArrow';
1011

1112
export const loader = async () => {
1213
const players = await getPlayers();
@@ -32,6 +33,29 @@ const getRowHighlightClass = (idx: number, matchDate: Date) =>
3233
? 'bg-slate-100 dark:bg-gray-700'
3334
: '';
3435

36+
const calculatePlayerTrend = (player: PlayerWithMatches) => {
37+
if (!player.eloLogs?.length) return 0;
38+
39+
const twoWeeksAgo = new Date();
40+
twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
41+
42+
const sortedLogs = [...player.eloLogs].sort(
43+
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
44+
);
45+
46+
const recentLogs = sortedLogs.filter(
47+
(log) => new Date(log.date) > twoWeeksAgo
48+
);
49+
if (recentLogs.length === 0) return 0;
50+
51+
const currentElo = recentLogs[0].elo;
52+
const twoWeeksAgoElo =
53+
sortedLogs.find((log) => new Date(log.date) <= twoWeeksAgo)?.elo ??
54+
BASE_ELO;
55+
56+
return currentElo - twoWeeksAgoElo;
57+
};
58+
3559
export default function Index() {
3660
const fetcher = useFetcher();
3761
const { players, recent1v1Matches } = useTypedLoaderData<typeof loader>();
@@ -114,10 +138,21 @@ export default function Index() {
114138
<table className="min-w-full">
115139
<thead>
116140
<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>
141+
<th className="w-[35%] whitespace-nowrap px-3 py-2 text-center dark:text-white">
142+
Navn
143+
</th>
144+
<th className="w-[18%] whitespace-nowrap px-3 py-2 text-center dark:text-white">
145+
Seiere (&#128293;)
146+
</th>
147+
<th className="w-[15%] px-3 py-2 text-center dark:text-white">
148+
Tap
149+
</th>
150+
<th className="w-[17%] px-3 py-2 text-center dark:text-white">
151+
ELO
152+
</th>
153+
<th className="w-[15%] py-2 pr-4 text-center dark:text-white">
154+
Trend
155+
</th>
121156
</tr>
122157
</thead>
123158

@@ -133,28 +168,35 @@ export default function Index() {
133168
key={player.id}
134169
className="border-t text-lg dark:border-gray-700"
135170
>
136-
<td className="py-2 font-semibold dark:text-white">
171+
<td className="px-3 py-2 font-semibold dark:text-white">
137172
{player.name}
138173
</td>
139-
<td className="py-2 dark:text-white">
174+
<td className="px-3 py-2 text-center dark:text-white">
140175
{`${player.matchesAsWinner.length}` +
141176
(player.winStreak > 0 ? ` (${player.winStreak})` : '')}
142177
</td>
143-
<td className="py-2 dark:text-white">
178+
<td className="px-3 py-2 text-center dark:text-white">
144179
{player.matchesAsLoser.length}
145180
</td>
146-
<td className="py-2 dark:text-white">{player.currentELO}</td>
181+
<td className="px-3 py-2 text-center dark:text-white">
182+
{player.currentELO}
183+
</td>
184+
<td className="py-2 pr-4 text-center">
185+
{player.matchesAsWinner.length +
186+
player.matchesAsLoser.length >
187+
0 && <TrendArrow trend={calculatePlayerTrend(player)} />}
188+
</td>
147189
</tr>
148190
))}
149191
</tbody>
150192
<tbody>
151193
<tr>
152-
<th colSpan={4} scope="col" className="py-4">
194+
<th colSpan={5} scope="col" className="py-8 pt-12 text-center">
153195
<span className="text-xl font-bold md:text-2xl dark:text-white">
154196
Spillere med få kamper
155197
</span>
156-
<div>
157-
<span className="pl-2 text-sm dark:text-gray-400">
198+
<div className="text-center">
199+
<span className="text-sm dark:text-gray-400">
158200
(Mindre enn 5 kamper spilt)
159201
</span>
160202
</div>
@@ -171,31 +213,39 @@ export default function Index() {
171213
key={player.id}
172214
className="border-t text-lg dark:border-gray-700"
173215
>
174-
<td className="py-2 font-semibold dark:text-white">
216+
<td className="px-3 py-2 text-center font-semibold dark:text-white">
175217
{player.name}
176218
</td>
177-
<td className="py-2 dark:text-white">
219+
<td className="px-3 py-2 text-center dark:text-white">
178220
{`${player.matchesAsWinner.length}` +
179221
(player.winStreak > 0 ? ` (${player.winStreak})` : '')}
180222
</td>
181-
<td className="py-2 dark:text-white">
223+
<td className="px-3 py-2 text-center dark:text-white">
182224
{player.matchesAsLoser.length}
183225
</td>
184-
<td></td>
226+
<td className="px-3 py-2 text-center dark:text-white">
227+
{player.currentELO}
228+
</td>
229+
<td className="py-2 pr-4"></td>
185230
</tr>
186231
))}
187232
</tbody>
188233
</table>
189-
<h2 className="mb-3 text-xl font-bold md:text-2xl dark:text-white">
234+
<h2 className="mb-3 mt-12 text-xl font-bold md:text-2xl dark:text-white">
190235
Inaktive spillere
191236
</h2>
192237
<table className="min-w-full">
193238
<thead>
194239
<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>
240+
<th className="w-1/3 px-4 py-2 text-center dark:text-white">
241+
Navn
242+
</th>
243+
<th className="w-1/3 px-4 py-2 text-center dark:text-white">
244+
Seiere
245+
</th>
246+
<th className="w-1/3 py-2 pr-6 text-center dark:text-white">
247+
Tap
248+
</th>
199249
</tr>
200250
</thead>
201251
<tbody>
@@ -206,16 +256,18 @@ export default function Index() {
206256
key={player.id}
207257
className="border-t text-lg dark:border-gray-700"
208258
>
209-
<td className="py-2 font-semibold dark:text-white">
259+
<td className="px-3 py-2 pr-6 font-semibold dark:text-white">
210260
{player.name}
211261
</td>
212-
<td className="py-2 dark:text-white">
262+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
213263
{`${player.matchesAsWinner.length}`}
214264
</td>
215-
<td className="py-2 dark:text-white">
265+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
216266
{player.matchesAsLoser.length}
217267
</td>
218-
<td className="py-2 dark:text-white">{player.currentELO}</td>
268+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
269+
{player.currentELO}
270+
</td>
219271
</tr>
220272
))}
221273
</tbody>

0 commit comments

Comments
 (0)