csd4ni3l/loginween
1
0
Fork 0
mirror of https://github.com/csd4ni3l/loginween.git synced 2026-01-01 04:23:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add better drawing method using cells

Browse Source
This commit is contained in:
csd4ni3l
2025-10-22 18:23:11 +02:00
parent bb2eec1a42
commit 34e0b94143
2 changed files with 45 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
loginween/static/pumpkin.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 946 B

64
loginween/templates/login.jinja2
View File

@@ -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 = [];
}