countdown formatting fixed
This commit is contained in:
parent
938227cfa2
commit
df55350f51
Binary file not shown.
After ![]() (image error) Size: 686 KiB |
Binary file not shown.
After ![]() (image error) Size: 1.4 MiB |
|
@ -765,43 +765,57 @@ class Countdown extends BaseShape {
|
|||
return Math.round(difference / 1000);
|
||||
}
|
||||
|
||||
drawProgressBar(progress, barWidth) {
|
||||
drawProgressBar(progress) {
|
||||
const colourBackground = "#0c2f69";
|
||||
const colourProgress = "#4287f5";
|
||||
// const barWidth = 400;
|
||||
const barWidth = ctx.canvas.width;
|
||||
const barHeight = 60;
|
||||
const barX = centerX - barWidth / 2;
|
||||
const barY = centerY + 350 - barHeight / 2;
|
||||
// const barX = centerX - barWidth / 2;
|
||||
const barX = 0;
|
||||
// const barY = centerY + 350 - barHeight / 2;
|
||||
const barY = ctx.canvas.height - barHeight;
|
||||
|
||||
ctx.fillStyle = colourBackground;
|
||||
ctx.beginPath();
|
||||
ctx.rect(barX, barY, barWidth, 60)
|
||||
ctx.rect(barX, barY, barWidth, barHeight)
|
||||
ctx.fill();
|
||||
|
||||
ctx.fillStyle = colourProgress;
|
||||
ctx.beginPath();
|
||||
ctx.rect(barX, barY, (barWidth/100)*progress, 60)
|
||||
ctx.rect(barX, barY, (barWidth / 100) * progress, barHeight)
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
draw(elapsedTime) {
|
||||
// elapsedTime *= this.speedMultiplier / 400
|
||||
|
||||
ctx.font = "48px serif";
|
||||
let fontSize = 48;
|
||||
if(ctx.canvas.width < 1000){
|
||||
fontSize = 24;
|
||||
}
|
||||
|
||||
ctx.font = fontSize + "px serif";
|
||||
ctx.fillStyle = "white"
|
||||
ctx.textAlign = "center";
|
||||
const futureDate = '2025-05-31T08:20:00';
|
||||
const seconds = this.secondsUntilDate(futureDate);
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const percentRounded = (((elapsedTime / 1000) / seconds) * 100 ).toFixed(8);
|
||||
ctx.fillText(seconds + " Seconds", centerX - 100, centerY);
|
||||
ctx.fillText(minutes + " Minues", centerX - 100, centerY + 100);
|
||||
ctx.fillText(hours + " Hours", centerX - 100, centerY + 200);
|
||||
ctx.fillText(percentRounded + "% Closer", centerX - 100, centerY + 300);
|
||||
|
||||
const percentRounded = (((elapsedTime / 1000) / seconds) * 100).toFixed(8);
|
||||
ctx.fillText(seconds + " Seconds", centerX, centerY - 200);
|
||||
ctx.fillText(minutes + " Minues", centerX, centerY - 100);
|
||||
ctx.fillText(hours + " Hours", centerX, centerY);
|
||||
ctx.fillText(percentRounded + "% Closer", centerX, centerY + 300);
|
||||
|
||||
const milestoneSeconds = 2000000;
|
||||
const target = new Date(futureDate);
|
||||
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);
|
||||
this.drawProgressBar(percentRounded,1000);
|
||||
this.drawProgressBar(percentRounded);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue