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

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

  window.requestAnimationFrame(draw)
  
})