71 lines
2.5 KiB
Svelte
71 lines
2.5 KiB
Svelte
<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>
|