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

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

Browse Source
This commit is contained in:
csd4ni3l
2025-10-23 17:53:23 +02:00
parent 507c3b56bd
commit e238687a09
8 changed files with 103 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app.py
View File

@@ -32,9 +32,10 @@ def get_db():
db.execute("""
CREATE TABLE IF NOT EXISTS Posts (
id INTEGER PRIMARY KEY,
username TEXT,
comment TEXT,
pattern TEXT NOT NULL
username TEXT NOT NULL UNIQUE,
comment TEXT NOT NULL,
pattern TEXT NOT NULL,
creation_time INTEGER NOT NULL
)
""")
@@ -64,7 +65,15 @@ def unathorized_handler():
@app.route("/")
@login_required
def main():
return render_template("index.jinja2")
username = flask_login.current_user.id
cur = get_db().cursor()
cur.execute("SELECT * FROM Posts LIMIT 20")
cur.close()
return render_template("index.jinja2", username=username)
@app.route("/login", methods=["GET", "POST"])
def login():
@@ -122,12 +131,6 @@ def register():
return redirect(url_for("login"))
@app.route("/posts")
@login_required
def posts():
username = flask_login.current_user.id
return render_template("posts.jinja2", username=username)
@app.route("/profile")
@login_required
def profile():

80
static/pumpkin.js Normal file
View File

@@ -0,0 +1,80 @@
function setup_pumpkin(canvas_id, clearbtn_id, form_id, pattern_field_id, grid_size) {
const canvas = document.getElementById(canvas_id);
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 = [];
canvas.addEventListener('mousedown', () => { drawing = true; });
canvas.addEventListener('mouseup', () => { drawing = false; });
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('click', (e) => {draw(e, true)});
function draw(e, force=false) {
if (!drawing && !force) 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(clearbtn_id).addEventListener('click', clearCanvas);
function clearCanvas() {
drawing = false; // Fix hold staying after clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
drawGrid()
currentPattern = [];
}
document.getElementById(form_id).addEventListener('submit', function(event) {
document.getElementById(pattern_field_id).value = JSON.stringify(currentPattern);
});
}

5
templates/base.jinja2
View File

@@ -5,7 +5,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
<script src="/static/pumpkin.js"></script>
<title>{% block title %} {% endblock %}</title>
{% block head %} {% endblock %}
</head>
@@ -28,7 +29,5 @@
</nav>
{% block body %}
{% endblock %}
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.8/dist/purify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>

5
templates/index.jinja2
View File

@@ -6,9 +6,6 @@
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/posts">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/profile">Profile</a>
</li>
@@ -18,5 +15,7 @@
{% endblock %}
{% block body %}
<div class="position-absolute top-50 start-50 translate-middle text-center">
<p>LoginWeen is a an app where you login/register with a halloween pumpkin carving as a password.</p>
</div>
{% endblock body %}

80
templates/login.jinja2
View File

@@ -31,84 +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("login_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", "login_form", "pattern_field", {{ grid_size }})
</script>
{% endblock body %}

22
templates/posts.jinja2
View File

@@ -1,22 +0,0 @@
{% extends "base.jinja2" %}
{% block title %} LoginWeen Posts {% endblock title %}
{% block nav %}
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/posts">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% endblock %}
{% block body %}
{% endblock body %}

166
templates/profile.jinja2
View File

@@ -6,9 +6,6 @@
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/posts">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/profile">Profile</a>
</li>
@@ -84,165 +81,8 @@
{% endif %}
</div>
<script type="module">
const canvas = document.getElementById('current_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('currentclearBtn').addEventListener('click', clearCanvas);
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
drawGrid()
currentPattern = [];
}
document.getElementById("change_pattern_form").addEventListener('submit', function(event) {
document.getElementById('current_pattern_field').value = JSON.stringify(currentPattern);
});
</script>
<script type="module">
const canvas = document.getElementById('new_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('newclearBtn').addEventListener('click', clearCanvas);
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
drawGrid()
currentPattern = [];
}
document.getElementById("change_pattern_form").addEventListener('submit', function(event) {
document.getElementById('new_pattern_field').value = JSON.stringify(currentPattern);
});
<script>
setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }})
setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }})
</script>
{% endblock body %}

79
templates/register.jinja2
View File

@@ -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 %}