diff --git a/Insperation/Screenshot 2025-04-27 101948.png b/Insperation/Screenshot 2025-04-27 101948.png new file mode 100644 index 0000000..033f280 Binary files /dev/null and b/Insperation/Screenshot 2025-04-27 101948.png differ diff --git a/Insperation/Screenshot 2025-04-27 103238.png b/Insperation/Screenshot 2025-04-27 103238.png new file mode 100644 index 0000000..9c2d2f2 Binary files /dev/null and b/Insperation/Screenshot 2025-04-27 103238.png differ diff --git a/docs/js/objects.js b/docs/js/objects.js index 477a5ec..e51aac9 100644 --- a/docs/js/objects.js +++ b/docs/js/objects.js @@ -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); } }