commit f2724998f74384f70615455c314e4c350215273e Author: Bill Rossi Date: Sat Jan 24 13:57:03 2026 -0500 Initial commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..f7a1fd1 --- /dev/null +++ b/index.html @@ -0,0 +1,10 @@ + + + + Clocks + + + + You need JavaScript enabled to see the clocks + + diff --git a/src/clock.js b/src/clock.js new file mode 100644 index 0000000..e79fe75 --- /dev/null +++ b/src/clock.js @@ -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 diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..85010fb --- /dev/null +++ b/src/main.js @@ -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) +}) diff --git a/src/morale.js b/src/morale.js new file mode 100644 index 0000000..bc616bd --- /dev/null +++ b/src/morale.js @@ -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 diff --git a/src/resources.js b/src/resources.js new file mode 100644 index 0000000..84dc5d6 --- /dev/null +++ b/src/resources.js @@ -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