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", 4, 100),
    new Clock("liquor runs out", "red", 9, 100),
    new Clock("flood", "blue", 3, 100),
    new Clock("ennui", "purple", 25, 100)
  ]
  clocks.forEach(clock => clockArea.appendChild(clock.htmlElement()))

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

  // const m = new Morale("oh no", "red", 600, 100, 500)
  function draw(_ts) {
    clocks.forEach(clock => clock.draw.call(clock))
    r.draw()
    // m.draw(ctx)
    window.requestAnimationFrame(draw)
  }

  window.requestAnimationFrame(draw)
  
})