technicalkiwi/animate
1
0
Fork 0
mirror of https://github.com/SamEyeBam/animate.git synced 2026-03-21 22:35:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine Countdown timezone, progress, and display

Browse Source 
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.
This commit is contained in:
Sam
2026-02-04 15:03:58 +13:00
parent 95f35a1fa0
commit 5c8c8e1591
1 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/js/shapes/Countdown.js
View File

@@ -3,7 +3,7 @@
*/ */
class Countdown extends BaseShape { class Countdown extends BaseShape {
static config = [ static config = [
{ type: 'range', min: 8000, max: 2000000, defaultValue: 2000000, property: 'milestone' }, { type: 'range', min: 8000, max: 2000000, defaultValue: 10000, property: 'milestone' },
]; ];
constructor(milestone) { constructor(milestone) {
@@ -13,10 +13,12 @@ class Countdown extends BaseShape {
secondsUntilDate(targetDate) { secondsUntilDate(targetDate) {
const now = new Date(); const now = new Date();
const nzTimeString = targetDate.replace('T', 'T').concat('+12:00'); // Parse the date string as NZ time (UTC+13:00 during NZDT, UTC+12:00 during NZST)
const target = new Date(nzTimeString); // 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(); const difference = target.getTime() - now.getTime();
return Math.round(difference / 1000); return Math.max(0, Math.round(difference / 1000)); // Don't return negative values
} }
drawProgressBar(progress) { drawProgressBar(progress) {
@@ -48,26 +50,35 @@ class Countdown extends BaseShape {
ctx.fillStyle = "white"; ctx.fillStyle = "white";
ctx.textAlign = "center"; ctx.textAlign = "center";
const futureDate = '2026-12-31T04:30:00'; // Set your target date in NZ local time format
const futureDate = '2026-02-05T17:00:00';
const seconds = this.secondsUntilDate(futureDate); const seconds = this.secondsUntilDate(futureDate);
const minutes = Math.floor(seconds / 60); const minutes = Math.floor(seconds / 60);
const hours = Math.floor(seconds / 3600); const hours = Math.floor(seconds / 3600);
const percentRounded = (((elapsed / 1000) / seconds) * 100).toFixed(8); 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(seconds + " Seconds", centerX, centerY - 200);
ctx.fillText(minutes + " Minutes", centerX, centerY - 100); ctx.fillText(minutes + " Minutes", centerX, centerY - 100);
ctx.fillText(hours + " Hours", centerX, centerY); ctx.fillText(hours + " Hours (" + days + " days)", centerX, centerY);
ctx.fillText(percentRounded + "% Closer", centerX, centerY + 300); ctx.fillText(percentRounded + "% Closer", centerX, centerY + 300);
const milestoneSeconds = this.milestone; const milestoneSeconds = this.milestone;
const target = new Date(futureDate + '+12:00'); const milestoneDate = new Date(target.getTime() - milestoneSeconds * 1000);
const milestoneDate = new Date(target.getTime() - milestoneSeconds * 1000).toLocaleString(); const milestoneDisplayDate = milestoneDate.toLocaleString();
ctx.fillText(milestoneDate, centerX, centerY + 100); ctx.fillText(milestoneDisplayDate, centerX, centerY + 100);
ctx.fillText("^-- " + milestoneSeconds + " milestone", centerX, centerY + 200); ctx.fillText("^-- " + milestoneSeconds + "s milestone", centerX, centerY + 200);
const canvasWidth = ctx.canvas.width; const canvasWidth = ctx.canvas.width;
const secondsPerPixel = (seconds / canvasWidth); const secondsPerPixel = (seconds / canvasWidth);
const secondsUntilFirstPixel = secondsPerPixel - (elapsed / 10); const secondsUntilFirstPixel = secondsPerPixel - (elapsed / 1000);
ctx.fillText("Time until first pixel: " + Math.round(secondsUntilFirstPixel) + " seconds", centerX, centerY + 350); ctx.fillText("Time until first pixel: " + Math.round(secondsUntilFirstPixel) + " seconds", centerX, centerY + 350);