From 5e7081b27cc4686bde7237617d1d1886f70bdf62 Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Sat, 2 Sep 2023 21:46:07 +0530
Subject: [PATCH] looks good with responsevness

---
 src/pages/drawing/index.astro | 209 +++++++++++++++++++---------------
 src/pages/drawing/temp.astro  |  82 +++++++++++++
 2 files changed, 201 insertions(+), 90 deletions(-)

diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 452ce8f..f139dc0 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -9,12 +9,14 @@ import Layout from '../../layouts/Layout.astro';
     </main>
 </Layout>
 <script is:inline>
-    const drawingZone = {
-        x: window.innerWidth / 4,    // X-coordinate of the drawing zone
-        y: window.innerHeight / 4,   // Y-coordinate of the drawing zone
-        width: window.innerWidth / 2, // Width of the drawing zone
-        height: window.innerHeight / 2, // Height of the drawing zone
-    };
+ const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+
+const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+    height: window.innerHeight / 2,
+};
     var assetsList = {}
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
@@ -76,115 +78,117 @@ import Layout from '../../layouts/Layout.astro';
         
             })
             .catch(error => {
-            console.error('Error fetching initial data:', error);
+                console.error('Error fetching initial data:', error);
             });
-        const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5);
-        outlineImage.setDepth(1);
-        graphics = this.add.graphics();
+            const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5);
+            outlineImage.setDepth(1);
+            graphics = this.add.graphics();
+
+            const colorContainer = document.createElement('div');
+            colorContainer.style.position = 'absolute';
+            colorContainer.style.top = '10%';
+            colorContainer.style.left = '20px';
+            colorContainer.style.display = 'flex'; // Display color picker and buttons horizontally
+
+            // Create the color picker
+            const colorPicker = document.createElement('input');
+            colorPicker.type = 'color';
+            colorPicker.value = selectedColor;
+            colorPicker.className = 'color-picker';
+            colorPicker.style.marginTop = '-5px';
+            colorPicker.style.marginRight = '5px';
+            colorPicker.style.width = '45px';
+            colorPicker.style.height = '48px';
+
+            colorPicker.addEventListener('input', (event) => {
+                if (!isErasing) {
+                    selectedColor = event.target.value; // Update selectedColor if not erasing
+                }
+            });
+
+            // Append the color picker to the color container
+            colorContainer.appendChild(colorPicker);
 
-        const colorPicker = document.createElement('input');
-        colorPicker.type = 'color';
-        colorPicker.value = selectedColor;
-        colorPicker.className = 'color-picker';
-        document.body.appendChild(colorPicker);
-        colorPicker.style.position = 'absolute';
-        colorPicker.style.top = '10%';
-        colorPicker.style.left = '20px';
-        colorPicker.style.width = '38px';
-        colorPicker.style.height = '38px';
-        colorPicker.addEventListener('input', (event) => {
-            if (!isErasing) {
-                selectedColor = event.target.value; // Update selectedColor if not erasing
-            }
-        });
             const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 40;
             const buttonSpacing = 10;
 
-            // Define the horizontal position for the vertical palette
-            const colorPaletteX = 40; // Adjusted position
+            // Create a container div for the color buttons
+            const colorButtonsContainer = document.createElement('div');
+            colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
 
