From ed274a24e427138736a30db66e4c11f1cdcaf470 Mon Sep 17 00:00:00 2001
From: csd4ni3l <v3xq21w7@duck.com>
Date: Fri, 24 Oct 2025 15:00:19 +0200
Subject: [PATCH] Fix light button margins, make it so grids only show for the
 actual colorable cells, making it look much better

---
 static/pumpkin.js         | 27 +++++++++++++++++++++++----
 templates/login.jinja2    |  2 +-
 templates/profile.jinja2  |  4 ++--
 templates/register.jinja2 |  2 +-
 4 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/static/pumpkin.js b/static/pumpkin.js
index 391714d..bfb26b9 100644
--- a/static/pumpkin.js
+++ b/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);
-        ctx.lineTo(pos, canvas.height);
+        for (let j = 0; j < GRID_SIZE; j++) {
+            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);
-        ctx.lineTo(canvas.width, pos);
+        for (let j = 0; j < GRID_SIZE; j++) {
+            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();
     }
 }
diff --git a/templates/login.jinja2 b/templates/login.jinja2
index 10d99a3..f5eaaa4 100644
--- a/templates/login.jinja2
+++ b/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>
diff --git a/templates/profile.jinja2 b/templates/profile.jinja2
index 23cc981..17cc0a8 100644
--- a/templates/profile.jinja2
+++ b/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>
                 
diff --git a/templates/register.jinja2 b/templates/register.jinja2
index 1d10acb..3d1c79a 100644
--- a/templates/register.jinja2
+++ b/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>