Skip to content

fix:Update leaderboard: fixed background #180

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
ViktorSvertoka merged 2 commits into from
Jan 22, 2026
Merged

fix:Update leaderboard: fixed background #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
882393f
fix:Update leaderboard: fixed background
AlinaRyabova Jan 22, 2026
7618c2c
fix: remove email from CurrentUser type to prevent PII exposure
AlinaRyabova Jan 22, 2026
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
45 changes: 18 additions & 27 deletions frontend/components/leaderboard/LeaderboardClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@
import { useRef } from 'react';
import { motion, useMotionTemplate, useMotionValue } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import { LeaderboardPodium } from './LeaderboardPodium';
import { LeaderboardTable } from './LeaderboardTable';
import { User } from './types';
import { User, CurrentUser } from './types';

// Імпортуємо тип з auth
type AuthUser = { id: string; username: string; email: string };

interface LeaderboardClientProps {
initialUsers: User[];
currentUser?: AuthUser | null;
currentUser?: CurrentUser | null;
}

export default function LeaderboardClient({
Expand All @@ -21,13 +20,10 @@ export default function LeaderboardClient({
}: LeaderboardClientProps) {
const t = useTranslations('leaderboard');

// Використовуємо всіх користувачів для таблиці
const allUsers = initialUsers;
// Подіум тільки для тих, хто має бали
const topThree = allUsers.filter(u => u.points > 0).slice(0, 3);
const hasResults = topThree.length > 0;

// --- Логіка ефекту ліхтарика ---
const containerRef = useRef<HTMLDivElement>(null);
const mouseX = useMotionValue(0);
const mouseY = useMotionValue(0);
Expand All @@ -37,9 +33,8 @@ export default function LeaderboardClient({
clientX,
clientY,
}: React.MouseEvent) {
const { left, top } = currentTarget.getBoundingClientRect();
mouseX.set(clientX - left);
mouseY.set(clientY - top);
mouseX.set(clientX);
mouseY.set(clientY);
}

const maskImage = useMotionTemplate`radial-gradient(500px circle at ${mouseX}px ${mouseY}px, black, transparent)`;
Expand All @@ -48,41 +43,37 @@ export default function LeaderboardClient({
<div
ref={containerRef}
onMouseMove={handleMouseMove}
className="relative min-h-screen overflow-hidden bg-slate-50 dark:bg-slate-950 group transition-colors duration-300"
className="relative min-h-screen bg-slate-50 dark:bg-slate-950 group transition-colors duration-300"
>
{/* Background Layers - КОНТУРНІ СЕРДЕЧКА 💖 */}

{/* 1. Статичний шар (сірі контури, ледь помітні) */}
<div
className="absolute inset-0 z-0 bg-repeat [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"
className="fixed inset-0 z-0 bg-repeat opacity-60 pointer-events-none"
style={{
// stroke='%23808080' - це сірий колір обводки
// fill='none' - прозорий центр
backgroundImage: `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' stroke='%23808080' stroke-width='1.5' stroke-opacity='0.15' fill='none'/%3E%3C/svg%3E")`,
backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' stroke='%23808080' stroke-width='0.2' stroke-opacity='0.2' fill='none'/%3E%3C/svg%3E")`,
backgroundSize: '40px 40px',
}}
/>

{/* 2. Динамічний шар (МАЖЕНТО контури, світяться під мишкою) */}
<motion.div
className="absolute inset-0 z-0 bg-repeat"
className="fixed inset-0 z-0 bg-repeat pointer-events-none"
style={{
maskImage,
WebkitMaskImage: maskImage,
// stroke='%23ff2d55' - це твій маженто колір обводки
backgroundImage: `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' stroke='%23ff2d55' stroke-width='2' stroke-opacity='0.5' fill='none'/%3E%3C/svg%3E")`,
backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' stroke='%23ff2d55' stroke-width='0.9' stroke-opacity='0.8' fill='none'/%3E%3C/svg%3E")`,
backgroundSize: '40px 40px',
}}
/>

{/* Велика розмита пляма по центру */}
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-[#ff2d55]/15 blur-[120px] rounded-full pointer-events-none" />
<div className="fixed top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-[#ff2d55]/10 blur-[120px] rounded-full pointer-events-none z-0" />

<div className="relative max-w-5xl mx-auto px-4 py-20 flex flex-col items-center z-10">
<header className="text-center mb-16 animate-in fade-in slide-in-from-top-4 duration-700">
<h1 className="text-5xl md:text-7xl font-bold tracking-tight text-[#ff2d55] mb-6 drop-shadow-sm">
<h1 className={cn(
"text-6xl md:text-8xl mb-6 uppercase select-none font-black tracking-tight",
"text-[#ff2d55]",
"drop-shadow-[0_0_25px_rgba(255,45,85,0.4)]"
)}>
{t('title')}
</h1>

<p className="text-slate-600 dark:text-slate-400 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed font-medium">
{t('subtitle')}
</p>
Expand Down Expand Up @@ -112,4 +103,4 @@ export default function LeaderboardClient({
</div>
</div>
);
}
}
8 changes: 3 additions & 5 deletions frontend/components/leaderboard/LeaderboardTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,11 @@ import { TrendingUp, Trophy, Medal } from 'lucide-react';
import { motion } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';
import { User } from './types';

type AuthUser = { id: string; username: string; email: string };
import { User, CurrentUser } from './types';

interface LeaderboardTableProps {
users: User[];
currentUser?: AuthUser | null;
currentUser?: CurrentUser | null;
}

export function LeaderboardTable({
Expand Down Expand Up @@ -227,4 +225,4 @@ function RankBadge({ rank }: { rank: number }) {
{rank}
</span>
);
}
}
5 changes: 5 additions & 0 deletions frontend/components/leaderboard/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,8 @@ export interface User {
avatar: string;
change: number;
}

export interface CurrentUser {
id: string;
username: string;
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.