From 34e0b9414381d26c2970db855ad7d5975aa37dc1 Mon Sep 17 00:00:00 2001
From: csd4ni3l <v3xq21w7@duck.com>
Date: Wed, 22 Oct 2025 18:23:11 +0200
Subject: [PATCH] Add better drawing method using cells

---
 loginween/static/pumpkin.png     | Bin 1406 -> 946 bytes
 loginween/templates/login.jinja2 |  64 ++++++++++++++++++++++---------
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/loginween/static/pumpkin.png b/loginween/static/pumpkin.png
index 1d1bf75d3dc01913a35fd6b186bc48277f06c64f..d35a9cbc43ab875dd3669a2724cf7881e34d547b 100644
GIT binary patch
literal 946
zcmeAS@N?(olHy`uVBq!ia0vp^!9X0x!3-obKHYc&q!f}pf_xbms?-=58d?|_egTCV
zUNA6}8Za=tN?>5Hn!&&zUNC1@pbb#MDZnSh6-Wbt(ncSp4L(X6eU&x?Nk1l_5EFy)
zMjwTZKL6_&{?;-4uK@}%{sS`V8UEKY{I6sBU&qME!0`Y7|L+g~gREgJ3GxeOaCmkj
z4a7<Ec6SkddgJF}Acwug)7O>#C6^e#v?%YZ87?6C{35>)#`BBHX8|qJ_jGX#i8y@r
z=IgR%1s;Y6$F^phmss8SZT~vznZ|S$p^oP!|JQuY=IHS7R|gvYeRWRJEVa~cj&@GM
zf6YZNHlNtOd6nd*nxE5tA6q?3Jb#`kyO7TUJB#<veltE>{PfhbuMOMYv)Ufov$FHv
z?+ZR(D&wm{oP9l~hHwWdUOlm=XE~RhQ(pZ?N%>Q*kCV6eIP#_DIiv+26Oun5KABaS
zQ>;ooJXRzn@?LWGR8vv$QzxaEYKqM6FzBrex>7gEC38|R%Y}23oLZN?|Ftx)Z&~L8
ziIei)8d_(IQWred)jz{EQ~bf~?pI4@&S+fYSLA)W=fXpi+{Cmchu7T_Ixtb)ap$aw
zofE@)mS&XC%IN2t=@QHleC5L)cf|?To9~+h+AB40`jMd<a5nC`(eo`)@50P;V_N@+
zlqxr?n}3<qc<j55@TK@Ozj;`mKC$yMm~6b<^Xx^2k42L^Rv5ghJlDFjv$x>r=Y95T
z=6zkk$K1`c;YvxGMo!wUXW_eV-7~%>{^VWL^*Q#@Y4PeyU8PT7UMSD-J@U+}YUvYa
zQhYV0DjMzJn>Z^Z-&Fl~lHjpQn=AReIcp`JtuwXsI(*4w*NUn8M2>2PT)%g>zx<7A
zqQQsqnG;z#zFyiod+NEnGgK~CXwL~gs=qO_Zkun>g{^hx%5u22oN{;@`(gPOr<QfT
zV$-wq1pQs!RF``1u2~s-f5YVW3{scxMV>87+qh+sP}jFC$)BgTuUZ(_c5lCbr_zD*
zFaB=~I3jRecK@{J7Yy}pG{ykak!p!+L`h0wNvc(HQ7VvPFfuSQ)ipHGH8Kh@G_^7^
zvof~OHZZU<Fp#`+b~}oO-29Zxv`X9>G8#*{ff_X6Hk4%MrWThZ<`$sqF}E@@gjmv<
SQnehYhr!d;&t;ucLK6UtGKH}K

