technicalkiwi
/
animate
mirror of https://github.com/SamEyeBam/animate.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

3
docs/js/helper.js
View File

@ -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" },

23
docs/js/objects.js
View File

@ -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);
}
}