Update leaderboards

src/app/componets/RandomBerry.tsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react'
+import Image from 'next/image'
+import BerryNoColor from '../assets/berries/BerryNoColor.png'
+
+export default function RandomBerry () {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const imgRef = useRef<HTMLImageElement>(document.createElement('img'))
+
+  useEffect(() => {
+    imgRef.current.src = BerryNoColor.src
+    const canvas = canvasRef.current
+    const ctx = canvas?.getContext('2d')
+    if (!canvas || !ctx) return
+
+    canvas.width = 24
+    canvas.height = 24
+
+    let frame: number
+    const frequency = 5
+
+    const update = () => {
+      const t = (performance.now() / 1000) * frequency
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      ctx.drawImage(imgRef.current, 0, 0, canvas.width, canvas.height)
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      const data = imageData.data
+
+      for (let i = 0; i < data.length; i += 4) {
+        const gray = data[i]
+        const r = (Math.sin(t) * 0.5 + 0.5) * 255 * (gray / 255)
+        const g = (Math.sin(t + 2) * 0.5 + 0.5) * 255 * (gray / 255)
+        const b = (Math.sin(t + 4) * 0.5 + 0.5) * 255 * (gray / 255)
+        data[i] = r
+        data[i + 1] = g
+        data[i + 2] = b
+      }
+
+      ctx.putImageData(imageData, 0, 0)
+      frame = requestAnimationFrame(update)
+    }
+
+    imgRef.current.onload = () => update()
+    return () => cancelAnimationFrame(frame)
+  }, [])
+
+  return <canvas ref={canvasRef} style={{ width: 24, height: 24 }} />
+}

src/app/leaderboards/Leaderboards.css

@@ -29,7 +29,7 @@
 }
 
 .dropdown-menu {
-  @apply absolute bottom-full mb-2 w-45 bg-[#242424] border border-[#484848] rounded-md shadow-lg hidden z-50;
+  @apply absolute bottom-full mb-2 w-55 bg-[#242424] border border-[#484848] rounded-md shadow-lg hidden z-50;
 }
 
 .dropdown-left .dropdown-menu {
@@ -37,7 +37,7 @@
 }
 
 .dropdown-right .dropdown-menu {
-  @apply right-0 w-40;
+  @apply right-0 w-42;
 }
 
 .dropdown-menu.open {

src/app/leaderboards/page.tsx

@@ -19,6 +19,8 @@ import SlowBerry from '../assets/berries/SlowBerry.png'
 import UltraBerry from '../assets/berries/UltraBerry.png'
 import SpeedyBerry from '../assets/berries/SpeedyBerry.png'
 import CoinBerry from '../assets/berries/CoinBerry.png'
+import RainbowBerry from '../componets/RandomBerry'
+import AntiBerry from '../assets/berries/AntiBerry.png'
 
 export default function Leaderboards () {
   const [leaderboardData, setLeaderboardData] =
@@ -178,6 +180,17 @@ export default function Leaderboards () {
               >
                 Legacy Leaderboard
               </button>
+              <button
+                className={`dropdown-item ${
+                  leaderboardType == 4 ? 'selected' : ''
+                }`}
+                onClick={() => {
+                  setLeftOpen(false)
+                  setLeaderboardType(4)
+                }}
+              >
+                Total Berries Leaderboard
+              </button>
             </div>
           </div>
         </div>
@@ -315,6 +328,30 @@ export default function Leaderboards () {
                   Coin Berry
                 </span>
               </button>
+              <button
+                className={`dropdown-item ${berryType == 5 ? 'selected' : ''}`}
+                onClick={() => {
+                  setRightOpen(false)
+                  setBerryType(6)
+                }}
+              >
+                <span className='flex items-center gap-2'>
+                  <RainbowBerry />
+                  Random Berry
+                </span>
+              </button>
+              <button
+                className={`dropdown-item ${berryType == 5 ? 'selected' : ''}`}
+                onClick={() => {
+                  setRightOpen(false)
+                  setBerryType(7)
+                }}
+              >
+                <span className='flex items-center gap-2'>
+                  <Image src={AntiBerry} width={24} height={24} alt='' />
+                  Anti Berry
+                </span>
+              </button>
             </div>
           </div>
         </div>