src/lib/components/Chapter.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import { cn } from '$lib/Utils';
 	import type { Chapter } from '$lib/types';
+	import { Trophy } from 'lucide-svelte';
 
 	import ChevronRight from './Icons/ChevronRight.svelte';
+	import Button from './ui/Button.svelte';
 
 	export let chapter: Chapter;
 </script>
 
 <li
 	class={cn(
-		'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
+		'group relative flex h-full w-full flex-col rounded-md bg-primary-700 transition-colors duration-150',
 		{
 			'hover:bg-primary-600': chapter.show,
 			'opacity-50': !chapter.show
@@ -18,13 +20,16 @@
 >
 	{#if chapter.show}
 		<a
-			class="flex h-full w-full items-center gap-4 p-4"
+			class="flex h-full w-full items-center justify-between gap-4 p-4"
 			href={chapter.show ? `/dashboard/chapters/${chapter.id}` : '#'}
 		>
-			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
+			<div class="flex items-center gap-2">
-				<h2 class="text-base font-semibold">
+				<span class="text-base font-semibold">
 					{chapter.name}
-				</h2>
+				</span>
+				{#if chapter.id === 1}
+					<Trophy class="stroke-highlight-secondary" />
+				{/if}
 			</div>
 			<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
 				<ChevronRight />

src/lib/components/Puzzle.svelte

@@ -13,7 +13,7 @@
 
 <li
 	class={cn(
-		'font-code group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150',
+		'group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150',
 		{
 			'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
 			'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
@@ -36,8 +36,8 @@
 						({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
 					</span>
 				</h2>
-				<div class="flex items-center gap-x-6">
+				{#if puzzle.tags?.length}
-					{#if puzzle.tags?.length}
+					<div class="flex items-center gap-x-6">
 						<div class="flex gap-x-2 text-sm">
 							{#each puzzle.tags as tag}
 								<span
@@ -47,8 +47,8 @@
 								</span>
 							{/each}
 						</div>
-					{/if}
+					</div>
-				</div>
+				{/if}
 			</div>
 			<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
 				<ChevronRight />

src/routes/dashboard/+page.svelte

@@ -10,28 +10,6 @@
 </script>
 
 <section class="flex w-full flex-col gap-4">
-	{#if data.daily && data.daily.puzzle}
-		<div
-			class="flex items-center justify-between gap-4 rounded-lg border-2 border-brand/40 bg-primary-700 px-4 py-2"
-		>
-			<div class="flex w-full flex-col justify-between md:flex-row md:items-center md:gap-4">
-				<span class="text-lg font-semibold">{data.daily.chapter.name}</span>
-				<span class="text-highlight-secondary">
-					{data.daily.puzzle.name} ({data.daily.puzzle.score ?? '?'}/{data.daily.puzzle.scoreMax})
-				</span>
-			</div>
-			<div class="flex items-center gap-4">
-				<Button
-					variant="brand"
-					href="/dashboard/chapters/{data.daily.chapter.id}/puzzle/{data.daily.puzzle.id}"
-				>
-					<span class="text-lg font-semibold">
-						{data.daily.puzzle.score ? 'Voir' : 'Jouer'}
-					</span>
-				</Button>
-			</div>
-		</div>
-	{/if}
 	<header>
 		<h1 class="text-xl font-semibold">Tableau de bord</h1>
 		<p class="text-highlight-secondary">Ceci est la page d&apos;accueil du dashboard</p>
@@ -44,6 +22,34 @@
 			<Card title="Badges obtenus" data={user?.badges?.length ?? 'Aucun'} />
 			<Card title="Rang actuel" data={user?.rank ?? 'Non classé'} />
 		</div>
+		{#if data.daily && data.daily.puzzle}
+			<header>
+				<h1 class="text-lg font-semibold">Puzzle du jour</h1>
+				<p class="text-highlight-secondary">
+					Essayer de résoudre le puzzle du jour pour gagner des points supplémentaires
+				</p>
+			</header>
+			<div
+				class="flex items-center justify-between gap-4 rounded-lg border-2 border-brand/40 bg-primary-700 px-4 py-2"
+			>
+				<div class="flex w-full flex-col justify-between md:flex-row md:items-center md:gap-4">
+					<span class="text-lg font-semibold">{data.daily.chapter.name}</span>
+					<span class="text-highlight-secondary">
+						{data.daily.puzzle.name} ({data.daily.puzzle.score ?? '?'}/{data.daily.puzzle.scoreMax})
+					</span>
+				</div>
+				<div class="flex items-center gap-4">
+					<Button
+						variant="brand"
+						href="/dashboard/chapters/{data.daily.chapter.id}/puzzle/{data.daily.puzzle.id}"
+					>
+						<span class="text-lg font-semibold">
+							{data.daily.puzzle.score ? 'Voir' : 'Jouer'}
+						</span>
+					</Button>
+				</div>
+			</div>
+		{/if}
 		<div class="grid grid-cols-1 gap-4">
 			<div class="flex flex-col gap-4">
 				<header>

src/routes/dashboard/chapters/+page.svelte

@@ -23,7 +23,7 @@
 			<h1 class="text-xl font-semibold">Chapitres</h1>
 			<p class="text-muted">
 				Les chapitres sont les différentes parties du jeu. Chaque chapitre est composé de plusieurs
-				puzzles.
+				puzzles
 			</p>
 		</div>
 	</header>

src/routes/dashboard/chapters/[chapterId]/+page.svelte

@@ -2,23 +2,27 @@
 	import type { PageData } from './$types';
 
 	import Puzzle from '$lib/components/Puzzle.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
 
 	export let data: PageData;
 
 	data.chapter.puzzles = data.chapter.puzzles.sort((a, b) => a.scoreMax - b.scoreMax);
 </script>
 
-<section class="flex w-full flex-col space-y-6">
+<section class="flex w-full flex-col gap-4">
-	<div class="flex flex-col gap-4">
+	<div class="flex items-center justify-between">
-		<div class="flex flex-col justify-between md:flex-row md:items-center">
+		<div class="flex items-center gap-2">
-			<div class="flex items-center gap-2">
+			<h1 class="text-xl font-semibold">{data.chapter.name}</h1>
-				<h1 class="text-xl font-semibold">{data.chapter.name}</h1>
-			</div>
 		</div>
-		<ul class="flex flex-col gap-4">
+		{#if data.chapter.id === 1}
-			{#each data.chapter.puzzles as puzzle}
+			<Button variant="brand" href="/dashboard/leaderboard/{data.chapter.id}">
-				<Puzzle {puzzle} />
+				Voir le classement
-			{/each}
+			</Button>
-		</ul>
+		{/if}
 	</div>
+	<ul class="flex flex-col gap-4">
+		{#each data.chapter.puzzles as puzzle}
+			<Puzzle {puzzle} />
+		{/each}
+	</ul>
 </section>

src/routes/dashboard/leaderboard/[chapterId]/+page.server.ts

@@ -0,0 +1,37 @@
+import { API_URL } from '$env/static/private';
+
+import { redirect } from '@sveltejs/kit';
+
+import type { LeaderboardEvent } from '$lib/types';
+
+import type { PageServerLoad } from './$types';
+
+export const load = (async ({ parent, fetch, cookies, params: { chapterId } }) => {
+	await parent();
+
+	if (!chapterId) {
+		throw redirect(303, '/dashboard');
+	}
+
+	const session = cookies.get('session');
+
+	const res = await fetch(`${API_URL}/leaderboard/${chapterId}`, {
+		headers: {
+			Authorization: `Bearer ${session}`
+		}
+	});
+
+	if (!res.ok) {
+		throw redirect(303, '/dashboard');
+	}
+
+	const leaderboard = (await res.json()) as LeaderboardEvent;
+
+	if (!leaderboard || !leaderboard.groups.length) {
+		throw redirect(303, '/dashboard');
+	}
+
+	return {
+		leaderboard
+	};
+}) satisfies PageServerLoad;

src/routes/dashboard/leaderboard/[chapterId]/+page.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { cn } from '$lib';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+
+	$: leaderboard = data.leaderboard;
+
+	const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
+</script>
+
+<section class="flex h-full w-full flex-col gap-4">
+	<header class="sticky flex items-center justify-between">
+		<div class="flex flex-col">
+			<h2 class="text-xl font-semibold">Tableau des scores</h2>
+			<p class="text-muted">Progression des équipes et joueurs dans le chapitre.</p>
+		</div>
+	</header>
+	<!-- <Separator /> -->
+	<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 gap-2">
+			{#each leaderboard.groups.filter( (g) => g.players.reduce((a, b) => a + b.score, 0) ) as group, i}
+				{@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[i])}>
+							{i + 1}
+						</span>
+						<div class="flex items-center gap-2">
+							<!-- <span class="text-lg">{player.pseudo}</span> -->
+							<span class="text-lg">
+								{#if group.players.length > 1}
+									{#each group.players as player}
+										{player.pseudo || 'Anonyme'}{#if player !== last}, {/if}
+										{' '}
+									{/each}
+								{:else}
+									{players[0].pseudo}
+								{/if}
+							</span>
+						</div>
+					</div>
+					<div class="flex items-center gap-4">
+						<div class="flex flex-col">
+							<!-- <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">{player.score}</span> -->
+							<span class="text-lg text-highlight-secondary">
+								{group.players.reduce((a, b) => a + b.score, 0)}
+							</span>
+						</div>
+					</div>
+				</li>
+			{/each}
+		</ul>
+	</main>
+</section>