csd4ni3l/loginween
1
0
Fork 0
mirror of https://github.com/csd4ni3l/loginween.git synced 2026-01-01 12:33:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix countdown visualization logic, optimize drawing and showing logic by only getting image data once in color getting functions

Browse Source
This commit is contained in:
csd4ni3l
2025-10-23 22:02:04 +02:00
parent 9de0f728d5
commit b17bc6283e
2 changed files with 60 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
templates/countdown.jinja2
View File

@@ -37,13 +37,13 @@
<div class="position-absolute top-50 start-50 translate-middle text-center">
<h1 id="halloween_countdown">Time to next Halloween: Loading...</h1>
<div class="mt-3"></div>
<h3>Carved Pumpkin Countdown Visualization (last 30 days to Halloween):</h3>
<h3 id="visualization_info">Carved Pumpkin Countdown Visualization (last ? days to Halloween):</h3>
<canvas id="pumpkin_canvas" width="600" height="600"></canvas>
</div>
<script>
const halloween_countdown = document.getElementById("halloween_countdown");
const [ctx, canvas, img] = setup_pumpkin("pumpkin_canvas", null, null, null, 30, false);
const [ctx, canvas, img] = setup_pumpkin("pumpkin_canvas", null, null, null, 15, false);
let colorable = 0;
let last_days = -1;
@@ -52,7 +52,7 @@ function update() {
let year = current_time.getFullYear();
const halloween_time = new Date(year, 9, 31);
const after_halloween = new Date(year, 10, 1);
const after_halloween = new Date(year, 15, 1);
if (current_time > halloween_time) {
if (current_time < after_halloween) {
@@ -73,18 +73,19 @@ function update() {
if (days <= colorable && days != last_days) {
last_days = days;
clearCanvas(ctx, canvas, img, 30, []);
color_amount(ctx, canvas, 30, colorable - days);
clearCanvas(ctx, canvas, img, 15, []);
color_amount(ctx, canvas, 15, colorable - days);
}
halloween_countdown.textContent = `Time to next Halloween: ${days} day(s) ${hours} hour(s) ${minutes} minute(s) ${seconds} second(s)`
}
img.addEventListener('load', function() {
colorable = get_colorable(ctx, canvas, 30);
colorable = get_colorable(ctx, canvas, 15);
document.getElementById("visualization_info").textContent = `Carved Pumpkin Countdown Visualization (last ${colorable} days to Halloween):`
imageLoaded = true;
update();
setInterval(update, 1000);
setInterval(update, 1500);
});
</script>