looks good with responsevness

src/pages/drawing/index.astro

@@ -9,12 +9,14 @@ import Layout from '../../layouts/Layout.astro';
     </main>
 </Layout>
 <script is:inline>
-    const drawingZone = {
+ const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
-        x: window.innerWidth / 4,    // X-coordinate of the drawing zone
+
-        y: window.innerHeight / 4,   // Y-coordinate of the drawing zone
+const drawingZone = {
-        width: window.innerWidth / 2, // Width of the drawing zone
+    x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
-        height: window.innerHeight / 2, // Height of the drawing zone
+    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');
@@ -82,109 +84,111 @@ import Layout from '../../layouts/Layout.astro';
             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';
-        document.body.appendChild(colorPicker);
+            colorPicker.style.marginTop = '-5px';
-        colorPicker.style.position = 'absolute';
+            colorPicker.style.marginRight = '5px';
-        colorPicker.style.top = '10%';
+            colorPicker.style.width = '45px';
-        colorPicker.style.left = '20px';
+            colorPicker.style.height = '48px';
-        colorPicker.style.width = '38px';
+
-        colorPicker.style.height = '38px';
             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 colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 40;
             const buttonSpacing = 10;
 
-            // Define the horizontal position for the vertical palette
+            // Create a container div for the color buttons
-            const colorPaletteX = 40; // Adjusted position
+            const colorButtonsContainer = document.createElement('div');
+            colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
 
-            // Define the starting position for the vertical palette
+            // Align the color buttons to the left of the viewport
-            const paletteY = displayH / 1.9 - (colors.length / 1 * (buttonSize + buttonSpacing));
+            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 x = buttonX + index * (buttonSize + buttonSpacing);
-                const button = this.add.circle(colorPaletteX, y, buttonSize / 3, Phaser.Display.Color.HexStringToColor(color).color);
+                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.addEventListener('click', () => {
-                button.on('pointerdown', function () {
                     // 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;
                 });
-            });
-        const sliderContainer = document.createElement('div');
-        sliderContainer.className = 'slider-container';
-        document.body.appendChild(sliderContainer);
 
-        sliderContainer.style.position = 'absolute';
+                // Append the color button to the color buttons container
-        sliderContainer.style.top = '18%';
+                colorButtonsContainer.appendChild(button);
-        sliderContainer.style.left = '15%';
-
-        const slider = document.createElement('input');
-        slider.type = 'range';
-        slider.min = '2';
-        slider.max = '80';
-        slider.value = brushSize.toString();
-        slider.className = 'slider';
-        sliderContainer.appendChild(slider);
-
-        slider.addEventListener('input', (event) => {
-            brushSize = parseInt(event.target.value);
-            slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
             });
 
+            // Append the color buttons container to the color container
+            colorContainer.appendChild(colorButtonsContainer);
+
+            // Append the color container to the document body
+            document.body.appendChild(colorContainer);
+
+        // 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.padding = '10px 20px';
-        clearButton.style.fontSize = '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.backgroundColor = 'green';
-        eraserButton.style.position = 'absolute';
+        eraserButton.style.color = 'white';
-        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';
+        eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
-
-        // Toggle erasing mode when the eraser button is clicked
         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.backgroundColor = 'green'; // Restore eraser button color
-                eraserButton.style.color = 'black';
+                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;
@@ -238,7 +267,7 @@ import Layout from '../../layouts/Layout.astro';
                     graphics.lineTo(x, y);
                     graphics.strokePath();
                 }
-        }
+            };
     }
 
     function startDrawing(x, y) {

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>
+ -->