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> </head>
<body> <body>
<div id="clockArea"></div> <div id="clockArea"></div>
<div id="resourcesArea"></div>
</body> </body>
</html> </html>

2
src/clock.js
View File

@ -24,7 +24,7 @@ class Clock {
draw() { draw() {
const { ctx } = this const { ctx } = this
ctx.fillStyle = "white" ctx.fillStyle = window.debug ? "lightgrey" : "white"
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height) ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
ctx.lineWidth = 3 ctx.lineWidth = 3
for (let i = 0; i < this.numWedges; i++) this.drawWedge(i) 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 clockArea = document.querySelector("#clockArea")
const clocks = [ const clocks = [
new Clock("zed", "black", 4, 100), new Clock("zed", "black", 4, 100),
new Clock("food runs out", "red", 9, 100), new Clock("liquor runs out", "red", 9, 100),
new Clock("raining", "blue", 3, 100), new Clock("flood", "blue", 3, 100),
new Clock("ennui", "purple", 25, 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) // const m = new Morale("oh no", "red", 600, 100, 500)
function draw(_ts) { function draw(_ts) {
clocks.forEach(clock => clock.draw.call(clock)) clocks.forEach(clock => clock.draw.call(clock))
// r.draw(ctx) r.draw()
// m.draw(ctx) // m.draw(ctx)
window.requestAnimationFrame(draw) window.requestAnimationFrame(draw)
} }

36
src/resources.js
View File

@ -1,33 +1,49 @@
class Resources { class Resources {
constructor(name, color, numSlots, width, x, y) { constructor(name, color, numSlots, width) {
this.name = name this.name = name
this.color = color this.color = color
this.numSlots = numSlots this.numSlots = numSlots
this.filledSlots = numSlots / 2 this.filledSlots = numSlots / 2
this.width = width this.width = width
this.height = 40 this.height = 40
this.x = x
this.y = y
this.margin = 5 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 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 width = this.width / this.numSlots
const x = this.x + ((width + this.margin) * i) const x = ((width + this.margin) * i) + (this.margin / 2)
const y = this.y
ctx.beginPath() ctx.beginPath()
ctx.strokeStyle = this.color ctx.strokeStyle = this.color
ctx.strokeRect(x, y, width, this.height) ctx.strokeRect(x, 0, width, this.height)
if (i < this.filledSlots) { if (i < this.filledSlots) {
ctx.fillStyle = this.color 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 { #clockArea {
display: flex; display: flex;
gap: 5px; gap: 5px;
margin: 10px;
}
#resourcesArea {
display: flex;
gap: 5px;
margin: 10px;
}
canvas {
margin: 5px;
} }