fix

js/interactive_grid.js

@@ -138,11 +138,13 @@ function initializeEditorBefore() {
     cellSizeY = canvas_before.height / gridSize;
 
     canvas_before.addEventListener('click', (event) => {
-        const rect = canvas_before.getBoundingClientRect();
-        const scaleX = canvas_before.width / rect.width;
-        const scaleY = canvas_before.height / rect.height;
-        const x = (event.clientX - rect.left) * scaleX;
-        const y = (event.clientY - rect.top) * scaleY;
+        // const rect = canvas_before.getBoundingClientRect();
+        // const scaleX = canvas_before.width / rect.width;
+        // const scaleY = canvas_before.height / rect.height;
+        // const x = (event.clientX - rect.left) * scaleX;
+        // const y = (event.clientY - rect.top) * scaleY;
+        const x = event.clientX;
+        const y = event.clientY;
         const row = Math.floor(y / cellSizeY);
         const col = Math.floor(x / cellSizeX);
 
@@ -152,7 +154,7 @@ function initializeEditorBefore() {
             selectedCells_bef--; // Decrement the selected cell count
         } else {
             // Only select a new cell if less than 50 cells are already selected
-            if (selectedCells_bef < 50) {
+            if (selectedCells_bef < 197) {
                 grid_bef[row][col] = true;
                 selectedCells_bef++; // Increment the selected cell count
             }
@@ -185,11 +187,13 @@ function initializeEditorAfter() {
     cellSizeY = canvas_after.height / gridSize;
 
     canvas_after.addEventListener('click', (event) => {
-        const rect = canvas_after.getBoundingClientRect();
-        const scaleX = canvas_after.width / rect.width;
-        const scaleY = canvas_after.height / rect.height;
-        const x = (event.clientX - rect.left) * scaleX;
-        const y = (event.clientY - rect.top) * scaleY;
+        // const rect = canvas_after.getBoundingClientRect();
+        // const scaleX = canvas_after.width / rect.width;
+        // const scaleY = canvas_after.height / rect.height;
+        // const x = (event.clientX - rect.left) * scaleX;
+        // const y = (event.clientY - rect.top) * scaleY;
+        const x = event.clientX;
+        const y = event.clientY;
         const row = Math.floor(y / cellSizeY);
         const col = Math.floor(x / cellSizeX);
 
@@ -199,7 +203,7 @@ function initializeEditorAfter() {
             selectedCells_aft--; // Decrement the selected cell count
         } else {
             // Only select a new cell if less than 50 cells are already selected
-            if (selectedCells_aft < 50) {
+            if (selectedCells_aft < 197) {
                 grid_aft[row][col] = true;
                 selectedCells_aft++; // Increment the selected cell count
             }
@@ -283,7 +287,7 @@ function importBackgroundAfter(image_after) {
 
     canvas_after = document.getElementById('after');
     ctx_aft = canvas_after.getContext('2d');
-    
+
     if (image_after == null) {
         canvasBg_aft = null;
         drawGridAfter();