Files
launcher/src/routes/Leaderboards.tsx

96 lines
2.8 KiB
TypeScript

import { useEffect, useState } from 'react'
import './Leaderboards.css'
import axios from 'axios'
import { LeaderboardEntry } from '../types/LeaderboardEntry'
import { app } from '@tauri-apps/api'
import { platform } from '@tauri-apps/plugin-os'
import { decrypt } from '../util/Encryption'
import { invoke } from '@tauri-apps/api/core'
export default function Leaderboards () {
const [leaderboardData, setLeaderboardData] = useState<LeaderboardEntry[]>([])
const [loading, setLoading] = useState(true)
async function refresh () {
setLoading(true)
setLeaderboardData([])
try {
const launcherVersion = await app.getVersion()
const response = await axios.get('https://berrydash.lncvrt.xyz/database/getTopPlayers.php', {
headers: {
Requester: 'BerryDashLauncher',
LauncherVersion: launcherVersion,
ClientPlatform: platform()
}
})
const decrypted = await decrypt(response.data)
setLeaderboardData(JSON.parse(decrypted))
} catch (e) {
console.error('Error fetching leaderboard data:', e)
} finally {
setLoading(false)
}
}
function downloadLeaderboard () {
let content = 'Username,Score\n'
leaderboardData.forEach(entry => {
content += `${entry.username},${entry.value}\n`
})
while (content.endsWith('\n')) {
content = content.slice(0, -1)
}
invoke('download_leaderboard', { content })
}
useEffect(() => {
refresh()
}, [])
return (
<div className='mx-4 mt-4'>
<div className='flex justify-between items-center mb-4'>
<p className='text-3xl'>Leaderboards</p>
<div className='flex gap-2'>
<button
className='button text-3xl'
onClick={downloadLeaderboard}
disabled={loading || leaderboardData.length === 0}
>
Download Leaderboards
</button>
<button
className='button text-3xl'
onClick={refresh}
disabled={loading}
>
Refresh
</button>
</div>
</div>
<div className='leaderboard-container'>
<div className='leaderboard-scroll'>
{leaderboardData.length ? (
leaderboardData.map((entry, i) => (
<div key={entry.username} className='leaderboard-entry'>
<p>
#{i + 1} {entry.username}
</p>
<p className='score'>{entry.value}</p>
</div>
))
) : loading ? (
<div className='flex justify-center items-center h-full'>
<p className='text-3xl'>Loading...</p>
</div>
) : (
<div className='flex justify-center items-center h-full'>
<p className='text-3xl'>No data...</p>
</div>
)}
</div>
</div>
</div>
)
}