time till pixel
This commit is contained in:
parent
ea10ab4af0
commit
518c32ee8b
docs/js
|
@ -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" },
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue