Add losses to stat page

.changeset/lazy-points-relax.md

@@ -0,0 +1,5 @@
+---
+'authenticlash': minor
+---
+
+Add score card for number of losses

.changeset/pretty-eyes-wink.md

@@ -0,0 +1,5 @@
+---
+'authenticlash': patch
+---
+
+Fix stats line animation

src/lib/components/ScoreGraph.svelte

@@ -1,26 +1,37 @@
 <script lang="ts">
 	import * as d3 from 'd3';
-
-	export let scores: Array<number> = [];
-
+	import { onMount } from 'svelte';
+	export let allScores: Array<number> = [];
+	export let limit = 50;
 	export let width = 928;
 	export let height = 500;
 	export let marginTop = 20;
 	export let marginRight = 30;
 	export let marginBottom = 30;
 	export let marginLeft = 40;
+	let scores: Array<number> = allScores.slice(limit * -1);
 
-	const xScale = d3.scaleLinear([1, scores.length], [marginLeft, width - marginRight]);
+	let path: SVGPathElement;
+	let pathLength = 0;
 
+	const xScale = d3.scaleLinear([1, scores.length], [marginLeft, width - marginRight]);
 	const yScale = d3.scaleLinear([0, 100], [height - marginBottom, marginTop]);
-
 	const line = d3
 		.line()
 		.curve(d3.curveMonotoneX)
 		.x((_, i) => xScale(i + 1))
 		.y((d) => {
 			return yScale(d as unknown as d3.NumberValue);
 		});
+
+	onMount(() => {
+		if (path) {
+			pathLength = path.getTotalLength();
+			path.style.setProperty('--path-length', pathLength.toString());
+			path.style.strokeDasharray = pathLength.toString();
+			path.style.strokeDashoffset = pathLength.toString();
+		}
+	});
 </script>
 
 <svg {width} {height} viewBox="0 0 {width} {height}" style:max-width="100%" style:height="auto">
@@ -81,20 +92,26 @@
 			>
 		</g>
 	{/each}
-	<path fill="none" stroke="#136195" stroke-width="2.5" d={line(scores)} />
+	<path
+		bind:this={path}
+		class="path-score-line"
+		fill="none"
+		stroke="#136195"
+		stroke-width="2.5"
+		d={line(scores)}
+	/>
 </svg>
 
 <style>
-	path {
+	.path-score-line {
 		fill: transparent;
 		stroke-linejoin: round;
-		stroke-dasharray: 4400;
-		stroke-dashoffset: 0;
-		animation: draw 8.5s ease-out;
+		animation: draw 1s ease-out forwards;
 	}
+
 	@keyframes draw {
 		from {
-			stroke-dashoffset: 4400;
+			stroke-dashoffset: var(--path-length);
 		}
 		to {
 			stroke-dashoffset: 0;

src/routes/games/[code]/GameHighScore.svelte

@@ -166,7 +166,11 @@
 										></LineChart></Popover.Trigger
 									>
 									<Popover.Content
-										><ScoreGraph scores={player.score} width={250} height={130} /></Popover.Content
+										><ScoreGraph
+											allScores={player.score}
+											width={250}
+											height={130}
+										/></Popover.Content
 									>
 								</Popover.Root>
 							</td>

src/routes/stats/+page.server.ts

@@ -44,12 +44,15 @@ export const load: PageServerLoad = async ({ locals: { getSession, supabase } })
 
 	const median2FAscore = allScores.toSorted((a, b) => a - b)[Math.floor(allScores.length / 2)];
 
-	const wins = participatedGames
-		.map((game) => {
-			const highscoreList = game.participation.toSorted((a, b) => b.total_score - a.total_score);
-			return highscoreList[0].profile_id === userId;
-		})
-		.filter(Boolean).length;
+	const winsAndLosses = participatedGames.map((game) => {
+		const highscoreList = game.participation.toSorted((a, b) => b.total_score - a.total_score);
+		return {
+			isWin: highscoreList[0].profile_id === userId,
+			isLoss: highscoreList.at(-1)?.profile_id === userId
+		};
+	});
+	const wins = winsAndLosses.filter((w) => w.isWin).length;
+	const losses = winsAndLosses.filter((w) => w.isLoss).length;
 
 	return {
 		stats: {
@@ -59,7 +62,8 @@ export const load: PageServerLoad = async ({ locals: { getSession, supabase } })
 			average2FAScore,
 			averageTotalScore,
 			median2FAscore,
-			wins
+			wins,
+			losses
 		},
 		title: 'Stats'
 	};

src/routes/stats/+page.svelte

@@ -12,7 +12,8 @@
 		average2FAScore,
 		averageTotalScore,
 		median2FAscore,
-		wins
+		wins,
+		losses
 	} = data.stats;
 </script>
 
@@ -25,7 +26,7 @@
 	</div>
 	{#if numberOfGames}
 		<div class="grid grid-cols-12 gap-4">
-			<StatsCard title="Number of Games">
+			<StatsCard title="Number of Games" cols="full">
 				<p class="text-center text-4xl font-bold">
 					<StatsNumber value={numberOfGames} />
 				</p>
@@ -35,6 +36,11 @@
 					<StatsNumber value={wins} />
 				</p>
 			</StatsCard>
+			<StatsCard title="Number of Losses">
+				<p class="text-center text-4xl font-bold">
+					<StatsNumber value={losses} />
+				</p>
+			</StatsCard>
 			<StatsCard title="Average Total Score">
 				<p class="text-center text-4xl font-bold">
 					<StatsNumber value={averageTotalScore} decimals={2} />
@@ -45,8 +51,8 @@
 					<StatsNumber value={totalScoreAcrossGames} />
 				</p>
 			</StatsCard>
-			<StatsCard title="2FA value history" cols="full">
-				<ScoreGraph scores={allScores} height={300} />
+			<StatsCard title="2FA value history (limit 50)" cols="full">
+				<ScoreGraph {allScores} height={300} />
 			</StatsCard>
 			<StatsCard title="Median 2FA Value">
 				<p class="text-center text-4xl font-bold">