From d9266b2e1112462b24fbb01200aabc52f0e38f10 Mon Sep 17 00:00:00 2001
From: dev sp <dev2@ns1.cicdhosting.com>
Date: Tue, 26 Mar 2024 05:37:32 +0000
Subject: [PATCH] c

---
 src/pages/drawing/drawing_phonics.astro | 245 ++++++++++++++++--------
 src/pages/drawing/drawing_writo.astro   | 245 ++++++++++++++++--------
 2 files changed, 324 insertions(+), 166 deletions(-)

diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index db73b32..7c60d72 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -11,12 +11,12 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script is:inline>
     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 / 1,
-    //     width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
-    //     height: window.innerHeight / 2,
-    // };
+    const drawingZone = {
+        x: 0,
+        y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
     if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
@@ -25,13 +25,7 @@ import Layout from '../../layouts/Layout.astro';
         downloadWidth = 67;
         downloadHeight = 200;
         learningWidth = 200;
-        learningHeight = 365
-        image1Width = 3.7;
-        image1Height = 2.5;
-        image2Width = 2;
-        image2Right = 65;
-        image2Height = 2;
-        image2Bottom = 110;
+        learningHeight = 400
     } else {
         submitWidth = 380;
         submitHeight = 95;
@@ -40,20 +34,13 @@ import Layout from '../../layouts/Layout.astro';
         downloadWidth = 180;
         downloadHeight = 70;
         learningWidth = 450;
-        learningHeight = 350;
-        image1Width = 4;
-        image1Height = 1.8;
-        image2Width = 2;
-        image2Right = 400;
-        image2Height = 1.8;
-        image2Bottom = 0;
+        learningHeight = 400
     }
     var assetsList = {}
     var snapshotButton;
     let submitButton;
     let formattedDateTime;
     let shortUniqueID;
-    let defaultColor;
     gameResult = [];
     window.onload = function() {
         currentDate = new Date();
@@ -69,18 +56,20 @@ import Layout from '../../layouts/Layout.astro';
         }
         return result;
     }
+    // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+    // console.log(shortUniqueID);
 
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
-        colorList = data.colors;
-        defaultColor = colorList[0];
-    const {image1, image2} = data;
-    assetsList.image1 = "https://game-du.teachertrainingkolkata.in/assets/" + image1; // + "?width=450";
-    assetsList.image2 = "https://game-du.teachertrainingkolkata.in/assets/" + image2; // + "?width=450";
-    // console.log('Here is image -1', "https://game-du.teachertrainingkolkata.in/assets/" + image1)
+        // console.log(data)
+        // colorList = data.colors;
+    const {image} = data;
+    assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
+    // console.log(assetsList)
+    
     const config = {
         type: Phaser.AUTO,
         width: window.innerWidth,
@@ -105,8 +94,7 @@ import Layout from '../../layouts/Layout.astro';
     const customHeight = window.innerHeight;
     let graphics;
     let isDrawing = false;
-    let selectedColor = '#FF0000'; // Default 
-    // console.log(colorList)
+    let selectedColor = '#f00f0f'; // Default color
     let brushSize = 10; // Default brush size
     let customCursor;
     const cursorSizeMultiplier = 1;
@@ -115,26 +103,23 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
-        this.load.image('image1', assetsList.image1);
-        this.load.image('image2', assetsList.image2);
+        this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.png');
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
-        this.load.image('waxTexture', '/assets/texture.png');
-
     }
 
     function create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
                 const baseFontSize = 22;
                 const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
@@ -196,48 +181,86 @@ import Layout from '../../layouts/Layout.astro';
                 // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
                 // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
             }
-            const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
-            const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
+            const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
             if(isMobile){
-                outlineImage1.setDepth(1).setScale(0.28);
-                outlineImage2.setDepth(1).setScale(0.28);
+                outlineImage.setDepth(1).setScale(0.33);
             } else{
-                outlineImage1.setDepth(1).setScale(0.65);
-                outlineImage2.setDepth(1).setScale(0.65);   
+                outlineImage.setDepth(1).setScale(0.65);   
             }
+
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
             colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
