let dice = document.getElementsByClassName("dice")[0];
let dots = document.getElementsByClassName("dot");

dice.addEventListener("click", () => {
    let random = Math.floor(Math.random() * 6 + 1)
    console.log(random);
    for(let x of dots) {
        x.style.visibility = "hidden"
    }
    
    if(random == 1) {
        dots[4].style.visibility = "visible";
    } else if (random == 2) {
        dots[0].style.visibility = "visible";
        dots[8].style.visibility = "visible";
    } else if (random == 3) {
        dots[0].style.visibility = "visible";
        dots[8].style.visibility = "visible";
        dots[4].style.visibility = "visible";
    } else if (random == 4) {
        dots[0].style.visibility = "visible";
        dots[2].style.visibility = "visible";
        dots[6].style.visibility = "visible";
        dots[8].style.visibility = "visible";
    } else if (random == 5) {
        dots[0].style.visibility = "visible";
        dots[2].style.visibility = "visible";
        dots[6].style.visibility = "visible";
        dots[8].style.visibility = "visible";
        dots[4].style.visibility = "visible";
    } else if (random == 6) {
        dots[0].style.visibility = "visible";
        dots[2].style.visibility = "visible";
        dots[3].style.visibility = "visible";
        dots[5].style.visibility = "visible";
        dots[6].style.visibility = "visible";
        dots[8].style.visibility = "visible";
    }
    
    

    
})