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

// PedestrianTrafficLight

// -------------УСЛОВИЕ-------------
// Напишите упрощенный светофор для пешеходов

// Stage 2
// Используя Promise.race, domEventPromise и кнопку в DOM сделайте пешеходный светофор с кнопкой, который также переключается по времени периодически.

// Stage 3
// Не давайте возможности пешеходам сильно наглеть - предусмотрите задержку, после которой будет работать кнопка.

// -------------РЕШЕНИЕ-------------

const pedColors = ['red', 'green'];
function pedsTrafficLights() {
    const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))


    const domEventPromise = (knopka, eventName, time, pedDelay) => new Promise((resolve, reject) => {
        async function promiseResolve(e) {
            knopka.removeEventListener(eventName, promiseResolve);
            await delay(pedDelay);
            resolve(e)
        };
        async function listener() {
            knopka.addEventListener(eventName, promiseResolve);
            await delay(time);
            reject(knopka.removeEventListener(eventName, promiseResolve));
        }
        listener();
    });

    async function trafficLight(root, colors, greenTime, redTime, pedDelay) {
             root.innerHTML = colors.map(color => ` <div id=${color+'Ped'} class='lightColor'></div> `).join('');
       
        while (true) {
            for (let color of colors) {
                eval(color+'Ped').classList.toggle('on');
                await Promise.race([delay(eval(`${color}Time`)), domEventPromise(switchBtnPed, 'click', eval(`${color}Time`), pedDelay).then(e => console.log('event click happens', e))]);
                eval(color+'Ped').classList.toggle('on');
            }
        }
    }
    trafficLight(rootPed, pedColors, 5000, 4000, 1000);
};
pedsTrafficLights(rootPed, pedColors);