From 5420f1a8a07f76212301404a742f14603803a89b Mon Sep 17 00:00:00 2001
From: Shigbeard <4262327+Shigbeard@users.noreply.github.com>
Date: Wed, 21 Aug 2024 23:46:50 +1000
Subject: [PATCH] feat: dark theme tweaks, plus groundwork for leaderboard

---
 app/components/Navbar.tsx           |  29 ++--
 app/components/Server.tsx           |  66 ++++++----
 app/components/Stars.tsx            | 187 ++++++++++++++++++++++++++
 app/components/ui/badge.tsx         |   6 +-
 app/components/ui/button.tsx        |  19 +--
 app/components/ui/data-table.tsx    |  80 +++++++++++
 app/components/ui/dropdown-menu.tsx |  15 ++-
 app/components/ui/table.tsx         |   7 +-
 app/entry.server.tsx                |   4 +-
 app/root.tsx                        |   9 +-
 app/routes/_index.tsx               |   4 +-
 app/routes/bans/index.tsx           |   2 +-
 app/routes/leaderboard/index.tsx    |  47 +++++++
 app/tailwind.css                    | 114 ++++++++--------
 app/typedefs/leaderboards.tsx       |  51 +++++++
 components.json                     |   4 +-
 package-lock.json                   | 197 +++++++---------------------
 package.json                        |   7 +-
 18 files changed, 568 insertions(+), 280 deletions(-)
 create mode 100644 app/components/Stars.tsx
 create mode 100644 app/components/ui/data-table.tsx
 create mode 100644 app/routes/leaderboard/index.tsx
 create mode 100644 app/typedefs/leaderboards.tsx

diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 42522c9..6a3113d 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -8,6 +8,7 @@ import { SerializeFrom } from "@remix-run/node";
 export interface NavbarItemProps {
     href: string;
     label: string;
+    target?: string;
 }
 
 export interface NavbarProps {
@@ -63,16 +64,16 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
     return (
         // JSX markup for your component goes here
         <ThemeProvider specifiedTheme={theme} themeAction="/action/set-theme">
-        <nav className={`${clsx(theme)} bg-primary-foreground dark:bg-secondary-foreground border dark:border-secondary-foreground shadow sticky top-0 z-50`}>
+        <nav className={`bg-foreground dark:bg-background text-primary-foreground dark:text-secondary-foreground shadow sticky top-0 z-50`}>
             <div className='container flex flex-wrap justify-between items-center mx-auto'>
                 <a href="/" className='flex items-center flex-grow'>
-                    <span className="self-center text-xl font-semibold whitespace-nowrap text-primary dark:text-secondary">
+                    <span className="self-center text-xl font-semibold whitespace-nowrap">
                         {props.siteTitle || 'TriumphTF2'}
                     </span>
                 </a>
 
                 <div className='flex items-center'>
-                    <button onClick={toggleMenu} id="menu-toggle" type="button" className='inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden'>
+                    <button onClick={toggleMenu} id="menu-toggle" type="button" className='inline-flex items-center p-2 ml-3 text-sm rounded-lg hover:text-blue-600  focus:outline-none focus:ring-2 md:hidden'>
                         <span className="sr-only">Open main menu</span>
                         <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path
@@ -83,13 +84,13 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
                             />
                         </svg>
                     </button>
-                    <button onClick={toggleProfile} id="profile-button" type="button" className='inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden'>
+                    <button onClick={toggleProfile} id="profile-button" type="button" className='inline-flex items-center p-2 ml-3 text-sm rounded-lg hover:text-blue-600  focus:outline-none focus:ring-2 md:hidden'>
                         <span className='sr-only'>Profile Menu</span>
                         <svg className='h-6 w-6' fill='none' viewBox='0 0 32 32' stroke='currentColor'>
                             <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z' />
                         </svg>
                     </button>
-                    <button onClick={toggleTheme} id="theme-toggle" type="button" className='inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600 md:hidden'>
+                    <button onClick={toggleTheme} id="theme-toggle" type="button" className='inline-flex items-center p-2 ml-3 text-sm rounded-lg hover:text-blue-600  focus:outline-none focus:ring-2 md:hidden'>
                         <span className='sr-only'>Toggle Theme</span>
                         <svg className='h-6 w-6' fill='currentColor' viewBox='0 0 16 16' stroke='none'>
                             <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708' />
@@ -103,7 +104,8 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
                             <li key={item.href}>
                                 <a
                                     href={item.href}
-                                    className={currentpage === item.href ? 'block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white' : 'block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700'}
+                                    className={currentpage === item.href ? 'block py-2 pr-4 pl-3 rounded md:bg-transparent text-blue-600 md:p-0' : 'block py-2 pr-4 pl-3 border-b md:border-0 md:hover:text-blue-600 md:p-0'}
+                                    target={item.target}
                                 >
                                     {item.label}
                                 </a>
@@ -115,13 +117,13 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
                 <div className={profileOpen ? "w-full md:block md:w-auto md:space-x-8" : "w-full md:block md:w-auto md:space-x-8 hidden"} id="profile-menu">
                     <ul className='flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium'>
                         <li>
-                            <button onClick={handleAuth} type="button" className='sm:w-full sm:text-left block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700'>
+                            <button onClick={handleAuth} type="button" className='block py-2 pr-4 pl-3 border-b md:border-0 md:hover:text-blue-600 md:p-0'>
                                 {props.user ? props.user.nickname : 'Login'}
                             </button>
                         </li>
                         { props.user && (
                         <li>
-                            <button onClick={logout} type="button" className='sm:w-full sm:text-left block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700'>
+                            <button onClick={logout} type="button" className='block py-2 pr-4 pl-3 border-b md:border-0 md:hover:text-blue-600 md:p-0'>
                                 Logout
                             </button>
                         </li>
@@ -132,11 +134,14 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
                 <div className='w-full md:block md:w-auto md:space-x-8-force hidden' id="theme-menu">
                     <ul className='flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium'>
                         <li>
-                            <button onClick={toggleTheme} id="theme-toggle" type="button" className='inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600'>
-                                <span className='sr-only'>Toggle Theme</span>
-                                <svg className='h-6 w-6' fill='currentColor' viewBox='0 0 16 16' stroke='none'>
-                                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708' />
+                            <button onClick={toggleTheme} id="theme-toggle" type="button" className='inline-flex items-center p-2 ml-3 text-sm rounded-lg focus:outline-none focus:ring-2 hover:text-blue-600 '>
+                                <svg className='h-6 w-6 dark:hidden' fill='currentColor' viewBox='0 0 16 16' stroke='none'>
+                                    <path className="dark:hidden" strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708' />
                                 </svg>
+                                <svg className='h-6 w-6 dark:block hidden' fill='currentColor' viewBox='0 0 24 24' stroke='none'>
+                                    <path className="dark:block hidden" strokeLinecap="round" strokeLinejoin="round" strokeWidth='2' d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"/>
+                                </svg>
+                                {/* <span className=''>{theme?.toString() == 'light' ? " Dark" : " Light"}</span> */}
                             </button>
                         </li>
                     </ul>
diff --git a/app/components/Server.tsx b/app/components/Server.tsx
index 7ebe8c8..8fc75f5 100644
--- a/app/components/Server.tsx
+++ b/app/components/Server.tsx
@@ -5,20 +5,20 @@ export const Server: React.FC<QueryResult> = (props) => {
     // Implement your component logic here
     const getColorForPlayercount = (num: number, max: number) => {
         if(max === 0) {
-            return 'text-gray-500'; // Escape divide by 0
+            return 'dark:text-gray-600 text-gray-400'; // Escape divide by 0
         }
         if(num === 0) {
-            return 'text-blue-500'; // Escape divide by 0
+            return 'dark:text-blue-600 text-blue-400'; // Escape divide by 0
         }
         const factor = num / max;
         if (factor > 0.75) {
-            return 'text-red-500';
+            return 'dark:text-red-600 text-red-400';
         } else if (factor > 0.5) {
-            return 'text-yellow-500';
+            return 'dark:text-yellow-600 text-red-400';
         } else if (factor > 0.25) {
-            return 'text-green-500';
+            return 'dark:text-green-600 text-green-400';
         } else {
-            return 'text-blue-500';
+            return 'dark:text-blue-600 text-blue-400';
         }
     };
     const secondsToHumanReadable = (seconds: number | undefined) => {
@@ -42,22 +42,25 @@ export const Server: React.FC<QueryResult> = (props) => {
 
         return `${formattedMinutes}:${formattedSeconds}`;
     }
-    const connectTo = (connect: string | undefined) => {
+    const connectTo = (props: QueryResult) => {
         return () => {
-            if (connect) {
-                window.prompt(`We are about to use the following Steam URI to connect to the server
+            if (props.numplayers == props.maxplayers && props.maxplayers == 0) {
+                return;
+            }
+            if (props.connect) {
+//                 window.prompt(`We are about to use the following Steam URI to connect to the server
 
-steam://connect/${connect}
+// steam://connect/${props.connect}
 
-Your browser may ask you to allow us to do this.
-If it does not allow this, here is the connect string.`, `connect ${connect};`);
-                window.open(`steam://connect/${connect}`);
+// Your browser may ask you to allow us to do this.
+// If it does not allow this, here is the connect string.`, `connect ${props.connect};`);
+                window.open(`steam://connect/${props.connect}`);
             }
         }
     }
     return (
-        <div className='rounded-lg border dark:bg-gray-700 bg-gray-300 text-black dark:text-white font-bold sm:shadow w-full max-w-md'>
-            <div className="flex-col space-y-1.5 p-6 dark:bg-gray-300 bg-gray-700 dark:text-black text-white px-4 py-3 flex items-center justify-between">
+        <div className='rounded-lg border border-primary dark:border-secondary bg-primary dark:bg-card text-primary-foreground dark:text-primary font-bold sm:shadow w-full max-w-md'>
+            <div className="flex-col space-y-1.5 p-6 bg-card-foreground dark:bg-muted dark:text-black text-white px-4 py-3 flex items-center justify-between">
                 <div className='flex items-center gap-2'>
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -76,25 +79,29 @@ If it does not allow this, here is the connect string.`, `connect ${connect};`);
                         <line x1="6" x2="6.01" y1="6" y2="6"></line>
                         <line x1="6" x2="6.01" y1="18" y2="18"></line>
                     </svg>
-                    <div className='text-lg font-bold'>{props.name || 'SERVERNAME'}</div>
+                    <div className='font-bold text-ellipsis overflow-clip text-nowrap max-w-xs'>{props.name || 'SERVERNAME'}</div>
                 </div>
                 <div className='text-sm text-gray-500'>
                     <span className='font-medium'>Map: {props.map || 'MAPNAME'}</span>
                 </div>
                 <div className='mt-4 text-sm text-white hidden sm:block'>
-                    <button onClick={connectTo(props.connect)} className='bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded'>
-                        Connect
+                    <button onClick={connectTo(props)} className={`${props.maxplayers == 0 ? 'bg-gray-500 hover:bg-gray-500 cursor-default' : 'bg-blue-500 hover:bg-blue-600'} text-white font-bold py-2 px-4 rounded`}>
+                        {
+                            props.numplayers == props.maxplayers && props.maxplayers == 0 ? 'Offline' :
+                            props.numplayers == props.maxplayers && props.maxplayers != 0 ? 'Full' :
+                            'Connect'
+                        }
                     </button>
                 </div>
             </div>
-            <div className='p-4'>
-                <div className='flex items-center justify-between mb-4'>
+            <div className='p-4 flex flex-col h-full'>
+                <div className='flex items-center justify-between mb-4 h-min flex-shrink'>
                     <div className='text-2xl font-bold'>
                         <span className={getColorForPlayercount(props.numplayers || 0,props.maxplayers || 0)}>{props.numplayers || 0}</span> / {props.maxplayers || 0}
                     </div>
                     <div className='text-sm text-gray-500'>Players Online</div>
                 </div>
-                <div className='max-h-52 overflow-y-auto'>
+                <div className='max-h-52 overflow-y-auto flex-grow'>
                     <div className='space-y-1 px-3.5'>
                         {props.players?.map((player) => (
                             <div key={player.name} className='flex items-center justify-between text-sm'>
@@ -111,6 +118,9 @@ If it does not allow this, here is the connect string.`, `connect ${connect};`);
                         ))}
                     </div>
                 </div>
+                <div className='text-center align-bottom bottom-0 h-min flex-shrink'>
+                    <span className='text-sm text-muted-foreground connect-string'>{props.connect ? `connect ${props.connect};` : ''}</span>
+                </div>
             </div>
         </div>
     );
@@ -127,8 +137,8 @@ export const ServerSkeleton: React.FC = () => {
         players.push(randomUsername())
     }
     return (
-        <div className='server-placeholder rounded-lg border dark:bg-gray-700 bg-gray-300 text-black dark:text-white font-bold sm:shadow w-full max-w-md'>
-            <div className="flex-col space-y-1.5 p-6 dark:bg-gray-300 bg-gray-700 dark:text-black text-white px-4 py-3 flex items-center justify-between">
+        <div className='server-placeholder rounded-lg border border-primary dark:border-secondary bg-primary dark:bg-card text-primary-foreground dark:text-primary font-bold sm:shadow w-full max-w-md'>
+            <div className="flex-col space-y-1.5 p-6 bg-card-foreground dark:bg-muted dark:text-black text-white px-4 py-3 flex items-center justify-between">
                 <div className='flex items-center gap-2'>
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -147,21 +157,21 @@ export const ServerSkeleton: React.FC = () => {
                         <line x1="6" x2="6.01" y1="6" y2="6"></line>
                         <line x1="6" x2="6.01" y1="18" y2="18"></line>
                     </svg>
-                    <div className='text-lg font-bold'><span className='header'></span></div>
+                    <div className={`text-lg font-bold`}><span className='header  bg-secondary dark:bg-primary'></span></div>
                 </div>
                 <div className='text-sm text-gray-500'>
-                    <span className='font-medium'>Map: <span className='text'></span></span>
+                    <span className='font-medium'>Map: <span className='text  bg-secondary dark:bg-primary'></span></span>
                 </div>
                 <div className='mt-4 text-sm text-white hidden sm:block'>
                     <button disabled className='bg-gray-500 text-white font-bold py-2 px-4 rounded'>
-                        <span className='text'></span>
+                        <span className='text  bg-secondary dark:bg-primary'></span>
                     </button>
                 </div>
             </div>
             <div className='p-4'>
                 <div className='flex items-center justify-between mb-4'>
                     <div className='font-bold'>
-                        <span className='number'></span>
+                        <span className='number bg-secondary dark:bg-primary'></span>
                     </div>
                     <div className='text-sm text-gray-500'>Players Online</div>
                 </div>
@@ -175,7 +185,7 @@ export const ServerSkeleton: React.FC = () => {
                                             <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z' />
                                         </svg>
                                     </span> */}
-                                    <div><span className='text' style={{ minWidth: `${Math.floor(Math.random() * (125 - 80 + 1)) + 80}px` }}></span></div>
+                                    <div><span className='text bg-secondary dark:bg-primary' style={{ minWidth: `${Math.floor(Math.random() * (125 - 80 + 1)) + 80}px` }}></span></div>
                                 </div>
                                 <div className='text-gray-500 flex items-center'><span className='text-short'></span></div>
                             </div>
diff --git a/app/components/Stars.tsx b/app/components/Stars.tsx
new file mode 100644
index 0000000..c155531
--- /dev/null
+++ b/app/components/Stars.tsx
@@ -0,0 +1,187 @@
+"use client"
+import React from 'react';
+import { useWindowSize } from "@uidotdev/usehooks";
+export interface Star extends Coordinate {
+    radius: number;
+    vx: number;
+    vy: number;
+    color: string;
+}
+export interface Coordinate {
+    x: number;
+    y: number;
+}
+export interface StarsProps {
+    stars: Star[];
+    FPS: number;
+    numStars: number;
+    mouse: {
+        x: number;
+        y: number;
+    };
+    velMax: number;
+    mDistance: number;
+    friction: number;
+}
+
+export const defaultStars = {
+    stars: [] as Star[],
+    FPS: 30,
+    numStars: 150,
+    mouse: {
+        x: 0,
+        y: 0,
+    },
+    velMax: 10,
+    mDistance: 35,
+    friction: 1.2,
+} as StarsProps
+
+function clamp(num: number, min: number, max: number) {
+    return num <= min ? min : num >= max ? max : num;
+}
+
+function pushAwayFromWall(s: Star, canvas: HTMLCanvasElement) {
+    // if the star is against a wall, but doesnt have a velocity away from the wall, give it one
+    if (s.x <= 0 && s.vx <= 0) s.vx = Math.abs(s.vx);
+    if (s.x >= canvas.width && s.vx >= 0) s.vx = -Math.abs(s.vx);
+    if (s.y <= 0 && s.vy <= 0) s.vy = Math.abs(s.vy);
+    if (s.y >= canvas.height && s.vy >= 0) s.vy = -Math.abs(s.vy);
+}
+
+export const Stars: React.FC<StarsProps> = (initStars) => {
+    const canvasRef = React.useRef<HTMLCanvasElement>(null);
+    const [Stars, setStars] = React.useState(initStars);
+    const size = useWindowSize();
+
+    if (Stars.stars.length === 0) {
+        // Initialize stars
+        const stars = [] as Star[];
+        for (let i = 0; i < Stars.numStars; i++) {
+            stars.push({
+                x: Math.random() * (size.width ?? 1920),
+                y: Math.random() * (size.height ?? 1080),
+                radius: Math.random() * 2 + 1,
+                vx: Math.floor(Math.random() * 10) - 5,
+                vy: Math.floor(Math.random() * 10) - 5,
+                color: 'white',
+            } as Star);
+        setStars({
+            ...Stars,
+            stars: stars,
+        })
+        }
+    }
+    /**
+     * Calculate the distance between two points.
+     */
+    const distance = ( point1: Star | Coordinate, point2: Star | Coordinate) => {
+        let xs = 0;
+        let ys = 0;
+        xs = point2.x - point1.x;
+        xs *= xs;
+        ys = point2.y - point1.y;
+        ys *= ys;
+        return Math.sqrt(xs + ys);
+    }
+
+    const draw = React.useCallback((ctx: CanvasRenderingContext2D ) => {
+        if (!size.width || !size.height) {
+            size.height = 1080
+            size.width = 1920
+        }
+        ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
+        ctx.globalCompositeOperation = 'lighter';
+        for (let i = 0; i < Stars.numStars; i++) {
+            const s = Stars.stars[i];
+            ctx.fillStyle = s.color ?? '#999';
+            ctx.beginPath();
+            ctx.arc(s.x, s.y, s.radius, 0, 2 * Math.PI);
+            ctx.fill();
+            ctx.fillStyle = 'black';
+            ctx.stroke();
+        }
+
+        ctx.beginPath();
+        for (let i = 0, x = Stars.stars.length; i < x; i++) {
+            const starI = Stars.stars[i];
+            ctx.moveTo(starI.x, starI.y);
+            if (distance(Stars.mouse, starI) < Stars.mDistance) ctx.lineTo(Stars.mouse.x, Stars.mouse.y);
+            for (let j = 0, x = Stars.stars.length; j < x; j++) {
+                const starII = Stars.stars[j];
+                if (distance(starI, starII) < 150) {
+                    ctx.lineTo(starII.x, starII.y);
+                }
+            }
+        }
+        ctx.lineWidth = 0.05;
+        ctx.strokeStyle = 'white';
+        ctx.stroke();
+    }, [Stars, size]);
+
+    const mouseMove = (e: React.MouseEvent<HTMLCanvasElement>) => {
+        setStars({
+            ...Stars,
+            mouse: {
+                x: e.clientX,
+                y: e.clientY,
+            }
+        })
+    }
+
+    React.useLayoutEffect(() => {
+        if (!canvasRef) return; // guard rail
+        const canvas = canvasRef.current;
+        if (!canvas) return; // guard rail
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return; // guard rail
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        for (let i = 0; i < Stars.numStars; i++) {
+            const s = Stars.stars[i];
+            if (s.x > window.innerWidth || s.x < 0) {
+                s.x = clamp(s.x, 0, window.innerWidth);
+                s.vx = -s.vx;
+                pushAwayFromWall(s, canvas);
+            }
+            if (s.y > window.innerHeight || s.y < 0) {
+                s.y = clamp(s.y, 0, window.innerHeight);
+                s.vy = -s.vy;
+                pushAwayFromWall(s, canvas);
+            }
+            s.x += s.vx / Stars.FPS;
+            s.y += s.vy / Stars.FPS;
+
+            if (s.x < 0 || s.x > canvas.width) s.vx = -s.vx;
+            if (s.y < 0 || s.y > canvas.height) s.vy = -s.vy;
+            if (distance(s,Stars.mouse) < Stars.mDistance) {
+                const dx = s.x - Stars.mouse.x;
+                const dy = s.y - Stars.mouse.y;
+                // const angle = Math.atan2(dy, dx);
+                const magnitude = Math.sqrt(dx * dx + dy * dy);
+                if (magnitude < Stars.mDistance) {
+                    const udx = dx / magnitude;
+                    const udy = dy / magnitude;
+                    const sdx = udx * Stars.mDistance;
+                    const sdy = udy * Stars.mDistance;
+                    const speedFactor = (Stars.mDistance - magnitude) / Stars.mDistance;
+                    s.x += udx * speedFactor * (Stars.mDistance - magnitude);
+                    s.y += udy * speedFactor * (Stars.mDistance - magnitude);
+                    s.vx += sdx * speedFactor * (Stars.mDistance - magnitude);
+                    s.vy += sdy * speedFactor * (Stars.mDistance - magnitude);
+                }
+            }
+            const speed = Math.sqrt(s.vx * s.vx + s.vy * s.vy);
+            if (speed > Stars.velMax / 2) {
+                const excessSpeedRatio = (Stars.velMax / 2) / speed;
+                s.vx *= excessSpeedRatio * Stars.friction;
+                s.vy *= excessSpeedRatio * Stars.friction;
+            }
+        }
+        draw(ctx)
+    }, [draw, Stars])
+    return (<canvas className='absolute left-0 top-0 w-full h-full -z-50' ref={canvasRef} onMouseMove={mouseMove}></canvas>);
+};
+
+export default Stars;
diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
index 34b00d5..ff09a14 100644
--- a/app/components/ui/badge.tsx
+++ b/app/components/ui/badge.tsx
@@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "/app/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
       },
     },
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index 05df5dc..c25bb07 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -5,25 +5,26 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "/app/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: {
diff --git a/app/components/ui/data-table.tsx b/app/components/ui/data-table.tsx
new file mode 100644
index 0000000..4cf6bfe
--- /dev/null
+++ b/app/components/ui/data-table.tsx
@@ -0,0 +1,80 @@
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+} from "@tanstack/react-table"
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from "~/components/ui/table"
+
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[]
+    data: TData[]
+    className?: string
+}
+
+export function DataTable<TData, TValue>({
+    columns,
+    data,
+    className,
+}: DataTableProps<TData, TValue>) {
+    const table = useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    })
+
+    return (
+        <div className="rounded-md border">
+            <Table className={className}>
+                <TableHeader>
+                    {table.getHeaderGroups().map((headerGroup) => (
+                        <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                                return (
+                                    <TableHead key={header.id}>
+                                        {header.isPlaceholder
+                                            ? null
+                                            : flexRender(
+                                                header.column.columnDef.header,
+                                                header.getContext()
+                                            )}
+                                    </TableHead>
+                                )
+                            })}
+                        </TableRow>
+                    ))}
+                </TableHeader>
+                <TableBody>
+                    {table.getRowModel().rows?.length ? (
+                        table.getRowModel().rows.map((row) => (
+                            <TableRow
+                                key={row.id}
+                                data-state={row.getIsSelected() && "selected"}
+                            >
+                                {row.getVisibleCells().map((cell) => (
+                                    <TableCell key={cell.id}>
+                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        ))
+                    ) : (
+                        <TableRow>
+                            <TableCell colSpan={columns.length} className="h-24 text-center">
+                                No data available
+                            </TableCell>
+                        </TableRow>
+                    )}
+                </TableBody>
+            </Table>
+        </div>
+    )
+}
diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
index 08d01e3..82bfbc0 100644
--- a/app/components/ui/dropdown-menu.tsx
+++ b/app/components/ui/dropdown-menu.tsx
@@ -2,7 +2,11 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
 
 import { cn } from "/app/utils"
 
@@ -34,7 +38,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName =
@@ -65,7 +69,8 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -107,7 +112,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <CheckIcon className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -130,7 +135,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <DotFilledIcon className="h-4 w-4 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
index 92af3cd..3175383 100644
--- a/app/components/ui/table.tsx
+++ b/app/components/ui/table.tsx
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}
@@ -87,7 +87,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn(
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
     {...props}
   />
 ))
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
index 45db322..6163ebf 100644
--- a/app/entry.server.tsx
+++ b/app/entry.server.tsx
@@ -6,7 +6,7 @@
 
 import { PassThrough } from "node:stream";
 
