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

Leaderboard WSS & types fix

Browse source
This commit is contained in:
Théo 2023-04-18 16:30:35 +02:00
parent 5d1aec2c16
commit f41e8d6123
4 changed files with 53 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/leaderboard.ts
View file

@ -68,7 +68,7 @@ export type ScoreEvent = {
{
pseudo: string;
tries: number;
completions: number;
completion: number;
score: number;
}
];

83
ui/Leaderboard.tsx
View file

@ -14,6 +14,8 @@ const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
export default function Leaderboard({ token }: { token: string }) {
// const { data, isLoading } = useLeaderboard({ token });
const CHAPITRE_EVENT = 3;
const subscription: SWRSubscription<string, ScoreEvent, Error> = (key, { next }) => {
const socket = new WebSocket(key);
@ -29,7 +31,7 @@ export default function Leaderboard({ token }: { token: string }) {
};
const { data } = useSWRSubscription(
`wss://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard`,
`wss://${process.env.NEXT_PUBLIC_API_URL?.split('//')[1]}/rleaderboard${CHAPITRE_EVENT}`,
subscription
);
@ -39,9 +41,11 @@ export default function Leaderboard({ token }: { token: string }) {
const { data: groups } = useGroups({ token });
console.log(groups);
if (groups) {
options = groups
.filter((group) => !group.chapter)
.filter((group) => group.chapter === null)
.map((group) => ({ value: group.name, title: group.name }))
.filter((group, index, self) => self.findIndex((g) => g.value === group.value) === index)
.sort((a, b) => a.title.localeCompare(b.title));
@ -56,8 +60,6 @@ export default function Leaderboard({ token }: { token: string }) {
return data;
}, [data, filter]);
console.log(filteredData);
return (
<section className="flex h-full w-full flex-col space-y-4">
<header className="sticky flex items-center justify-between">
@ -82,40 +84,49 @@ export default function Leaderboard({ token }: { token: string }) {
)} */}
</header>
<main className="flex flex-col justify-between space-x-0 space-y-4 pb-4">
Waiting for the leaderboard to be implemented (Xavier WSS)
{/* <ul className="flex flex-col space-y-2">
{(!isLoading &&
filteredData((group, key) => (
<li key={key} className="flex justify-between space-x-2">
<div className="flex items-center space-x-4">
<span className={cn('font-semibold', SCORE_COLORS[score.rank - 1])}>
{score.rank}
<ul className="flex flex-col space-y-2">
{data?.groups.map((group, key) => (
<li 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">Essaies</span>
<span className="text-lg text-muted">
{group.players.reduce((a, b) => a + b.tries, 0)}
</span>
<div className="flex items-center space-x-2">
<AvatarComponent name={score.pseudo} src={score.avatar} className="h-9 w-9" />
<div className="flex flex-col gap-x-2 sm:flex-row sm:items-center">
<span className="text-lg">{score.pseudo}</span>
<span className="text-sm text-muted">
{score.groups
?.map((g) => g.name)
.sort((a, b) => a.localeCompare(b))
.join(', ')}
</span>
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="flex flex-col">
<span className="text-sm font-semibold">Puzzles</span>
<span className="text-lg text-muted">{score.completions}</span>
</div>
<div className="flex flex-col">
<span className="text-sm font-semibold">Score</span>
<span className="text-lg text-muted">{score.score}</span>
</div>
{/* <div className="flex flex-col">
<span className="text-sm font-semibold">Puzzles</span>
<span className="text-lg text-muted">
{group.players.reduce((a, b) => a + b.completion, 0)}
</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>
</li>
))) ||
</div>
</li>
)) ||
[...Array(20).keys()].map((i) => (
<span
key={i}
@ -126,7 +137,7 @@ export default function Leaderboard({ token }: { token: string }) {
}}
/>
))}
</ul> */}
</ul>
</main>
</section>
);

8
ui/Puzzle.tsx
View file

@ -116,11 +116,11 @@ export default function Puzzle({ token, id }: { token: string; id: number }) {
) : (
<div className="flex items-center justify-between">
<div className=" items-center gap-x-2">
<p className="text-sm">
Tentatives : <span className="text-brand">{puzzle.tries}</span>
<p>
Tentatives : <span className="text-brand-accent">{puzzle.tries}</span>
</p>
<p className="text-sm">
Score : <span className="text-brand">{puzzle.score}</span> (Score maximum:{' '}
<p>
Score : <span className="text-brand-accent">{puzzle.score}</span> (Score maximum:{' '}
{puzzle.scoreMax})
</p>
</div>

2
ui/ToHTML.tsx
View file

@ -13,7 +13,7 @@ export default function ToHTML({ data, className }: { data: string; className?:
a: ({ ...props }) => (
<a
{...props}
className="text-brand hover:text-brand/80 hover:underline"
className="text-brand-accent hover:text-brand hover:underline"
// MAKE thIS SHIT DOWNLOAD
target="_blank"
rel="noopener"