Arseniy_Yurchenko
/
Home_work_9


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .circle_gray {
            width: 100px;
            height: 100px;
            background-color: gray;
            border-radius: 50%;
        }

        .circle_green {
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 50%;
        }

        .circle_yellow {
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 50%;
        }

        .circle_red {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
</head>

<body>

    <div id="divTrafficLight"></div>


    <script>


        let divContainer = document.createElement('div')

        //trafficLight

        let divTraffic = document.createElement('div')
        divTraffic.setAttribute("style", "background-color: black; display: inline-block; margin-right: 200px;")

        let green = document.createElement('div')
        let yellow = document.createElement('div')
        let red = document.createElement('div')

        green.classList.add('circle_gray')
        yellow.classList.add('circle_gray')
        red.classList.add('circle_gray')

        divTraffic.appendChild(green)
        divTraffic.appendChild(yellow)
        divTraffic.appendChild(red)
        divContainer.appendChild(divTraffic)


        //pedestrian trafficLight

        let divPedTraffic = document.createElement('div')
        divPedTraffic.setAttribute("style", "background-color: black; display: inline-block; margin-left: 200px; position: relative;")

        let knopka = document.createElement('button')
        knopka.innerText = "Press"
        knopka.setAttribute("style", "position: absolute; left: 30%;")

        let greenPed = document.createElement('div')
        let redPed = document.createElement('div')

        greenPed.classList.add('circle_gray')
        redPed.classList.add('circle_gray')

        divPedTraffic.appendChild(greenPed)
        divPedTraffic.appendChild(redPed)
        divPedTraffic.appendChild(knopka)
        divContainer.appendChild(divPedTraffic)
        divTrafficLight.appendChild(divContainer)

        let timeouts = [];


        const delay = ms => new Promise(ok => {
            let timeoutStack = setTimeout(() => ok(ms), ms)
            timeouts.push(timeoutStack)
        })

        async function trafficLight(gMs, yMs, rMs) {
            while (true) {

                await Promise.race([domEventPromise(knopka, 'click', 0), delay(yMs)])

                //yellow
                green.classList.remove('circle_green')
                yellow.classList.add('circle_yellow')
                await delay(yMs)

                //red
                yellow.classList.remove('circle_yellow')
                red.classList.add('circle_red')
                //ped
                redPed.classList.remove('circle_red')
                greenPed.classList.add('circle_green')

                knopka.disabled = true
                await delay(rMs)

                //yellow
                red.classList.remove('circle_red')
                yellow.classList.add('circle_yellow')
                await delay(yMs)

                //green
                yellow.classList.remove('circle_yellow')
                green.classList.add('circle_green')
                //ped
                greenPed.classList.remove('circle_green')
                redPed.classList.add('circle_red')

                setTimeout(() => knopka.disabled = false, rMs / 3)
                await delay(gMs)

            }

        }

        let resetTrafficLights = () => {
            timeouts.forEach((timeoutStack) => {
                clearTimeout(timeoutStack)
            })
        }

        let buttonClick = async () => {
            resetTrafficLights();
            trafficLight(10000, 2000, 10000);
        }

        //domEventPromise

        function domEventPromise(elem, event) {
            return new Promise((resolve, reject) => {
                let handler = async (event) => {
                    buttonClick()

                    resolve(event)
                    elem.removeEventListener(event, handler)
                }
                elem.addEventListener(event, handler);
            })

        }

        trafficLight(10000, 2000, 10000)

        //speedtest1


        // async function speedtest(getPromise, count, parallel = 1) {

        //     async function handler() {
        //         return getPromise
        //     }
        //     return {
        //         duration,
        //         querySpeed, //средняя скорость одного запроса
        //         queryDuration, //
        //         parallelSpeed,
        //         parallelDuration
        //     }
        // }

        // speedtest(() => delay(1000), 10, 10).then(result => console.log(result))
        // // {duration: 10000, 
        // // querySpeed: 0.001, //1 тысячная запроса за миллисекунду
        // // queryDuration: 1000, //1000 миллисекунд на один реальный запрос в среднем 
        // // parallelSpeed: 0.01  // 100 запросов за 10000 миллисекунд
        // // parallelDuration: 100 // 100 запросов за 10000 миллисекунд
        // speedtest(() => fetch('http://swapi.dev/api/people/1').then(res => res.json()), 10, 5)


    </script>

</body>

</html>