Make the clocks clickable

src/clock.js

@@ -1,15 +1,40 @@
 class Clock {
-  constructor(name, color, numWedges, radius) {
+  constructor(name, color, hoverColor, numWedges, radius) {
     this.name = name
     this.color = color
+    this.hoverColor = hoverColor
     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")
+
+    this.mouse = null
+
+    this.canvas.addEventListener("mouseenter", event => {
+      this.mouse = { x: event.offsetX, y: event.offsetY }
+      this.mouseWedges = this.wedgeContainingMouse()
+    })
+
+    this.canvas.addEventListener("mousemove", event => {
+      this.mouse.x = event.offsetX
+      this.mouse.y = event.offsetY
+      this.mouseWedges = this.wedgeContainingMouse()
+    })
+
+    this.canvas.addEventListener("mouseup", event => {
+      this.filledWedges = this.wedgeContainingMouse() + 1
+    })
+
+    this.canvas.addEventListener("mouseleave", event => {
+      this.mouse = null
+      this.mouseWedges = null
+    })
+    console.log(this)
   }
 
   htmlElement() {
@@ -28,12 +53,18 @@ class Clock {
     ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
     ctx.lineWidth = 3
     for (let i = 0; i < this.numWedges; i++) this.drawWedge(i)
+    if (this.mouse) {
+      ctx.fillStyle = "black"
+      ctx.beginPath()
+      ctx.arc(this.mouse.x, this.mouse.y, 5, 0, Math.PI * 2)
+      ctx.fill()
+    }
   }
 
   drawWedge(i) {
     const { ctx } = this
     const width = ((2 * Math.PI) / this.numWedges)
-    const angle = width * i
+    const angle = (width * i) + (width / 2) - (Math.PI / 2)
     const x = (this.canvas.width / 2) + (Math.cos(angle) * this.splitRadius)
     const y = (this.canvas.height / 2) + (Math.sin(angle) * this.splitRadius)
 
@@ -44,6 +75,15 @@ class Clock {
     ctx.lineTo(x, y)
     ctx.stroke()
 
+    if (this.mouseWedges != null) {
+      if (i < this.filledWedges && (i <= this.mouseWedges)) {
+	ctx.fillStyle = this.color
+	ctx.fill()
+      } else if (i < this.filledWedges || (i <= this.mouseWedges)) {
+	ctx.fillStyle = this.hoverColor
+	ctx.fill()
+      }
+    } else {
       if (i < this.filledWedges) {
 	ctx.fillStyle = this.color
 	ctx.fill()
@@ -51,4 +91,14 @@ class Clock {
     }
   }
 
+  wedgeContainingMouse() {
+    if (!this.mouse) return false
+    const x = (this.canvas.width / 2) - this.mouse.x
+    const y = (this.canvas.width / 2) - this.mouse.y
+    let theta = Math.atan2(y, x) - (Math.PI / 2)
+    if (theta < 0) theta += Math.PI * 2
+    return Math.floor((theta / (2 * Math.PI)) * this.numWedges)
+  }
+}
+
 export default Clock

src/main.js

@@ -5,10 +5,10 @@ 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)
+    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()))