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

feat: leaderboard event #12

Merged
glazk0 merged 2 commits from dev into main 2023-10-02 01:15:47 +02:00
Conversation 0 Commits 2 Files changed 7 +167 -44
7 changed files with 167 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/lib/components/Chapter.svelte
View file

@ -1,15 +1,17 @@
<script lang="ts">
import { cn } from '$lib/Utils';
import type { Chapter } from '$lib/types';
import { Trophy } from 'lucide-svelte';
import ChevronRight from './Icons/ChevronRight.svelte';
import Button from './ui/Button.svelte';
export let chapter: Chapter;
</script>
<li
class={cn(
'font-code group relative flex h-full w-full rounded-md bg-primary-700 transition-colors duration-150 ',
'group relative flex h-full w-full flex-col rounded-md bg-primary-700 transition-colors duration-150',
{
'hover:bg-primary-600': chapter.show,
'opacity-50': !chapter.show
@ -18,13 +20,16 @@
>
{#if chapter.show}
<a
class="flex h-full w-full items-center gap-4 p-4"
class="flex h-full w-full items-center justify-between gap-4 p-4"
href={chapter.show ? `/dashboard/chapters/${chapter.id}` : '#'}
>
<div class="flex w-full flex-col justify-between gap-2 sm:flex-row">
<h2 class="text-base font-semibold">
<div class="flex items-center gap-2">
<span class="text-base font-semibold">
{chapter.name}
</h2>
</span>
{#if chapter.id === 1}
<Trophy class="stroke-highlight-secondary" />
{/if}
</div>
<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
<ChevronRight />

10
src/lib/components/Puzzle.svelte
View file

@ -13,7 +13,7 @@
<li
class={cn(
'font-code group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150',
'group relative flex h-full w-full rounded-md border-2 bg-primary-700 transition-colors duration-150',
{
'border-green-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'easy'),
'border-yellow-600/30': puzzle.tags?.find((tag) => tag.name.toLowerCase() === 'medium'),
@ -36,8 +36,8 @@
({puzzle.score ? `${puzzle.score}` : '?'}/{puzzle.scoreMax} points)
</span>
</h2>
<div class="flex items-center gap-x-6">
{#if puzzle.tags?.length}
{#if puzzle.tags?.length}
<div class="flex items-center gap-x-6">
<div class="flex gap-x-2 text-sm">
{#each puzzle.tags as tag}
<span
@ -47,8 +47,8 @@
</span>
{/each}
</div>
{/if}
</div>
</div>
{/if}
</div>
<span class="translate-x-0 transform-gpu duration-300 group-hover:translate-x-2">
<ChevronRight />

50
src/routes/dashboard/+page.svelte
View file

@ -10,28 +10,6 @@
</script>
<section class="flex w-full flex-col gap-4">
{#if data.daily && data.daily.puzzle}
<div
class="flex items-center justify-between gap-4 rounded-lg border-2 border-brand/40 bg-primary-700 px-4 py-2"
>
<div class="flex w-full flex-col justify-between md:flex-row md:items-center md:gap-4">
<span class="text-lg font-semibold">{data.daily.chapter.name}</span>
<span class="text-highlight-secondary">
{data.daily.puzzle.name} ({data.daily.puzzle.score ?? '?'}/{data.daily.puzzle.scoreMax})
</span>
</div>
<div class="flex items-center gap-4">
<Button
variant="brand"
href="/dashboard/chapters/{data.daily.chapter.id}/puzzle/{data.daily.puzzle.id}"
>
<span class="text-lg font-semibold">
{data.daily.puzzle.score ? 'Voir' : 'Jouer'}
</span>
</Button>
</div>
</div>
{/if}
<header>
<h1 class="text-xl font-semibold">Tableau de bord</h1>
<p class="text-highlight-secondary">Ceci est la page d&apos;accueil du dashboard</p>
@ -44,6 +22,34 @@
<Card title="Badges obtenus" data={user?.badges?.length ?? 'Aucun'} />
<Card title="Rang actuel" data={user?.rank ?? 'Non classé'} />
</div>
{#if data.daily && data.daily.puzzle}
<header>
<h1 class="text-lg font-semibold">Puzzle du jour</h1>
<p class="text-highlight-secondary">
Essayer de résoudre le puzzle du jour pour gagner des points supplémentaires
</p>
</header>
<div
class="flex items-center justify-between gap-4 rounded-lg border-2 border-brand/40 bg-primary-700 px-4 py-2"
>
<div class="flex w-full flex-col justify-between md:flex-row md:items-center md:gap-4">
<span class="text-lg font-semibold">{data.daily.chapter.name}</span>
<span class="text-highlight-secondary">
{data.daily.puzzle.name} ({data.daily.puzzle.score ?? '?'}/{data.daily.puzzle.scoreMax})
</span>
</div>
<div class="flex items-center gap-4">
<Button
variant="brand"
href="/dashboard/chapters/{data.daily.chapter.id}/puzzle/{data.daily.puzzle.id}"
>
<span class="text-lg font-semibold">
{data.daily.puzzle.score ? 'Voir' : 'Jouer'}
</span>
</Button>
</div>
</div>
{/if}
<div class="grid grid-cols-1 gap-4">
<div class="flex flex-col gap-4">
<header>

2
src/routes/dashboard/chapters/+page.svelte
View file

@ -23,7 +23,7 @@
<h1 class="text-xl font-semibold">Chapitres</h1>
<p class="text-muted">
Les chapitres sont les différentes parties du jeu. Chaque chapitre est composé de plusieurs
puzzles.
puzzles
</p>
</div>
</header>

26
src/routes/dashboard/chapters/[chapterId]/+page.svelte
View file

@ -2,23 +2,27 @@
import type { PageData } from './$types';
import Puzzle from '$lib/components/Puzzle.svelte';
import Button from '$lib/components/ui/Button.svelte';
export let data: PageData;
data.chapter.puzzles = data.chapter.puzzles.sort((a, b) => a.scoreMax - b.scoreMax);
</script>
<section class="flex w-full flex-col space-y-6">
<div class="flex flex-col gap-4">
<div class="flex flex-col justify-between md:flex-row md:items-center">
<div class="flex items-center gap-2">
<h1 class="text-xl font-semibold">{data.chapter.name}</h1>
</div>
<section class="flex w-full flex-col gap-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<h1 class="text-xl font-semibold">{data.chapter.name}</h1>
</div>
<ul class="flex flex-col gap-4">
{#each data.chapter.puzzles as puzzle}
<Puzzle {puzzle} />
{/each}
</ul>
{#if data.chapter.id === 1}
<Button variant="brand" href="/dashboard/leaderboard/{data.chapter.id}">
Voir le classement
</Button>
{/if}
</div>
<ul class="flex flex-col gap-4">
{#each data.chapter.puzzles as puzzle}
<Puzzle {puzzle} />
{/each}
</ul>
</section>

37
src/routes/dashboard/leaderboard/[chapterId]/+page.server.ts Normal file
View file

@ -0,0 +1,37 @@
import { API_URL } from '$env/static/private';
import { redirect } from '@sveltejs/kit';
import type { LeaderboardEvent } from '$lib/types';
import type { PageServerLoad } from './$types';
export const load = (async ({ parent, fetch, cookies, params: { chapterId } }) => {
await parent();
if (!chapterId) {
throw redirect(303, '/dashboard');
}
const session = cookies.get('session');
const res = await fetch(`${API_URL}/leaderboard/${chapterId}`, {
headers: {
Authorization: `Bearer ${session}`
}
});
if (!res.ok) {
throw redirect(303, '/dashboard');
}
const leaderboard = (await res.json()) as LeaderboardEvent;
if (!leaderboard || !leaderboard.groups.length) {
throw redirect(303, '/dashboard');
}
return {
leaderboard
};
}) satisfies PageServerLoad;

71
src/routes/dashboard/leaderboard/[chapterId]/+page.svelte Normal file
View file

@ -0,0 +1,71 @@
<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>