Make resources clickable

src/clock.js

@@ -34,7 +34,6 @@ class Clock {
       this.mouse = null
       this.mouseWedges = null
     })
-    console.log(this)
   }
 
   htmlElement() {
@@ -53,6 +52,7 @@ 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 && this.mouseWedges == 0) {
       ctx.fillStyle = "black"
       ctx.beginPath()

src/main.js

@@ -13,7 +13,7 @@ document.addEventListener("DOMContentLoaded", () => {
   clocks.forEach(clock => clockArea.appendChild(clock.htmlElement()))
 
   const resourcesArea = document.querySelector("#resourcesArea")
-  const r = new Resources("food", "green", 12, 600)
+  const r = new Resources("food", "green", "lightgreen", 12, 600)
   resourcesArea.appendChild(r.htmlElement())
 
   const moraleArea = document.querySelector("#moraleArea")

src/resources.js

@@ -1,7 +1,8 @@
 class Resources {
-  constructor(name, color, numSlots, width) {
+  constructor(name, color, hoverColor, numSlots, width) {
     this.name = name
     this.color = color
+    this.hoverColor = hoverColor
     this.numSlots = numSlots
     this.filledSlots = numSlots / 2
     this.width = width
@@ -10,8 +11,30 @@ class Resources {
 
     this.canvas = document.createElement("canvas")
     this.canvas.width = this.width + (this.margin * this.numSlots)
-    this.canvas.height = this.height
+    this.canvas.height = this.height + 10
     this.ctx = this.canvas.getContext("2d")
+
+    this.mouse = null
+
+    this.canvas.addEventListener("mouseenter", event => {
+      this.mouse = { x: event.offsetX, y: event.offsetY }
+      this.mouseSlots = this.slotContainingMouse()
+    })
+
+    this.canvas.addEventListener("mousemove", event => {
+      this.mouse.x = event.offsetX
+      this.mouse.y = event.offsetY
+      this.mouseSlots = this.slotContainingMouse() + 1
+    })
+
+    this.canvas.addEventListener("mouseup", event => {
+      this.filledSlots = this.slotContainingMouse() + 1
+    })
+
+    this.canvas.addEventListener("mouseleave", event => {
+      this.mouse = null
+      this.mouseSlots = null
+    })
   }
 
   htmlElement() {
@@ -30,6 +53,18 @@ class Resources {
     ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
     ctx.lineWidth = 3
     for (let i = 0; i < this.numSlots; i++) this.drawSlot(i)
+
+    if (this.mouse && this.mouseSlots == 0) {
+      ctx.fillStyle = "black"
+      ctx.fillRect(0, this.height, this.canvas.width, this.canvas.height - this.height)
+    }
+
+    if (window.debug && this.mouse) {
+      ctx.fillStyle = "black"
+      ctx.beginPath()
+      ctx.arc(this.mouse.x, this.mouse.y, 5, 0, Math.PI * 2)
+      ctx.fill()
+    }
   }
 
   drawSlot(i) {
@@ -37,14 +72,35 @@ class Resources {
     const width = this.width / this.numSlots
     const x = ((width + this.margin) * i) + (this.margin / 2)
 
+    if (this.mouseSlots != null) {
+      if (i < this.filledSlots && (i < this.mouseSlots)) {
+	ctx.fillStyle = this.color
+	ctx.fillRect(x, 0, width, this.height)
+      } else if (i < this.filledSlots || (i < this.mouseSlots)) {
+	ctx.fillStyle = this.hoverColor
+	ctx.fillRect(x, 0, width, this.height)
+      }
+    } else {
+      if (i < this.filledSlots) {
+	ctx.fillStyle = this.color
+	ctx.fillRect(x, 0, width, this.height)
+      }
+    }
+
     ctx.beginPath()
     ctx.strokeStyle = this.color
 
     ctx.strokeRect(x, 0, width, this.height)
-    if (i < this.filledSlots) {
+  }
-      ctx.fillStyle = this.color
+
-      ctx.fillRect(x, 0, width, this.height)
+  slotContainingMouse() {
-    }
+    if (!this.mouse) return false
+
+    const { x, y } = this.mouse
+
+    if (y > this.height) return -1
+
+    return Math.floor((this.mouse.x / this.canvas.width) * this.numSlots)
   }
 }