diff --git a/index.html b/index.html index f7a1fd1..0a610bc 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,9 @@ Clocks + - You need JavaScript enabled to see the clocks +
diff --git a/src/clock.js b/src/clock.js index e79fe75..6d43441 100644 --- a/src/clock.js +++ b/src/clock.js @@ -1,25 +1,41 @@ class Clock { - constructor(name, color, numWedges, radius, x, y) { + constructor(name, color, numWedges, radius) { this.name = name this.color = color this.numWedges = numWedges this.filledWedges = numWedges / 2 this.radius = radius - this.x = x - this.y = y this.splitRadius = 10 + this.canvas = document.createElement("canvas") + this.canvas.width = (this.radius * 2) + 40 + this.canvas.height = (this.radius * 2) + 40 + this.ctx = this.canvas.getContext("2d") } - draw(ctx) { + 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() { + const { ctx } = this + ctx.fillStyle = "white" + ctx.fillRect(0, 0, this.canvas.width, this.canvas.height) ctx.lineWidth = 3 - for (let i = 0; i < this.numWedges; i++) this.drawWedge(ctx, i) + for (let i = 0; i < this.numWedges; i++) this.drawWedge(i) } - drawWedge(ctx, i) { + drawWedge(i) { + const { ctx } = this const width = ((2 * Math.PI) / this.numWedges) const angle = width * i - const x = this.x + (Math.cos(angle) * this.splitRadius) - const y = this.y + (Math.sin(angle) * this.splitRadius) + const x = (this.canvas.width / 2) + (Math.cos(angle) * this.splitRadius) + const y = (this.canvas.height / 2) + (Math.sin(angle) * this.splitRadius) ctx.beginPath() ctx.strokeStyle = this.color diff --git a/src/main.js b/src/main.js index 85010fb..31c07c5 100644 --- a/src/main.js +++ b/src/main.js @@ -3,41 +3,24 @@ import Resources from "./resources.js" import Morale from "./morale.js" document.addEventListener("DOMContentLoaded", () => { - const canvas = document.querySelector("canvas") - - const ctx = canvas.getContext("2d") + 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("ennui", "purple", 25, 100) + ] + clocks.map(clock => clock.htmlElement.call(clock)).forEach(clockHtml => clockArea.appendChild(clockHtml)) - const c = new Clock("hi", - "blue", - 9, - 100, - 200, - 200 - ) - - const r = new Resources("ho", - "green", - 12, - 600, - 100, - 400 - ) - - const m = new Morale("oh no", - "red", - 600, - 100, - 500 - ) - - function draw(x) { - ctx.fillStyle = "white" - ctx.fillRect(0, 0, canvas.width, canvas.height) - c.draw(ctx) - r.draw(ctx) - m.draw(ctx) + // 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) + // m.draw(ctx) window.requestAnimationFrame(draw) } window.requestAnimationFrame(draw) + }) diff --git a/style.css b/style.css new file mode 100644 index 0000000..0f8804b --- /dev/null +++ b/style.css @@ -0,0 +1,12 @@ +.card { + border: 5px black solid; + border-radius: 10px; + display: flex; + flex-direction: column; + align-items: center; +} + +#clockArea { + display: flex; + gap: 5px; +}