diff --git a/assets/tone.mp3 b/assets/tone.mp3 new file mode 100644 index 0000000..24dd1f7 Binary files /dev/null and b/assets/tone.mp3 differ diff --git a/canvas.js b/canvas.js index 78825db..6403457 100644 --- a/canvas.js +++ b/canvas.js @@ -1,3 +1,5 @@ +var tone = new Audio("./assets/tone.mp3"); + document.querySelectorAll(".clock").forEach((clock) => { var canvas = clock.querySelector("canvas"); var ctx = canvas.getContext("2d"); @@ -8,6 +10,16 @@ document.querySelectorAll(".clock").forEach((clock) => { ctx.lineCap = "round"; update(); }); +document.querySelectorAll(".timer").forEach((clock) => { + var canvas = clock.querySelector("canvas"); + var ctx = canvas.getContext("2d"); + ctx.resetTransform(); + ctx.translate(32, 32); + ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--foreground'); + ctx.lineWidth = 2; + ctx.lineCap = "round"; + update(); +}); function update() { document.querySelectorAll(".clock").forEach((clock, i) => { var canvas = clock.querySelector("canvas"); @@ -86,4 +98,44 @@ function updateMain() { window.requestAnimationFrame(updateMain); } -window.requestAnimationFrame(updateMain); \ No newline at end of file +window.requestAnimationFrame(updateMain); + +function updateTimer() { + document.querySelectorAll(".timer-enabled").forEach((clock, i) => { + var timer = clock.dataset.time; + var mins = Math.floor(timer / 60); + mins = (mins < 10 ? "0" + mins : mins); + var secs = timer % 60; + secs = (secs < 10 ? "0" + secs : secs); + + var canvas = clock.querySelector("canvas"); + var ctx = canvas.getContext("2d"); + ctx.strokeStyle = getComputedStyle(document.documentElement).getPropertyValue('--foreground'); + ctx.resetTransform(); + ctx.translate(32, 32); + ctx.lineWidth = 2; + ctx.lineCap = "round"; + var canvas = clock.querySelector("canvas"); + var ctx = canvas.getContext("2d"); + clock.querySelector(".mins").innerHTML = mins; + clock.querySelector(".seconds").innerHTML = secs; + ctx.clearRect(-32,-32, 64, 64); + ctx.beginPath(); + ctx.arc(0, 0, 30, 0, Math.PI * 2); + ctx.stroke(); + drawHand(ctx, (secs*Math.PI/30), 16); + }); +} + +setInterval(() => { + document.querySelectorAll(".timer-enabled:not(.timer-paused)").forEach((clock, i) => { + var timer = clock.dataset.time; + clock.dataset.time--; + if (timer <= 0) { + clock.classList.remove("timer-enabled"); + tone.play(); + } + }); + updateTimer(); +}, 1000); +updateTimer(); \ No newline at end of file diff --git a/index.html b/index.html index 8188105..0904185 100644 --- a/index.html +++ b/index.html @@ -19,12 +19,14 @@
Configure Timer
+ +About FunnyClock²
+ +