-            colorContainer.style.marginBottom = '15px';
+            colorContainer.style.marginBottom = '0';
             if(!isMobile){
-                colorContainer.style.top = '25%';
+                colorContainer.style.top = '10%';
                 colorContainer.style.flexDirection = 'column'; 
             }
-                var colors = colorList;
+            // Create the color picker
+            const colorPicker = document.createElement('input');
+            colorPicker.type = 'color';
+            colorPicker.value = selectedColor;
+            colorPicker.className = 'color-picker';
+            colorPicker.style.marginBottom = '0px';
+            colorPicker.style.marginTop = '-0px';
+            colorPicker.style.marginRight = '15px';
+            // colorPicker.style.padding = '1px 1px';
+            // colorPicker.style.outline = 'none';
+            if (!isMobile) {
+                colorPicker.style.marginBottom = '15px';
+                colorPicker.style.width = '46px';
+                colorPicker.style.height = '46px';
+            } else {
+                colorPicker.style.width = '40px';
+                colorPicker.style.height = '40px';
+            }
+            colorPicker.style.border = '3px solid #05b3a4';
+            colorPicker.style.borderRadius = '20%';
+            colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
+            colorPicker.addEventListener('input', (event) => {
+                if (!isErasing) {
+                    selectedColor = event.target.value; // Update selectedColor if not erasing
+                }
+            });
+            // Append the color picker to the color container data
+            colorContainer.appendChild(colorPicker);
+            // const colors = data.colors;
+            // var colors = colorList;
+            var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
+            // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
-            const buttonSpacing = 15;
+            const buttonSpacing = 5;
+            // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
-            colorButtonsContainer.style.display = 'flex';
+            colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
             if(!isMobile){
                 colorButtonsContainer.style.flexDirection = 'column'; 
             }
-            const buttonX = 300;
-            // const colorPaletteY = drawingZone.y - 20;
+            // 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 x = buttonX + index * (buttonSize + buttonSpacing);
                 const button = document.createElement('button');
 
+                // Make the button transparent
                 button.style.backgroundColor = 'transparent';
 
+                // Remove any border or outline styles
                 button.style.border = 'none';
                 button.style.outline = 'none';
+
+                // Other button styles remain the same
+                // ${color}
+                // Create the SVG element with dynamic fill color
                 if (!isMobile) {
-                    pencilSize = '40px';
+                    pencilSize = '150px';
                     button.style.width = `${buttonSize}px`; 
                     button.style.height = `${buttonSize}px`;
                 } else {
@@ -247,13 +270,12 @@ import Layout from '../../layouts/Layout.astro';
                 }
                 if(isMobile){
                     button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
-                    button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                    button.style.borderRadius = '20%';
                 } else{
                     button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
                 }
-                button.style.marginRight = `${buttonSpacing}px`;   
-                button.addEventListener('click', () => {
+                button.style.marginRight = `${buttonSpacing}px`; 
+                    button.addEventListener('click', () => {
+                    // Remove the border from the previously selected button, if any
                     if (selectedButton) {
                         selectedButton.style.border = 'none';
                         selectedButton.style.scale = '1';
@@ -261,20 +283,25 @@ import Layout from '../../layouts/Layout.astro';
                         selectedButton.style.marginTop = '0px';
                         selectedButton.style.marginBottom = '0px';
                     }
-                    if(isMobile){
-                        button.style.border = "2px solid";
-                        button.style.borderColor = color;
-                    }
-                    defaultColor = color;
+                    // Set the new selected color
+                    selectedColor = color;
+                    // Add a border or tick mark to indicate the selected color to the current button
                     button.style.scale = '1.1';
                     if(!isMobile){
                         button.style.transform = 'translateX(0.75rem)'; 
-                        button.style.transition = 'transform 0.6s ease';
-                        // button.style.marginTop = '5px';
-                        // button.style.marginBottom = '5px';
+                        button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
+                        button.style.marginTop = '5px';
+                        button.style.marginBottom = '5px';
+                    } else{
+                         button.style.border = "2px solid";
+                        button.style.borderColor = color;
+                        button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                        button.style.borderRadius = '20%';
                     }
+                    // Update the selectedButton variable to the current button
                     selectedButton = button;
                 });
+                // Append the color button to the color buttons container
                 colorButtonsContainer.appendChild(button);
             });
             const colorPreview = document.createElement('div');
