feat: add more stats and calculate on the server

Shtian · Mar 28, 2024 · 4f35d33 · 4f35d33
1 parent c059191
commit 4f35d33
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 28 deletions.
diff --git a/src/routes/stats/+page.server.ts b/src/routes/stats/+page.server.ts
@@ -14,16 +14,48 @@ export const load: PageServerLoad = async ({ locals: { getSession, supabase } })
 		.from('games')
 		.select(
 			'id, creator, code, end_at, name, participation ( profile_id, score, total_score, nickname, nickname_image_url )'
-		)
-		.eq('participation.profile_id', session.user.id);
+		);
 
 	if (error) {
 		return fail(500, { message: error });
 	}
 
+	const participatedGames = games
+		.filter((game) => game.participation.some((p) => p.profile_id === userId))
+		.sort((a, b) => new Date(b.end_at).getTime() - new Date(a.end_at).getTime());
+
+	const allParticipations = participatedGames.flatMap((game) =>
+		game.participation.filter((p) => p.profile_id === userId)
+	);
+
+	const allScores = allParticipations.flatMap((p) => p.score);
+
+	const totalScoreAcrossGames = allScores.reduce((acc, score) => acc + score, 0);
+
+	const average2FAScore = totalScoreAcrossGames / allScores.length;
+
+	const averageTotalScore =
+		allParticipations.reduce((acc, p) => acc + p.total_score, 0) / allParticipations.length;
+
+	const median2FAscore = allScores.sort((a, b) => a - b)[Math.floor(allScores.length / 2)];
+
+	const wins = participatedGames
+		.map((game) => {
+			const highscoreList = game.participation.sort((a, b) => b.total_score - a.total_score);
+			return highscoreList[0].profile_id === userId;
+		})
+		.filter(Boolean).length;
+
 	return {
-		games: games || [],
-		profileId: userId,
+		stats: {
+			numberOfGames: participatedGames.length,
+			allScores,
+			totalScoreAcrossGames,
+			average2FAScore,
+			averageTotalScore,
+			median2FAscore,
+			wins
+		},
 		title: 'Stats'
 	};
 };
diff --git a/src/routes/stats/+page.svelte b/src/routes/stats/+page.svelte
@@ -5,51 +5,53 @@
 	import ScoreGraph from '$lib/components/ScoreGraph.svelte';
 
 	export let data;
-	const games =
-		data.games
-			?.filter((game) => game.participation.length > 0)
-			.sort((a, b) => {
-				return new Date(b.end_at).getTime() - new Date(a.end_at).getTime();
-			})
-			.map((game) => {
-				const [participation] = game.participation;
-				return {
-					code: game.code,
-					participation
-				};
-			}) || [];
-	const averageGameScore =
-		games.reduce((acc, game) => acc + game.participation.total_score, 0) / games.length;
-	const allScores = games.flatMap((game) => game.participation.score);
-	const average2FAValue = allScores.reduce((acc, score) => acc + score, 0) / allScores.length;
+	const {
+		numberOfGames,
+		allScores,
+		totalScoreAcrossGames,
+		average2FAScore,
+		averageTotalScore,
+		median2FAscore,
+		wins
+	} = data.stats;
 </script>
 
 <div class="mx-auto max-w-[1200px] px-6 lg:px-8 lg:py-10">
-	{#if games.length}
+	{#if numberOfGames}
 		<div class="grid grid-cols-12 gap-4">
 			<StatsCard title="Number of Games">
 				<p class="text-center text-4xl font-bold">
-					<StatsNumber value={games.length} />
+					<StatsNumber value={numberOfGames} />
 				</p>
 			</StatsCard>
 			<StatsCard title="Number of Wins">
 				<p class="text-center text-4xl font-bold">
-					<StatsNumber value={0} />
+					<StatsNumber value={wins} />
 				</p>
 			</StatsCard>
-			<StatsCard title="Average Game Score">
+			<StatsCard title="Average Total Score">
 				<p class="text-center text-4xl font-bold">
-					<StatsNumber value={averageGameScore} decimals={2} />
+					<StatsNumber value={averageTotalScore} decimals={2} />
 				</p>
 			</StatsCard>
-			<StatsCard title="Average 2FA Value">
+			<StatsCard title="Total accumulated score">
 				<p class="text-center text-4xl font-bold">
-					<StatsNumber value={average2FAValue} decimals={2} />
+					<StatsNumber value={totalScoreAcrossGames} />
 				</p>
 			</StatsCard>
 			<StatsCard title="2FA value history" cols="full">
 				<ScoreGraph scores={allScores} height={300} />
 			</StatsCard>
+			<StatsCard title="Median 2FA Value">
+				<p class="text-center text-4xl font-bold">
+					<StatsNumber value={median2FAscore} />
+				</p>
+			</StatsCard>
+			<StatsCard title="Average 2FA Value">
+				<p class="text-center text-4xl font-bold">
+					<StatsNumber value={average2FAScore} decimals={2} />
+				</p>
+			</StatsCard>
 		</div>
 	{:else}
 		<div class="mx-auto max-w-7xl py-6 text-center sm:px-6 lg:px-8 lg:py-10">