Skip to content

Commit 02b5b7a

Browse files
hognejhognej
committed
Added trend arrows
1 parent ea6a59d commit 02b5b7a

File tree

3 files changed

+240
-62
lines changed

3 files changed

+240
-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: 81 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
import { useFetcher } from '@remix-run/react';
2-
import { getPlayers } from '~/services/player-service';
2+
import {
3+
getPlayers,
4+
PlayerWithMatches,
5+
type Player,
6+
} from '~/services/player-service';
37
import {
48
getRecent1v1Matches,
59
revertLatest1v1Match,
610
} from '~/services/match-service';
711
import { PageContainerStyling } from './team-duel';
812
import { typedjson, useTypedLoaderData } from 'remix-typedjson';
913
import { BASE_ELO } from '~/utils/constants';
14+
import { TrendArrow } from '~/components/TrendArrow';
1015

1116
export const loader = async () => {
1217
const players = await getPlayers();
@@ -32,6 +37,29 @@ const getRowHighlightClass = (idx: number, matchDate: Date) =>
3237
? 'bg-slate-100 dark:bg-gray-700'
3338
: '';
3439

40+
const calculatePlayerTrend = (player: PlayerWithMatches) => {
41+
if (!player.eloLogs?.length) return 0;
42+
43+
const twoWeeksAgo = new Date();
44+
twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14);
45+
46+
const sortedLogs = [...player.eloLogs].sort(
47+
(a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
48+
);
49+
50+
const recentLogs = sortedLogs.filter(
51+
(log) => new Date(log.date) > twoWeeksAgo
52+
);
53+
if (recentLogs.length === 0) return 0;
54+
55+
const currentElo = recentLogs[0].elo;
56+
const twoWeeksAgoElo =
57+
sortedLogs.find((log) => new Date(log.date) <= twoWeeksAgo)?.elo ??
58+
BASE_ELO;
59+
60+
return currentElo - twoWeeksAgoElo;
61+
};
62+
3563
export default function Index() {
3664
const fetcher = useFetcher();
3765
const { players, recent1v1Matches } = useTypedLoaderData<typeof loader>();
@@ -114,10 +142,21 @@ export default function Index() {
114142
<table className="min-w-full">
115143
<thead>
116144
<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>
145+
<th className="w-[35%] whitespace-nowrap px-3 py-2 text-center dark:text-white">
146+
Navn
147+
</th>
148+
<th className="w-[18%] whitespace-nowrap px-3 py-2 text-center dark:text-white">
149+
Seiere (&#128293;)
150+
</th>
151+
<th className="w-[15%] px-3 py-2 text-center dark:text-white">
152+
Tap
153+
</th>
154+
<th className="w-[17%] px-3 py-2 text-center dark:text-white">
155+
ELO
156+
</th>
157+
<th className="w-[15%] py-2 pr-4 text-center dark:text-white">
158+
Trend
159+
</th>
121160
</tr>
122161
</thead>
123162

@@ -133,28 +172,35 @@ export default function Index() {
133172
key={player.id}
134173
className="border-t text-lg dark:border-gray-700"
135174
>
136-
<td className="py-2 font-semibold dark:text-white">
175+
<td className="px-3 py-2 font-semibold dark:text-white">
137176
{player.name}
138177
</td>
139-
<td className="py-2 dark:text-white">
178+
<td className="px-3 py-2 text-center dark:text-white">
140179
{`${player.matchesAsWinner.length}` +
141180
(player.winStreak > 0 ? ` (${player.winStreak})` : '')}
142181
</td>
143-
<td className="py-2 dark:text-white">
182+
<td className="px-3 py-2 text-center dark:text-white">
144183
{player.matchesAsLoser.length}
145184
</td>
146-
<td className="py-2 dark:text-white">{player.currentELO}</td>
185+
<td className="px-3 py-2 text-center dark:text-white">
186+
{player.currentELO}
187+
</td>
188+
<td className="py-2 pr-4 text-center">
189+
{player.matchesAsWinner.length +
190+
player.matchesAsLoser.length >
191+
0 && <TrendArrow trend={calculatePlayerTrend(player)} />}
192+
</td>
147193
</tr>
148194
))}
149195
</tbody>
150196
<tbody>
151197
<tr>
152-
<th colSpan={4} scope="col" className="py-4">
198+
<th colSpan={5} scope="col" className="py-8 pt-12 text-center">
153199
<span className="text-xl font-bold md:text-2xl dark:text-white">
154200
Spillere med få kamper
155201
</span>
156-
<div>
157-
<span className="pl-2 text-sm dark:text-gray-400">
202+
<div className="text-center">
203+
<span className="text-sm dark:text-gray-400">
158204
(Mindre enn 5 kamper spilt)
159205
</span>
160206
</div>
@@ -171,31 +217,39 @@ export default function Index() {
171217
key={player.id}
172218
className="border-t text-lg dark:border-gray-700"
173219
>
174-
<td className="py-2 font-semibold dark:text-white">
220+
<td className="px-3 py-2 text-center font-semibold dark:text-white">
175221
{player.name}
176222
</td>
177-
<td className="py-2 dark:text-white">
223+
<td className="px-3 py-2 text-center dark:text-white">
178224
{`${player.matchesAsWinner.length}` +
179225
(player.winStreak > 0 ? ` (${player.winStreak})` : '')}
180226
</td>
181-
<td className="py-2 dark:text-white">
227+
<td className="px-3 py-2 text-center dark:text-white">
182228
{player.matchesAsLoser.length}
183229
</td>
184-
<td></td>
230+
<td className="px-3 py-2 text-center dark:text-white">
231+
{player.currentELO}
232+
</td>
233+
<td className="py-2 pr-4"></td>
185234
</tr>
186235
))}
187236
</tbody>
188237
</table>
189-
<h2 className="mb-3 text-xl font-bold md:text-2xl dark:text-white">
238+
<h2 className="mb-3 mt-12 text-xl font-bold md:text-2xl dark:text-white">
190239
Inaktive spillere
191240
</h2>
192241
<table className="min-w-full">
193242
<thead>
194243
<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>
244+
<th className="w-1/3 px-4 py-2 text-center dark:text-white">
245+
Navn
246+
</th>
247+
<th className="w-1/3 px-4 py-2 text-center dark:text-white">
248+
Seiere
249+
</th>
250+
<th className="w-1/3 py-2 pr-6 text-center dark:text-white">
251+
Tap
252+
</th>
199253
</tr>
200254
</thead>
201255
<tbody>
@@ -206,16 +260,18 @@ export default function Index() {
206260
key={player.id}
207261
className="border-t text-lg dark:border-gray-700"
208262
>
209-
<td className="py-2 font-semibold dark:text-white">
263+
<td className="px-3 py-2 pr-6 font-semibold dark:text-white">
210264
{player.name}
211265
</td>
212-
<td className="py-2 dark:text-white">
266+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
213267
{`${player.matchesAsWinner.length}`}
214268
</td>
215-
<td className="py-2 dark:text-white">
269+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
216270
{player.matchesAsLoser.length}
217271
</td>
218-
<td className="py-2 dark:text-white">{player.currentELO}</td>
272+
<td className="px-3 py-2 pr-6 text-center dark:text-white">
273+
{player.currentELO}
274+
</td>
219275
</tr>
220276
))}
221277
</tbody>

0 commit comments

Comments
 (0)