@@ -294,14 +321,13 @@ import Layout from '../../layouts/Layout.astro';
             buttonsContainer.style.marginTop = '30px';
             if(!isMobile){
                 // buttonsContainer.style.position = 'fixed';
-                buttonsContainer.style.top = '13%';
+                buttonsContainer.style.top = '10%';
                 buttonsContainer.style.flexDirection = 'column';
-                buttonsContainer.style.marginLeft = '-20px';
+                buttonsContainer.style.marginLeft = '60px';
                 buttonsContainer.style.marginTop = '0%';
-            } else{
-                buttonsContainer.style.left = '-20px';
-            }
-            
+            } 
+            buttonsContainer.style.left = '20px';
+            // 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');
@@ -309,7 +335,7 @@ import Layout from '../../layouts/Layout.astro';
             // clearButton.style.border = '3px solid blue';
             clearButton.style.color = 'blue';
             clearButton.style.width = 'fit-content';
-            clearButton.style.marginLeft = '30px';
+            clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
                 buttonsContainer.style.top = '17%';
@@ -325,8 +351,10 @@ import Layout from '../../layouts/Layout.astro';
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
-            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
+            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px">   </i>';
             eraserButton.style.color = 'blue';
+            // eraserButton.style.border = '3px solid blue';
+            // eraserButton.style.color = 'white';
             eraserButton.style.width = 'fit-content';
             eraserButton.style.marginRight = '15px';
             // eraserButton.style.marginTop = '0px';
@@ -337,7 +365,6 @@ import Layout from '../../layouts/Layout.astro';
                 eraserButton.style.padding = '5px 5px';
                 eraserButton.style.marginTop = '15px';
                 eraserButton.style.marginBottom = '15px';
-                eraserButton.style.marginLeft = '30px';
             }
             eraserButton.style.fontWeight = 'bold';
             eraserButton.style.borderRadius = '20%';
@@ -345,29 +372,29 @@ import Layout from '../../layouts/Layout.astro';
             eraserButton.addEventListener('click', () => {
             isErasing = !isErasing;
                 if (isErasing) {
-                    // eraserButton.style.backgroundColor = 'red';
+                    // eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
                     eraserButton.style.color = 'red';
                     eraserButton.style.border = '3px solid red';
                 } else {
                     // Return to drawing mode
-                    // eraserButton.style.backgroundColor = 'green';
+                    // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
                     eraserButton.style.color = 'blue';
                     eraserButton.style.border = 'none';
                 }
             });
             // Add the Clear and Eraser buttons to the container
             buttonsContainer.appendChild(clearButton);
-            buttonsContainer.appendChild(eraserButton);
+            // buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
             sliderContainer.className = 'slider-container';
             // sliderContainer.style.position = 'absolute';
-            if(isMobile){
-                sliderContainer.style.marginTop = '10px';
-            } else{
-                sliderContainer.style.marginLeft = '20px';
-            }
+            // sliderContainer.style.top = '25%';
             sliderContainer.style.left = '100%';
+            if(!isMobile){
+                sliderContainer.style.marginLeft = '-75px'
+                sliderContainer.style.marginTop = '15px'
+            }
 
             // Create the slider
             const slider = document.createElement('input');
@@ -404,11 +431,27 @@ import Layout from '../../layouts/Layout.astro';
             });
             customCursor = this.add.graphics();
             customCursor.setDepth(2)
+            // Disable the default cursor
             this.input.setDefaultCursor('none');
             const borderThickness = 0;
             const borderColor = 0xffffff; // White 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();
+                }
+            };
+            // Add a "Save Snapshot" button
             if(isMobile){
                 snapWidth = 50;
                 snapHeight = 70;
@@ -417,6 +460,7 @@ import Layout from '../../layouts/Layout.astro';
                 snapHeight = 70;
             }
             snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
             snapshotButton.setInteractive();
             snapshotButton.on('pointerdown', () => {
                 captureSnapshot(this);
@@ -425,8 +469,8 @@ import Layout from '../../layouts/Layout.astro';
             snapNotice.setVisible(false);
     }
     function captureSnapshot(drawingZone) {
-        // snapNotice.setVisible(true);
         submitButton.setVisible(false);
+        // snapNotice.setVisible(true);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {
@@ -443,19 +487,20 @@ import Layout from '../../layouts/Layout.astro';
             link.download = 'my_drawing.png';
             link.click();
             document.body.removeChild(image);
+            
             // Clear the drawing
             // graphics.clear();
         });
     }
