diff --git a/index.html b/index.html new file mode 100644 index 0000000..8967443 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + Conjure Event Clock + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..73a9769 --- /dev/null +++ b/script.js @@ -0,0 +1,145 @@ +(function(){ + class Animator { + constructor(canvas, context){ + this.drawables = []; + this.canvas = canvas; + this.context = context || canvas.getContext('2d'); + this.timerId = -1; + }; + + draw(){ + this.canvas.width = this.context.width = window.innerWidth*2; + this.canvas.height = this.context.height = window.innerHeight*2; + this.context.clearRect(0, 0, window.innerWidth, window.innerHeight) + for(var i of this.drawables){ + i.draw(this.context); + } + }; + + update(){ + for(var i of this.drawables){ + i.update(this.drawables); + } + this.draw(); + }; + + start(){ + if(this.timerId>0) + clearInterval(this.timerId); + this.timerId = window.setInterval(this.update.bind(this), 16); + }; + + stop(){ + if(this.timerId>0) + clearInterval(this.timerId); + }; + }; + + class Clock { + constructor(x, y, scale=1){ + this.center = {x:x*scale, y:y*scale} + this.radius = (Math.min(window.innerWidth, window.innerHeight) / 2 - 200) * scale + this.strokeThickness = 2 * scale + this.circleThickness = 4 * scale + this.strokeColor = "rgba(17, 17, 17, 1)" + this.strokeStyle = "solid" + this.fillColor = "rgba(0, 0, 0, 0)" + } + + draw(ctx){ + ctx.beginPath() + ctx.strokeStyle = this.strokeColor + ctx.fillStyle = this.fillColor + ctx.ellipse(this.center.x, this.center.y, this.radius, this.radius, 0, 0, 360, false) + ctx.fill() + ctx.closePath() + ctx.stroke() + + var startOfYear = new Date(new Date().getFullYear(), 0, 1) + var endOfYear = new Date(new Date().getFullYear()+1, 0, 1) + var lastMonth = -1 + + ctx.beginPath() + ctx.fillStyle = "rgba(0, 0, 0, 0.15)" + ctx.arc(this.center.x, this.center.y, this.radius, Math.PI/2, Math.PI/2 + Math.PI * 2 * (+new Date() - startOfYear) / (endOfYear - startOfYear), !true) + ctx.lineTo(this.center.x, this.center.y) + ctx.closePath() + ctx.fill() + + + ctx.beginPath() + var d = new Date(startOfYear); + const days = (endOfYear - startOfYear)/(1000*60*60*24); + //days + for(var i = 0; i