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

Morale manages etcetera etcetera

Browse Source
This commit is contained in:
Bill Rossi 2026-01-26 07:04:40 -05:00
parent 3fc5c15585
commit b3d89cdcfa
4 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

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

6
src/main.js
View File

@ -16,11 +16,13 @@ document.addEventListener("DOMContentLoaded", () => {
const r = new Resources("food", "green", 12, 600) const r = new Resources("food", "green", 12, 600)
resourcesArea.appendChild(r.htmlElement()) resourcesArea.appendChild(r.htmlElement())
// const m = new Morale("oh no", "red", 600, 100, 500) const moraleArea = document.querySelector("#moraleArea")
const m = new Morale("oh no", "red", 600)
moraleArea.appendChild(m.htmlElement())
function draw(_ts) { function draw(_ts) {
clocks.forEach(clock => clock.draw.call(clock)) clocks.forEach(clock => clock.draw.call(clock))
r.draw() r.draw()
// m.draw(ctx) m.draw()
window.requestAnimationFrame(draw) window.requestAnimationFrame(draw)
} }

32
src/morale.js
View File

@ -1,26 +1,44 @@
class Morale { class Morale {
constructor(name, color, width, x, y) { constructor(name, color, width) {
this.name = name this.name = name
this.color = color this.color = color
this.value = 0.3 this.value = 0.3
this.width = width this.width = width
this.height = 40 this.height = 40
this.x = x this.margin = 5
this.y = y
this.canvas = document.createElement("canvas")
this.canvas.width = this.width + this.margin
this.canvas.height = this.height
this.ctx = this.canvas.getContext("2d")
if (this.width == 0) throw "asdf"
} }
draw(ctx) { htmlElement() {
ctx.lineWidth = 3 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 = window.debug ? "lightgrey" : "white"
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
ctx.lineWidth = 5
ctx.strokeStyle = "black" ctx.strokeStyle = "black"
ctx.fillStyle = this.color ctx.fillStyle = this.color
ctx.beginPath() ctx.beginPath()
const width = this.width * this.value const width = this.width * this.value
ctx.roundRect(this.x, this.y, width, this.height, 10) ctx.roundRect(0, 0, width, this.height, 10)
ctx.fill() ctx.fill()
ctx.beginPath() ctx.beginPath()
ctx.roundRect(this.x, this.y, this.width, this.height, 10) ctx.roundRect(0, 0, this.width, this.height, 10)
ctx.stroke() ctx.stroke()
} }
} }

8
style.css
View File

@ -6,13 +6,7 @@
align-items: center; align-items: center;
} }
#clockArea { #clockArea, #resourcesArea, #moraleArea {
display: flex;
gap: 5px;
margin: 10px;
}
#resourcesArea {
display: flex; display: flex;
gap: 5px; gap: 5px;
margin: 10px; margin: 10px;