-
-    function startDrawing(x, y, t) {
+    function startDrawing(x, y) {
         if (!isErasing) {
-            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(defaultColor).color);
+            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) {
@@ -491,9 +536,43 @@ import Layout from '../../layouts/Layout.astro';
         customCursor.x = this.input.x;
         customCursor.y = this.input.y;
     }
+
+    // function update() {
+    //     const slider = document.querySelector('input[type="range"]');
+        
+    //     if (slider && !isDrawing) {
+    //         const sliderValue = parseInt(slider.value);
+    //         const max = parseInt(slider.max);
+    //         const width = slider.offsetWidth;
+    //         const offsetX = (sliderValue - 2) / (max - 2) * width;
+    //         slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+    //     }
+
+    //     const cursorSize = brushSize * cursorSizeMultiplier;
+    //     const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
+
+    //     // Assuming 'this' refers to your Phaser.Scene instance
+    //     if (!this.customCursor) {
+    //         // Create the custom cursor sprite
+    //         this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
+    //         this.customCursor.setOrigin(0.3, 0.8);
+    //     }
+
+    //     // Set the tint or fill color dynamically based on the selectedColor
+    //     const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
+    //     this.customCursor.setTint(color);
+
+    //     // Resize the cursor
+    //     this.customCursor.setScale( cursorScale);
+
+    //     // Position the cursor at the current mouse pointer coordinates
+    //     this.customCursor.x = this.input.x;
+    //     this.customCursor.y = this.input.y;
+    // }
 </script>
 <style>
     .clear-button {
         background-color: blue;
     }
 </style>
+<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
\ No newline at end of file
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
index db73b32..0dd7b78 100644
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@@ -11,12 +11,12 @@ import Layout from '../../layouts/Layout.astro';
 </Layout>
 <script is:inline>
     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 / 1,
-    //     width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
-    //     height: window.innerHeight / 2,
-    // };
+    const drawingZone = {
+        x: 0,
+        y: 0,
+        width: window.innerWidth,
+        height: window.innerHeight,
+    };
     if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
@@ -25,13 +25,7 @@ import Layout from '../../layouts/Layout.astro';
         downloadWidth = 67;
         downloadHeight = 200;
         learningWidth = 200;
-        learningHeight = 365
-        image1Width = 3.7;
-        image1Height = 2.5;
-        image2Width = 2;
-        image2Right = 65;
-        image2Height = 2;
-        image2Bottom = 110;
+        learningHeight = 400
     } else {
         submitWidth = 380;
         submitHeight = 95;
@@ -40,20 +34,13 @@ import Layout from '../../layouts/Layout.astro';
         downloadWidth = 180;
         downloadHeight = 70;
         learningWidth = 450;
-        learningHeight = 350;
-        image1Width = 4;
-        image1Height = 1.8;
-        image2Width = 2;
-        image2Right = 400;
-        image2Height = 1.8;
-        image2Bottom = 0;
+        learningHeight = 400
     }
     var assetsList = {}
     var snapshotButton;
     let submitButton;
     let formattedDateTime;
     let shortUniqueID;
-    let defaultColor;
     gameResult = [];
     window.onload = function() {
         currentDate = new Date();
@@ -69,18 +56,20 @@ import Layout from '../../layouts/Layout.astro';
         }
         return result;
     }
