conditions_better_with_eraser

src/pages/drawing/index.astro

@@ -54,6 +54,7 @@ import Layout from '../../layouts/Layout.astro';
     let brushSize = 10; // Default brush size
     let customCursor;
     const cursorSizeMultiplier = 1;
+    let isErasing = false;
 
     function preload() {
         this.load.image('outline', assetsList.image);
@@ -87,14 +88,14 @@ import Layout from '../../layouts/Layout.astro';
         colorPicker.className = 'color-picker';
         document.body.appendChild(colorPicker);
         colorPicker.style.position = 'absolute';
-        // colorPicker.textContent = 'Clear';
         colorPicker.style.top = '10%';
         colorPicker.style.left = '20px';
         colorPicker.style.width = '38px';
         colorPicker.style.height = '38px';
-        // colorPicker.style.borderRadius = '50%';
         colorPicker.addEventListener('input', (event) => {
-            selectedColor = event.target.value; // Update selectedColor
+            if (!isErasing) {
+                selectedColor = event.target.value; // Update selectedColor if not erasing
+            }
         });
             const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 40;
@@ -168,6 +169,33 @@ import Layout from '../../layouts/Layout.astro';
         clearButton.addEventListener('click', () => {
             clearDrawing();
         });
+        
+        const eraserButton = document.createElement('button');
+        eraserButton.textContent = 'Eraser';
+        document.body.appendChild(eraserButton);
+        eraserButton.style.position = 'absolute';
+        eraserButton.style.top = '10%';
+        eraserButton.style.left = '80px';
+        eraserButton.style.backgroundColor = 'white'; // Background color for eraser button
+        eraserButton.style.color = 'black'; // Text color for eraser button
+        eraserButton.style.padding = '10px 20px';
+        eraserButton.style.fontSize = '16px';
+        eraserButton.style.fontWeight = 'bold';
+        eraserButton.style.borderRadius = '50%';
+        eraserButton.style.boxShadow = '5px 10px 15px #aaa';
+
+        // Toggle erasing mode when the eraser button is clicked
+        eraserButton.addEventListener('click', () => {
+            isErasing = !isErasing;
+            if (isErasing) {
+                eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
+                eraserButton.style.color = 'white';
+            } else {
+                // Return to drawing mode
+                eraserButton.style.backgroundColor = 'white'; // Restore eraser button color
+                eraserButton.style.color = 'black';
+            }
+        });
 
         
         this.input.on('pointerdown', () => {
@@ -214,13 +242,22 @@ import Layout from '../../layouts/Layout.astro';
     }
 
     function startDrawing(x, y) {
-        graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
+        if (!isErasing) {
+            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
+        } else {
+            graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
+        }
         graphics.beginPath();
         graphics.moveTo(x, y);
+        
     }
 
     function continueDrawing(x, y) {
-        graphics.lineTo(x, y);
+        if (!isErasing) {
+            graphics.lineTo(x, y); // Drawing
+        } else {
+            graphics.lineTo(x, y); // Erasing by drawing with a white line
+        }
         graphics.strokePath();
     }