bassguitarbill/clocks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make clocks emptyable

Browse Source
This commit is contained in:
Bill Rossi 2026-01-26 16:59:07 -05:00
parent 42db116fe8
commit 0da400b126
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/clock.js
View File

@ -23,7 +23,7 @@ class Clock {
this.canvas.addEventListener("mousemove", event => { this.canvas.addEventListener("mousemove", event => {
this.mouse.x = event.offsetX this.mouse.x = event.offsetX
this.mouse.y = event.offsetY this.mouse.y = event.offsetY
this.mouseWedges = this.wedgeContainingMouse() this.mouseWedges = this.wedgeContainingMouse() + 1
}) })
this.canvas.addEventListener("mouseup", event => { this.canvas.addEventListener("mouseup", event => {
@ -53,7 +53,14 @@ class Clock {
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height) ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
ctx.lineWidth = 3 ctx.lineWidth = 3
for (let i = 0; i < this.numWedges; i++) this.drawWedge(i) for (let i = 0; i < this.numWedges; i++) this.drawWedge(i)
if (this.mouse) { if (this.mouse && this.mouseWedges == 0) {
ctx.fillStyle = "black"
ctx.beginPath()
ctx.arc(this.canvas.width / 2, this.canvas.height / 2, this.splitRadius, 0, Math.PI * 2)
ctx.fill()
}
if (window.debug && this.mouse) {
ctx.fillStyle = "black" ctx.fillStyle = "black"
ctx.beginPath() ctx.beginPath()
ctx.arc(this.mouse.x, this.mouse.y, 5, 0, Math.PI * 2) ctx.arc(this.mouse.x, this.mouse.y, 5, 0, Math.PI * 2)
@ -76,10 +83,10 @@ class Clock {
ctx.stroke() ctx.stroke()
if (this.mouseWedges != null) { if (this.mouseWedges != null) {
if (i < this.filledWedges && (i <= this.mouseWedges)) { if (i < this.filledWedges && (i < this.mouseWedges)) {
ctx.fillStyle = this.color ctx.fillStyle = this.color
ctx.fill() ctx.fill()
} else if (i < this.filledWedges || (i <= this.mouseWedges)) { } else if (i < this.filledWedges || (i < this.mouseWedges)) {
ctx.fillStyle = this.hoverColor ctx.fillStyle = this.hoverColor
ctx.fill() ctx.fill()
} }
@ -93,8 +100,12 @@ class Clock {
wedgeContainingMouse() { wedgeContainingMouse() {
if (!this.mouse) return false if (!this.mouse) return false
const x = (this.canvas.width / 2) - this.mouse.x const x = (this.canvas.width / 2) - this.mouse.x
const y = (this.canvas.width / 2) - this.mouse.y const y = (this.canvas.width / 2) - this.mouse.y
const distanceSquared = (x * x) + (y * y)
if (distanceSquared < (this.splitRadius * this.splitRadius)) return -1
let theta = Math.atan2(y, x) - (Math.PI / 2) let theta = Math.atan2(y, x) - (Math.PI / 2)
if (theta < 0) theta += Math.PI * 2 if (theta < 0) theta += Math.PI * 2
return Math.floor((theta / (2 * Math.PI)) * this.numWedges) return Math.floor((theta / (2 * Math.PI)) * this.numWedges)