async function fetchLeaderboardData() {
    const response = await fetch('/api/leaderboard');
    if (!response.ok) {
        console.error('Failed to fetch leaderboard data');
        return;
    }
    const data = await response.json();
    const tableBody = document.getElementById('leaderboardTable').getElementsByTagName('tbody')[0];
    tableBody.innerHTML = ''; // Clear existing rows
    data.forEach(item => {
        const row = tableBody.insertRow();
        row.insertCell(0).innerText = item.username;
        row.insertCell(1).innerText = item.wpm;
        row.insertCell(2).innerText = item.accuracy;
        row.insertCell(3).innerText = item.test_time;
        row.insertCell(4).innerText = item.test_length;
    });
}

// Ensure this function is called on page load and when the refresh button is clicked.
document.addEventListener('DOMContentLoaded', fetchLeaderboardData);
document.getElementById('refreshButton').addEventListener('click', fetchLeaderboardData);