124 lines
4.8 KiB
TypeScript
124 lines
4.8 KiB
TypeScript
'use client';
|
|
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
import useSWRSubscription, { type SWRSubscription } from 'swr/subscription';
|
|
|
|
import { type ScoreEvent } from '@/lib/leaderboard';
|
|
import { cn } from '@/lib/utils';
|
|
import Podium from '@/ui/events/podium/Podium';
|
|
import { Timer } from './Timer';
|
|
|
|
const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
|
|
|
|
export default function Leaderboard() {
|
|
// TODO CHANGER CECI
|
|
const CHAPITRE_EVENT = 1;
|
|
|
|
const subscription: SWRSubscription<string, ScoreEvent, Error> = (key, { next }) => {
|
|
const socket = new WebSocket(key);
|
|
|
|
socket.addEventListener('message', (event) => {
|
|
next(null, JSON.parse(event.data));
|
|
});
|
|
|
|
socket.addEventListener('error', (event) => {
|
|
console.error(event);
|
|
});
|
|
|
|
return () => socket.close();
|
|
};
|
|
|
|
const { data } = useSWRSubscription(
|
|
`wss://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard/${CHAPITRE_EVENT}`,
|
|
subscription
|
|
);
|
|
|
|
const scores = [data?.groups]
|
|
.flat()
|
|
.sort((a, b) => a!.rank - b!.rank)
|
|
.map((group, place) => ({
|
|
...group,
|
|
place
|
|
}));
|
|
|
|
return (
|
|
<section className="flex h-full w-full flex-col space-y-4">
|
|
<header className="sticky flex items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<h1 className="text-xl font-semibold">Tableau des scores</h1>
|
|
<p className="text-muted">Suivez la progression des élèves en direct</p>
|
|
</div>
|
|
</header>
|
|
<main className="flex flex-col justify-between space-x-0 space-y-4 pb-4">
|
|
{data && <Podium score={scores} />}
|
|
{data && data.end_date && (
|
|
<Timer className="flex justify-end" targetDate={new Date(data.end_date)} />
|
|
)}
|
|
<AnimatePresence>
|
|
<motion.ul className="flex flex-col space-y-2">
|
|
{data?.groups.map((group, key) => {
|
|
const tries = group.players.reduce((a, b) => a + b.tries, 0) || 0;
|
|
const puzzles = group.players.reduce((a, b) => a + b.completion, 0) || 0;
|
|
return (
|
|
<motion.li
|
|
layout
|
|
initial={{ opacity: 0, y: -10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -10 }}
|
|
transition={{ duration: 0.5 }}
|
|
key={key}
|
|
className="flex justify-between space-x-2"
|
|
>
|
|
<div className="flex items-center space-x-4">
|
|
<span className={cn('font-semibold', SCORE_COLORS[group.rank - 1])}>
|
|
{group.rank}
|
|
</span>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
|
|
<span className="text-lg">{group.name}</span>
|
|
<span className="text-sm text-muted">
|
|
{group.players && group.players.length > 1
|
|
? group.players
|
|
.map((player) => player.pseudo || 'Anonyme')
|
|
.sort((a, b) => a.localeCompare(b))
|
|
.join(', ')
|
|
: group.players[0].pseudo}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold">Puzzle{puzzles > 1 ? 's' : ''}</span>
|
|
<span className="text-lg text-muted">{puzzles}</span>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold">Essai{tries > 1 ? 's' : ''}</span>
|
|
<span className="text-lg text-muted">{tries}</span>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-semibold">Score</span>
|
|
<span className="text-lg text-muted">
|
|
{group.players.reduce((a, b) => a + b.score, 0)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.li>
|
|
);
|
|
}) ||
|
|
[...Array(20).keys()].map((i) => (
|
|
<span
|
|
key={i}
|
|
className="inline-block h-12 animate-pulse rounded-lg bg-primary-600"
|
|
style={{
|
|
animationDelay: `${i * 0.05}s`,
|
|
animationDuration: '1s'
|
|
}}
|
|
/>
|
|
))}
|
|
</motion.ul>
|
|
</AnimatePresence>
|
|
</main>
|
|
</section>
|
|
);
|
|
}
|