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

templates/register.jinja2

@@ -31,83 +31,6 @@
 </form>
 
 <script>
-const canvas = document.getElementById('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("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 = [];
-}
-
+setup_pumpkin("pumpkin_canvas", "clearBtn", "register_form", "pattern_field", {{ grid_size }})
 </script>
 {% endblock body %}