ClickyGame

let clicksCount, imagesValue;

// start the game;
appInit();


function changeBackground() {
    // array of colors
    const colors = ['#FFA421', '#0078ff', '#bd00ff', '#01ff1f', '#e3ff00'];
    // random number assigned to a var
    let num = Math.floor(Math.random() * colors.length);
    // get the body element
    const bodyEl = document.querySelector('body');
    // style it
    bodyEl.style.backgroundColor = colors[num];
}

function appInit() {

    if(localStorage.getItem('clicksCount') == null) {
        clicksCount = 0;
        localStorage.setItem('clicksCount', clicksCount);
    } else {
        clicksCount = Number(localStorage.getItem('clicksCount'));
    }

    if(localStorage.getItem('imagesValue') == null) {
        imagesValue = 0;
        localStorage.setItem('imagesValue', imagesValue);
    } else {
        imagesValue = Number(localStorage.getItem('imagesValue'));
    }

    const span = document.getElementById('clicks');
    span.innerText = clicksCount;

    setImgSrc(imagesValue, false);

    const img = document.querySelector('.image');

    img.addEventListener('click', () => {
        changeBackground();
        clicksPresentUI(clicksCounter());
        checkNumberOfClicks(clicksCount);
    });
}

function setImgSrc(value, animationBool) {
    const img = document.querySelector('.image');
    img.src = `img/img-${value}.png`;

    if(animationBool) {
        img.classList.add('shake');
    } else {
        img.classList.remove('shake');
    }
}

function clicksCounter() {
    clicksCount++;
    localStorage.setItem('clicksCount', clicksCount);
    return clicksCount;
}

function clicksPresentUI(clicks) {
    const span = document.getElementById('clicks');
    span.innerText = clicks;
}

function checkNumberOfClicks(clicks) {
    if(clicks / 100 == imagesValue + 1) {
        imagesValue++;
        localStorage.setItem('imagesValue', imagesValue);
        setImgSrc(imagesValue, true);
    }
}