Move all pumpkin code to pumpkin.js, remove posts route(will be moved to home), modify the post structure

app.py

@@ -32,9 +32,10 @@ def get_db():
         db.execute("""
             CREATE TABLE IF NOT EXISTS Posts (
                 id INTEGER PRIMARY KEY,
-                username TEXT,
+                username TEXT NOT NULL UNIQUE,
-                comment TEXT,
+                comment TEXT NOT NULL,
-                pattern TEXT NOT NULL
+                pattern TEXT NOT NULL,
+                creation_time INTEGER NOT NULL
             )
         """)
 
@@ -64,7 +65,15 @@ def unathorized_handler():
 @app.route("/")
 @login_required
 def main():
-    return render_template("index.jinja2")
+    username = flask_login.current_user.id
+
+    cur = get_db().cursor()
+
+    cur.execute("SELECT * FROM Posts LIMIT 20")
+
+    cur.close()
+
+    return render_template("index.jinja2", username=username)
 
 @app.route("/login", methods=["GET", "POST"])
 def login():
@@ -122,12 +131,6 @@ def register():
 
         return redirect(url_for("login"))
     
-@app.route("/posts")
-@login_required
-def posts():
-    username = flask_login.current_user.id
-    return render_template("posts.jinja2", username=username)
-
 @app.route("/profile")
 @login_required
 def profile():

static/pumpkin.js

@@ -0,0 +1,80 @@
+function setup_pumpkin(canvas_id, clearbtn_id, form_id, pattern_field_id, grid_size) {
+    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;
+
+    img.onload = () => {
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        drawGrid();
+    };
+
+    let drawing = false;
+    let currentPattern = [];
+
+    canvas.addEventListener('mousedown', () => { drawing = true; });
+    canvas.addEventListener('mouseup', () => { drawing = false; });
+    canvas.addEventListener('mousemove', draw);
+    canvas.addEventListener('click', (e) => {draw(e, true)});
+
+    function draw(e, force=false) {
+        if (!drawing && !force) return;
+        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() {
+        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()
+        }
+    }
+
+    document.getElementById(clearbtn_id).addEventListener('click', clearCanvas);
+
+    function clearCanvas() {
+        drawing = false; // Fix hold staying after clear
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+        drawGrid()
+        currentPattern = [];
+    }
+
+    document.getElementById(form_id).addEventListener('submit', function(event) {
+        document.getElementById(pattern_field_id).value = JSON.stringify(currentPattern);
+    });
+}

templates/base.jinja2

@@ -5,7 +5,8 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+        <script src="/static/pumpkin.js"></script>
         <title>{% block title %} {% endblock %}</title>
         {% block head %} {% endblock %}
     </head>
@@ -28,7 +29,5 @@
         </nav>
         {% block body %}
         {% endblock %}
-        <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    </body>
 </html>

templates/index.jinja2

@@ -6,9 +6,6 @@
 <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="/posts">Posts</a>
-</li>
 <li class="nav-item">
     <a class="nav-link" href="/profile">Profile</a>
 </li>
@@ -18,5 +15,7 @@
 {% endblock %}
 
 {% block body %}
-<p>LoginWeen is a an app where you login/register with a halloween pumpkin carving as a password.</p>
+<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>
+</div>
 {% endblock body %}

templates/login.jinja2

@@ -31,84 +31,6 @@
 </form>
 
 <script>
-const canvas = document.getElementById('pumpkin_canvas');
+setup_pumpkin("pumpkin_canvas", "clearBtn", "login_form", "pattern_field", {{ grid_size }})
-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;
-
-img.onload = () => {
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  drawGrid();
-};
-
-let drawing = false;
-let currentPattern = [];
-let savedPattern = null;
-
-canvas.addEventListener('mousedown', () => { drawing = true; });
-canvas.addEventListener('mouseup', () => { drawing = false; });
-canvas.addEventListener('mousemove', draw);
-
-function draw(e) {
-    if (!drawing) return;
-    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() {
-    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()
-    }
-}
-
-document.getElementById("login_form").addEventListener('submit', function(event) {
-    document.getElementById('pattern_field').value = JSON.stringify(currentPattern);
-});
-
-
-document.getElementById('clearBtn').addEventListener('click', clearCanvas);
-
-function clearCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  drawGrid()
-  currentPattern = [];
-}
-
 </script>
 {% endblock body %}

