Feat: add Top 10 leaderboard celebration animation (Issue #156)

[Tushar7012]

Fixes #156

Summary

Added celebration animation when users reach Top 10 in the leaderboard.

Features

• Gold confetti + special message for Rank 1
• Silver confetti for Rank 2
• Bronze confetti for Rank 3
• Purple confetti for Ranks 4-10
• Tracks previous rank to only celebrate on improvement

Files Added/Modified

• NEW frontend/src/components/Top10Celebration.tsx
• MODIFIED frontend/src/Pages/Leaderboard.tsx

Note

Badge celebration already exists in BadgeUnlocked.tsx - no changes needed there!

Summary by CodeRabbit

Release Notes

New Features

• Leaderboard now displays a celebratory dialog when you enter the top 10 rankings
• Top 3 positions receive special celebrations featuring trophy icons and confetti animation
• Celebrations include rank-specific messaging and can be dismissed with a "Keep Going! 🚀" button

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Warning

Rate limit exceeded

@Tushar7012 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 1 minutes and 23 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between d9dbb57 and 69881c1.

📒 Files selected for processing (2)

• frontend/src/Pages/Leaderboard.tsx
• frontend/src/components/Top10Celebration.tsx

📝 Walkthrough

Walkthrough

This PR introduces a celebratory Top10Celebration feature that displays a rank-specific dialog with confetti animations when users enter the top 10 rankings or improve within the top 3. The Leaderboard component now detects rank transitions and triggers the celebration accordingly, while a new Top10Celebration component handles the animated dialog rendering.

Changes

Cohort / File(s)	Summary
Leaderboard Integration frontend/src/Pages/Leaderboard.tsx	Imports and renders Top10Celebration component; adds top10Celebration state (rank, isOpen); introduces previousRankRef for rank change detection; adds useEffect to monitor current user index and trigger celebration on top-10 entry or top-3 improvement; minor className consolidation for currentUser debater row.
New Celebration Component frontend/src/components/Top10Celebration.tsx	New component that renders rank-specific celebration dialogs with confetti effects for ranks 1–3 (trophy icons) and top-10 (star icon); accepts rank, isOpen, and onClose props; manages confetti visibility with 6-second timeout; handles window resize listeners for dynamic confetti bounds; uses Dialog, Confetti, and icon UI primitives.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰✨ A leap into greatness, with confetti so bright,
Top-ten dreams come true in the leaderboard's light,
Stars burst and trophy icons dance with glee,
Celebrating your climb for all to see,
Keep going, keep soaring—the journey's just begun! 🚀

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a Top 10 leaderboard celebration animation feature referenced in Issue #156.
Linked Issues check	✅ Passed	The PR successfully implements Top 10 celebration animations with rank-specific confetti colors and messages as requested in Issue #156.
Out of Scope Changes check	✅ Passed	All changes are scoped to implementing the Top 10 celebration feature; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1f8db72 and d9dbb57.

📒 Files selected for processing (2)

• frontend/src/Pages/Leaderboard.tsx
• frontend/src/components/Top10Celebration.tsx

🧰 Additional context used

🧬 Code graph analysis (2)

frontend/src/Pages/Leaderboard.tsx (1)

frontend/src/hooks/useUser.ts (1)

• useUser (12-112)

frontend/src/components/Top10Celebration.tsx (2)

frontend/src/components/ui/dialog.tsx (4)

• Dialog (109-109)
• DialogContent (114-114)
• DialogTitle (117-117)
• DialogDescription (118-118)

frontend/src/components/ui/button.tsx (1)

• Button (57-57)

🔇 Additional comments (7)

frontend/src/Pages/Leaderboard.tsx (3)

29-29: LGTM! State management setup is clean.

The import, ref initialization, and state structure for tracking Top 10 celebrations are well-organized and correctly typed.

Also applies to: 90-90, 92-98

---

298-302: LGTM! Component integration is correct.

The Top10Celebration component is properly integrated with correct props and state management.

---

350-351: LGTM! Minor formatting improvement.

The className consolidation improves readability without changing behavior.

frontend/src/components/Top10Celebration.tsx (4)

1-16: LGTM! Clean component setup.

The imports, interface definition, and state initialization are well-structured and appropriate for the celebration functionality.

---

17-29: LGTM! Confetti lifecycle is well-managed.

The useEffect correctly triggers confetti when the dialog opens, sets appropriate duration, and properly cleans up the timer to prevent memory leaks.

---

31-38: LGTM! Proper responsive confetti sizing.

The resize handler ensures confetti dimensions stay synchronized with the window, and the cleanup prevents memory leaks.

---

40-105: LGTM! Rank-specific content and rendering are well-implemented.

The getRankContent function provides appropriate celebrations for each rank tier, and the component renders an accessible dialog with visually appealing confetti. The 600-piece non-recycling confetti with a 6-second duration strikes a good balance between visual impact and performance.