-            // Define the starting position for the vertical palette
-            const paletteY = displayH / 1.9 - (colors.length / 1 * (buttonSize + buttonSpacing));
+            // Align the color buttons to the left of the viewport
+            const buttonX = 30; // Adjusted position (e.g., 10px from the left)
+            const colorPaletteY = drawingZone.y - 20; // Position it at the top of the drawing zone
 
             // Keep track of the selected color
             let selectedButton = null;
 
             colors.forEach((color, index) => {
-                const y = paletteY + index * (buttonSize + buttonSpacing);
-                const button = this.add.circle(colorPaletteX, y, buttonSize / 3, Phaser.Display.Color.HexStringToColor(color).color);
+                const x = buttonX + index * (buttonSize + buttonSpacing);
+                const button = document.createElement('button');
+                button.style.backgroundColor = color;
+                button.style.width = `${buttonSize}px`;
+                button.style.height = `${buttonSize}px`;
+                button.style.border = 'none';
+                button.style.marginRight = `${buttonSpacing}px`;
 
-                button.setInteractive();
-                button.on('pointerdown', function () {
+                button.addEventListener('click', () => {
                     // Remove the mark from the previously selected button, if any
                     if (selectedButton) {
-                        selectedButton.setStrokeStyle(0); // Remove the border
+                        selectedButton.style.border = 'none'; // Remove the border
                     }
                     // Set the new selected color
                     selectedColor = color;
 
                     // Add a border or tick mark to indicate the selected color
-                    button.setStrokeStyle(3, 0x000000); // Add a white border (you can customize this)
+                    button.style.border = '3px solid #000'; // Add a black border (you can customize this)
 
                     // Update the selectedButton variable to the current button
                     selectedButton = button;
                 });
+
+                // Append the color button to the color buttons container
+                colorButtonsContainer.appendChild(button);
             });
-        const sliderContainer = document.createElement('div');
-        sliderContainer.className = 'slider-container';
-        document.body.appendChild(sliderContainer);
 
-        sliderContainer.style.position = 'absolute';
-        sliderContainer.style.top = '18%';
-        sliderContainer.style.left = '15%';
+            // Append the color buttons container to the color container
+            colorContainer.appendChild(colorButtonsContainer);
 
-        const slider = document.createElement('input');
-        slider.type = 'range';
-        slider.min = '2';
-        slider.max = '80';
-        slider.value = brushSize.toString();
-        slider.className = 'slider';
-        sliderContainer.appendChild(slider);
+            // Append the color container to the document body
+            document.body.appendChild(colorContainer);
 
-        slider.addEventListener('input', (event) => {
-            brushSize = parseInt(event.target.value);
-            slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
-        });
+        // Create a container div for both buttons
+        const buttonsContainer = document.createElement('div');
+        buttonsContainer.style.position = 'absolute';
+        buttonsContainer.style.top = '15%';
+        buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
+        document.body.appendChild(buttonsContainer);
 
+        // Create the Clear button
         const clearButton = document.createElement('button');
         clearButton.textContent = 'Clear';
-        // clearButton.className = 'clear-button';
-        document.body.appendChild(clearButton);
-
-        clearButton.style.position = 'absolute';
-        clearButton.style.top = '10%';
-        clearButton.style.left = '120px';
         clearButton.style.backgroundColor = 'blue';
         clearButton.style.color = 'white';
-        clearButton.style.padding = '10px 30px';
-        clearButton.style.fontSize = '20px';
+        clearButton.style.padding = '10px 20px';
+        clearButton.style.fontSize = '16px';
         clearButton.style.fontWeight = 'bold';
         clearButton.style.borderRadius = '50%';
-        clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
+        clearButton.style.boxShadow = '5px 20px 30px #7c4c2390';
         clearButton.addEventListener('click', () => {
             clearDrawing();
         });
-        
+
+        // Create the Eraser button
         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.backgroundColor = 'green';
+        eraserButton.style.color = 'white';
         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.style.boxShadow = '5px 10px 15px #7c4c2390';
         eraserButton.addEventListener('click', () => {
             isErasing = !isErasing;
             if (isErasing) {
@@ -192,11 +196,36 @@ import Layout from '../../layouts/Layout.astro';
                 eraserButton.style.color = 'white';
             } else {
                 // Return to drawing mode
-                eraserButton.style.backgroundColor = 'white'; // Restore eraser button color
-                eraserButton.style.color = 'black';
+                eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
+                eraserButton.style.color = 'white';
             }
         });
 
+        // Add the Clear and Eraser buttons to the container
+        buttonsContainer.appendChild(clearButton);
+        buttonsContainer.appendChild(eraserButton);
+        
+        const sliderContainer = document.createElement('div');
+        sliderContainer.className = 'slider-container';
+        sliderContainer.style.position = 'absolute';
+        sliderContainer.style.top = '25%';
+        sliderContainer.style.left = '100%';
+
+        // Create the slider
+        const slider = document.createElement('input');
+        slider.type = 'range';
+        slider.min = '2';
+        slider.max = '80';
+        slider.value = brushSize.toString();
+        slider.className = 'slider';
+
+        slider.addEventListener('input', (event) => {
+            brushSize = parseInt(event.target.value);
+            slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+        });
+
+        sliderContainer.appendChild(slider);
+        buttonsContainer.appendChild(sliderContainer);
         
         this.input.on('pointerdown', () => {
             isDrawing = true;
@@ -221,24 +250,24 @@ import Layout from '../../layouts/Layout.astro';
 
 
         const borderThickness = 2;
-    const borderColor = 0x000000; // Black color (you can customize this)
+        const borderColor = 0x000000; // Black color (you can customize this)
 
-    const borderGraphics = this.add.graphics();
-    borderGraphics.lineStyle(borderThickness, borderColor);
-    borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
-        function continueDrawing(x, y) {
-            // Check if the pointer coordinates are within the drawing zone
-            if (
-                x >= drawingZone.x &&
-                x <= drawingZone.x + drawingZone.width &&
-                y >= drawingZone.y &&
-                y <= drawingZone.y + drawingZone.height
-            ) {
-                // The pointer is within the drawing zone, so continue drawing
-                graphics.lineTo(x, y);
-                graphics.strokePath();
-            }
-        }
+        const borderGraphics = this.add.graphics();
+        borderGraphics.lineStyle(borderThickness, borderColor);
+        borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
+            function continueDrawing(x, y) {
+                // Check if the pointer coordinates are within the drawing zone
+                if (
+                    x >= drawingZone.x &&
+                    x <= drawingZone.x + drawingZone.width &&
+                    y >= drawingZone.y &&
+                    y <= drawingZone.y + drawingZone.height
+                ) {
+                    // The pointer is within the drawing zone, so continue drawing
+                    graphics.lineTo(x, y);
+                    graphics.strokePath();
+                }
+            };
     }
 
     function startDrawing(x, y) {
diff --git a/src/pages/drawing/temp.astro b/src/pages/drawing/temp.astro
index e69de29..76fc250 100644
--- a/src/pages/drawing/temp.astro
+++ b/src/pages/drawing/temp.astro
@@ -0,0 +1,82 @@
+<script is:inline>
+   function create() {
+    // Adjust the positions and sizes of elements based on screen size
+    const screenWidth = game.scale.width;
+    const screenHeight = game.scale.height;
+
+    if (screenWidth <= 768) {
+        // Adjust elements for mobile screens
+        // You can modify these values as needed
+        // Example: Move a button to the top-right corner
+        button.x = screenWidth - button.width;
+        button.y = 0;
+    } else {
+        // Adjust elements for larger screens
+        // Example: Move a button to the bottom-right corner
+        button.x = screenWidth - button.width;
+        button.y = screenHeight - button.height;
+    }
+
+    // ... other element adjustments ...
+}
+
+
+</script>
+
+
+
+<!-- <script is:inline>
+    const isMobile = window.innerWidth <= 768; // You can adjust the breakpoint as needed
+
+const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: isMobile ? 0 : window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: isMobile ? window.innerHeight : window.innerHeight / 2,
+};
+
+// ...
+
+function create() {
+    // ...
+
+    // Position UI elements based on screen size
+    const colorPickerX = isMobile ? 10 : 20;
+    const colorPickerY = isMobile ? 10 : '10%';
+    colorPicker.style.position = 'absolute';
+    colorPicker.style.top = colorPickerY;
+    colorPicker.style.left = `${colorPickerX}px`;
+
+    const sliderContainerX = isMobile ? 10 : '5%';
+    const sliderContainerY = isMobile ? 10 : '10%';
+    sliderContainer.style.position = 'absolute';
+    sliderContainer.style.top = sliderContainerY;
+    sliderContainer.style.left = sliderContainerX;
+
+    const clearButtonX = isMobile ? 10 : '5%';
+    const clearButtonY = isMobile ? 20 : '20%';
+    clearButton.style.position = 'absolute';
+    clearButton.style.top = clearButtonY;
+    clearButton.style.left = clearButtonX;
+
+    const eraserButtonX = isMobile ? 10 : '5%';
+    const eraserButtonY = isMobile ? 14 : '14%';
+    eraserButton.style.position = 'absolute';
+    eraserButton.style.top = eraserButtonY;
+    eraserButton.style.left = eraserButtonX;
+
+    // ...
+
+    // Adjust cursor size based on screen size
+    const cursorSizeMultiplier = isMobile ? 0.5 : 1;
+
+    // ...
+
+    // Adjust the borderGraphics position and size
+    borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
+
+    // ...
+}
+
+</script>
+ -->