Modularize pumpkin.js so it's easy to adapt, make main fetch posts(no creation yet), add very coooool countdown to Halloween with pumpkin carving visualization

app.py

@@ -71,9 +71,15 @@ def main():
 
     cur.execute("SELECT * FROM Posts LIMIT 20")
 
+    posts = cur.fetchall()
+
     cur.close()
 
-    return render_template("index.jinja2", username=username)
+    return render_template("index.jinja2", username=username, posts=posts)
+
+@app.route("/countdown")
+def countdown():
+    return render_template("countdown.jinja2", logged_in=flask_login.current_user.is_authenticated, grid_size=os.getenv("GRID_SIZE", 15))
 
 @app.route("/login", methods=["GET", "POST"])
 def login():

static/pumpkin.js

@@ -1,80 +1,139 @@
-function setup_pumpkin(canvas_id, clearbtn_id, form_id, pattern_field_id, grid_size) {
+function draw(e, ctx, CELL_SIZE, drawing, canvas, currentPattern) {
-    const canvas = document.getElementById(canvas_id);
+    if (!drawing) return;
-    const ctx = canvas.getContext('2d');
+    var rect = canvas.getBoundingClientRect();
-    const img = new Image();
+    var x = e.clientX - rect.left;
-    img.src = '/static/pumpkin.png';
+    var y = e.clientY - rect.top;
+    var gridX = Math.floor(x / CELL_SIZE);
+    var gridY = Math.floor(y / CELL_SIZE);
+    check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY);
+}
 
-    const GRID_SIZE = grid_size;
+function clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern) {
-    const CELL_SIZE = canvas.width / GRID_SIZE;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    drawGrid(ctx, canvas, GRID_SIZE);
+    currentPattern.length = 0;
+}
 
-    img.onload = () => {
+function drawGrid(ctx, canvas, GRID_SIZE) {
-        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    const cell_size = canvas.width / GRID_SIZE;
-        drawGrid();
+    ctx.strokeStyle = 'rgba(0, 0, 0, 0.6)';
-    };
+    ctx.lineWidth = 1;
+    for (let i = 0; i <= GRID_SIZE; i++) {
+        const pos = i * cell_size;
+        ctx.beginPath();
+        ctx.moveTo(pos, 0);
+        ctx.lineTo(pos, canvas.height);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(0, pos);
+        ctx.lineTo(canvas.width, pos);
+        ctx.stroke();
+    }
+}
 
