NewYearFir

// програма виводить ялинку.
// запускати в https://js.ide.shpp.me/


let height = 42; // глобальна змінна це погано  // висота без ніжки - бажано не менше 20

// основна функція не декомпозована, щоб зберегти структуру учбової програми, що виводить ялинку
async function createFirAndSnow() {
    let phrase = 'Стати гарним програмістом у 2021 році'; // будь-яке побажання на цей рік
    phrase = phrase.replace(/ /g, '*');
    let year = 2021;             // рік)
    let templatePhraseWords = ('шанс початок zero можливості шанс Ш++ посмішка котики Java праця' +
        'школа Ш++ результат участь Shpp повага люди код любов p2p культура JavaScript добро').replace(/ /g, '*').split('*');

    let phraseWords = phrase.split('*');
    let textConsole = document.querySelector(".main");
    let j = 0;

    while (j++ <= year) {          // цикл виводить ялинку 2021 раз, але кожний раз трохи змінену
        let pictureContent = '';   // рядок з кадром малюнка
        let spaceNum = height - 1; // пробілів до верхівки - пів нижньої (ширшої) гілки, а вона дорівнює (висота * 2 - 1)
                                   // з кожним рядком буде зменшуватися -= 1
        let starNum = 1;           // кількість зірок на верхівці, з кожним рядком буде збільшуватися += 2
        let row = 0;
        let i = 0;                 // просто лічильник
        let letterIndex = 0;       // індекс літери
        while (row < height) {     // перебираємо рядки від 0 до висоти ялинки

            // виводимо сніжинки зліва
            i = 0;
            while (i < spaceNum) {
                pictureContent += addAttrToContent((Math.random() > 0.9 && (year > j)) ?
                    phrase[i % phrase.length] : ('&nbsp&nbsp'), '#0CDBC3', i, spaceNum);
                i++;
            }

            // виводимо ялинку
            i = 0;
            while (i < starNum) {
                if (phrase[(letterIndex + 1)] === ' ') {
                    //alert('space detected');
                }
                pictureContent += addAttrToContent(phrase[(letterIndex++) % (phrase.length)], '#0D8314', i, starNum);
                i++;
            }

            // виводимо сніжинки зправа ялинки, з пробілами це не обов'язково
            i = 0;
            while (i < spaceNum) {
                pictureContent += addAttrToContent((Math.random() > 0.9 && (year > j)) ?
                    phrase[i % phrase.length] : ('&nbsp&nbsp'), '#0CDBC3', i, spaceNum);
                i++;
            }
            pictureContent += '<br>'; // переводимо рядок, зазвичай console.log();

            spaceNum -= 1; // готуємо кількість пробілів у наступному рядку
            starNum += 2; // готуємо кількість ялинкових символів у наступному рядку
            row++;
        }

        let footerSpace = ''; // ніжка
        for (let i = 0; i < height * 1.3; i++) {
            footerSpace += addAttrToContent('&nbsp', '#0CDBC3',i, height + 2);
        }
        for (let i = 1; i < 10; i++) {
            pictureContent += footerSpace;
            if (i % 3 === 0) {
                pictureContent += '<br>';
            }
        }

        textConsole.innerHTML = pictureContent;
        await sleep(600); // швидкість кадрів в мс
        phrase = phrase[phrase.length - 1] + phrase.substring(0, phrase.length - Math.random() * 2.2021 - 1);

        if (phrase.length < Math.random() * 0.2021 + 1 || year === j + 1) {

            phrase += ' ' + shuffleArray(phraseWords.concat(phraseWords, templatePhraseWords)).join('*');
        }
    }
}


// затримка
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

// перемішує елементи масиву в рандомному порядку
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}
// додаємо атрибути до кожного елементу що виводиться
function addAttrToContent(content, color, index, width) {
    let fontSize = (height - Math.abs(width / 2 - index)) * width / 200 + 2;
    let borderRadius = '25%';
    let textColor = '#FFFFFF';
    let colors = ['#D43807', '#0759D4', '#7F07D4', '#69F507', '#69F507', '#DBC40C'];
    //let colors = ['#69F507'];
    if (content === '*') {
        color = colors[Math.floor(index  % colors.length)];
        textColor = color;
        borderRadius = '50%'
    }
    content = `<span style="font-size:${fontSize}px;
                    border-radius:${borderRadius};
                    background-color:${color};
                    color: ${textColor}">
                    ${content}
               </span>`;

    return content;
}

createFirAndSnow();

// не перейменовув змінні відповідаючи за пробіли та зірки .
// Гарного коду.)