Peer-at-Code/peer-at-code-web
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: user leaderboard

Browse source
This commit is contained in:
Théo 2023-09-13 17:23:32 +02:00
parent e08bbaae50
commit 5aea6d3340
2 changed files with 32 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/routes/dashboard/leaderboard/+page.server.ts
View file

@ -1,5 +1,5 @@
import { API_URL } from '$env/static/private';
import type { LeaderboardEvent } from '$lib/types';
import type { Leaderboard } from '$lib/types';
import type { PageServerLoad } from './$types';
@ -9,7 +9,7 @@ export const load = (async ({ parent, fetch, cookies }) => {
const session = cookies.get('session');
// TODO: change this
const res = await fetch(`${API_URL}/leaderboard/1`, {
const res = await fetch(`${API_URL}/leaderboard`, {
headers: {
Authorization: `Bearer ${session}`
}
@ -17,11 +17,13 @@ export const load = (async ({ parent, fetch, cookies }) => {
if (!res.ok) {
return {
leaderboard: {} as LeaderboardEvent
leaderboard: [] as Leaderboard[]
};
}
const leaderboard = (await res.json()) as LeaderboardEvent;
const leaderboard = (await res.json()) as Leaderboard[];
console.log(leaderboard);
return {
leaderboard

49
src/routes/dashboard/leaderboard/+page.svelte
View file

@ -4,65 +4,68 @@
export let data: PageData;
$: groups = data.leaderboard.groups;
$: 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 space-y-4">
<section class="flex h-full w-full flex-col gap-4">
<header class="sticky flex items-center justify-between">
<div class="flex flex-col">
<h1 class="text-xl font-semibold">Tableau des scores</h1>
<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 space-x-0 space-y-4 pb-4">
<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 space-y-2">
{#each groups as group}
{@const players = group.players.sort((a, b) => b.score - a.score)}
{@const last = players[players.length - 1]}
<li class="flex justify-between space-x-2">
<div class="flex items-center space-x-4">
<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[group.rank - 1])}
class={cn('font-semibold text-highlight-secondary', SCORE_COLORS[player.rank - 1])}
>
{group.rank}
{player.rank}
</span>
<div class="flex items-center space-x-2">
<div class="flex flex-col gap-x-2 sm:flex-row sm:items-center">
<span class="text-lg">{group.name}</span>
<div class="flex items-center gap-2">
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<span class="text-lg">{player.pseudo}</span>
<span class="text-sm text-highlight-secondary">
{#if players.length > 1}
<!-- {#if players.length > 1}
{#each players as player}
{player.pseudo || 'Anonyme'}{#if player !== last}, {/if}
{' '}
{/each}
{:else}
{group.players[0].pseudo}
{/if}
{player.players[0].pseudo}
{/if} -->
</span>
</div>
</div>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center gap-4">
<div class="flex flex-col">
<span class="text-sm font-semibold"
<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">
<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>
</span> -->
</div>
</div>
</li>