Skip to content

(fixed) leaderboard failing in less than three users #154

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheCodeHeist-Coder merged 1 commit into from
Sep 25, 2026
+15 −12
Merged

(fixed) leaderboard failing in less than three users #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/frontend/src/components/Badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ function Badge() {
{/* Left */}
<p className="group-hover:text-gray-400 transition duration-200 flex items-center gap-2 text-md sm:text-sm md:text-base text-gray-100 font-secondary tracking-wide">
<GiCelebrationFire className="h-4 w-4 sm:h-5 sm:w-5 text-rose-500 animate-pulse" />
Version-v1
Version-v2
</p>

{/* Divider */}
<span className=" sm:block sm:px-4 text-gray-600">|</span>

{/* Right */}
<p className="group-hover:text-indigo-600 transition duration-200 text-indigo-400 flex items-center gap-2 font-secondary text-md sm:text-sm md:text-base tracking-wide">
v2 - In Progress
v3 - In Progress
<RiProgress6Line className="h-4 w-4 sm:h-5 sm:w-5 text-indigo-500 animate-pulse" />
</p>

Expand Down
23 changes: 13 additions & 10 deletions apps/frontend/src/screens/LiveQuiz.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,11 @@
const [connectionState, setConnectionState] =
useState<'connected' | 'reconnecting' | 'failed'>('connected');
const [gameState, setGameState] = useState<GameState>('WAITING');
const [participants, setParticipants] = useState<any[]>([]);

Check failure on line 44 in apps/frontend/src/screens/LiveQuiz.tsx

View workflow job for this annotation

GitHub Actions / Lint & type-check 

Unexpected any. Specify a different type
const [currentQuestion, setCurrentQuestion] = useState<any>(null);

Check failure on line 45 in apps/frontend/src/screens/LiveQuiz.tsx

View workflow job for this annotation

GitHub Actions / Lint & type-check 

Unexpected any. Specify a different type
const [timeLeft, setTimeLeft] = useState(0);
const [correctAnswers, setCorrectAnswers] = useState<string[]>([]);
const [leaderboard, setLeaderboard] = useState<any[]>([]);

Check failure on line 48 in apps/frontend/src/screens/LiveQuiz.tsx

View workflow job for this annotation

GitHub Actions / Lint & type-check 

Unexpected any. Specify a different type

const [joinCode, setJoinCode] = useState('');

Expand All @@ -56,11 +56,15 @@
const [qIndex, setQIndex] = useState(0);


const topThree = leaderboard.slice(0, 3);
const sortedLeaderboard = [...leaderboard].sort((a, b) => (b.score ?? 0) - (a.score ?? 0));

const three = [topThree[1], topThree[0], topThree[2]];
const podium = [
{ rank: 1, player: sortedLeaderboard[0] },
{ rank: 2, player: sortedLeaderboard[1] },
{ rank: 3, player: sortedLeaderboard[2] },
].filter((entry): entry is { rank: number; player: any } => Boolean(entry.player));

const others = leaderboard.slice(3);
const others = sortedLeaderboard.slice(3);


// if participant is missing, kick them out
Expand Down Expand Up @@ -234,7 +238,7 @@
}
};

}, [sessionId, isOrganizer]);

Check warning on line 241 in apps/frontend/src/screens/LiveQuiz.tsx

View workflow job for this annotation

GitHub Actions / Lint & type-check 

React Hook useEffect has missing dependencies: 'navigate', 'participantId', and 'user?.id'. Either include them or remove the dependency array


const handleStart = () => {
Expand Down Expand Up @@ -607,23 +611,22 @@
<div className="w-full max-w-4xl mx-auto space-y-6">

{/* top three performers */}
<div className=" sm:flex justify-center items-center gap-3 sm:gap-12">
{three.map((player, idx) => {
const isFirst = idx === 1;
const rank = isFirst ? 1 : idx === 0 ? 2 : 3;
<div className="sm:flex justify-center items-center gap-3 sm:gap-12">
{podium.map(({ rank, player }) => {
const isFirst = rank === 1;

return (
<div
key={player.id}
className={`flex flex-col gap-2 mb-8 items-center p-5 rounded-2xl w-40
className={`flex flex-col gap-2 mb-8 items-center p-5 rounded-2xl w-40
${isFirst
? 'bg-yellow-500/20 w-60 border border-yellow-500/30 text-yellow-500 scale-110'
: 'bg-surface border border-white/5'}
${rank === 2 ? 'mt-6 w-55 bg-[#C0C0C0]/40 text-[#C0C0C0] border-2 border-gray-400' : ''}
${rank === 3 ? 'mt-10 w-55 bg-[#4A3004]/50 text-amber-600 border-2 border-amber-400' : ''}
`}
>
<span className="text-3xl font-black font-secondary"> Rank: <span className="font-special font-light"> {rank} </span> </span>
<span className="text-3xl font-black font-secondary"> Rank: <span className="font-special font-light"> {rank} </span> </span>

<div className={`w-16 h-16 rounded-xl bg-linear-to-br ${getAvatarColor(player.id)} p-0.5 shadow overflow-hidden`}>
<img
Expand All @@ -637,7 +640,7 @@
{player.username}
</span>

<span className=" text-2xl font-special tracking-wide">
<span className="text-2xl font-special tracking-wide">
{player.score} pts
</span>
</div>
Expand Down
Loading