technicalkiwi/animate
1
0
Fork 0
mirror of https://github.com/SamEyeBam/animate.git synced 2025-09-27 22:45:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

countdown formatting fixed

Browse Source
This commit is contained in:
Sam
2025-05-04 19:50:13 +12:00
parent 938227cfa2
commit df55350f51
3 changed files with 28 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Insperation/Screenshot 2025-04-27 101948.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 686 KiB

BIN
Insperation/Screenshot 2025-04-27 103238.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

42
docs/js/objects.js
View File

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