/*
DESCRIPTION:
In this challenge a casino has asked you to make an online dice that works just like 
it wold in real life. Using the pre-made dice face that represents ‘one’, make the 
faces for ‘two’, ‘three’, ‘four’, ‘five’ and ‘six’. Now when the users clicks the 
dice on the screen the dice is expected to show one of the faces randomly.

event listeners, Math.random()

*/

// Write your code here 👇
const dice = document.querySelector('.dice');
const dots = document.querySelectorAll('.dot');

function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);    
}

function showDot(number) {
    //First re-set the dots - and the dice in case the last side was a 6
    dots.forEach(dot => dot.style.backgroundColor = 'transparent');
    //Now turn on the relevant dots for this number
    if(number === 1){
        dots[4].style.backgroundColor = 'black';
    }
    if(number === 2){
        //There are two different ways a 2 can appear, depending on which way up the dice is
        //So let's pick one of them at random
        if(getRandomNumber(1, 2) === 1) {
            dots[0].style.backgroundColor = 'black';
            dots[8].style.backgroundColor = 'black';            
        } else {
            dots[2].style.backgroundColor = 'black';
            dots[6].style.backgroundColor = 'black';                        
        }
    }
    if(number === 3){
        //There are two different ways a 3 can appear, depending on which way up the dice is
        //So let's pick one of them at random
        if(getRandomNumber(1, 2) === 1) {
            dots[0].style.backgroundColor = 'black';
            dots[4].style.backgroundColor = 'black';
            dots[8].style.backgroundColor = 'black';
        } else {
            dots[2].style.backgroundColor = 'black';
            dots[4].style.backgroundColor = 'black';
            dots[6].style.backgroundColor = 'black';
        }
    }
    if(number === 4){
        dots[0].style.backgroundColor = 'black';
        dots[2].style.backgroundColor = 'black';
        dots[6].style.backgroundColor = 'black';
        dots[8].style.backgroundColor = 'black';
    }
    if(number === 5){
        dots[0].style.backgroundColor = 'black';
        dots[2].style.backgroundColor = 'black';
        dots[4].style.backgroundColor = 'black';
        dots[6].style.backgroundColor = 'black';
        dots[8].style.backgroundColor = 'black';
    }
    if(number === 6){
        dots[0].style.backgroundColor = 'black';
        dots[2].style.backgroundColor = 'black';
        dots[3].style.backgroundColor = 'black';
        dots[5].style.backgroundColor = 'black';
        dots[6].style.backgroundColor = 'black';
        dots[8].style.backgroundColor = 'black';
    }
}

dice.addEventListener('click', function() {
    const number = getRandomNumber(1, 6);
    console.log(number);
    showDot(number);
})

/*

DETAILED INSTRUCTIONS
1. pick out the neccesary elements from the HTML
2. Create other 5 dice faces in CSS
3. use eventlisteners on the appropriate div
4. Display dice faces randomly on click

STRETCH GOALS:
- Can you show the number you rolled as a integer along-side the dice face?
- Can you improve the overall design?
*/