src/lib/components/Chapter.svelte

@@ -1,17 +1,15 @@
 <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(
-		'group relative flex h-full w-full flex-col rounded-md bg-primary-700 transition-colors duration-150',
+		'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
 		{
 			'hover:bg-primary-600': chapter.show,
 			'opacity-50': !chapter.show
@@ -20,16 +18,13 @@
 >
 	{#if chapter.show}
 		<a
-			class="flex h-full w-full items-center justify-between gap-4 p-4"
+			class="flex h-full w-full items-center gap-4 p-4"
 			href={chapter.show ? `/dashboard/chapters/${chapter.id}` : '#'}
 		>
-			<div class="flex items-center gap-2">
+			<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
-				<span class="text-base font-semibold">
+				<h2 class="text-base font-semibold">
 					{chapter.name}
-				</span>
+				</h2>
-				{#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(
-		'group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150',
+		'font-code 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>
-				{#if puzzle.tags?.length}
 				<div class="flex items-center gap-x-6">
+					{#if puzzle.tags?.length}
 						<div class="flex gap-x-2 text-sm">
 							{#each puzzle.tags as tag}
 								<span
@@ -47,9 +47,9 @@
 								</span>
 							{/each}
 						</div>
-					</div>
 					{/if}
 				</div>
+			</div>
 			<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
 				<ChevronRight />
 			</span>

src/routes/dashboard/+page.svelte

@@ -10,25 +10,7 @@
 </script>
 
 <section class="flex w-full flex-col gap-4">
-	<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>
-	</header>
-	<main class="flex flex-col gap-4">
-		<div
-			class="flex w-full flex-col justify-between gap-4 space-x-0 md:flex md:flex-row md:space-x-6 md:space-y-0"
-		>
-			<Card title="Puzzles résolus" data={user?.completions ?? 0} />
-			<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"
 		>
@@ -50,6 +32,18 @@
 			</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>
+	</header>
+	<main class="flex flex-col gap-4">
+		<div
+			class="flex w-full flex-col justify-between gap-4 space-x-0 md:flex md:flex-row md:space-x-6 md:space-y-0"
+		>
+			<Card title="Puzzles résolus" data={user?.completions ?? 0} />
+			<Card title="Badges obtenus" data={user?.badges?.length ?? 'Aucun'} />
+			<Card title="Rang actuel" data={user?.rank ?? 'Non classé'} />
+		</div>
 		<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,27 +2,23 @@
 	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 gap-4">
+<section class="flex w-full flex-col space-y-6">
-	<div class="flex items-center justify-between">
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-col justify-between md:flex-row md:items-center">
 			<div class="flex items-center gap-2">
 				<h1 class="text-xl font-semibold">{data.chapter.name}</h1>
 			</div>
-		{#if data.chapter.id === 1}
-			<Button variant="brand" href="/dashboard/leaderboard/{data.chapter.id}">
-				Voir le classement
-			</Button>
-		{/if}
 		</div>
 		<ul class="flex flex-col gap-4">
 			{#each data.chapter.puzzles as puzzle}
 				<Puzzle {puzzle} />
 			{/each}
 		</ul>
+	</div>
 </section>

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

@@ -1,37 +0,0 @@
-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

@@ -1,71 +0,0 @@
-<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>