+    // shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+    // console.log(shortUniqueID);
 
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
-    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
     .then(response => response.json())
     .then(({data}) => {
-        colorList = data.colors;
-        defaultColor = colorList[0];
-    const {image1, image2} = data;
-    assetsList.image1 = "https://game-du.teachertrainingkolkata.in/assets/" + image1; // + "?width=450";
-    assetsList.image2 = "https://game-du.teachertrainingkolkata.in/assets/" + image2; // + "?width=450";
-    // console.log('Here is image -1', "https://game-du.teachertrainingkolkata.in/assets/" + image1)
+        // console.log(data)
+        // colorList = data.colors;
+    const {image} = data;
+    assetsList.image = "https://game-du.teachertrainingkolkata.in/assets/" + image; // + "?width=450";
+    // console.log(assetsList)
+    
     const config = {
         type: Phaser.AUTO,
         width: window.innerWidth,
@@ -105,8 +94,7 @@ import Layout from '../../layouts/Layout.astro';
     const customHeight = window.innerHeight;
     let graphics;
     let isDrawing = false;
-    let selectedColor = '#FF0000'; // Default 
-    // console.log(colorList)
+    let selectedColor = '#f00f0f'; // Default color
     let brushSize = 10; // Default brush size
     let customCursor;
     const cursorSizeMultiplier = 1;
@@ -115,26 +103,23 @@ import Layout from '../../layouts/Layout.astro';
     let colorList;
 
     function preload() {
-        this.load.image('image1', assetsList.image1);
-        this.load.image('image2', assetsList.image2);
+        this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.png');
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
-        this.load.image('waxTexture', '/assets/texture.png');
-
     }
 
     function create() {
         const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
-        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        fetch(`https://game-du.teachertrainingkolkata.in/items/drawing_writo/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
             .then(response => response.json())
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
                 const baseFontSize = 22;
                 const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
@@ -196,48 +181,86 @@ import Layout from '../../layouts/Layout.astro';
                 // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
                 // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
             }
-            const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
-            const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
+            const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
             if(isMobile){
-                outlineImage1.setDepth(1).setScale(0.28);
-                outlineImage2.setDepth(1).setScale(0.28);
+                outlineImage.setDepth(1).setScale(0.33);
             } else{
-                outlineImage1.setDepth(1).setScale(0.65);
-                outlineImage2.setDepth(1).setScale(0.65);   
+                outlineImage.setDepth(1).setScale(0.65);   
             }
+
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
             colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
-            colorContainer.style.marginBottom = '15px';
+            colorContainer.style.marginBottom = '0';
             if(!isMobile){
-                colorContainer.style.top = '25%';
+                colorContainer.style.top = '10%';
                 colorContainer.style.flexDirection = 'column'; 
             }
-                var colors = colorList;
+            // Create the color picker
+            const colorPicker = document.createElement('input');
+            colorPicker.type = 'color';
+            colorPicker.value = selectedColor;
+            colorPicker.className = 'color-picker';
+            colorPicker.style.marginBottom = '0px';
+            colorPicker.style.marginTop = '-0px';
+            colorPicker.style.marginRight = '15px';
+            // colorPicker.style.padding = '1px 1px';
+            // colorPicker.style.outline = 'none';
+            if (!isMobile) {
+                colorPicker.style.marginBottom = '15px';
+                colorPicker.style.width = '46px';
+                colorPicker.style.height = '46px';
+            } else {
+                colorPicker.style.width = '40px';
+                colorPicker.style.height = '40px';
+            }
+            colorPicker.style.border = '3px solid #05b3a4';
+            colorPicker.style.borderRadius = '20%';
+            colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
+            colorPicker.addEventListener('input', (event) => {
+                if (!isErasing) {
+                    selectedColor = event.target.value; // Update selectedColor if not erasing
+                }
+            });
+            // Append the color picker to the color container data
+            colorContainer.appendChild(colorPicker);
+            // const colors = data.colors;
+            // var colors = colorList;
+            var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
+            // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
-            const buttonSpacing = 15;
+            const buttonSpacing = 5;
+            // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
-            colorButtonsContainer.style.display = 'flex';
+            colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
             if(!isMobile){
                 colorButtonsContainer.style.flexDirection = 'column'; 
             }
-            const buttonX = 300;
-            // const colorPaletteY = drawingZone.y - 20;
+            // 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 x = buttonX + index * (buttonSize + buttonSpacing);
                 const button = document.createElement('button');
 
+                // Make the button transparent
                 button.style.backgroundColor = 'transparent';
 
+                // Remove any border or outline styles
                 button.style.border = 'none';
                 button.style.outline = 'none';
+
+                // Other button styles remain the same
+                // ${color}
+                // Create the SVG element with dynamic fill color
                 if (!isMobile) {
-                    pencilSize = '40px';
+                    pencilSize = '150px';
                     button.style.width = `${buttonSize}px`; 
                     button.style.height = `${buttonSize}px`;
                 } else {
@@ -247,13 +270,12 @@ import Layout from '../../layouts/Layout.astro';
                 }
                 if(isMobile){
                     button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
-                    button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                    button.style.borderRadius = '20%';
                 } else{
                     button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
                 }
-                button.style.marginRight = `${buttonSpacing}px`;   
-                button.addEventListener('click', () => {
+                button.style.marginRight = `${buttonSpacing}px`; 
+                    button.addEventListener('click', () => {
+                    // Remove the border from the previously selected button, if any
                     if (selectedButton) {
                         selectedButton.style.border = 'none';
                         selectedButton.style.scale = '1';
@@ -261,20 +283,25 @@ import Layout from '../../layouts/Layout.astro';
                         selectedButton.style.marginTop = '0px';
                         selectedButton.style.marginBottom = '0px';
                     }
-                    if(isMobile){
-                        button.style.border = "2px solid";
-                        button.style.borderColor = color;
-                    }
-                    defaultColor = color;
+                    // Set the new selected color
+                    selectedColor = color;
+                    // Add a border or tick mark to indicate the selected color to the current button
                     button.style.scale = '1.1';
                     if(!isMobile){
                         button.style.transform = 'translateX(0.75rem)'; 
-                        button.style.transition = 'transform 0.6s ease';
-                        // button.style.marginTop = '5px';
-                        // button.style.marginBottom = '5px';
+                        button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
+                        button.style.marginTop = '5px';
+                        button.style.marginBottom = '5px';
+                    } else{
+                         button.style.border = "2px solid";
+                        button.style.borderColor = color;
+                        button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                        button.style.borderRadius = '20%';
                     }
+                    // Update the selectedButton variable to the current button
                     selectedButton = button;
                 });
+                // Append the color button to the color buttons container
                 colorButtonsContainer.appendChild(button);
             });
             const colorPreview = document.createElement('div');
@@ -294,14 +321,13 @@ import Layout from '../../layouts/Layout.astro';
             buttonsContainer.style.marginTop = '30px';
             if(!isMobile){
                 // buttonsContainer.style.position = 'fixed';
-                buttonsContainer.style.top = '13%';
+                buttonsContainer.style.top = '10%';
                 buttonsContainer.style.flexDirection = 'column';
-                buttonsContainer.style.marginLeft = '-20px';
+                buttonsContainer.style.marginLeft = '60px';
                 buttonsContainer.style.marginTop = '0%';
-            } else{
-                buttonsContainer.style.left = '-20px';
-            }
-            
+            } 
+            buttonsContainer.style.left = '20px';
+            // 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');
@@ -309,7 +335,7 @@ import Layout from '../../layouts/Layout.astro';
             // clearButton.style.border = '3px solid blue';
             clearButton.style.color = 'blue';
             clearButton.style.width = 'fit-content';
-            clearButton.style.marginLeft = '30px';
+            clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
                 buttonsContainer.style.top = '17%';
@@ -325,8 +351,10 @@ import Layout from '../../layouts/Layout.astro';
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
-            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
+            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px">   </i>';
             eraserButton.style.color = 'blue';
+            // eraserButton.style.border = '3px solid blue';
+            // eraserButton.style.color = 'white';
             eraserButton.style.width = 'fit-content';
             eraserButton.style.marginRight = '15px';
             // eraserButton.style.marginTop = '0px';
@@ -337,7 +365,6 @@ import Layout from '../../layouts/Layout.astro';
                 eraserButton.style.padding = '5px 5px';
                 eraserButton.style.marginTop = '15px';
                 eraserButton.style.marginBottom = '15px';
-                eraserButton.style.marginLeft = '30px';
             }
             eraserButton.style.fontWeight = 'bold';
             eraserButton.style.borderRadius = '20%';
@@ -345,29 +372,29 @@ import Layout from '../../layouts/Layout.astro';
             eraserButton.addEventListener('click', () => {
             isErasing = !isErasing;
                 if (isErasing) {
-                    // eraserButton.style.backgroundColor = 'red';
+                    // eraserButton.style.backgroundColor = 'red'; // Update eraser button color to indicate erasing mode
                     eraserButton.style.color = 'red';
                     eraserButton.style.border = '3px solid red';
                 } else {
                     // Return to drawing mode
-                    // eraserButton.style.backgroundColor = 'green';
+                    // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
                     eraserButton.style.color = 'blue';
                     eraserButton.style.border = 'none';
                 }
             });
             // Add the Clear and Eraser buttons to the container
             buttonsContainer.appendChild(clearButton);
-            buttonsContainer.appendChild(eraserButton);
+            // buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
             sliderContainer.className = 'slider-container';
             // sliderContainer.style.position = 'absolute';
-            if(isMobile){
-                sliderContainer.style.marginTop = '10px';
-            } else{
-                sliderContainer.style.marginLeft = '20px';
-            }
+            // sliderContainer.style.top = '25%';
             sliderContainer.style.left = '100%';
+            if(!isMobile){
+                sliderContainer.style.marginLeft = '-75px'
+                sliderContainer.style.marginTop = '15px'
+            }
 
             // Create the slider
             const slider = document.createElement('input');
@@ -404,11 +431,27 @@ import Layout from '../../layouts/Layout.astro';
             });
             customCursor = this.add.graphics();
             customCursor.setDepth(2)
+            // Disable the default cursor
             this.input.setDefaultCursor('none');
             const borderThickness = 0;
             const borderColor = 0xffffff; // White 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();
+                }
+            };
+            // Add a "Save Snapshot" button
             if(isMobile){
                 snapWidth = 50;
                 snapHeight = 70;
@@ -417,6 +460,7 @@ import Layout from '../../layouts/Layout.astro';
                 snapHeight = 70;
             }
             snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
             snapshotButton.setInteractive();
             snapshotButton.on('pointerdown', () => {
                 captureSnapshot(this);
@@ -425,8 +469,8 @@ import Layout from '../../layouts/Layout.astro';
             snapNotice.setVisible(false);
     }
     function captureSnapshot(drawingZone) {
-        // snapNotice.setVisible(true);
         submitButton.setVisible(false);
+        // snapNotice.setVisible(true);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {
@@ -443,19 +487,20 @@ import Layout from '../../layouts/Layout.astro';
             link.download = 'my_drawing.png';
             link.click();
             document.body.removeChild(image);
+            
             // Clear the drawing
             // graphics.clear();
         });
     }
-
-    function startDrawing(x, y, t) {
+    function startDrawing(x, y) {
         if (!isErasing) {
-            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(defaultColor).color);
+            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) {
@@ -491,9 +536,43 @@ import Layout from '../../layouts/Layout.astro';
         customCursor.x = this.input.x;
         customCursor.y = this.input.y;
     }
+
+    // function update() {
+    //     const slider = document.querySelector('input[type="range"]');
+        
+    //     if (slider && !isDrawing) {
+    //         const sliderValue = parseInt(slider.value);
+    //         const max = parseInt(slider.max);
+    //         const width = slider.offsetWidth;
+    //         const offsetX = (sliderValue - 2) / (max - 2) * width;
+    //         slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+    //     }
+
+    //     const cursorSize = brushSize * cursorSizeMultiplier;
+    //     const cursorScale = 1; // Adjust this value to increase/decrease the cursor size
+
+    //     // Assuming 'this' refers to your Phaser.Scene instance
+    //     if (!this.customCursor) {
+    //         // Create the custom cursor sprite
+    //         this.customCursor = this.add.sprite(0, 0, 'cursorImage'); // Replace 'yourCursorImage' with the key of your loaded PNG image
+    //         this.customCursor.setOrigin(0.3, 0.8);
+    //     }
+
+    //     // Set the tint or fill color dynamically based on the selectedColor
+    //     const color = Phaser.Display.Color.HexStringToColor(selectedColor).color;
+    //     this.customCursor.setTint(color);
+
+    //     // Resize the cursor
+    //     this.customCursor.setScale( cursorScale);
+
+    //     // Position the cursor at the current mouse pointer coordinates
+    //     this.customCursor.x = this.input.x;
+    //     this.customCursor.y = this.input.y;
+    // }
 </script>
 <style>
     .clear-button {
         background-color: blue;
     }
 </style>
+<!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
\ No newline at end of file