diff --git a/src/clock.js b/src/clock.js index 543c664..3baf573 100644 --- a/src/clock.js +++ b/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() diff --git a/src/main.js b/src/main.js index 4e7c7c2..663e2d2 100644 --- a/src/main.js +++ b/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") diff --git a/src/resources.js b/src/resources.js index 5cbe320..09387b7 100644 --- a/src/resources.js +++ b/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) } }