From 5aea6d3340b22959e6fbbc4d1fde51b1378e4179 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Wed, 13 Sep 2023 17:23:32 +0200
Subject: [PATCH] feat: user leaderboard

---
 .../dashboard/leaderboard/+page.server.ts     | 10 ++--
 src/routes/dashboard/leaderboard/+page.svelte | 49 ++++++++++---------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/routes/dashboard/leaderboard/+page.server.ts b/src/routes/dashboard/leaderboard/+page.server.ts
index 97a70d5..ca924d0 100644
--- a/src/routes/dashboard/leaderboard/+page.server.ts
+++ b/src/routes/dashboard/leaderboard/+page.server.ts
@@ -1,5 +1,5 @@
 import { API_URL } from '$env/static/private';
-import type { LeaderboardEvent } from '$lib/types';
+import type { Leaderboard } from '$lib/types';
 
 import type { PageServerLoad } from './$types';
 
@@ -9,7 +9,7 @@ export const load = (async ({ parent, fetch, cookies }) => {
 	const session = cookies.get('session');
 
 	// TODO: change this
-	const res = await fetch(`${API_URL}/leaderboard/1`, {
+	const res = await fetch(`${API_URL}/leaderboard`, {
 		headers: {
 			Authorization: `Bearer ${session}`
 		}
@@ -17,11 +17,13 @@ export const load = (async ({ parent, fetch, cookies }) => {
 
 	if (!res.ok) {
 		return {
-			leaderboard: {} as LeaderboardEvent
+			leaderboard: [] as Leaderboard[]
 		};
 	}
 
-	const leaderboard = (await res.json()) as LeaderboardEvent;
+	const leaderboard = (await res.json()) as Leaderboard[];
+
+	console.log(leaderboard);
 
 	return {
 		leaderboard
diff --git a/src/routes/dashboard/leaderboard/+page.svelte b/src/routes/dashboard/leaderboard/+page.svelte
index 3f25b37..2e88c25 100644
--- a/src/routes/dashboard/leaderboard/+page.svelte
+++ b/src/routes/dashboard/leaderboard/+page.svelte
@@ -4,65 +4,68 @@
 
 	export let data: PageData;
 
-	$: groups = data.leaderboard.groups;
+	$: players = data.leaderboard;
 
 	const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
 </script>
 
-<section class="flex h-full w-full flex-col space-y-4">
+<section class="flex h-full w-full flex-col gap-4">
 	<header class="sticky flex items-center justify-between">
 		<div class="flex flex-col">
-			<h1 class="text-xl font-semibold">Tableau des scores</h1>
+			<h2 class="text-xl font-semibold">Tableau des scores</h2>
 			<p class="text-muted">Suivez la progression des élèves en direct</p>
 		</div>
 	</header>
 	<!-- <Separator /> -->
-	<main class="flex flex-col justify-between space-x-0 space-y-4 pb-4">
+	<main class="flex flex-col justify-between gap-4 pb-4">
 		<!-- {data && <Podium score={scores} />} -->
 		<!-- {data && data.end_date && (
           <Timer class="flex justify-end" targetDate={new Date(data.end_date)} />
         )} -->
-		<ul class="flex flex-col space-y-2">
-			{#each groups as group}
-				{@const players = group.players.sort((a, b) => b.score - a.score)}
-				{@const last = players[players.length - 1]}
-				<li class="flex justify-between space-x-2">
-					<div class="flex items-center space-x-4">
+		<ul class="flex flex-col gap-2">
+			{#each players as player}
+				<!-- {@const players = group.players.sort((a, b) => b.score - a.score)} -->
+				<!-- {@const last = players[players.length - 1]} -->
+				<li class="flex justify-between gap-2">
+					<div class="flex items-center gap-4">
 						<span
-							class={cn('font-semibold text-highlight-secondary', SCORE_COLORS[group.rank - 1])}
+							class={cn('font-semibold text-highlight-secondary', SCORE_COLORS[player.rank - 1])}
 						>
-							{group.rank}
+							{player.rank}
 						</span>
-						<div class="flex items-center space-x-2">
-							<div class="flex flex-col gap-x-2 sm:flex-row sm:items-center">
-								<span class="text-lg">{group.name}</span>
+						<div class="flex items-center gap-2">
+							<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
+								<span class="text-lg">{player.pseudo}</span>
 								<span class="text-sm text-highlight-secondary">
-									{#if players.length > 1}
+									<!-- {#if players.length > 1}
 										{#each players as player}
 											{player.pseudo || 'Anonyme'}{#if player !== last}, {/if}
 											{' '}
 										{/each}
 									{:else}
-										{group.players[0].pseudo}
-									{/if}
+										{player.players[0].pseudo}
+									{/if} -->
 								</span>
 							</div>
 						</div>
 					</div>
-					<div class="flex items-center space-x-4">
+					<div class="flex items-center gap-4">
 						<div class="flex flex-col">
-							<span class="text-sm font-semibold"
+							<span class="text-sm font-semibold">Completion(s)</span>
+							<span class="text-lg text-highlight-secondary">{player.completions}</span>
+							<!-- <span class="text-sm font-semibold"
 								>Essai{group.players.reduce((a, b) => a + b.tries, 0) || 0 ? 's' : ''}</span
 							>
 							<span class="text-lg text-highlight-secondary"
 								>{group.players.reduce((a, b) => a + b.tries, 0) || 0}</span
-							>
+							> -->
 						</div>
 						<div class="flex flex-col">
 							<span class="text-sm font-semibold">Score</span>
-							<span class="text-lg text-highlight-secondary">
+							<span class="text-lg text-highlight-secondary">{player.score}</span>
+							<!-- <span class="text-lg text-highlight-secondary">
 								{group.players.reduce((a, b) => a + b.score, 0)}
-							</span>
+							</span> -->
 						</div>
 					</div>
 				</li>