52 lines
1.6 KiB
Svelte
52 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { PageData } from './$types';
|
|
|
|
import BarChart from 'lucide-svelte/icons/bar-chart-2';
|
|
import Users from 'lucide-svelte/icons/users';
|
|
|
|
import Puzzle from '$lib/components/puzzle.svelte';
|
|
import Button from '$lib/components/ui/button/button.svelte';
|
|
|
|
export let data: PageData;
|
|
</script>
|
|
|
|
<section class="flex w-full flex-col gap-2">
|
|
<header class="flex flex-col justify-between gap-2 lg:flex-row lg:items-center">
|
|
<div class="flex flex-col">
|
|
<h2 class="text-xl font-semibold">{data.chapter.name}</h2>
|
|
{#if data.chapter?.puzzles?.length}
|
|
<p class="text-muted-foreground">
|
|
Ils vous restent {data.chapter.puzzles.filter((p) => !p.score).length} puzzles à résoudre sur
|
|
un total de {data.chapter.puzzles.length}
|
|
</p>
|
|
{:else}
|
|
<p class="text-muted-foreground">Le chapitre ne contient pour l'instant aucun puzzle</p>
|
|
{/if}
|
|
</div>
|
|
<div class="flex gap-2">
|
|
{#if data.chapter.start && data.chapter.end}
|
|
<Button href="/chapters/{data.chapter.id}/groups">
|
|
<Users class="mr-2 h-4 w-4" />
|
|
Voir les groupes
|
|
</Button>
|
|
<Button href="/chapters/{data.chapter.id}/leaderboard">
|
|
<BarChart class="mr-2 h-4 w-4" />
|
|
Voir le classement
|
|
</Button>
|
|
{/if}
|
|
</div>
|
|
</header>
|
|
<ul class="flex flex-col gap-2">
|
|
{#if data.chapter?.puzzles?.length}
|
|
{#each data.chapter.puzzles as puzzle (puzzle.id)}
|
|
<Puzzle {puzzle} />
|
|
{:else}
|
|
<li
|
|
class="flex h-16 w-full items-center justify-center rounded border border-border bg-card"
|
|
>
|
|
<p class="text-muted-foreground">Aucun puzzle trouvé</p>
|
|
</li>
|
|
{/each}
|
|
{/if}
|
|
</ul>
|
|
</section>
|