Leaderboard dim

[andrewzcsse]

Leaderboard Dimming Pull Request

• Instead of making SASS changes to the existing backdrops and level screens, I simply created a new div element dimDiv that would open whenever the existing openLeaderboardPanel function was called

create () {
            this.dim = true // sets the dim to be true when the leaderboard is opened
            console.log("CREATE DIM")
            const dimDiv = document.createElement("div");
            dimDiv.id = "dim";
            dimDiv.style.backgroundColor = "black";
            dimDiv.style.width = "100%";
            dimDiv.style.height = "100%";
            dimDiv.style.position = "absolute";
            dimDiv.style.opacity = "0.8";
            document.body.append(dimDiv);
            dimDiv.style.zIndex = "9998"
            dimDiv.addEventListener("click", Leaderboard.backgroundDim.remove)
        },

Adding the click away feature

• Initially, the leaderboard open and close were both related to the same openLeaderboardPanel function and the button served as a toggle
• This became problematic when I wanted to add the feature of allowing a user to click anywhere on the dimDiv to close the leaderboard as it introduced a difficult logic dilemma
• I edited the openLeaderboardPanel function to be exclusively assigned to opening the leaderboard and created a new remove method under backgroundDim to enable the click away via an event listener
• To gain a point of reference for how I could achieve this, I referred to this forum

remove () {
            this.dim = false
            console.log("REMOVE DIM");
            const dimDiv = document.getElementById("dim");
            dimDiv.remove();
            Leaderboard.isOpen = false
            leaderboardDropDown.style.width = this.isOpen?"70%":"0px";
            leaderboardDropDown.style.top = this.isOpen?"15%":"0px";
            leaderboardDropDown.style.left = this.isOpen?"15%":"0px";
        },

[andrewzcsse]

Merging so I can fill out my issue, no problems found in the code during class review with teammates or individual debugging at home