new leaderboard (includes update leaderboard for all the times):

get leaderboardTable(){
        // create table element
        var t = document.createElement("table");
        t.className = "table scores";
        //create table header
        var header = document.createElement("tr");
        var th1 = document.createElement("th");
        th1.innerText = "Name";
        header.append(th1);
        var th2 = document.createElement("th");
        th2.innerText = "Score";
        header.append(th2);
        t.append(header);

        this.table = t;

        return t;
    }

    updateLeaderboardTable() {
        // Fetch time scores from local storage
        const timeScores = JSON.parse(localStorage.getItem(this.key)) || [];
        console.log(timeScores,this.key)

        // Get the existing table element
        const table = this.table;

        // Clear the table content
        table.innerHTML = "";

        // Recreate the table header
        var header = document.createElement("tr");
        var th1 = document.createElement("th");
        th1.innerText = "Name";
        header.append(th1);
        var th2 = document.createElement("th");
        th2.innerText = "Score";
        header.append(th2);
        table.append(header);

        // Populate the table with time scores
        timeScores.forEach(score => {
            var row = document.createElement("tr");
            var td1 = document.createElement("td");
            td1.innerText = score.userID;
            row.append(td1);
            var td2 = document.createElement("td");
            td2.innerText = score.time;
            row.append(td2);
            table.append(row);
        });
    }

and heres our filter + clear buttons:

get clearButton() {
        const div = document.createElement("div");
        div.innerHTML = "Clear Leaderboard: ";
        
        const button = document.createElement("button");
        button.innerText = "Clear!";
    
        button.addEventListener("click", () => {
            const confirmed = confirm("Are you sure you want to clear the leaderboard?");
            if (confirmed) {
                localStorage.clear();
                this.updateLeaderboardTable();
            }
        });
    
        div.append(button); // wrap button element in div
        return div;
    }
    

    get filter() {
        const div = document.createElement("div");
        div.innerHTML = "Filters: ";
    
        const filter = document.createElement("select");
        const options = ["low", "high"];

        options.forEach(option => {
            const opt = document.createElement("option");
            opt.value = option.toLowerCase();
            opt.text = option;
            filter.add(opt);
        });

        div.append(filter); // wrap button element in div
        return div;
    }

here’s what the new gamecontrol looks like (modified for leaderboard):

updateTimer() {
        const id = document.getElementById("gameOver");
    
        const elapsedTime = (Date.now() - this.startTime) / 1000;

        if (id.hidden == false) {
            this.stopTimer();
            // Get the current user ID from SettingsControl
            const userID = GameEnv.userID
    
            // Retrieve existing time scores from local storage
            const existingTimeScores = JSON.parse(localStorage.getItem('timeScores')) || [];
            const existingTimeScores2 = JSON.parse(localStorage.getItem('GtimeScores')) || [];
        
            // Add the new time score with user ID to the array
            const newTimeScore = {
                userID: userID,
                time: elapsedTime.toFixed(2),
                // You can add more properties if needed
            };
            existingTimeScores.push(newTimeScore);
            existingTimeScores2.push(newTimeScore);

            // Log the updated array to the console for debugging
            console.log(existingTimeScores);

            // Save the updated array to local storage
            localStorage.setItem('timeScores', JSON.stringify(existingTimeScores));
            localStorage.setItem('GtimeScores', JSON.stringify(existingTimeScores2));

            Socket.sendData("leaderboard",elapsedTime.toFixed(2));
        
        }
    
        const timeScoreElement = document.getElementById('timeScore');
        if (timeScoreElement) {
            // Update the displayed time
            timeScoreElement.textContent = elapsedTime.toFixed(2);
    
            // Get the current user ID from SettingsControl
            const userID = SettingsControl.userID;
        }
},