import Clock from "./clock.js"
import Resources from "./resources.js"
import Morale from "./morale.js"

document.addEventListener("DOMContentLoaded", () => {
  const clockArea = document.querySelector("#clockArea")
  const clocks = [
    new Clock("zed", "black", "grey", 4, 100),
    new Clock("liquor runs out", "red", "pink", 9, 100),
    new Clock("flood", "blue", "lightblue", 3, 100),
    new Clock("ennui", "purple", "#CBC3E3", 25, 100)
  ]
  clocks.forEach(clock => clockArea.appendChild(clock.htmlElement()))

  const resourcesArea = document.querySelector("#resourcesArea")
  const r = new Resources("food", "green", "lightgreen", 12, 600)
  resourcesArea.appendChild(r.htmlElement())

  const moraleArea = document.querySelector("#moraleArea")
  const m = new Morale("oh no", "red", 600)
  moraleArea.appendChild(m.htmlElement())
  function draw(_ts) {
    clocks.forEach(clock => clock.draw.call(clock))
    r.draw()
    m.draw()
    window.requestAnimationFrame(draw)
  }

  window.requestAnimationFrame(draw)
  
})