diff --git a/src/app/assets/berries/AntiBerry.png b/src/app/assets/berries/AntiBerry.png new file mode 100644 index 0000000..ad727c2 Binary files /dev/null and b/src/app/assets/berries/AntiBerry.png differ diff --git a/src/app/assets/berries/BerryNoColor.png b/src/app/assets/berries/BerryNoColor.png new file mode 100644 index 0000000..3447a1a Binary files /dev/null and b/src/app/assets/berries/BerryNoColor.png differ diff --git a/src/app/componets/RandomBerry.tsx b/src/app/componets/RandomBerry.tsx new file mode 100644 index 0000000..4657eeb --- /dev/null +++ b/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(null) + const imgRef = useRef(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 +} diff --git a/src/app/leaderboards/Leaderboards.css b/src/app/leaderboards/Leaderboards.css index c5081fa..f0f7b03 100644 --- a/src/app/leaderboards/Leaderboards.css +++ b/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 { diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx index 4f12ff0..9c44105 100644 --- a/src/app/leaderboards/page.tsx +++ b/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 + @@ -315,6 +328,30 @@ export default function Leaderboards () { Coin Berry + +