mirror of
https://github.com/SamEyeBam/animate.git
synced 2026-02-04 09:20:25 +00:00
5c8c8e1591
Adjust Countdown behavior and UI: reduce default milestone to 10000, parse target dates as NZ local time (explicit +13:00) and prevent negative remaining seconds. Rework progress calculation to measure percent complete from page load to target, clamp percent to 0-100, and add days to the hours display. Format milestone display with seconds and fix time-scale used for the "time until first pixel" computation (use elapsed in seconds). Comments added to clarify timezone handling.
90 lines
3.3 KiB
JavaScript
90 lines
3.3 KiB
JavaScript
/**
|
|
* Countdown - Countdown timer display with progress bar
|
|
*/
|
|
class Countdown extends BaseShape {
|
|
static config = [
|
|
{ type: 'range', min: 8000, max: 2000000, defaultValue: 10000, property: 'milestone' },
|
|
];
|
|
|
|
constructor(milestone) {
|
|
super();
|
|
this.milestone = milestone;
|
|
}
|
|
|
|
secondsUntilDate(targetDate) {
|
|
const now = new Date();
|
|
// Parse the date string as NZ time (UTC+13:00 during NZDT, UTC+12:00 during NZST)
|
|
// The date string should be in format: '2026-01-01T07:33:20'
|
|
// We interpret this as NZ local time and convert to UTC
|
|
const target = new Date(targetDate + '+13:00'); // +13:00 for NZDT, change to +12:00 for NZST
|
|
const difference = target.getTime() - now.getTime();
|
|
return Math.max(0, Math.round(difference / 1000)); // Don't return negative values
|
|
}
|
|
|
|
drawProgressBar(progress) {
|
|
const colourBackground = "#0c2f69";
|
|
const colourProgress = "#4287f5";
|
|
const barWidth = ctx.canvas.width;
|
|
const barHeight = 60;
|
|
const barX = 0;
|
|
const barY = ctx.canvas.height - barHeight;
|
|
|
|
ctx.fillStyle = colourBackground;
|
|
ctx.beginPath();
|
|
ctx.rect(barX, barY, barWidth, barHeight);
|
|
ctx.fill();
|
|
|
|
ctx.fillStyle = colourProgress;
|
|
ctx.beginPath();
|
|
ctx.rect(barX, barY, (barWidth / 100) * progress, barHeight);
|
|
ctx.fill();
|
|
}
|
|
|
|
draw(elapsed) {
|
|
let fontSize = 48;
|
|
if (ctx.canvas.width < 1000) {
|
|
fontSize = 24;
|
|
}
|
|
|
|
ctx.font = fontSize + "px serif";
|
|
ctx.fillStyle = "white";
|
|
ctx.textAlign = "center";
|
|
|
|
// Set your target date in NZ local time format
|
|
const futureDate = '2026-02-05T17:00:00';
|
|
const seconds = this.secondsUntilDate(futureDate);
|
|
const minutes = Math.floor(seconds / 60);
|
|
const hours = Math.floor(seconds / 3600);
|
|
const days = Math.floor(hours / 24);
|
|
|
|
// Calculate progress: how much closer since page loaded
|
|
const target = new Date(futureDate + '+13:00'); // Use same timezone offset
|
|
const now = new Date();
|
|
const pageLoadTime = now.getTime() - elapsed; // When the page was loaded
|
|
const totalTimeFromLoadToTarget = target.getTime() - pageLoadTime; // Total time from load to target
|
|
const percentComplete = (elapsed / totalTimeFromLoadToTarget) * 100;
|
|
const percentRounded = Math.min(100, Math.max(0, percentComplete)).toFixed(8);
|
|
|
|
ctx.fillText(seconds + " Seconds", centerX, centerY - 200);
|
|
ctx.fillText(minutes + " Minutes", centerX, centerY - 100);
|
|
ctx.fillText(hours + " Hours (" + days + " days)", centerX, centerY);
|
|
ctx.fillText(percentRounded + "% Closer", centerX, centerY + 300);
|
|
|
|
const milestoneSeconds = this.milestone;
|
|
const milestoneDate = new Date(target.getTime() - milestoneSeconds * 1000);
|
|
const milestoneDisplayDate = milestoneDate.toLocaleString();
|
|
ctx.fillText(milestoneDisplayDate, centerX, centerY + 100);
|
|
ctx.fillText("^-- " + milestoneSeconds + "s milestone", centerX, centerY + 200);
|
|
|
|
const canvasWidth = ctx.canvas.width;
|
|
const secondsPerPixel = (seconds / canvasWidth);
|
|
const secondsUntilFirstPixel = secondsPerPixel - (elapsed / 1000);
|
|
|
|
ctx.fillText("Time until first pixel: " + Math.round(secondsUntilFirstPixel) + " seconds", centerX, centerY + 350);
|
|
|
|
this.drawProgressBar(percentRounded);
|
|
}
|
|
}
|
|
|
|
shapeRegistry.register('Countdown', Countdown);
|