Make morale clickable

src/main.js

@@ -17,7 +17,7 @@ document.addEventListener("DOMContentLoaded", () => {
   resourcesArea.appendChild(r.htmlElement())
 
   const moraleArea = document.querySelector("#moraleArea")
-  const m = new Morale("oh no", "red", 600)
+  const m = new Morale("oh no", "red", "pink", 600)
   moraleArea.appendChild(m.htmlElement())
   function draw(_ts) {
     clocks.forEach(clock => clock.draw.call(clock))

src/morale.js

@@ -1,7 +1,8 @@
 class Morale {
-  constructor(name, color, width) {
+  constructor(name, color, hoverColor, width) {
     this.name = name
     this.color = color
+    this.hoverColor = hoverColor
     this.value = 0.3
     this.width = width
     this.height = 40
@@ -11,7 +12,22 @@ class Morale {
     this.canvas.width = this.width + this.margin
     this.canvas.height = this.height
     this.ctx = this.canvas.getContext("2d")
-    if (this.width == 0) throw "asdf"
+
+    this.canvas.addEventListener("mouseenter", event => {
+      this.mouseValue = event.offsetX / this.canvas.width
+    })
+
+    this.canvas.addEventListener("mousemove", event => {
+      this.mouseValue = event.offsetX / this.canvas.width
+    })
+
+    this.canvas.addEventListener("mouseup", event => {
+      this.value = event.offsetX / this.canvas.width
+    })
+
+    this.canvas.addEventListener("mouseleave", event => {
+      this.mouseValue = null
+    })
   }
  
   htmlElement() {
@@ -30,13 +46,42 @@ class Morale {
     ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
     ctx.lineWidth = 5
     ctx.strokeStyle = "black"
-    ctx.fillStyle = this.color
 
+    if (this.mouseValue == null) {
+      ctx.fillStyle = this.color
       ctx.beginPath()
       const width = this.width * this.value
       ctx.roundRect(0, 0, width, this.height, 10)
       ctx.fill()
+    } else {
+      if (this.value > this.mouseValue) {
+	ctx.fillStyle = this.hoverColor
+	ctx.beginPath()
+	let width = this.width * this.value
+	ctx.roundRect(0, 0, width, this.height, 10)
+	ctx.fill()
 
+	ctx.fillStyle = this.color
+	ctx.beginPath()
+	width = this.width * this.mouseValue
+	ctx.roundRect(0, 0, width, this.height, 10)
+	ctx.fill()
+      } else {
+	ctx.fillStyle = this.hoverColor
+	ctx.beginPath()
+	let width = this.width * this.mouseValue
+	ctx.roundRect(0, 0, width, this.height, 10)
+	ctx.fill()
+
+	ctx.fillStyle = this.color
+	ctx.beginPath()
+	width = this.width * this.value
+	ctx.roundRect(0, 0, width, this.height, 10)
+	ctx.fill()
+      }
+    }
+
+    // border
     ctx.beginPath()
     ctx.roundRect(0, 0, this.width, this.height, 10)
     ctx.stroke()