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

6
src/main.js
View File

@ -16,11 +16,13 @@ document.addEventListener("DOMContentLoaded", () => {
const r = new Resources("food", "green", 12, 600)
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) {
clocks.forEach(clock => clock.draw.call(clock))
r.draw()
// m.draw(ctx)
m.draw()
window.requestAnimationFrame(draw)
}

32
src/morale.js
View File

@ -1,26 +1,44 @@
class Morale {
constructor(name, color, width, x, y) {
constructor(name, color, width) {
this.name = name
this.color = color
this.value = 0.3
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.canvas.height = this.height
this.ctx = this.canvas.getContext("2d")
if (this.width == 0) throw "asdf"
}
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(ctx) {
ctx.lineWidth = 3
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.fillStyle = this.color
ctx.beginPath()
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.beginPath()
ctx.roundRect(this.x, this.y, this.width, this.height, 10)
ctx.roundRect(0, 0, this.width, this.height, 10)
ctx.stroke()
}
}

8
style.css
View File

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