time till pixel

This commit is contained in:
Sam 2025-05-04 20:37:45 +12:00
parent ea10ab4af0
commit 518c32ee8b
2 changed files with 17 additions and 9 deletions

View File

@ -93,8 +93,7 @@ async function fetchConfig(className) {
{ type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" }, { type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" },
], ],
Countdown: [ Countdown: [
{ type: "range", min: 300, max: 600, defaultValue: 342, property: "width" }, { type: "range", min: 8000, max: 2000000, defaultValue: 2000000, property: "milestone" },
{ type: "range", min: 100, max: 1000, defaultValue: 100, property: "limiter" },
], ],
NewWave: [ NewWave: [
{ type: "range", min: 300, max: 600, defaultValue: 342, property: "width" }, { type: "range", min: 300, max: 600, defaultValue: 342, property: "width" },

View File

@ -752,10 +752,9 @@ class NewWave extends BaseShape {
} }
class Countdown extends BaseShape { class Countdown extends BaseShape {
constructor() { constructor(milestone) {
super(); super();
this.width; this.milestone = milestone;
this.sides;
} }
secondsUntilDate(targetDate) { secondsUntilDate(targetDate) {
@ -790,7 +789,7 @@ class Countdown extends BaseShape {
ctx.fillStyle = colourProgress; ctx.fillStyle = colourProgress;
ctx.beginPath(); ctx.beginPath();
ctx.rect(barX, barY, (barWidth / 100) * progress, barHeight) ctx.rect(barX, barY, (barWidth / 100) * progress, barHeight)
ctx.fill(); ctx.fill();;
} }
draw(elapsedTime) { draw(elapsedTime) {
@ -814,14 +813,24 @@ class Countdown extends BaseShape {
ctx.fillText(hours + " Hours", centerX, centerY); ctx.fillText(hours + " Hours", centerX, centerY);
ctx.fillText(percentRounded + "% Closer", centerX, centerY + 300); 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 target = new Date(futureDate + '+12:00'); // Add NZ timezone offset here too
const milestoneDate = new Date(target.getTime() - milestoneSeconds * 1000).toLocaleString() const milestoneDate = new Date(target.getTime() - milestoneSeconds * 1000).toLocaleString()
ctx.fillText(milestoneDate, centerX, centerY + 100); ctx.fillText(milestoneDate, centerX, centerY + 100);
ctx.fillText("^-- " + milestoneSeconds + " milestone", centerX, centerY + 200); ctx.fillText("^-- " + milestoneSeconds + " milestone", centerX, centerY + 200);
// ctx.fillText(percentRounded + "% Closer", centerX - 100, centerY + 300); // Calculate when a single pixel will appear on the progress bar
// this.drawProgressBar(percentRounded,400); 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); this.drawProgressBar(percentRounded);
} }
} }