Homework/hw15/main.js

const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))

//trafficLight
//1stage
// let trafficLightContent = document.createElement('div')
// let signals = document.createElement('div')
// let red = document.createElement('img')
// let yellow = document.createElement('img')
// let green = document.createElement('img')
// signals.append(red)
// signals.append(yellow)
// signals.append(green)

// trafficLightContent.append(signals)
// document.body.append(trafficLightContent)
// red.hidden = 'true'
// yellow.hidden = 'true'
// green.hidden = 'true'

// red.src = 'img/red.png'
// red.style.width = '300px'
// red.style.position = 'relative'
// red.style.right = '31px'

// yellow.src = 'img/yellow.png'
// yellow.style.width = '190px'
// green.src = 'img/green.png'
// green.style.width = '200px'
// green.style.position = 'relative'
// green.style.right = '5px'
// green.style.top = '-5px'

// async function trafficLight(){
//     while (true){
//         redColor()
//         await delay(5000)
//         yellowColor()
//         await delay(3000)
//         greenColor()
//         await delay(5000)
//     }
// }


// function cleaner () {
//     red.hidden = 'true'
//     yellow.hidden = 'true'
//     green.hidden = 'true'
// }

// function redColor() {
//     cleaner()
//     red.removeAttribute('hidden')
// }

// function yellowColor(){
//     cleaner()
//     yellow.removeAttribute('hidden')
// }

// function greenColor () {
//     cleaner()
//     green.removeAttribute('hidden')
// }

// trafficLight()

//2stage

//dom
let trafficLightContent = document.createElement('div')
let signals = document.createElement('div')
let signalsPed = document.createElement('div')
let btnContent = document.createElement('div')
let br = document.createElement('br')
btnContent.style.marginTop = '90px'
signalsPed.style.marginTop = '100px'
let red = document.createElement('img')
let yellow = document.createElement('img')
let green = document.createElement('img')
let greenPed = document.createElement('img')
greenPed.style.width = '180px'
let redPed = document.createElement('img')
redPed.style.width = '180px'
greenPed.src = 'img/greenped.png'
greenPed.hidden = 'true'
greenPed.style.marginLeft = '10px'
redPed.src = 'img/redped.png'
let btn = document.createElement('button')
btn.innerHTML = 'I want to cross <br \/> the pedestrian <br \/> crossing'
signals.append(red)
signals.append(yellow)
signals.append(green)
btnContent.append(btn)
signalsPed.append(greenPed)
signalsPed.append(redPed)

//btnsettings
btn.style.backgroundColor = 'red'
btn.style.border = '2px solid black'
btn.style.color = 'white'
btn.style.padding = '20px'
btn.style.textAlign = 'center'
btn.style.textDecoration = 'none'
btn.style.display = 'inline-block'
btn.style.fontSize = '16px'
btn.style.cursor = 'pointer'
btn.style.borderRadius = '100%'
btn.style.marginLeft = '20px'
//btnsettingsend

trafficLightContent.append(signals)
trafficLightContent.append(btnContent)
trafficLightContent.append(signalsPed)
document.body.append(trafficLightContent)
red.hidden = 'true'
yellow.hidden = 'true'
green.hidden = 'true'

red.src = 'img/red.png'
red.style.width = '300px'
red.style.position = 'relative'
red.style.right = '31px'

yellow.src = 'img/yellow.png'
yellow.style.width = '190px'
green.src = 'img/green.png'
green.style.width = '200px'
green.style.position = 'relative'
green.style.right = '5px'
green.style.top = '-5px'

//functions
function randTime(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
  }

async function trafficLight(color, time){
    while (true){
        onColor(green)
        let p = Promise.race([
            new Promise((resolve,reject)=>{resolve(delay(5000))}),
            new Promise((resolve,reject)=>{resolve(domEventPromise(btn,'click'))}),
        ])
        await p 
        onColor(yellow)
        await delay(time = 3000)
        onColor(red)
        await delay(time = randTime(3000,10000))
        onColor(yellow)
        await delay(time = randTime(3000,5000))
        disabler()
    }
}

const disabler = btn.onclick = function() {
    btn.disabled = true
    setTimeout(function() {
       btn.disabled = false
    }, 20000); 
};

const domEventPromise = function (element , eventName){
    return new Promise (function (resolve, reject) {
        let someObject
        element.addEventListener(eventName , someObject = (event) =>{
            resolve(event)
            element.removeEventListener(eventName,someObject)
        } )
    })
}

function cleaner () {
    red.hidden = 'true'
    yellow.hidden = 'true'
    green.hidden = 'true'
    greenPed.hidden = 'true'
    redPed.removeAttribute('hidden')
}

function onColor (color) {
    cleaner()
    if (color === green) {
        green.removeAttribute('hidden')
    }
    else if (color === yellow) {
        yellow.removeAttribute('hidden')
    }
    else if(color === red){
        red.removeAttribute('hidden')
        redPed.hidden = 'true'
        greenPed.removeAttribute('hidden')
    }
} 

trafficLight()

//speedtest
// async function speedtest(getPromise, count ,parallel=1){
    //     let duration 
//     let querySpeed
//     let queryDuration
//     let parallelSpeed
//     let parallelDuration

    
//     let t0 = performance.now()
//     for (let i = 0; i < count; i++){
//         let promiseArr = []
//         for (let all = 0;all < parallel;all++){
//             promiseArr.push(getPromise())
//         }
//         await Promise.all(promiseArr)
//         console.log(promiseArr)
//     }
//     let t1 = performance.now()
    
//     duration = t1-t0
//     parallelSpeed = count*parallel / duration
//     parallelDuration = 1/parallelSpeed
//     queryDuration = duration/count
//     querySpeed = 1/queryDuration

//         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).then(result => console.log(result))