-import type { AppLoadContext, EntryContext } from "@remix-run/node";
+import type { EntryContext } from "@remix-run/node";
 import { createReadableStreamFromReadable } from "@remix-run/node";
 import { RemixServer } from "@remix-run/react";
 import { isbot } from "isbot";
@@ -22,7 +22,7 @@ export default function handleRequest(
   // This is ignored so we can keep it in the template for visibility.  Feel
   // free to delete this parameter in your app if you're not using it!
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  loadContext: AppLoadContext
+  // loadContext: AppLoadContext
 ) {
   return isbot(request.headers.get("user-agent") || "")
     ? handleBotRequest(
diff --git a/app/root.tsx b/app/root.tsx
index f573dba..d5089e1 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -14,6 +14,7 @@ import { themeSessionResolver } from "./sessions.server";
 
 import { Navbar } from "~/components/Navbar";
 import { LoaderFunctionArgs } from "@remix-run/node";
+// import { Stars, defaultStars } from "~/components/Stars";
 
 import { authenticator } from "~/auth.server";
 
@@ -32,10 +33,11 @@ export function App() {
   const pages = [
     { href: "/", label: "Home" },
     { href: "bans", label: "Bans" },
-    { href: "//leaderboards.triumphtf2.com", label: "Leaderboards" },
+    // { href: "leaderboard", label: "Leaderboards" },
+    { href: "//discord.com/invite/g53the6dfM", label: "Discord", target:"_blank" },
   ]
   return (
-    <html lang="en" className={clsx(theme)}>
+    <html lang="en" data-theme={clsx(theme)} className={clsx(theme) + ''}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -43,8 +45,9 @@ export function App() {
         <PreventFlashOnWrongTheme ssrTheme={Boolean(data.theme)} />
         <Links />
       </head>
-      <body className="bg-background dark:bg-foreground">
+      <body className={`${clsx(theme)} bg-zinc-950 text-primary-foreground dark:bg-zinc-50 dark:text-secondary-foreground`}>
         <Navbar siteTitle="TriumphTF2" items={pages} user={data.auth} />
+        {/* <Stars {...defaultStars} /> */}
         <Outlet />
         <ScrollRestoration />
         <Scripts />
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 7bb0cfb..8b6507f 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -56,8 +56,8 @@ export default function Index() {
   return (
     <ThemeProvider specifiedTheme={theme} themeAction="/action/set-theme">
     <div>
-      <div className="container mx-auto">
-        <h1 className="text-4xl font-bold text-primary dark:text-secondary">TriumphTF2 Servers</h1>
+      <div className="container mx-auto p-4">
+        {/* <h1 className="text-4xl font-bold text-primary-foreground dark:text-secondary-foreground">TriumphTF2 Servers</h1> */}
 
         <div className="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 justify-center gap-2">
           <Suspense fallback={<ServerSkeleton />}>
diff --git a/app/routes/bans/index.tsx b/app/routes/bans/index.tsx
index fec05ba..84cdd48 100644
--- a/app/routes/bans/index.tsx
+++ b/app/routes/bans/index.tsx
@@ -102,7 +102,7 @@ export default function Bans() {
         <ThemeProvider specifiedTheme={data.theme} themeAction="/action/set-theme">
             <div>
                 <div className="container mx-auto py-4">
-                    <h1 className="text-4xl font-bold text-primary dark:text-secondary py-4"><Link to="https://bans.triumphtf2.com/">Click here to go to the classic Bans page</Link></h1>
+                    <h1 className="text-4xl font-bold dark:text-primary text-secondary py-4"><Link to="https://bans.triumphtf2.com/">Click here to go to the classic Bans page</Link></h1>
                     <div className='flex gap-8'>
                         <div className="flex-1">
                             <Table className="">
diff --git a/app/routes/leaderboard/index.tsx b/app/routes/leaderboard/index.tsx
new file mode 100644
index 0000000..a9f2c4e
--- /dev/null
+++ b/app/routes/leaderboard/index.tsx
@@ -0,0 +1,47 @@
+import { Stats, StatsColumns } from "~/typedefs/leaderboards"
+import { defer, useLoaderData, Await, type MetaFunction } from "@remix-run/react";
+import { DataTable } from "~/components/ui/data-table"
+import { drizzle } from "drizzle-orm/mysql2";
+import mysql from "mysql2/promise";
+import * as schema from "~/db/mgemod/schema";
+import { themeSessionResolver } from "~/sessions.server";
+import { LoaderFunctionArgs } from "@remix-run/node";
+
+export const meta: MetaFunction = () => {
+    return [
+        { title: 'TriumphTF2 - Leaderboard' },
+        { description: 'TriumphTF2 MGE Mod Leaderboard' },
+    ];
+};
+
+export async function loader ({ request }: LoaderFunctionArgs) {
+    const { getTheme } = await themeSessionResolver(request);
+    const connection = await mysql.createConnection({
+        host: process.env.MGEMOD_DB_HOST,
+        user: process.env.MGEMOD_DB_USER,
+        password: process.env.MGEMOD_DB_PASSWORD,
+        database: process.env.MGEMOD_DB_NAME,
+        port: parseInt(process.env.MGEMOD_DB_PORT ?? "3306"),
+    });
+    const db = drizzle(connection, {schema, mode: 'default'});
+    const stats = await db.select().from(schema.mgemodStats).limit(10);
+    // sort by rating
+    stats.sort((a, b) => b.rating - a.rating);
+    connection.destroy();
+    return defer({
+        theme: getTheme(),
+        stats: stats as Stats[],
+    });
+}
+
+export default function Leaderboard() {
+    // const stats = getData();
+    const data = useLoaderData<typeof loader>();
+    return (
+        <div className="container mx-auto py-10">
+            <Await resolve={data.stats}>
+                <DataTable className={data.theme?.toString()} columns={StatsColumns} data={data.stats} />
+            </Await>
+        </div>
+    )
+}
diff --git a/app/tailwind.css b/app/tailwind.css
index 6e9bca4..347c742 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -4,62 +4,66 @@
 
 
 
+
+
 @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 224 71.4% 4.1%;
-      --card: 0 0% 100%;
-      --card-foreground: 224 71.4% 4.1%;
-      --popover: 0 0% 100%;
-      --popover-foreground: 224 71.4% 4.1%;
-      --primary: 220.9 39.3% 11%;
-      --primary-foreground: 210 20% 98%;
-      --secondary: 220 14.3% 95.9%;
-      --secondary-foreground: 220.9 39.3% 11%;
-      --muted: 220 14.3% 95.9%;
-      --muted-foreground: 220 8.9% 46.1%;
-      --accent: 220 14.3% 95.9%;
-      --accent-foreground: 220.9 39.3% 11%;
-      --destructive: 0 84.2% 60.2%;
-      --destructive-foreground: 210 20% 98%;
-      --border: 220 13% 91%;
-      --input: 220 13% 91%;
-      --ring: 224 71.4% 4.1%;
-      --radius: 0.5rem;
-      --chart-1: 12 76% 61%;
-      --chart-2: 173 58% 39%;
-      --chart-3: 197 37% 24%;
-      --chart-4: 43 74% 66%;
-      --chart-5: 27 87% 67%;
-    }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.3rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
 
-    .dark {
-      --background: 224 71.4% 4.1%;
-      --foreground: 210 20% 98%;
-      --card: 224 71.4% 4.1%;
-      --card-foreground: 210 20% 98%;
-      --popover: 224 71.4% 4.1%;
-      --popover-foreground: 210 20% 98%;
-      --primary: 210 20% 98%;
-      --primary-foreground: 220.9 39.3% 11%;
-      --secondary: 215 27.9% 16.9%;
-      --secondary-foreground: 210 20% 98%;
-      --muted: 215 27.9% 16.9%;
-      --muted-foreground: 217.9 10.6% 64.9%;
-      --accent: 215 27.9% 16.9%;
-      --accent-foreground: 210 20% 98%;
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 20% 98%;
-      --border: 215 27.9% 16.9%;
-      --input: 215 27.9% 16.9%;
-      --ring: 216 12.2% 83.9%;
-      --chart-1: 220 70% 50%;
-      --chart-2: 160 60% 45%;
-      --chart-3: 30 80% 55%;
-      --chart-4: 280 65% 60%;
-      --chart-5: 340 75% 55%;
-    }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
+}
+
+
 
 .ban-card-grid {
   display: grid;
@@ -72,7 +76,6 @@
 
   span.header {
     display:inline-block;
-    background-color: hsl(var(--primary));
     height:1.125rem;
     border-radius: 100px;
     margin:0px 0;
@@ -83,7 +86,6 @@
   }
   span.text {
     display: inline-block;
-    background-color: hsl(var(--primary));
     height: 12px;
     border-radius: 100px;
     margin: 5px 0;
@@ -101,7 +103,6 @@
   }
   span.text-short {
     display: inline-block;
-    background-color: hsl(var(--primary));
     height: 12px;
     border-radius: 100px;
     margin: 5px 0;
@@ -119,7 +120,6 @@
   }
   span.number {
     display: inline-block;
-    background-color: hsl(var(--primary));
     height: 1.5rem;
     /* line-height: 2rem; */
     border-radius: 100px;
diff --git a/app/typedefs/leaderboards.tsx b/app/typedefs/leaderboards.tsx
new file mode 100644
index 0000000..21b8511
--- /dev/null
+++ b/app/typedefs/leaderboards.tsx
@@ -0,0 +1,51 @@
+import { ColumnDef } from "@tanstack/react-table"
+
+export type Duel = {
+    id: number
+    winner: string // STEAMID
+    loser: string // STEAMID
+    winnerscore: number
+    loserscore: number
+    winlimit: number
+    gametime: number // Unix timestamp
+    mapname: string // eg mge_triumph_beta4
+    arenaname: string
+}
+
+export type Stats = {
+    id: number
+    rating: number
+    steamid: string // STEAMID
+    name: string
+    wins: number
+    losses: number
+    lastplayed: number // Unix timestamp
+    hitblip: number // usually 1 but including all the same
+}
+
+export const StatsColumns: ColumnDef<Stats>[] = [
+    {
+        accessorKey: "name",
+        header: "Name",
+    },
+    {
+        accessorKey: "steamid",
+        header: "SteamID",
+    },
+    {
+        accessorKey: "rating",
+        header: "Rating",
+    },
+    {
+        accessorKey: "wins",
+        header: "Wins",
+    },
+    {
+        accessorKey: "losses",
+        header: "Losses",
+    },
+    {
+        accessorKey: "lastplayed",
+        header: "Last Played",
+    }
+]
diff --git a/components.json b/components.json
index 8abc312..addd96c 100644
--- a/components.json
+++ b/components.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "rsc": true,
   "tsx": true,
   "tailwind": {
@@ -14,4 +14,4 @@
     "components": "app/components",
     "utils": "/app/utils"
   }
-}
\ No newline at end of file
+}
diff --git a/package-lock.json b/package-lock.json
index 585b717..5b3ee93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,11 @@
         "@radix-ui/react-dropdown-menu": "^2.1.1",
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
-        "@remix-run/node": "2.11.2",
-        "@remix-run/react": "2.11.2",
-        "@remix-run/serve": "2.11.2",
+        "@remix-run/node": "^2.11.0",
+        "@remix-run/react": "^2.11.0",
+        "@remix-run/serve": "^2.11.0",
         "@tanstack/react-table": "^8.20.1",
+        "@uidotdev/usehooks": "^2.4.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "drizzle-orm": "^0.32.2",
@@ -2465,38 +2466,12 @@
         }
       }
     },
-    "node_modules/@remix-run/dev/node_modules/@remix-run/node": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/node/-/node-2.11.0.tgz",
-      "integrity": "sha512-YAaueZqsCPgMlDCS3J66I6OV9xCnSw6IKZccrn/Kt1EsEM67SmOAi74bQNSPh6ayqnKkIcqPSKqMOb8v5ASLoA==",
-      "dev": true,
-      "dependencies": {
-        "@remix-run/server-runtime": "2.11.0",
-        "@remix-run/web-fetch": "^4.4.2",
-        "@web3-storage/multipart-parser": "^1.0.0",
-        "cookie-signature": "^1.1.0",
-        "source-map-support": "^0.5.21",
-        "stream-slice": "^0.1.2",
-        "undici": "^6.11.1"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "peerDependencies": {
-        "typescript": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@remix-run/express": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/express/-/express-2.11.2.tgz",
-      "integrity": "sha512-ebyvHJKRBDgQGNBMxsILt21IwMTjGxQxlr0VNxRJo5rNd5CcuULpx/PPmsBc1gsc/Jx9aUXpT7a9l0UEOc6+jw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/express/-/express-2.11.0.tgz",
+      "integrity": "sha512-ztfm9x6Rgl7CxZCvzBD54nXPg49CSssh+LKNKVcPpDf02Djq1DN1ArUfnSPN3u9Dg6TLSs5SFmayGkBwx6vDKg==",
       "dependencies": {
-        "@remix-run/node": "2.11.2"
+        "@remix-run/node": "2.11.0"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -2512,11 +2487,11 @@
       }
     },
     "node_modules/@remix-run/node": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/node/-/node-2.11.2.tgz",
-      "integrity": "sha512-gRNFM61EOYWNmYgf+pvBt6MrirWlkDz1G6RQsJNowtRqbYoy05AdDe5HiHGF5w8ZMAZVeXnZiwbL0Nt7ykYBCA==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/node/-/node-2.11.0.tgz",
+      "integrity": "sha512-YAaueZqsCPgMlDCS3J66I6OV9xCnSw6IKZccrn/Kt1EsEM67SmOAi74bQNSPh6ayqnKkIcqPSKqMOb8v5ASLoA==",
       "dependencies": {
-        "@remix-run/server-runtime": "2.11.2",
+        "@remix-run/server-runtime": "2.11.0",
         "@remix-run/web-fetch": "^4.4.2",
         "@web3-storage/multipart-parser": "^1.0.0",
         "cookie-signature": "^1.1.0",
@@ -2536,54 +2511,16 @@
         }
       }
     },
-    "node_modules/@remix-run/node/node_modules/@remix-run/router": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
-      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@remix-run/node/node_modules/@remix-run/server-runtime": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/server-runtime/-/server-runtime-2.11.2.tgz",
-      "integrity": "sha512-abG6ENj0X3eHqDxqO2thWM2NSEiPnqyt58z1BbiQCv+t8g0Zuqd5QHbB4wzdNvfS0vKhg+jJiigcJneAc4sZzw==",
-      "dependencies": {
-        "@remix-run/router": "1.19.1",
-        "@types/cookie": "^0.6.0",
-        "@web3-storage/multipart-parser": "^1.0.0",
-        "cookie": "^0.6.0",
-        "set-cookie-parser": "^2.4.8",
-        "source-map": "^0.7.3",
-        "turbo-stream": "2.3.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "peerDependencies": {
-        "typescript": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@remix-run/node/node_modules/turbo-stream": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.3.0.tgz",
-      "integrity": "sha512-PhEr9mdexoVv+rJkQ3c8TjrN3DUghX37GNJkSMksoPR4KrXIPnM2MnqRt07sViIqX9IdlhrgtTSyjoVOASq6cg=="
-    },
     "node_modules/@remix-run/react": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/react/-/react-2.11.2.tgz",
-      "integrity": "sha512-SjjuK3aD/9wnIC5r0ZBNCpVSwEwt67YOQM7DCXhHiS8BtCvAxWEC4k4t8CvO9IwBG0gczqxzSqASH7U1RVtWqw==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/react/-/react-2.11.0.tgz",
+      "integrity": "sha512-XncDiwDAm6NFiUtISBieAJylb0Y9E66XKbFd0PDgYNbJWd7jMmJN3ZFnFggLKLt7KhtR6wepkW83BhmI7I7+aw==",
       "dependencies": {
-        "@remix-run/router": "1.19.1",
-        "@remix-run/server-runtime": "2.11.2",
-        "react-router": "6.26.1",
-        "react-router-dom": "6.26.1",
-        "turbo-stream": "2.3.0"
+        "@remix-run/router": "1.19.0",
+        "@remix-run/server-runtime": "2.11.0",
+        "react-router": "6.26.0",
+        "react-router-dom": "6.26.0",
+        "turbo-stream": "2.2.0"
       },
       "engines": {
         "node": ">=18.0.0"
@@ -2599,44 +2536,6 @@
         }
       }
     },
