homework/hw13-promisePt2/hometask/script.js

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

let div = document.createElement('div')
document.body.append(div)

//domEventPromise
let btn = document.createElement('button')
btn.innerText = 'click'
document.body.append(btn)

function domEventPromise(elem, eventName) {
  let prom = new Promise((resolve, reject) => {
    function doAndRemove(event) {
      elem.removeEventListener(eventName, doAndRemove)
      resolve(event)
    }
    elem.addEventListener(eventName, doAndRemove)
  })
  return prom
}
domEventPromise(btn, 'click').then((event) => console.log('event click happens', event))

async function pedestrianTrafficLight(parent, redTime = 4000, yellowTime = 2000, greenTime = 2000) {
  let container = document.createElement('div')
  container.style.backgroundColor = 'grey'
  container.style.width = 'fit-content'
  container.style.padding = '5px'

  let btn = document.createElement('button')
  btn.innerText = 'pedestrian button'

  let colors = []
  for(let i = 0; i < 3; i++) {
    let color = document.createElement('div')
    color.style.backgroundColor = 'black'
    color.style.width = '100px'
    color.style.height = '100px'
    color.style.borderRadius = '100%'
    color.style.margin = '10px'
    container.append(color)
    colors.push(color)
  }

  container.append(btn)
  parent.append(container)

  while (true) {
    let pressed = false
    btn.disabled = false
    switch ('red') {
      case 'red':
        colors[0].style.backgroundColor = 'red'
        colors[0].style.boxShadow = '0px 2px 10px red'
        await Promise.race([delay(redTime), domEventPromise(btn, 'click')]).then((e) => {
          if (typeof e === 'object') {
            pressed = true
          }
        })
        colors[0].style.boxShadow = 'none'
        colors[0].style.backgroundColor = 'black'

      case 'yellow':
        if (pressed === true) break;
        colors[1].style.backgroundColor = 'yellow'
        colors[1].style.boxShadow = '0px 2px 10px yellow'
        await Promise.race([delay(yellowTime), domEventPromise(btn, 'click')]).then((e) => {
          if (typeof e === 'object') {
            pressed = true
          }
        })
        colors[1].style.boxShadow = 'none'
        colors[1].style.backgroundColor = 'black'
    }

    colors[2].style.backgroundColor = 'lightgreen'
    colors[2].style.boxShadow = '0px 2px 10px lightgreen'
    btn.disabled = true
    await delay(greenTime)
    colors[2].style.boxShadow = 'none'
    colors[2].style.backgroundColor = 'black'
  }
}
pedestrianTrafficLight(div, 3000, 3000, 3000)