-    let drawing = false;
+function check_colorable(ctx, CELL_SIZE, gridX, gridY) {
+    var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
+    var cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
+    var pixel = ctx.getImageData(cellX, cellY, 1, 1).data;
+    return (pixel[0] >= 254 && (pixel[1] >= 124 && pixel[1] <= 126));
+}
+
+function check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY) {
+    if (check_colorable(ctx, CELL_SIZE, gridX, gridY)) {
+        var key = `${gridX},${gridY}`;
+        if (!currentPattern.includes(key)) {
+            currentPattern.push(key);
+            var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
+            var cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
+            ctx.fillStyle = 'transparent';
+            ctx.clearRect(cellX - CELL_SIZE / 3, cellY - CELL_SIZE / 3, CELL_SIZE, CELL_SIZE);
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    return false;
+}
+
+function includesPoint(arr, [x, y]) {
+    return arr.some(([a, b]) => a === x && b === y);
+}
+
+function color_amount(ctx, canvas, grid_size, amount) {
+    let colored = 0;
+    const cell_size = canvas.width / grid_size;
     let currentPattern = [];
 
-    canvas.addEventListener('mousedown', () => { drawing = true; });
+    for (let y = 0; y < grid_size; y++) {
-    canvas.addEventListener('mouseup', () => { drawing = false; });
+        for (let x = 0; x < grid_size; x++) {
-    canvas.addEventListener('mousemove', draw);
+            if (colored == amount) {
-    canvas.addEventListener('click', (e) => {draw(e, true)});
+                return currentPattern;
-
+            }
-    function draw(e, force=false) {
+            if (check_and_color(ctx, cell_size, currentPattern, x, y)) {
-        if (!drawing && !force) return;
+                colored++;
-        var rect = canvas.getBoundingClientRect();
-        var x = e.clientX - rect.left;
-        var y = e.clientY - rect.top;
-
-        var gridX = Math.floor(x / CELL_SIZE);
-        var gridY = Math.floor(y / CELL_SIZE);
-
-        var cellX = gridX * CELL_SIZE + CELL_SIZE / 3;
-        var cellY = gridY * CELL_SIZE + CELL_SIZE / 3;
-
-        var pixel = ctx.getImageData(cellX, cellY, 1, 1).data;
-
-        if (pixel[0] >= 254 && (pixel[1] >= 124 && pixel[1] <= 126)) {
-            var key = `${gridX},${gridY}`;
-
-            if (!currentPattern.includes(key)) {
-                currentPattern.push(key);
-                ctx.fillStyle = 'black'; 
-                ctx.fillRect(cellX - CELL_SIZE / 3, cellY - CELL_SIZE / 3, CELL_SIZE, CELL_SIZE);
             }
         }
     }
     
-    function drawGrid() {
+    return currentPattern;
-        ctx.strokeStyle = 'rgba(0, 0, 0, 0.6)';
+}
-        ctx.lineWidth = 1;
 
-        for (let i = 0; i <= GRID_SIZE; i++) {
+function draw_pattern(ctx, canvas, pattern, grid_size) {
-            const pos = i * CELL_SIZE;
+    const cell_size = canvas.width / grid_size;
+    let currentPattern = [];
 
-            ctx.beginPath();
+    for (let x = 0; x < grid_size; x++) {
-            ctx.moveTo(pos, 0);
+        for (let y = 0; y < grid_size; y++) {
-            ctx.lineTo(pos, canvas.height);
+            if (includesPoint(pattern, [x, y])) {
-            ctx.stroke();
+                check_and_color(ctx, cell_size, currentPattern, x, y);
-
+            }
-            ctx.beginPath()
-            ctx.moveTo(0, pos);
-            ctx.lineTo(canvas.width, pos);
-            ctx.stroke()
         }
     }
     
-    document.getElementById(clearbtn_id).addEventListener('click', clearCanvas);
+    return currentPattern;
+}
 
-    function clearCanvas() {
+function get_colorable(ctx, canvas, grid_size) {
-        drawing = false; // Fix hold staying after clear
+    let colorable = 0;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const cell_size = canvas.width / grid_size;
-        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
-        drawGrid()
+    for (let x = 0; x < grid_size; x++) {
-        currentPattern = [];
+        for (let y = 0; y < grid_size; y++) {
+            if (check_colorable(ctx, cell_size, x, y)) {
+                colorable++;
+            }
+        }
     }
 
-    document.getElementById(form_id).addEventListener('submit', function(event) {
+    return colorable;
-        document.getElementById(pattern_field_id).value = JSON.stringify(currentPattern);
+}
-    });
+
+function setup_pumpkin(canvas_id, clearbtn_id, form_id, pattern_field_id, grid_size, allow_drawing=true) {
+    const canvas = document.getElementById(canvas_id);
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+    img.src = '/static/pumpkin.png';
+    const GRID_SIZE = grid_size;
+    const CELL_SIZE = canvas.width / GRID_SIZE;
+    let currentPattern = [];
+    
+    img.onload = () => {
+        clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern);
+    };
+    
+    if (allow_drawing) {
+        let drawing = false;
+        canvas.addEventListener('mousedown', () => { drawing = true; });
+        canvas.addEventListener('mouseup', () => { drawing = false; });
+        canvas.addEventListener('mousemove', (e) => draw(e, ctx, CELL_SIZE, drawing, canvas, currentPattern));
+        canvas.addEventListener('click', (e) => {draw(e, ctx, CELL_SIZE, true, canvas, currentPattern)});
+        document.getElementById(clearbtn_id).addEventListener('click', () => clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern));
+        document.getElementById(form_id).addEventListener('submit', function(event) {
+            document.getElementById(pattern_field_id).value = JSON.stringify(currentPattern);
+        });
+    }
+
+    return [ctx, canvas, img];
 }

templates/countdown.jinja2

@@ -0,0 +1,92 @@
+{% extends "base.jinja2" %}
+
+{% block title %}Halloween Countdown{% endblock title %}
+
+{% block nav %}
+{% if logged_in %}
+<li class="nav-item">
+    <a class="nav-link" href="/">Home</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="/countdown">Countdown</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/profile">Profile</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/logout">Logout</a>
+</li>
+{% else %}
+<li class="nav-item">
+    <a class="nav-link" href="/login">Login</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/register">Register</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link active" aria-current="page" href="/countdown">Countdown</a>
+</li>
+<li class="nav-item">
+    <a class="nav-link" href="/logout">Logout</a>
+</li>
+{% endif %}
+{% endblock %}
+
+{% block body %}
+
+<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>
+    <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);
+let colorable = 0;
+let last_days = -1;
+
+function update() {
+    const current_time = new Date();
+    let year = current_time.getFullYear();
+
+    const halloween_time = new Date(year, 9, 31);
+    const after_halloween = new Date(year, 10, 1);
+
+    if (current_time > halloween_time) {
+        if (current_time < after_halloween) {
+            halloween_countdown.textContent = "It's currently Loginween! :)";
+            return;
+        }
+        else {
+            halloween.setFullYear(year + 1);
+        }
+    }
+
+    const diff = halloween_time - current_time;
+
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
+    const minutes = Math.floor((diff / (1000 * 60)) % 60);
+    const seconds = Math.floor((diff / 1000) % 60);
+    
+    if (days <= colorable && days != last_days) {
+        last_days = days;
+        clearCanvas(ctx, canvas, img, 30, []);
+        color_amount(ctx, canvas, 30, 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);
+    imageLoaded = true;
+    update();
+    setInterval(update, 1000);
+});
+
+</script>
+
+{% endblock body %}

templates/index.jinja2

@@ -6,6 +6,9 @@
 <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="/">Home</a>
 </li>
+<li class="nav-item">
+    <a class="nav-link" href="/countdown">Countdown</a>
+</li>
 <li class="nav-item">
     <a class="nav-link" href="/profile">Profile</a>
 </li>
@@ -16,6 +19,14 @@
 
 {% block body %}
 <div class="position-absolute top-50 start-50 translate-middle text-center">
-    <p>LoginWeen is a an app where you login/register with a halloween pumpkin carving as a password.</p>
+    {% for post in posts %}
+    <div class="card" style="width: 18rem;">
+        <canvas class="card-img-top"></canvas>
+        <div class="card-body">
+            <h5 class="card-title">{{ post.1 }}: {{ post.3 }}</h5>
+            <p class="card-text">{{ post.2 }}</p>
+        </div>
+    </div>
+    {% endfor %}
 </div>
 {% endblock body %}

templates/login.jinja2

@@ -9,6 +9,9 @@
 <li class="nav-item">
     <a class="nav-link" href="/register">Register</a>
 </li>
+<li class="nav-item">
+    <a class="nav-link" href="/countdown">Countdown</a>
+</li>
 <li class="nav-item">
     <a class="nav-link" href="/logout">Logout</a>
 </li>

templates/profile.jinja2

@@ -6,6 +6,9 @@
 <li class="nav-item">
     <a class="nav-link" href="/">Home</a>
 </li>
+<li class="nav-item">
+    <a class="nav-link" href="/countdown">Countdown</a>
+</li>
 <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="/profile">Profile</a>
 </li>

templates/register.jinja2

@@ -9,6 +9,9 @@
 <li class="nav-item">
     <a class="nav-link" href="/register">Register</a>
 </li>
+<li class="nav-item">
+    <a class="nav-link" href="/countdown">Countdown</a>
+</li>
 <li class="nav-item">
     <a class="nav-link" href="/logout">Logout</a>
 </li>