-    "node_modules/@remix-run/react/node_modules/@remix-run/router": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
-      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@remix-run/react/node_modules/@remix-run/server-runtime": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/server-runtime/-/server-runtime-2.11.2.tgz",
-      "integrity": "sha512-abG6ENj0X3eHqDxqO2thWM2NSEiPnqyt58z1BbiQCv+t8g0Zuqd5QHbB4wzdNvfS0vKhg+jJiigcJneAc4sZzw==",
-      "dependencies": {
-        "@remix-run/router": "1.19.1",
-        "@types/cookie": "^0.6.0",
-        "@web3-storage/multipart-parser": "^1.0.0",
-        "cookie": "^0.6.0",
-        "set-cookie-parser": "^2.4.8",
-        "source-map": "^0.7.3",
-        "turbo-stream": "2.3.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      },
-      "peerDependencies": {
-        "typescript": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@remix-run/react/node_modules/turbo-stream": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.3.0.tgz",
-      "integrity": "sha512-PhEr9mdexoVv+rJkQ3c8TjrN3DUghX37GNJkSMksoPR4KrXIPnM2MnqRt07sViIqX9IdlhrgtTSyjoVOASq6cg=="
-    },
     "node_modules/@remix-run/router": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.0.tgz",
@@ -2646,12 +2545,12 @@
       }
     },
     "node_modules/@remix-run/serve": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/@remix-run/serve/-/serve-2.11.2.tgz",
