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

Clocks manage their own canvases

Browse Source
This commit is contained in:
Bill Rossi 2026-01-26 06:34:10 -05:00
parent f2724998f7
commit 76b8eed77b
4 changed files with 53 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -3,8 +3,9 @@
<head>
<title>Clocks</title>
<script src="src/main.js" type="module"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas width="1900" height="1000">You need JavaScript enabled to see the clocks</canvas>
<div id="clockArea"></div>
</body>
</html>

32
src/clock.js
View File

@ -1,25 +1,41 @@
class Clock {
constructor(name, color, numWedges, radius, x, y) {
constructor(name, color, numWedges, radius) {
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
this.canvas = document.createElement("canvas")
this.canvas.width = (this.radius * 2) + 40
this.canvas.height = (this.radius * 2) + 40
this.ctx = this.canvas.getContext("2d")
}
draw(ctx) {
htmlElement() {
const card = document.createElement("div")
card.classList.add("card")
card.appendChild(this.canvas)
const title = document.createElement("span")
title.innerHTML = this.name
card.appendChild(title)
return card
}
draw() {
const { ctx } = this
ctx.fillStyle = "white"
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
ctx.lineWidth = 3
for (let i = 0; i < this.numWedges; i++) this.drawWedge(ctx, i)
for (let i = 0; i < this.numWedges; i++) this.drawWedge(i)
}
drawWedge(ctx, i) {
drawWedge(i) {
const { ctx } = this
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)
const x = (this.canvas.width / 2) + (Math.cos(angle) * this.splitRadius)
const y = (this.canvas.height / 2) + (Math.sin(angle) * this.splitRadius)
ctx.beginPath()
ctx.strokeStyle = this.color

47
src/main.js
View File

@ -3,41 +3,24 @@ import Resources from "./resources.js"
import Morale from "./morale.js"
document.addEventListener("DOMContentLoaded", () => {
const canvas = document.querySelector("canvas")
const ctx = canvas.getContext("2d")
const clockArea = document.querySelector("#clockArea")
const clocks = [
new Clock("zed", "black", 4, 100),
new Clock("food runs out", "red", 9, 100),
new Clock("raining", "blue", 3, 100),
new Clock("ennui", "purple", 25, 100)
]
clocks.map(clock => clock.htmlElement.call(clock)).forEach(clockHtml => clockArea.appendChild(clockHtml))
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)
// const r = new Resources("ho", "green", 12, 600, 100, 400)
// const m = new Morale("oh no", "red", 600, 100, 500)
function draw(_ts) {
clocks.forEach(clock => clock.draw.call(clock))
// r.draw(ctx)
// m.draw(ctx)
window.requestAnimationFrame(draw)
}
window.requestAnimationFrame(draw)
})

12
style.css Normal file
View File

@ -0,0 +1,12 @@
.card {
border: 5px black solid;
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
#clockArea {
display: flex;
gap: 5px;
}