diff --git a/index.html b/index.html index e4bd037..8651373 100644 --- a/index.html +++ b/index.html @@ -8,5 +8,6 @@
+
diff --git a/src/main.js b/src/main.js index 9a51664..c5f92ca 100644 --- a/src/main.js +++ b/src/main.js @@ -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) } diff --git a/src/morale.js b/src/morale.js index bc616bd..dffeb48 100644 --- a/src/morale.js +++ b/src/morale.js @@ -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() } } diff --git a/style.css b/style.css index a0a4ba1..f3bde6f 100644 --- a/style.css +++ b/style.css @@ -6,13 +6,7 @@ align-items: center; } -#clockArea { - display: flex; - gap: 5px; - margin: 10px; -} - -#resourcesArea { +#clockArea, #resourcesArea, #moraleArea { display: flex; gap: 5px; margin: 10px;