From b49ccd9da956fc208eb7710e3fdcf758eebf7818 Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Wed, 6 Sep 2023 21:40:59 +0530
Subject: [PATCH] work on drawing game page

---
 src/pages/drawing/index.astro | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index d3614c0..03b51f6 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -18,6 +18,7 @@ import Layout from '../../layouts/Layout.astro';
         height: window.innerHeight / 2,
     };
     var assetsList = {}
+
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
     const data =       fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
@@ -41,7 +42,6 @@ import Layout from '../../layouts/Layout.astro';
         },
     };
       const game = new Phaser.Game(config);    
-
     })
     .catch(error => {
       console.error('Error fetching initial data:', error);
@@ -140,7 +140,6 @@ import Layout from '../../layouts/Layout.astro';
             if(!isMobile){
                 colorButtonsContainer.style.flexDirection = 'column'; 
             }
-            // colorButtonsContainer.style.alignItems = 'flex-start';
             // 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
@@ -183,11 +182,14 @@ import Layout from '../../layouts/Layout.astro';
             // 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.display = 'flex';  
+        buttonsContainer.style.display = 'flex'; 
+        buttonsContainer.style.top = '0%'; 
         if(!isMobile){
-            buttonsContainer.style.marginTop = '7.5%';
+            // buttonsContainer.style.position = 'fixed';
+            buttonsContainer.style.top = '25%';
             buttonsContainer.style.flexDirection = 'column';
             buttonsContainer.style.marginLeft = '60px';
         } 
@@ -197,11 +199,8 @@ import Layout from '../../layouts/Layout.astro';
         // Create the Clear button
         const clearButton = document.createElement('button');
         clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
-        buttonsContainer.style.top = '10%';
         clearButton.style.border = '3px solid blue';
-        // clearButton.textContent = 'Clear';
         clearButton.style.color = 'blue';
-        // clearButton.style.color = 'white';
         clearButton.style.width = 'fit-content';
         clearButton.style.marginRight = '10px';
         if(isMobile){
@@ -210,7 +209,6 @@ import Layout from '../../layouts/Layout.astro';
         } else {
             clearButton.style.padding = '5px 10px';
         }        
-        // clearButton.style.fontSize = '16px';
         clearButton.style.fontWeight = 'bold';
         clearButton.style.borderRadius = '50%';
         clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -226,7 +224,7 @@ import Layout from '../../layouts/Layout.astro';
         // eraserButton.style.color = 'white';
         eraserButton.style.width = 'fit-content';
         eraserButton.style.marginRight = '15px';
-        eraserButton.style.marginTop = '0px';
+        // eraserButton.style.marginTop = '0px';
         eraserButton.style.marginBottom = '0px';
         if(isMobile){
             eraserButton.style.padding = '1px 1px';
@@ -259,7 +257,7 @@ import Layout from '../../layouts/Layout.astro';
         const sliderContainer = document.createElement('div');
         sliderContainer.className = 'slider-container';
         // sliderContainer.style.position = 'absolute';
-        sliderContainer.style.top = '25%';
+        // sliderContainer.style.top = '25%';
         sliderContainer.style.left = '100%';
 
         // Create the slider
@@ -299,11 +297,8 @@ import Layout from '../../layouts/Layout.astro';
         
         // Disable the default cursor
         this.input.setDefaultCursor('none');
-
-
         const borderThickness = 2;
         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);