literal 1406
zcmV-^1%djBP)<h;3K|Lk000e1NJLTq003kF003kN1^@s6aN?Cz000F=Nkl<ZcwX(D
zeU8*H48^y5613+*ATG2LhzlV&58@;<^lLh4o3^q2?AYD%FHP#aU!Luxu-m*`e_Sch
zxQgZq=H)Cv?g`7#YYH9w2;u(r>+{6p@7F)6&%&)QT)>O0HiNOucq5!pYYY`^ro`+5
z>7I`UB{GoH!RR(nR3LL0T}f}crKGhzo;#ufIdn$ERP{*55gl>}BwF2w+!jtSI?>a1
zx6fAN_PT)Bov`n3zuPm%ZKw}3AU%zHxUOm`U9^<dJ7f*xxva?Uh*;DUAYa<}TdOSo
zTtMv7RrjWhL+0)71*8Iye{KEvl-ysXAzVNz0C}7<=0$x7<O1Ri$hY>k_ZIdBB23`@
zoygJ=>&ue(E{V|g9-ho|CQZJJL|Egr1n<GJU_>tRo`HyAJitV9%Q=9&X3vNr4~-sx
z%s*m`GUi&^%#P3Yc-<MLV{}kkmVfO*i>h5#590ow7q0oS-A`|gd5qwU&5Wr6sK!fo
zL3E;aH&k0YoOSGBOgI3V8f!D1%w9AKc|Y3SEWworjqWkg%H$<W7|FLJWhrsfTS2h^
za+soUvMJ8gD%E_~Kfh@M;iV`>&ZnY~xKz_Enm|}E3|LUvWuMoAq6LHn1EQ4SBpOgO
zfP4rTi!%>QN7zJ`ZLPPohI9%N$cJ*q>fU9zSrF?fo*)S<ERbx+MYJKxB`6?aVIX?|
z1QY}iC=BApMCu8dOA18_1PTM92w@V*;c)LY5-1-U2!S2x(ON*v+#yb5T2|P>#DyYp
zh#3&l_H^>FHIPFX6*i^9mn|7x4iv6K4uQy)5@Gc5zpStVB7iY{62&P_nlcrUG;kg-
zVJH;}#~}hBI1W)}(gp&Cacui2!lTY5REL0p_>)_s8KJo30y6ChJ-0dsqPK88zY(f<
zCI~GcnRK-+?(XTDvOe)KJy8fS7dNGqLZPIr)7K9@hqYg>3O`_7Knf|W%|%JQ%}evM
z^;W@uwQ~w&Tr4HE6$-n4>?tfa9hJNq?T}}>f{H}hWhKk@{Y(jzQirhW2cU*3Da_mm
z!Ua_aqNL{Lv_ieq!}SNmyJE^n`~gv3u=nXzfM|9i-UZFYM=`w$kcgtyj5!5X7YMXH
zt|)2II*J}DI<2d=y%lA2`Rck3K}$kO*06WKwznNO*#8Kw2&BxyFx^~Dw0-C_0%9pX
z^MvgLm=O@{_Xa204PlIF5|u5HK)Uc)_gSt4t{6-Sj4r&=F6#m!gy{f?Wo;3vMH$Y_
zUk-p!R_W<k#70`rp#j8U+Va?Stz#;ML9HQdATBQ?nW=~4Wp_Y0i#XGmU_cN#dmEpj
z5jKO+1X7%~JP0vUs8T=_7@QhX3}h0czyR4AQ!tL7))s|V5taoIG8D!2@|l1}?lmk_
z7+i;tf#lcjv1J8O8mF-Y0)m1Sz|(9T7!rpNfSlh6xs6Z*NFkIRAeO~NwMm#G;lhwQ
zq!0)vk&F;6fpNmz7*i97A{3%RYzJUdssskYArIADe7v&0Gn>Efwf$#4{jc$(d}CVe
zI?>?8Y;~bjPH$3YJhW5<f=va)1h(-wKBf@_Oiv^b2leDpNI1gNickUqsv&f;ahq)a
ztoNO?Vx9l#jvIh!fq+?TXJO~~A^h`e5OL8y+6WpBS-vy-D~<a6_I?x|>hH_a(V`wK
zUv8n5tVILJRkt%s7J%xKq?(veKL~Pikey?Oh|nF96oz^}WCXZMZzxEe_?g7zVMESj
zau-kr;${sZ0*|oP>NSL@>G>ZIv1`tc;km*Kh%?$3kPC=21)PQRAI`SBbTO{k_W%F@
M07*qoM6N<$f>o}B-~a#s

diff --git a/loginween/templates/login.jinja2 b/loginween/templates/login.jinja2
index abe2cb3..f900844 100644
--- a/loginween/templates/login.jinja2
+++ b/loginween/templates/login.jinja2
@@ -17,7 +17,7 @@
 {% block body %}
 <div class="position-absolute top-50 start-50 translate-middle text-center">
   <h1>LoginWeen: Draw your carving to log in!</h1>
-  <canvas id="pumpkin_canvas" width="300" height="300" class="my-3"></canvas>
+  <canvas id="pumpkin_canvas" width="600" height="600" class="my-3"></canvas>
   <div class="buttons">
     <button type="button" class="btn btn-primary me-2" id="loginBtn">Login</button>
     <button id="clearBtn" class="btn btn-danger">Clear</button>
@@ -30,8 +30,12 @@ const ctx = canvas.getContext('2d');
 const img = new Image();
 img.src = '/static/pumpkin.png';
 
+const GRID_SIZE = 25;
+const CELL_SIZE = canvas.width / GRID_SIZE;
+
 img.onload = () => {
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+  drawGrid();
 };
 
 let drawing = false;
@@ -39,32 +43,53 @@ let currentPattern = [];
 let savedPattern = null;
 
 canvas.addEventListener('mousedown', () => { drawing = true; });
-canvas.addEventListener('mouseup', () => { drawing = false; ctx.beginPath(); });
+canvas.addEventListener('mouseup', () => { drawing = false; });
 canvas.addEventListener('mousemove', draw);
 
 function draw(e) {
     if (!drawing) return;
-    const rect = canvas.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+    var rect = canvas.getBoundingClientRect();
+    var x = e.clientX - rect.left;
+    var y = e.clientY - rect.top;
 
-    const imageData = ctx.getImageData(x, y, 1, 1);
-    const pixel = imageData.data;
+    var gridX = Math.floor(x / CELL_SIZE);
+    var gridY = Math.floor(y / CELL_SIZE);
 
-    const r = pixel[0];
-    const g = pixel[1];
-    const b = pixel[2];
-    const a = pixel[3];
+    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] == 255 && 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);
+        }
+    }
+    else {
+        console.log(pixel);
+    }
+}
+
+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;
 
-    if (r == 255 && g == 126 && b == 0 && a !== 0) {
-        currentPattern.push([x, y]);
-        ctx.lineWidth = canvas.width / 30;
-        ctx.lineCap = 'round';
-        ctx.strokeStyle = 'black';
-        ctx.lineTo(x, y);
-        ctx.stroke();
         ctx.beginPath();
-        ctx.moveTo(x, y);
+        ctx.moveTo(pos, 0);
+        ctx.lineTo(pos, canvas.height);
+        ctx.stroke();
+
+        ctx.beginPath()
+        ctx.moveTo(0, pos);
+        ctx.lineTo(canvas.width, pos);
+        ctx.stroke()
     }
 }
 
@@ -77,6 +102,7 @@ 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 = [];
 }