Initial commit

2026-01-24 13:57:03 -05:00 · 2026-01-24 13:57:03 -05:00 · f2724998f7
commit f2724998f7
5 changed files with 154 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -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>
--- a/src/clock.js
+++ 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
--- a/src/main.js
+++ 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)
+})
--- a/src/morale.js
+++ 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
--- a/src/resources.js
+++ 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