-      "integrity": "sha512-f1ETbCAlkSO3kg1zcQyLVHxI2r1TXqV2nfPgX/5+7QmA1dEHJD3OhvSmbvopwSMSfi1jzuyRbJo04yK4aJ8ztg==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/serve/-/serve-2.11.0.tgz",
+      "integrity": "sha512-Cxec7HoIVparyPvfVc+NhF4u9MfdsYNe6T7r9lbUWxlypPuGjKRcnLVZZwhg6/XHMbNryH8Rw7vw0QExKBCypg==",
       "dependencies": {
-        "@remix-run/express": "2.11.2",
-        "@remix-run/node": "2.11.2",
+        "@remix-run/express": "2.11.0",
+        "@remix-run/node": "2.11.0",
         "chokidar": "^3.5.3",
         "compression": "^1.7.4",
         "express": "^4.19.2",
@@ -3353,6 +3252,18 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@uidotdev/usehooks": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@uidotdev/usehooks/-/usehooks-2.4.1.tgz",
+      "integrity": "sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==",
+      "engines": {
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -11073,11 +10984,11 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.26.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
-      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.0.tgz",
+      "integrity": "sha512-wVQq0/iFYd3iZ9H2l3N3k4PL8EEHcb0XlU2Na8nEwmiXgIUElEH6gaJDtUQxJ+JFzmIXaQjfdpcGWaM6IoQGxg==",
       "dependencies": {
-        "@remix-run/router": "1.19.1"
+        "@remix-run/router": "1.19.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -11087,12 +10998,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.26.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
-      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.0.tgz",
+      "integrity": "sha512-RRGUIiDtLrkX3uYcFiCIxKFWMcWQGMojpYZfcstc63A1+sSnVgILGIm9gNUA6na3Fm1QuPGSBQH2EMbAZOnMsQ==",
       "dependencies": {
-        "@remix-run/router": "1.19.1",
-        "react-router": "6.26.1"
+        "@remix-run/router": "1.19.0",
+        "react-router": "6.26.0"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -11102,22 +11013,6 @@
         "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-router-dom/node_modules/@remix-run/router": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
-      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/react-router/node_modules/@remix-run/router": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
-      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
diff --git a/package.json b/package.json
index 6426745..312f7d5 100644
--- a/package.json
+++ b/package.json
@@ -15,10 +15,11 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@remix-run/node": "2.11.2",
-    "@remix-run/react": "2.11.2",
-    "@remix-run/serve": "2.11.2",
+    "@remix-run/node": "^2.11.0",
+    "@remix-run/react": "^2.11.0",
+    "@remix-run/serve": "^2.11.0",
     "@tanstack/react-table": "^8.20.1",
+    "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "drizzle-orm": "^0.32.2",