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

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

@ -4,65 +4,68 @@
export let data: PageData; export let data: PageData;
$: groups = data.leaderboard.groups; $: players = data.leaderboard;
const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400']; const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
</script> </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"> <header class="sticky flex items-center justify-between">
<div class="flex flex-col"> <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> <p class="text-muted">Suivez la progression des élèves en direct</p>
</div> </div>
</header> </header>
<!-- <Separator /> --> <!-- <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 && <Podium score={scores} />} -->
<!-- {data && data.end_date && ( <!-- {data && data.end_date && (
<Timer class="flex justify-end" targetDate={new Date(data.end_date)} /> <Timer class="flex justify-end" targetDate={new Date(data.end_date)} />
)} --> )} -->
<ul class="flex flex-col space-y-2"> <ul class="flex flex-col gap-2">
{#each groups as group} {#each players as player}
{@const players = group.players.sort((a, b) => b.score - a.score)} <!-- {@const players = group.players.sort((a, b) => b.score - a.score)} -->
{@const last = players[players.length - 1]} <!-- {@const last = players[players.length - 1]} -->
<li class="flex justify-between space-x-2"> <li class="flex justify-between gap-2">
<div class="flex items-center space-x-4"> <div class="flex items-center gap-4">
<span <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> </span>
<div class="flex items-center space-x-2"> <div class="flex items-center gap-2">
<div class="flex flex-col gap-x-2 sm:flex-row sm:items-center"> <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
<span class="text-lg">{group.name}</span> <span class="text-lg">{player.pseudo}</span>
<span class="text-sm text-highlight-secondary"> <span class="text-sm text-highlight-secondary">
{#if players.length > 1} <!-- {#if players.length > 1}
{#each players as player} {#each players as player}
{player.pseudo || 'Anonyme'}{#if player !== last}, {/if} {player.pseudo || 'Anonyme'}{#if player !== last}, {/if}
{' '} {' '}
{/each} {/each}
{:else} {:else}
{group.players[0].pseudo} {player.players[0].pseudo}
{/if} {/if} -->
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div class="flex items-center space-x-4"> <div class="flex items-center gap-4">
<div class="flex flex-col"> <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 >Essai{group.players.reduce((a, b) => a + b.tries, 0) || 0 ? 's' : ''}</span
> >
<span class="text-lg text-highlight-secondary" <span class="text-lg text-highlight-secondary"
>{group.players.reduce((a, b) => a + b.tries, 0) || 0}</span >{group.players.reduce((a, b) => a + b.tries, 0) || 0}</span
> > -->
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<span class="text-sm font-semibold">Score</span> <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)} {group.players.reduce((a, b) => a + b.score, 0)}
</span> </span> -->
</div> </div>
</div> </div>
</li> </li>