diff --git a/index.html b/index.html index 0a610bc..e4bd037 100644 --- a/index.html +++ b/index.html @@ -7,5 +7,6 @@
+
diff --git a/src/clock.js b/src/clock.js index 6d43441..851ac0a 100644 --- a/src/clock.js +++ b/src/clock.js @@ -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) diff --git a/src/main.js b/src/main.js index 31c07c5..9a51664 100644 --- a/src/main.js +++ b/src/main.js @@ -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) } diff --git a/src/resources.js b/src/resources.js index 84dc5d6..5cbe320 100644 --- a/src/resources.js +++ b/src/resources.js @@ -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) } } } diff --git a/style.css b/style.css index 0f8804b..a0a4ba1 100644 --- a/style.css +++ b/style.css @@ -9,4 +9,15 @@ #clockArea { display: flex; gap: 5px; + margin: 10px; +} + +#resourcesArea { + display: flex; + gap: 5px; + margin: 10px; +} + +canvas { + margin: 5px; }