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

Resources manage their own canvas

Browse Source
This commit is contained in:
Bill Rossi 2026-01-26 06:52:55 -05:00
parent 76b8eed77b
commit 3fc5c15585
5 changed files with 47 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -7,5 +7,6 @@
</head>
<body>
<div id="clockArea"></div>
<div id="resourcesArea"></div>
</body>
</html>

2
src/clock.js
View File

@ -24,7 +24,7 @@ class Clock {
draw() {
const { ctx } = this
ctx.fillStyle = "white"
ctx.fillStyle = window.debug ? "lightgrey" : "white"
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
ctx.lineWidth = 3
for (let i = 0; i < this.numWedges; i++) this.drawWedge(i)

13
src/main.js
View File

@ -6,17 +6,20 @@ document.addEventListener("DOMContentLoaded", () => {
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("liquor runs out", "red", 9, 100),
new Clock("flood", "blue", 3, 100),
new Clock("ennui", "purple", 25, 100)
]
clocks.map(clock => clock.htmlElement.call(clock)).forEach(clockHtml => clockArea.appendChild(clockHtml))
clocks.forEach(clock => clockArea.appendChild(clock.htmlElement()))
const resourcesArea = document.querySelector("#resourcesArea")
const r = new Resources("food", "green", 12, 600)
resourcesArea.appendChild(r.htmlElement())
// 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)
r.draw()
// m.draw(ctx)
window.requestAnimationFrame(draw)
}

36
src/resources.js
View File

@ -1,33 +1,49 @@
class Resources {
constructor(name, color, numSlots, width, x, y) {
constructor(name, color, numSlots, width) {
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
this.canvas = document.createElement("canvas")
this.canvas.width = this.width + (this.margin * this.numSlots)
this.canvas.height = this.height
this.ctx = this.canvas.getContext("2d")
}
draw(ctx) {
htmlElement() {
const card = document.createElement("div")
card.classList.add("card")
const title = document.createElement("span")
title.innerHTML = this.name
card.appendChild(title)
card.appendChild(this.canvas)
return card
}
draw() {
const { ctx } = this
ctx.fillStyle = window.debug ? "lightgrey" : "white"
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
ctx.lineWidth = 3
for (let i = 0; i < this.numSlots; i++) this.drawSlot(ctx, i)
for (let i = 0; i < this.numSlots; i++) this.drawSlot(i)
}
drawSlot(ctx, i) {
drawSlot(i) {
const { ctx } = this
const width = this.width / this.numSlots
const x = this.x + ((width + this.margin) * i)
const y = this.y
const x = ((width + this.margin) * i) + (this.margin / 2)
ctx.beginPath()
ctx.strokeStyle = this.color
ctx.strokeRect(x, y, width, this.height)
ctx.strokeRect(x, 0, width, this.height)
if (i < this.filledSlots) {
ctx.fillStyle = this.color
ctx.fillRect(x, y, width, this.height)
ctx.fillRect(x, 0, width, this.height)
}
}
}

11
style.css
View File

@ -9,4 +9,15 @@
#clockArea {
display: flex;
gap: 5px;
margin: 10px;
}
#resourcesArea {
display: flex;
gap: 5px;
margin: 10px;
}
canvas {
margin: 5px;
}