Tri 2 GAME CONTRIBUTIONS

1. making leaderboard.js, creating a function for the leaderboard table

at the start we created leaderboard.js to put all of the code and functions for our leaderboard. Our first focas was to create a table with sass, then we needed to make a button to add a row to the table so when we got score we could make it add a new row every time we got a new score

2. Learning and applying the use of local storage in the leaderboard

Local storage is used in order to save the scores from the game onto your device, We then use this to link your score to the leaderboard table which can be accsessed even if you close the game

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')) || [];
        
            // 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);

            // 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));
        
        }

Shown above is an example of a function I created to save your scores into a variable called “elapsed time” which is then saved into local storage or used in other files like leaderboard.js to add to the leaderboard table.

3. Crerating Multiplayer Leaderboard –> Figuring out the scores

in the creation of the multiplayer vs single player leaderboard, we first started by editing the regular leaderboard to make it multiplayer. To do this I collaborated with Trystan (someone from multiplayer group) and learned about the socket functions he created to allow you to send things through computers connected by one common server.

STEP 1: we added to the exsisting timer update function to implement this line of code

Socket.sendData("leaderboard",elapsedTime.toFixed(2));

STEP 2: listeners to listen for the code

the line of code shown above allows the user to (after making it to the end of the game) share their scores with other players computers. In order for the other players to recive this data we needed to use a listener so their computers could listen for the data, pick up the scores, and save the data to their leaderboards.

Socket.createListener("leaderboardUpdate",this.handleLeaderboardUpdates)

4. Multiplayer Leaderboard –> creating another table

finally we needed to create a diffrence between the mutliplayer and singleplayer leaderboard. To do this we used sass, duplicated the current leaderboard we had, and changed the code to work for two leaderboards not just one.

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 GexistingTimeScores = 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('timeScores2', JSON.stringify(existingTimeScores2));

        Socket.sendData("leaderboard",elapsedTime.toFixed(2));
    
    }
}

in the end, our final update timer function consisted of this shown above. We duplicated the leaderboard varriables and created a new one for the global/server leaderboard, versus the Local/personal leaderboard. Then we could tell the function to only send the data from the Multiplayer leaderboard.

5. Multiplayer Leaderboard –> Switching between multiplayer and singleplayer

our final issue was with the sass and the way the leaderboards looked. We wanted to make it so that instead of having a button to switch between the two leaderboards or two buttons for both leaderboards it would imedietly toggle to the multiplayer or singleplayer depending on weather or not you had multiplayer on or off.

To do this we implemented an If statment saying that if multiplayer was on then the leaderboard would change to multiplayer, and vice versa.

if (Socket.shouldBeSynced) {
    // turn off local
    t1.style.display = "none";
    t2.style.display = "table";

    localMultiplayer.innerHTML = "Multiplayer Leaderboard";
} else if (!Socket.shouldBeSynced) {
    // turn off multiplayer
    t2.style.display = "none";
    t1.style.display = "table";

    localMultiplayer.innerHTML = "Local Leaderboard";
}
Conclusion

main focases in the game:

what I learned: