clocks/src/clock.js

class Clock {
  constructor(name, color, numWedges, radius) {
    this.name = name
    this.color = color
    this.numWedges = numWedges
    this.filledWedges = numWedges / 2
    this.radius = radius
    this.splitRadius = 10
    this.canvas = document.createElement("canvas")
    this.canvas.width = (this.radius * 2) + 40
    this.canvas.height = (this.radius * 2) + 40
    this.ctx = this.canvas.getContext("2d")
  }

  htmlElement() {
    const card = document.createElement("div")
    card.classList.add("card")
    card.appendChild(this.canvas)
    const title = document.createElement("span")
    title.innerHTML = this.name
    card.appendChild(title)
    return card
  }

  draw() {
    const { ctx } = this
    ctx.fillStyle = "white"
    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
    ctx.lineWidth = 3
    for (let i = 0; i < this.numWedges; i++) this.drawWedge(i)
  }

  drawWedge(i) {
    const { ctx } = this
    const width = ((2 * Math.PI) / this.numWedges)
    const angle = width * i
    const x = (this.canvas.width / 2) + (Math.cos(angle) * this.splitRadius)
    const y = (this.canvas.height / 2) + (Math.sin(angle) * this.splitRadius)

    ctx.beginPath()
    ctx.strokeStyle = this.color
    ctx.moveTo(x, y)
    ctx.arc(x, y, this.radius, (angle - (width / 2)), (angle + width / 2))
    ctx.lineTo(x, y)
    ctx.stroke()

    if (i < this.filledWedges) {
      ctx.fillStyle = this.color
      ctx.fill()
    }
  }
}

export default Clock