Add placeholder buttons for Level and Total XP leaderboards ( will add some time) + support golden berry and switching berries on berry menu, for some reason wasn't already a thing

src/app/game/berry-dash/leaderboards/page.tsx

@@ -2,10 +2,11 @@
 
 import { BackButton } from '@/app/components/BackButton'
 import { DiscordButton } from '@/app/components/DiscordButton'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { BirdColor } from '../chatroom/page'
 import axios from 'axios'
 import { GetIconForUser } from '@/util/bd'
+import Image from 'next/image'
 
 interface LeaderboardEntry {
   id: number
@@ -24,7 +25,7 @@ export default function BerryDashLeaderboards () {
   const [gettingEntries, setGettingEntries] = useState<boolean>(false)
   const [entries, setEntries] = useState<LeaderboardEntry[]>([])
 
-  const Refresh = async () => {
+  const Refresh = useCallback(async () => {
     setGettingEntries(true)
     try {
       const result = await axios.get(
@@ -46,15 +47,15 @@ export default function BerryDashLeaderboards () {
       setEntries([])
     }
     setGettingEntries(false)
-  }
+  }, [selected, selectedBerryOption])
 
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Leaderboards'
   }, [])
 
   useEffect(() => {
-    if (selected != -1) Refresh()
-  }, [selected])
+    if (selected != -1) setTimeout(() => Refresh(), 0)
+  }, [selected, Refresh])
 
   return (
     <div className='box'>
@@ -81,7 +82,13 @@ export default function BerryDashLeaderboards () {
             <button onClick={() => setSelected(0)}>Score Leaderboard</button>
             <button onClick={() => setSelected(1)}>Berry Leaderboard</button>
             <button onClick={() => setSelected(2)}>Coins Leaderboard</button>
-            <button onClick={() => setSelected(3)}>Legacy Leaderboard</button>
+            <button onClick={() => setSelected(3)} disabled={true}>
+              Level Leaderboard
+            </button>
+            <button onClick={() => setSelected(4)} disabled={true}>
+              Total XP Leaderboard
+            </button>
+            <button onClick={() => setSelected(5)}>Legacy Leaderboard</button>
             <button onClick={() => setSelected(4)}>
               Total Berries Leaderboard
             </button>
@@ -97,7 +104,7 @@ export default function BerryDashLeaderboards () {
                   className='flex justify-between items-center'
                 >
                   <div className='flex items-center gap-1'>
-                    <img
+                    <Image
                       src={
                         !item.customIcon
                           ? `https://games-r2.lncvrt.xyz/game-assets/berrydash/icons/bird_${
@@ -112,6 +119,8 @@ export default function BerryDashLeaderboards () {
                       className='pointer-events-none'
                       width={48}
                       height={48}
+                      alt=''
+                      unoptimized={true}
                     />
                     <p>
                       {item.username} (#{index + 1})
@@ -129,6 +138,25 @@ export default function BerryDashLeaderboards () {
               )
             })}
           </div>
+          {selected == 1 && (
+            <div className='flex justify-center'>
+              <select
+                value={selectedBerryOption}
+                onChange={e => setSelectedBerryOption(Number(e.target.value))}
+                className='-my-4 mt-2'
+              >
+                <option value='0'>Normal Berry</option>
+                <option value='1'>Poison Berry</option>
+                <option value='2'>Slow Berry</option>
+                <option value='3'>Ultra Berry</option>
+                <option value='4'>Speedy Berry</option>
+                <option value='5'>Coin Berry</option>
+                <option value='6'>Random Berry</option>
+                <option value='7'>Anti Berry</option>
+                <option value='8'>Golden Berry</option>
+              </select>
+            </div>
+          )}
         </>
       )}
     </div>

src/app/globals.css

@@ -71,6 +71,10 @@ select {
   @apply bg-(--col4) hover:bg-(--col5) border border-(--col6) hover:border-(--col8) hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer;
 }
 
+button:disabled {
+  @apply bg-(--col3) hover:bg-(--col4) border border-(--col5) hover:border-(--col7);
+}
+
 .top-button {
   @apply bg-(--col4) hover:bg-(--col5) border border-(--col6) hover:border-(--col7) hover:-translate-y-px rounded-full transition-all h-10 w-10 flex items-center justify-center;
 }