SettingsControl dim completed

[andrewzcsse]

Adding the Dim

• SettingsControl is constructed differently than the leaderboard, so my approach was a little bit different
• I created a const directly underneath SettingsControl.js as opposed the method I had to create under the leaderboard object

const backgroundDim = {
    create () {
        this.dim = true // sets the dim to be true when settingControl 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", this.remove)
    },
    remove () {
        this.dim = false
        console.log("REMOVE DIM");
        const dimDiv = document.getElementById("dim");
        dimDiv.remove();
        isOpen = false
        const sidebar = document.getElementById("sidebar")
        sidebar.style.width = isOpen?"70%":"0px";
        sidebar.style.top = isOpen?"15%":"0px";
        sidebar.style.left = isOpen?"15%":"0px";
    }
}

• I had to take a similar approach where I edited the z-index of the produced table in index.md

<div id="sidebar" class="sidebar" style="z-index: 9999">

• I also made the change of disabling the button toggle feature so that the click away works

 isOpen = true;
            // open and close properties for sidebar based on isOpen
            backgroundDim.create()
            var sidebar = document.querySelector('.sidebar');
            sidebar.style.width = isOpen?"200px":"0px";
            sidebar.style.paddingLeft = isOpen?"10px":"0px";
            sidebar.style.paddingRight = isOpen?"10px":"0px";
            sidebar.style.top = `calc(${submenuHeight}px + ${GameEnv.top}px)`;

[andrewzcsse]

Merging 5/17 so we can present on this during team teach