diff --git a/src/app/assets/berries/Berry.png b/src/app/assets/berries/Berry.png new file mode 100644 index 0000000..0530437 Binary files /dev/null and b/src/app/assets/berries/Berry.png differ diff --git a/src/app/assets/berries/CoinBerry.png b/src/app/assets/berries/CoinBerry.png new file mode 100644 index 0000000..0800eb7 Binary files /dev/null and b/src/app/assets/berries/CoinBerry.png differ diff --git a/src/app/assets/berries/GoldenBerry.png b/src/app/assets/berries/GoldenBerry.png new file mode 100644 index 0000000..32eb43f Binary files /dev/null and b/src/app/assets/berries/GoldenBerry.png differ diff --git a/src/app/assets/berries/PoisonBerry.png b/src/app/assets/berries/PoisonBerry.png new file mode 100644 index 0000000..67d44f5 Binary files /dev/null and b/src/app/assets/berries/PoisonBerry.png differ diff --git a/src/app/assets/berries/SlowBerry.png b/src/app/assets/berries/SlowBerry.png new file mode 100644 index 0000000..2c30be4 Binary files /dev/null and b/src/app/assets/berries/SlowBerry.png differ diff --git a/src/app/assets/berries/SpeedyBerry.png b/src/app/assets/berries/SpeedyBerry.png new file mode 100644 index 0000000..7674420 Binary files /dev/null and b/src/app/assets/berries/SpeedyBerry.png differ diff --git a/src/app/assets/berries/UltraBerry.png b/src/app/assets/berries/UltraBerry.png new file mode 100644 index 0000000..a5471d6 Binary files /dev/null and b/src/app/assets/berries/UltraBerry.png differ diff --git a/src/app/leaderboards/Leaderboards.css b/src/app/leaderboards/Leaderboards.css index dbfd06a..c5081fa 100644 --- a/src/app/leaderboards/Leaderboards.css +++ b/src/app/leaderboards/Leaderboards.css @@ -1,11 +1,11 @@ @import "tailwindcss"; .leaderboard-container { - @apply flex justify-center; + @apply flex items-end justify-center gap-3; } .leaderboard-scroll { - @apply h-[510px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto w-[475px]; + @apply h-[510px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto w-[475px] relative; } .leaderboard-entry { @@ -15,3 +15,39 @@ .leaderboard-entry p.score { @apply font-mono text-blue-500 text-lg; } + +.side-dropdown { + @apply flex items-end min-w-[52px]; +} + +.dropdown-root { + @apply relative w-max; +} + +.dropdown-btn { + @apply px-3 py-2 rounded-md bg-[#242424] disabled:bg-[#161616] border border-[#484848] disabled:border-[#383838] text-gray-200 hover:bg-[#323232] hover:border-[#565656] transition-colors cursor-pointer; +} + +.dropdown-menu { + @apply absolute bottom-full mb-2 w-45 bg-[#242424] border border-[#484848] rounded-md shadow-lg hidden z-50; +} + +.dropdown-left .dropdown-menu { + @apply left-0; +} + +.dropdown-right .dropdown-menu { + @apply right-0 w-40; +} + +.dropdown-menu.open { + @apply block; +} + +.dropdown-item { + @apply block w-full text-left px-4 py-2 hover:bg-[#323232] text-gray-200 cursor-pointer; +} + +.dropdown-item.selected { + @apply bg-[#323232] hover:bg-[#484848]; +} diff --git a/src/app/leaderboards/page.tsx b/src/app/leaderboards/page.tsx index 5171185..4f12ff0 100644 --- a/src/app/leaderboards/page.tsx +++ b/src/app/leaderboards/page.tsx @@ -1,28 +1,57 @@ 'use client' -import { useEffect, useState } from 'react' +import { useCallback, useEffect, useRef, useState } from 'react' import './Leaderboards.css' import axios from 'axios' import { app } from '@tauri-apps/api' import { platform } from '@tauri-apps/plugin-os' -import { decrypt } from '../util/Encryption' +import { decrypt, encrypt } from '../util/Encryption' import { invoke } from '@tauri-apps/api/core' import Image from 'next/image' import { LeaderboardResponse } from '../types/LeaderboardResponse' +import { faChevronDown } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { getKey } from '../util/KeysHelper' + +import Berry from '../assets/berries/Berry.png' +import PoisonBerry from '../assets/berries/PoisonBerry.png' +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' export default function Leaderboards () { const [leaderboardData, setLeaderboardData] = useState(null) const [loading, setLoading] = useState(true) + const [leftOpen, setLeftOpen] = useState(false) + const [rightOpen, setRightOpen] = useState(false) + const leftRef = useRef(null) + const rightRef = useRef(null) const formatter = new Intl.NumberFormat('en-US') + const [leaderboardType, setLeaderboardType] = useState(0) + const [berryType, setBerryType] = useState(0) - async function refresh () { + const refresh = useCallback(async () => { setLoading(true) setLeaderboardData(null) try { const launcherVersion = await app.getVersion() - const response = await axios.get( + const sendKey = await getKey(1) + const formData = new URLSearchParams() + formData.append( + await encrypt('type', sendKey), + await encrypt(leaderboardType.toString(), sendKey) + ) + if (leaderboardType == 1) { + formData.append( + await encrypt('showType', sendKey), + await encrypt(berryType.toString(), sendKey) + ) + } + const response = await axios.post( 'https://berrydash.lncvrt.xyz/database/getTopPlayers.php', + formData, { headers: { Requester: 'BerryDashLauncher', @@ -38,7 +67,7 @@ export default function Leaderboards () { } finally { setLoading(false) } - } + }, [leaderboardType, berryType]) function downloadLeaderboard () { let content = '"Username","Score","ScoreFormatted"\n' @@ -55,6 +84,16 @@ export default function Leaderboards () { useEffect(() => { refresh() + }, [refresh]) + + useEffect(() => { + function onDocClick (e: MouseEvent) { + const t = e.target as Node + if (leftRef.current && !leftRef.current.contains(t)) setLeftOpen(false) + if (rightRef.current && !rightRef.current.contains(t)) setRightOpen(false) + } + document.addEventListener('mousedown', onDocClick) + return () => document.removeEventListener('mousedown', onDocClick) }, []) return ( @@ -65,7 +104,7 @@ export default function Leaderboards () { @@ -78,9 +117,73 @@ export default function Leaderboards () { +
+
+
+ +
+ + + + +
+
+
+
- {leaderboardData?.entries.length ? ( + {leaderboardData?.entries?.length ? ( leaderboardData.entries.map((entry, i) => (
@@ -124,6 +227,97 @@ export default function Leaderboards () {
)}
+ +
+
+ +
+ + + + + + +
+
+
)