Fix light button margins, make it so grids only show for the actual colorable cells, making it look much better

static/pumpkin.js

@@ -17,17 +17,36 @@ function clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern) {
 
 function drawGrid(ctx, canvas, GRID_SIZE) {
     const cell_size = canvas.width / GRID_SIZE;
+    const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    
     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);
+        for (let j = 0; j < GRID_SIZE; j++) {
-        ctx.lineTo(pos, canvas.height);
+            const checkLeft = i > 0 && check_colorable(image_data, canvas.width, cell_size, i - 1, j);
+            const checkRight = i < GRID_SIZE && check_colorable(image_data, canvas.width, cell_size, i, j);
+            
+            if (checkLeft || checkRight) {
+                ctx.moveTo(pos, j * cell_size);
+                ctx.lineTo(pos, (j + 1) * cell_size);
+            }
+        }
         ctx.stroke();
+        
         ctx.beginPath();
-        ctx.moveTo(0, pos);
+        for (let j = 0; j < GRID_SIZE; j++) {
-        ctx.lineTo(canvas.width, pos);
+            const checkAbove = i > 0 && check_colorable(image_data, canvas.width, cell_size, j, i - 1);
+            const checkBelow = i < GRID_SIZE && check_colorable(image_data, canvas.width, cell_size, j, i);
+            
+            if (checkAbove || checkBelow) {
+                ctx.moveTo(j * cell_size, pos);
+                ctx.lineTo((j + 1) * cell_size, pos);
+            }
+        }
         ctx.stroke();
     }
 }

templates/login.jinja2

@@ -28,7 +28,7 @@
         </div>
         <div class="buttons">
             <button type="submit" class="btn btn-primary me-2" id="loginBtn">Login</button>
-            <button type="button" id="lightBtn" class="btn btn-warning">Light!</button>
+            <button type="button" id="lightBtn" class="btn btn-warning me-2">Light!</button>
             <button type="button" id="clearBtn" class="btn btn-danger">Clear</button>
         </div>
     </div>

templates/profile.jinja2

@@ -55,7 +55,7 @@
                     <canvas id="current_pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
                     <div class="buttons">
                         <button type="button" id="currentlightBtn" class="btn btn-warning">Light!</button>
-                        <button type="button" id="currentclearBtn" class="btn btn-danger">Clear</button>
+                        <button type="button" id="currentclearBtn" class="btn btn-danger me-2">Clear</button>
                     </div>
                 </div>
                 <div class="mt-3"></div>
@@ -65,7 +65,7 @@
                     <canvas id="new_pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
                     <div class="buttons">
                         <button type="button" id="newlightBtn" class="btn btn-warning">Light!</button>
-                        <button type="button" id="newclearBtn" class="btn btn-danger">Clear</button>
+                        <button type="button" id="newclearBtn" class="btn btn-danger me-2">Clear</button>
                     </div>
                 </div>
                 

templates/register.jinja2

@@ -28,7 +28,7 @@
         </div>
         <div class="buttons">
             <button type="submit" class="btn btn-primary me-2" id="registerBtn">Register</button>
-            <button type="button" id="lightBtn" class="btn btn-warning">Light!</button>
+            <button type="button" id="lightBtn" class="btn btn-warning me-2">Light!</button>
             <button type="button" id="clearBtn" class="btn btn-danger">Clear</button>
         </div>
     </div>