From 518c32ee8b14b97bfde08c06ca152cd2464bb6e9 Mon Sep 17 00:00:00 2001 From: Sam <34695753+SamEyeBam@users.noreply.github.com> Date: Sun, 4 May 2025 20:37:45 +1200 Subject: [PATCH] time till pixel --- docs/js/helper.js | 3 +-- docs/js/objects.js | 23 ++++++++++++++++------- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/docs/js/helper.js b/docs/js/helper.js index 45ea811..b34285c 100644 --- a/docs/js/helper.js +++ b/docs/js/helper.js @@ -93,8 +93,7 @@ async function fetchConfig(className) { { type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" }, ], Countdown: [ - { type: "range", min: 300, max: 600, defaultValue: 342, property: "width" }, - { type: "range", min: 100, max: 1000, defaultValue: 100, property: "limiter" }, + { type: "range", min: 8000, max: 2000000, defaultValue: 2000000, property: "milestone" }, ], NewWave: [ { type: "range", min: 300, max: 600, defaultValue: 342, property: "width" }, diff --git a/docs/js/objects.js b/docs/js/objects.js index 57e4897..326f73b 100644 --- a/docs/js/objects.js +++ b/docs/js/objects.js @@ -752,10 +752,9 @@ class NewWave extends BaseShape { } class Countdown extends BaseShape { - constructor() { + constructor(milestone) { super(); - this.width; - this.sides; + this.milestone = milestone; } secondsUntilDate(targetDate) { @@ -790,7 +789,7 @@ class Countdown extends BaseShape { ctx.fillStyle = colourProgress; ctx.beginPath(); ctx.rect(barX, barY, (barWidth / 100) * progress, barHeight) - ctx.fill(); + ctx.fill();; } draw(elapsedTime) { @@ -814,14 +813,24 @@ class Countdown extends BaseShape { ctx.fillText(hours + " Hours", centerX, centerY); ctx.fillText(percentRounded + "% Closer", centerX, centerY + 300); - const milestoneSeconds = 2000000; + const milestoneSeconds = this.milestone; const target = new Date(futureDate + '+12:00'); // Add NZ timezone offset here too const milestoneDate = new Date(target.getTime() - milestoneSeconds * 1000).toLocaleString() ctx.fillText(milestoneDate, centerX, centerY + 100); ctx.fillText("^-- " + milestoneSeconds + " milestone", centerX, centerY + 200); - // ctx.fillText(percentRounded + "% Closer", centerX - 100, centerY + 300); - // this.drawProgressBar(percentRounded,400); + // Calculate when a single pixel will appear on the progress bar + const canvasWidth = ctx.canvas.width; + // Calculate how many seconds are needed to move a single pixel + // Each pixel represents (100/canvasWidth) percent of the total progress + // We need to know how many seconds that percentage represents + const secondsPerPixel = (seconds/canvasWidth); + console.log(elapsedTime) + const secondsUntilFirstPixel = secondsPerPixel - (elapsedTime/10); + // console.log(secondsUntilFirstPixel) + + ctx.fillText("Time until first pixel: " + Math.round(secondsUntilFirstPixel) + " seconds", centerX, centerY + 350); + this.drawProgressBar(percentRounded); } }