templates/posts.jinja2

@@ -1,22 +0,0 @@
-{% extends "base.jinja2" %}
-
-{% block title %} LoginWeen Posts {% endblock title %}
-
-{% block nav %}
-<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="/posts">Posts</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>
-{% endblock %}
-
-{% block body %}
-
-{% endblock body %}

templates/profile.jinja2

@@ -6,9 +6,6 @@
 <li class="nav-item">
     <a class="nav-link" href="/">Home</a>
 </li>
-<li class="nav-item">
-    <a class="nav-link" href="/posts">Posts</a>
-</li>
 <li class="nav-item">
     <a class="nav-link active" aria-current="page" href="/profile">Profile</a>
 </li>
@@ -84,165 +81,8 @@
     {% endif %}
 </div>
 
-<script type="module">
+<script>
-const canvas = document.getElementById('current_pumpkin_canvas');
+setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }})
-const ctx = canvas.getContext('2d');
+setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }})
-const img = new Image();
-img.src = '/static/pumpkin.png';
-
-const GRID_SIZE = {{ grid_size }};
-const CELL_SIZE = canvas.width / GRID_SIZE;
-
-img.onload = () => {
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  drawGrid();
-};
-
-let drawing = false;
-let currentPattern = [];
-let savedPattern = null;
-
-canvas.addEventListener('mousedown', () => { drawing = true; });
-canvas.addEventListener('mouseup', () => { drawing = false; });
-canvas.addEventListener('mousemove', draw);
-
-function draw(e) {
-    if (!drawing) return;
-    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() {
-    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()
-    }
-}
-
-document.getElementById('currentclearBtn').addEventListener('click', clearCanvas);
-
-function clearCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  drawGrid()
-  currentPattern = [];
-}
-
-document.getElementById("change_pattern_form").addEventListener('submit', function(event) {
-    document.getElementById('current_pattern_field').value = JSON.stringify(currentPattern);
-});
-
-</script>
-
-<script type="module">
-const canvas = document.getElementById('new_pumpkin_canvas');
-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;
-
-img.onload = () => {
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  drawGrid();
-};
-
-let drawing = false;
-let currentPattern = [];
-let savedPattern = null;
-
-canvas.addEventListener('mousedown', () => { drawing = true; });
-canvas.addEventListener('mouseup', () => { drawing = false; });
-canvas.addEventListener('mousemove', draw);
-
-function draw(e) {
-    if (!drawing) return;
-    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() {
-    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()
-    }
-}
-
-document.getElementById('newclearBtn').addEventListener('click', clearCanvas);
-
-function clearCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  drawGrid()
-  currentPattern = [];
-}
-
-document.getElementById("change_pattern_form").addEventListener('submit', function(event) {
-    document.getElementById('new_pattern_field').value = JSON.stringify(currentPattern);
-});
-
 </script>
 {% endblock body %}

templates/register.jinja2

@@ -31,83 +31,6 @@
 </form>
 
 <script>
-const canvas = document.getElementById('pumpkin_canvas');
+setup_pumpkin("pumpkin_canvas", "clearBtn", "register_form", "pattern_field", {{ grid_size }})
-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;
-
-img.onload = () => {
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  drawGrid();
-};
-
-let drawing = false;
-let currentPattern = [];
-let savedPattern = null;
-
-canvas.addEventListener('mousedown', () => { drawing = true; });
-canvas.addEventListener('mouseup', () => { drawing = false; });
-canvas.addEventListener('mousemove', draw);
-
-function draw(e) {
-    if (!drawing) return;
-    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() {
-    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()
-    }
-}
-
-document.getElementById("register_form").addEventListener('submit', function(event) {
-    document.getElementById('pattern_field').value = JSON.stringify(currentPattern);
-});
-
-document.getElementById('clearBtn').addEventListener('click', clearCanvas);
-
-function clearCanvas() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-  drawGrid()
-  currentPattern = [];
-}
-
 </script>
 {% endblock body %}