Update README to say public demo is up, add pumpkin lighting and remove bloat from pumpkin.js, remove debug logging and optimize drawing

README.md

@@ -1,6 +1,6 @@
 LoginWeen is an app where you login/register with a halloween pumpkin carving as a password.
 
-Live Demo (coming soon!): https://loginween.csd4ni3l.hu
+Live Demo: https://loginween.csd4ni3l.hu
 
 # Install
 

static/pumpkin.js

@@ -1,11 +1,11 @@
-function draw(e, ctx, CELL_SIZE, drawing, canvas, currentPattern) {
+function draw(e, ctx, CELL_SIZE, drawing, canvas, currentPattern, lit) {
     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);
-    check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY);
+    check_and_color(ctx, CELL_SIZE, currentPattern, lit, gridX, gridY);
 }
 
 function clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern) {
@@ -58,15 +58,13 @@ function check_colorable(image_data, canvas_width, CELL_SIZE, gridX, gridY) {
     const bottomLeft = getPixel(image_data, canvas_width, cellX + offset, cellY + CELL_SIZE - offset);
     const bottomRight = getPixel(image_data, canvas_width, cellX + CELL_SIZE - offset, cellY + CELL_SIZE - offset);
 
-    console.log(topLeft, topRight, bottomLeft, bottomRight)
-
     return is_orange(topLeft.r, topLeft.g) &&
            is_orange(topRight.r, topRight.g) &&
            is_orange(bottomLeft.r, bottomLeft.g) &&
            is_orange(bottomRight.r, bottomRight.g);
 }
 
-function check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY, image_data = null) {
+function check_and_color(ctx, CELL_SIZE, currentPattern, lit, gridX, gridY, image_data = null) {
     if (!image_data) {
         image_data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
     }
@@ -77,7 +75,13 @@ function check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY, image_dat
             currentPattern.push(key);
             var cellX = gridX * CELL_SIZE;
             var cellY = gridY * CELL_SIZE;
-            ctx.clearRect(cellX, cellY, CELL_SIZE, CELL_SIZE);
+            if (!lit) {
+                ctx.clearRect(cellX, cellY, CELL_SIZE, CELL_SIZE);
+            }
+            else {
+                ctx.fillStyle = "yellow"
+                ctx.fillRect(cellX, cellY, CELL_SIZE, CELL_SIZE);
+            }
             return true;
         } else {
             return false;
@@ -87,50 +91,8 @@ function check_and_color(ctx, CELL_SIZE, currentPattern, gridX, gridY, image_dat
     return false;
 }
 
-function includesPoint(arr, [x, y]) {
-    return arr.some(([a, b]) => a === x && b === y);
-}
-
-function color_amount(ctx, canvas, grid_size, amount) {
-    let colored = 0;
-    const cell_size = canvas.width / grid_size;
-    let currentPattern = [];
-    
-    const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-
-    for (let y = 0; y < grid_size; y++) {
-        for (let x = 0; x < grid_size; x++) {
-            if (colored == amount) {
-                return currentPattern;
-            }
-            if (check_and_color(ctx, cell_size, currentPattern, x, y, image_data)) {
-                colored++;
-            }
-        }
-    }
-    
-    return currentPattern;
-}
-
-function draw_pattern(ctx, canvas, pattern, grid_size) {
-    const cell_size = canvas.width / grid_size;
-    let currentPattern = [];
-    
-    const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-
-    for (let x = 0; x < grid_size; x++) {
-        for (let y = 0; y < grid_size; y++) {
-            if (includesPoint(pattern, [x, y])) {
-                check_and_color(ctx, cell_size, currentPattern, x, y, image_data);
-            }
-        }
-    }
-    
-    return currentPattern;
-}
-
 function get_colorable(ctx, canvas, grid_size) {
-    let colorable = 0;
+    let pattern = [];
     const cell_size = canvas.width / grid_size;
 
     const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
@@ -138,33 +100,71 @@ function get_colorable(ctx, canvas, grid_size) {
     for (let y = 0; y < grid_size; y++) {
         for (let x = 0; x < grid_size; x++) {
             if (check_colorable(image_data, canvas.width, cell_size, x, y)) {
-                colorable++;
+                var key = `${x},${y}`;
+                pattern.push(key);
             }
         }
     }
 
-    return colorable;
+    return pattern;
 }
 
-function setup_pumpkin(canvas_id, clearbtn_id, form_id, pattern_field_id, grid_size, allow_drawing=true) {
+function light_pumpkin(ctx, cell_size, currentPattern) {
+    for (const str of currentPattern) {
+        const [x, y] = str.split(",").map(s => parseInt(s.trim(), 10));
+        
+        var cellX = x * cell_size;
+        var cellY = y * cell_size;
+
+        ctx.fillStyle = "yellow"
+        ctx.fillRect(cellX, cellY, cell_size, cell_size);
+    }
+}
+
+function unlight_pumpkin(ctx, cell_size, currentPattern) {
+    for (const str of currentPattern) {
+        const [x, y] = str.split(",").map(s => parseInt(s.trim(), 10));
+        
+        var cellX = x * cell_size;
+        var cellY = y * cell_size;
+
+        ctx.clearRect(cellX, cellY, cell_size, cell_size)
+    }
+}
+
+function setup_pumpkin(canvas_id, clearbtn_id, lightbtn_id, form_id, pattern_field_id, grid_size, allow_drawing=true) {
     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;
+    
     let currentPattern = [];
     
     img.onload = () => {
         clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern);
     };
-    
+
     if (allow_drawing) {
+        let lit = false;
+        document.getElementById(lightbtn_id).addEventListener('click', function(event) {
+            if (lit) {
+                lit = false;
+                unlight_pumpkin(ctx, CELL_SIZE, currentPattern);
+            } 
+            else {
+                lit = true;
+                light_pumpkin(ctx, CELL_SIZE, currentPattern);
+            }
+        });
+
         let drawing = false;
         canvas.addEventListener('mousedown', () => { drawing = true; });
         canvas.addEventListener('mouseup', () => { drawing = false; });
-        canvas.addEventListener('mousemove', (e) => draw(e, ctx, CELL_SIZE, drawing, canvas, currentPattern));
+        canvas.addEventListener('mousemove', (e) => draw(e, ctx, CELL_SIZE, drawing, canvas, currentPattern, lit));
-        canvas.addEventListener('click', (e) => {draw(e, ctx, CELL_SIZE, true, canvas, currentPattern)});
+        canvas.addEventListener('click', (e) => {draw(e, ctx, CELL_SIZE, true, canvas, currentPattern, lit)});
+        
         document.getElementById(clearbtn_id).addEventListener('click', () => clearCanvas(ctx, canvas, img, GRID_SIZE, currentPattern));
         document.getElementById(form_id).addEventListener('submit', function(event) {
             document.getElementById(pattern_field_id).value = JSON.stringify(currentPattern);

templates/countdown.jinja2

@@ -39,13 +39,15 @@
     <div class="mt-3"></div>
     <h3 id="visualization_info">Carved Pumpkin Countdown Visualization (last ? days to Halloween):</h3>
     <canvas id="pumpkin_canvas" width="600" height="600"></canvas>
+    <button type="button" id="lightBtn" class="btn btn-warning">Light!</button>
 </div>
 
 <script>
 const halloween_countdown = document.getElementById("halloween_countdown");
-const [ctx, canvas, img] = setup_pumpkin("pumpkin_canvas", null, null, null, 15, false);
+const [ctx, canvas, img] = setup_pumpkin("pumpkin_canvas", null, null, null, null, 15, false);
-let colorable = 0;
+let pattern = [];
 let last_days = -1;
+const CELL_SIZE = canvas.width / 15;
 
 function update() {
     const current_time = new Date();
@@ -71,23 +73,35 @@ function update() {
     const minutes = Math.floor((diff / (1000 * 60)) % 60);
     const seconds = Math.floor((diff / 1000) % 60);
     
-    if (days <= colorable && days != last_days) {
+    if (days <= pattern.length && days != last_days) {
         last_days = days;
         clearCanvas(ctx, canvas, img, 15, []);
-        color_amount(ctx, canvas, 15, colorable - days);
+        unlight_pumpkin(ctx, CELL_SIZE, pattern.slice(0, pattern.length - days));
     }
 
     halloween_countdown.textContent = `Time to next Halloween: ${days} day(s) ${hours} hour(s) ${minutes} minute(s) ${seconds} second(s)`
 }
 
 img.addEventListener('load', function() {
-    colorable = get_colorable(ctx, canvas, 15);
+    pattern = get_colorable(ctx, canvas, 15);
-    document.getElementById("visualization_info").textContent = `Carved Pumpkin Countdown Visualization (last ${colorable} days to Halloween):`
+    document.getElementById("visualization_info").textContent = `Carved Pumpkin Countdown Visualization (last ${pattern.length} days to Halloween):`
     imageLoaded = true;
     update();
     setInterval(update, 1500);
 });
 
+
+let lit = false;
+document.getElementById("lightBtn").addEventListener('click', function(event) {
+    if (lit) {
+        lit = false;
+        unlight_pumpkin(ctx, CELL_SIZE, pattern.slice(0, pattern.length - last_days));
+    } 
+    else {
+        lit = true;
+        light_pumpkin(ctx, CELL_SIZE, pattern.slice(0, pattern.length - last_days));
+    }
+});
 </script>
 
 {% endblock body %}

templates/login.jinja2

@@ -28,12 +28,13 @@
         </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="clearBtn" class="btn btn-danger">Clear</button>
         </div>
     </div>
 </form>
 
 <script>
-setup_pumpkin("pumpkin_canvas", "clearBtn", "login_form", "pattern_field", {{ grid_size }})
+setup_pumpkin("pumpkin_canvas", "clearBtn", "lightBtn", "login_form", "pattern_field", {{ grid_size }})
 </script>
 {% endblock body %}

templates/profile.jinja2

@@ -54,6 +54,7 @@
                     <input type="hidden" name="current_pattern" id="current_pattern_field">
                     <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>
                     </div>
                 </div>
@@ -63,6 +64,7 @@
                     <input type="hidden" name="new_pattern" id="new_pattern_field">
                     <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>
                     </div>
                 </div>
@@ -85,7 +87,7 @@
 </div>
 
 <script>
-setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }})
+setup_pumpkin("current_pumpkin_canvas", "currentclearBtn", "currentlightBtn", "change_pattern_form", "current_pattern_field", {{ grid_size }})
-setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }})
+setup_pumpkin("new_pumpkin_canvas", "newclearBtn", "newlightBtn", "change_pattern_form", "new_pattern_field", {{ grid_size }})
 </script>
 {% endblock body %}

templates/register.jinja2

@@ -28,12 +28,13 @@
         </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="clearBtn" class="btn btn-danger">Clear</button>
         </div>
     </div>
 </form>
 
 <script>
-setup_pumpkin("pumpkin_canvas", "clearBtn", "register_form", "pattern_field", {{ grid_size }})
+setup_pumpkin("pumpkin_canvas", "clearBtn", "lightBtn", "register_form", "pattern_field", {{ grid_size }})
 </script>
 {% endblock body %}