75 lines
2.6 KiB
Svelte
75 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { cn } from '$lib/utils';
|
|
import type { PageData } from './$types';
|
|
|
|
export let data: PageData;
|
|
|
|
$: 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 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">Suivez la progression des élèves en direct</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 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[player.rank - 1])}
|
|
>
|
|
{player.rank}
|
|
</span>
|
|
<div class="flex items-center gap-2">
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
|
|
<span class="break-all text-lg">{player.pseudo}</span>
|
|
<span class="text-sm text-highlight-secondary">
|
|
<!-- {#if players.length > 1}
|
|
{#each players as player}
|
|
{player.pseudo || 'Anonyme'}{#if player !== last}, {/if}
|
|
{' '}
|
|
{/each}
|
|
{:else}
|
|
{player.players[0].pseudo}
|
|
{/if} -->
|
|
</span>
|
|
</div>
|
|
</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>
|