feat: improve leaderboard page

kevinjosethomas · kevinjosethomas · commit 7e518fd698e0 · 2025-08-27T17:24:22.000-07:00
diff --git a/src/components/Leaderboard/LeaderboardColumn.tsx b/src/components/Leaderboard/LeaderboardColumn.tsx
@@ -4,26 +4,43 @@ import { LeaderboardEntry } from 'src/components'
 interface Props {
   id: 'regular' | 'puzzles' | 'turing' | 'hand' | 'brain'
   name: 'Regular' | 'Puzzles' | 'Bot/Not' | 'Hand' | 'Brain'
-  icon: React.JSX.Element
   ranking: {
     display_name: string
     elo: number
   }[]
 }
 
+const getIconForType = (id: Props['id']): string => {
+  switch (id) {
+    case 'regular':
+      return 'chess_knight'
+    case 'puzzles':
+      return 'toys_and_games'
+    case 'turing':
+      return 'mystery'
+    case 'hand':
+      return 'back_hand'
+    case 'brain':
+      return 'network_intelligence'
+    default:
+      return 'chess_knight'
+  }
+}
+
 export const LeaderboardColumn: React.FC<Props> = ({
   id,
-  icon,
   name,
   ranking,
 }: Props) => {
   return (
-    <div className="flex flex-col rounded border border-white/10 bg-background-1/60">
-      <div className="flex flex-row items-center justify-start gap-2 rounded-t bg-background-2 px-3 py-1.5">
-        <i className="*:h-4 *:w-4">{icon}</i>
-        <h2 className="text-lg font-bold uppercase">{name}</h2>
+    <div className="from-white/8 to-white/4 group relative flex flex-col rounded-md border border-white/10 bg-gradient-to-br backdrop-blur-md">
+      <div className="flex h-12 flex-row items-center justify-start gap-2 border-b border-white/10 bg-white/5 px-3">
+        <span className="material-symbols-outlined material-symbols-filled text-2xl text-white/70">
+          {getIconForType(id)}
+        </span>
+        <h2 className="text-base font-bold uppercase text-white/95">{name}</h2>
       </div>
-      <div className="flex w-full flex-col rounded-b">
+      <div className="flex w-full flex-col">
         {ranking.map((player, index) => (
           <LeaderboardEntry
             key={index}
diff --git a/src/components/Leaderboard/LeaderboardEntry.tsx b/src/components/Leaderboard/LeaderboardEntry.tsx
@@ -1,9 +1,10 @@
 import Link from 'next/link'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState, useContext } from 'react'
 
 import { PlayerStats } from 'src/types'
 import { fetchPlayerStats } from 'src/api'
 import { useLeaderboardContext } from './LeaderboardContext'
+import { AuthContext } from 'src/contexts'
 
 interface Props {
   index: number
@@ -24,9 +25,11 @@ export const LeaderboardEntry = ({
   const [stats, setStats] = useState<PlayerStats | null>(null)
   const shouldShowPopupRef = useRef(false)
   const { activePopup, setActivePopup } = useLeaderboardContext()
+  const { user } = useContext(AuthContext)
 
   const entryKey = `${typeId}-${display_name}-${index}`
   const isPopupVisible = activePopup === entryKey
+  const isCurrentUser = user?.lichessId?.toLowerCase() === display_name.toLowerCase()
 
   let ratingKey:
     | 'regularRating'
@@ -130,51 +133,57 @@ export const LeaderboardEntry = ({
 
   return (
     <div
-      className={`relative flex w-full items-center justify-between px-3 py-1 text-sm ${index % 2 === 0 ? 'bg-opacity-0' : 'bg-white bg-opacity-[0.015]'}`}
+      className={`group relative flex w-full items-center justify-between px-3 py-1 text-sm transition-colors duration-200 ${
+        isCurrentUser 
+          ? 'bg-yellow-500/10 hover:bg-yellow-500/15' 
+          : index % 2 === 0 
+            ? 'bg-transparent hover:bg-white/3' 
+            : 'bg-white/3 hover:bg-white/5'
+      }`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
       <div className="flex items-center gap-1.5">
-        <p className="w-4 text-xs">{index + 1}</p>
+        <p className="w-4 text-xs text-white/60">{index + 1}</p>
         <Link
           href={`/profile/${display_name}`}
-          className="flex items-center gap-1.5 hover:underline"
+          className="flex items-center gap-1.5 text-white/90 transition-colors duration-200 hover:text-white hover:underline"
         >
           <p>
             {display_name} {index == 0 && '👑'}
           </p>
         </Link>
       </div>
-      <p className="text-sm font-medium">{elo}</p>
+      <p className="text-sm font-medium text-white/95">{elo}</p>
       {isPopupVisible && stats && (
-        <div className="absolute left-0 top-[100%] z-20 flex w-full max-w-[24rem] flex-col overflow-hidden rounded-lg border-2 border-white/20 bg-background-1 outline outline-1 outline-white/5 backdrop-blur-sm">
-          <div className="flex w-full justify-between border-b border-white/10 bg-gradient-to-r from-background-2/80 to-background-2/60 px-3 py-1.5">
-            <p className="text-sm">
+        <div className="absolute left-0 top-[100%] z-50 flex w-full max-w-[24rem] flex-col overflow-hidden rounded border border-white/20 bg-black backdrop-blur-sm">
+          <div className="flex w-full justify-between border-b border-white/10 bg-black/40 px-3 py-2">
+            <p className="text-sm text-white/95">
               <span className="font-bold">{display_name}</span>&apos;s {type}{' '}
               Statistics
             </p>
             <Link href={`/profile/${display_name}`}>
-              <i className="material-symbols-outlined select-none text-base text-primary transition-colors hover:text-human-1">
+              <i className="material-symbols-outlined select-none text-base text-white/70 transition-colors hover:text-white">
                 open_in_new
               </i>
             </Link>
           </div>
-          <div className="flex items-center justify-between bg-gradient-to-b from-background-1 to-background-1/95 px-3 py-2">
-            <div className="flex flex-col items-center justify-center gap-0.5 text-human-1">
-              <p className="text-xs">Rating</p>
-              <b className="text-xl">{stats[ratingKey]}</b>
+          <div className="flex items-center justify-between px-3 py-3">
+            <div className="flex flex-col items-center justify-center gap-0.5">
+              <p className="text-xs text-white/70">Rating</p>
+              <b className="text-xl text-white/95">{stats[ratingKey]}</b>
             </div>
             <div className="flex flex-col items-center justify-center gap-0.5">
-              <p className="text-xs">Highest</p>
-              <b className="text-xl">{stats[highestRatingKey]}</b>
+              <p className="text-xs text-white/70">Highest</p>
+              <b className="text-xl text-white/95">{stats[highestRatingKey]}</b>
             </div>
             <div className="flex flex-col items-center justify-center gap-0.5">
-              <p className="text-xs">Games</p>
-              <b className="text-xl">{stats[gamesKey]}</b>
+              <p className="text-xs text-white/70">Games</p>
+              <b className="text-xl text-white/95">{stats[gamesKey]}</b>
             </div>
             <div className="flex flex-col items-center justify-center gap-0.5">
-              <p className="text-xs">Win %</p>
-              <b className="text-xl">
+              <p className="text-xs text-white/70">Win %</p>
+              <b className="text-xl text-white/95">
                 {((stats[gamesWonKey] / stats[gamesKey]) * 100).toFixed(0)}%
               </b>
             </div>
diff --git a/src/components/Profile/UserProfile.tsx b/src/components/Profile/UserProfile.tsx
@@ -23,7 +23,7 @@ export const UserProfile = ({ stats }: Props) => {
         }}
       />
       <ProfileColumn
-        icon="network_intel_node"
+        icon="back_hand"
         name="Hand"
         data={{
           rating: stats.handRating,
@@ -48,7 +48,7 @@ export const UserProfile = ({ stats }: Props) => {
       />
       <ProfileColumn
         icon="toys_and_games"
-        name="Train"
+        name="Puzzles"
         data={{
           rating: stats.trainRating,
           highest: stats.trainMax,
diff --git a/src/pages/leaderboard.tsx b/src/pages/leaderboard.tsx
@@ -1,14 +1,7 @@
 import Head from 'next/head'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 
-import {
-  BrainIcon,
-  HandIcon,
-  RegularPlayIcon,
-  TrainIcon,
-  BotOrNotIcon,
-} from 'src/components/Common/Icons'
 import { fetchLeaderboard } from 'src/api'
 import { LeaderboardColumn, DelayedLoading } from 'src/components'
 import { LeaderboardProvider } from 'src/components/Leaderboard/LeaderboardContext'
@@ -18,7 +11,6 @@ const Leaderboard: React.FC = () => {
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
   const [leaderboard, setLeaderboard] = useState<
     {
-      icon: React.JSX.Element
       ranking: { display_name: string; elo: number }[]
       name: 'Regular' | 'Puzzles' | 'Bot/Not' | 'Hand' | 'Brain'
       id: 'regular' | 'puzzles' | 'turing' | 'hand' | 'brain'
@@ -51,31 +43,29 @@ const Leaderboard: React.FC = () => {
       setLeaderboard([
         {
           id: 'regular',
-          icon: <RegularPlayIcon />,
           name: 'Regular',
           ranking: lb.play_leaders,
         },
         {
           id: 'puzzles',
-          icon: <TrainIcon />,
           name: 'Puzzles',
           ranking: lb.puzzles_leaders,
         },
         {
           id: 'turing',
-          icon: <BotOrNotIcon />,
+
           name: 'Bot/Not',
           ranking: lb.turing_leaders,
         },
         {
           id: 'hand',
-          icon: <HandIcon />,
+
           name: 'Hand',
           ranking: lb.hand_leaders,
         },
         {
           id: 'brain',
-          icon: <BrainIcon />,
+
           name: 'Brain',
           ranking: lb.brain_leaders,
         },
@@ -125,47 +115,60 @@ const Leaderboard: React.FC = () => {
     <LeaderboardProvider>
       <DelayedLoading isLoading={loading}>
         <AnimatePresence mode="wait">
-          <motion.div
-            key="leaderboard-content"
-            variants={containerVariants}
-            initial="hidden"
-            animate="visible"
-            exit="exit"
-            style={{ willChange: 'transform, opacity' }}
-            className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-3 py-[1%]"
-          >
-            <Head>
-              <title>Leaderboard – Maia Chess</title>
-              <meta
-                name="description"
-                content="View top-ranked players across all Maia Chess game modes. Competitive leaderboards for regular play, puzzles, bot detection, hand & brain chess with live ratings and statistics."
-              />
-            </Head>
-            <motion.div
-              variants={itemVariants}
-              className="flex w-full flex-col items-start justify-between md:flex-row md:items-end"
-            >
-              <h1 className="text-2xl font-bold">Rating Leaderboards</h1>
-              <p className="text-sm text-secondary">
-                Last updated: {lastUpdated ? getTimeAgo(lastUpdated) : '...'}
-              </p>
-            </motion.div>
+          <>
+            <div
+              className="pointer-events-none absolute inset-0"
+              style={{
+                background:
+                  'radial-gradient(ellipse 75% 60% at center top, rgba(239, 68, 68, 0.08) 0%, transparent 60%)',
+              }}
+            />
             <motion.div
-              variants={itemVariants}
-              className="grid h-full w-full grid-cols-1 justify-start gap-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+              key="leaderboard-content"
+              variants={containerVariants}
+              initial="hidden"
+              animate="visible"
+              exit="exit"
+              style={{ willChange: 'transform, opacity' }}
+              className="container relative mx-auto px-6 py-8"
             >
-              {leaderboard?.map((column, index) => (
-                <LeaderboardColumn key={index} {...column} />
-              ))}
-            </motion.div>
-            <motion.div variants={itemVariants} className="my-2 w-full">
-              <p className="text-xs text-secondary">
-                <span className="font-medium">Note:</span> Each leaderboard
-                column only features players who have played atleast one game of
-                the corresponding type within the last 7 days.
-              </p>
+              <Head>
+                <title>Leaderboard – Maia Chess</title>
+                <meta
+                  name="description"
+                  content="View top-ranked players across all Maia Chess game modes. Competitive leaderboards for regular play, puzzles, bot detection, hand & brain chess with live ratings and statistics."
+                />
+              </Head>
+              <motion.div
+                variants={itemVariants}
+                className="mb-2 flex w-full flex-col items-start justify-between md:flex-row md:items-center"
+              >
+                <h1 className="mb-2 text-3xl font-bold text-white">
+                  Rating Leaderboards
+                </h1>
+
+                <p className="mt-4 text-sm text-white/60 md:mt-0">
+                  Last updated: {lastUpdated ? getTimeAgo(lastUpdated) : '...'}
+                </p>
+              </motion.div>
+              <motion.div
+                variants={itemVariants}
+                className="grid w-full grid-cols-1 justify-start gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
+              >
+                {leaderboard?.map((column, index) => (
+                  <LeaderboardColumn key={index} {...column} />
+                ))}
+              </motion.div>
+              <motion.div variants={itemVariants} className="mt-3 w-full">
+                <p className="text-xs text-white/60">
+                  <span className="font-medium text-white/80">Note:</span> Each
+                  leaderboard column only features players who have played at
+                  least one game of the corresponding type within the last 7
+                  days.
+                </p>
+              </motion.div>
             </motion.div>
-          </motion.div>
+          </>
         </AnimatePresence>
       </DelayedLoading>
     </LeaderboardProvider>
