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

Initial commit

Browse Source
This commit is contained in:
Bill Rossi 2026-01-24 13:57:03 -05:00
commit f2724998f7
5 changed files with 154 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Clocks</title>
<script src="src/main.js" type="module"></script>
</head>
<body>
<canvas width="1900" height="1000">You need JavaScript enabled to see the clocks</canvas>
</body>
</html>

38
src/clock.js Normal file
View File

@ -0,0 +1,38 @@
class Clock {
constructor(name, color, numWedges, radius, x, y) {
this.name = name
this.color = color
this.numWedges = numWedges
this.filledWedges = numWedges / 2
this.radius = radius
this.x = x
this.y = y
this.splitRadius = 10
}
draw(ctx) {
ctx.lineWidth = 3
for (let i = 0; i < this.numWedges; i++) this.drawWedge(ctx, i)
}
drawWedge(ctx, i) {
const width = ((2 * Math.PI) / this.numWedges)
const angle = width * i
const x = this.x + (Math.cos(angle) * this.splitRadius)
const y = this.y + (Math.sin(angle) * this.splitRadius)
ctx.beginPath()
ctx.strokeStyle = this.color
ctx.moveTo(x, y)
ctx.arc(x, y, this.radius, (angle - (width / 2)), (angle + width / 2))
ctx.lineTo(x, y)
ctx.stroke()
if (i < this.filledWedges) {
ctx.fillStyle = this.color
ctx.fill()
}
}
}
export default Clock

43
src/main.js Normal file
View File

@ -0,0 +1,43 @@
import Clock from "./clock.js"
import Resources from "./resources.js"
import Morale from "./morale.js"
document.addEventListener("DOMContentLoaded", () => {
const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
const c = new Clock("hi",
"blue",
9,
100,
200,
200
)
const r = new Resources("ho",
"green",
12,
600,
100,
400
)
const m = new Morale("oh no",
"red",
600,
100,
500
)
function draw(x) {
ctx.fillStyle = "white"
ctx.fillRect(0, 0, canvas.width, canvas.height)
c.draw(ctx)
r.draw(ctx)
m.draw(ctx)
window.requestAnimationFrame(draw)
}
window.requestAnimationFrame(draw)
})

28
src/morale.js Normal file
View File

@ -0,0 +1,28 @@
class Morale {
constructor(name, color, width, x, y) {
this.name = name
this.color = color
this.value = 0.3
this.width = width
this.height = 40
this.x = x
this.y = y
}
draw(ctx) {
ctx.lineWidth = 3
ctx.strokeStyle = "black"
ctx.fillStyle = this.color
ctx.beginPath()
const width = this.width * this.value
ctx.roundRect(this.x, this.y, width, this.height, 10)
ctx.fill()
ctx.beginPath()
ctx.roundRect(this.x, this.y, this.width, this.height, 10)
ctx.stroke()
}
}
export default Morale

35
src/resources.js Normal file
View File

@ -0,0 +1,35 @@
class Resources {
constructor(name, color, numSlots, width, x, y) {
this.name = name
this.color = color
this.numSlots = numSlots
this.filledSlots = numSlots / 2
this.width = width
this.height = 40
this.x = x
this.y = y
this.margin = 5
}
draw(ctx) {
ctx.lineWidth = 3
for (let i = 0; i < this.numSlots; i++) this.drawSlot(ctx, i)
}
drawSlot(ctx, i) {
const width = this.width / this.numSlots
const x = this.x + ((width + this.margin) * i)
const y = this.y
ctx.beginPath()
ctx.strokeStyle = this.color
ctx.strokeRect(x, y, width, this.height)
if (i < this.filledSlots) {
ctx.fillStyle = this.color
ctx.fillRect(x, y, width, this.height)
}
}
}
export default Resources