homework/hw-js-15-async-await-2/js/trafficLight.js

// Async / Await Homework 2

// -------------УСЛОВИЕ-------------

// Светофор
// Используя асинхронную функцию и бесконечный цикл, просимулируйте светофор:
// const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

// async function trafficLight(){
//     while (true){
//         включаем зеленый
//         await delay(время зеленого)
//         включаем желтый
//         await delay(время желтого)
//         включаем красный
//         await delay(время красного)
//     }
// }
// Для отображения включения того или иного света используйте один или три DOM-элемента.

// Stage 2
// Сделайте trafficLight более универсальной - добавьте в параметры DOM-элемент для отображения, а также время работы каждого цвета
// domEventPromise
// Реализуйте промисифицированную функцию, которая резолвит промис по событию в DOM:
// domEventPromise(knopka, 'click').then( e => console.log('event click happens', e))
// Функция должна:
// используя addEventListener повесить свой обработчик события на DOM element событие eventName
// по событию зарезолвить промис отдав в качестве результата объект события
// убрать обработчик с DOM-элемента, используя removeEventListener

// -------------РЕШЕНИЕ-------------
// Stage 1 & Stage 2
  const colors = ['red', 'yellow', 'green', 'yellow'];
function vehiclesTrafficLights() {
    const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
    // const colorTime = { red: 3000, yellow: 1000, green: 3000 };
  
    // / Сделайте trafficLight более универсальной - добавьте в параметры DOM-элемент для отображения, а также время работы каждого цвета
    const domEventPromise = (knopka, eventName, time) => new Promise((resolve, reject) => {
        const promiseResolve = (e) => { knopka.removeEventListener(eventName, promiseResolve); resolve(e) };
        async function listener() {
            knopka.addEventListener(eventName, promiseResolve);
            await delay(time);
            reject(knopka.removeEventListener(eventName, promiseResolve));
        }
        listener();
    });

    async function trafficLight(root, colors, greenTime, yellowTime, redTime) {
        const colorsNew = colors.slice(0, colors.length - 1);
        root.innerHTML = colorsNew.map(color => ` <div id=${color} class='lightColor'></div> `).join('');
       
        while (true) {
            for (let color of colors) {
                eval(color).classList.toggle('on');
                // await delay(eval(`${color}Time`));
                await Promise.race([delay(eval(`${color}Time`)), domEventPromise(switchBtn, 'click', eval(`${color}Time`)).then(e => console.log('event click happens', e))]);
                eval(color).classList.toggle('on');
            }
        }
    }
    trafficLight(root, colors, 5000, 3000, 5000);
};
vehiclesTrafficLights(root, colors);